Targeting and moving a class of elements with Javascript

Hello Hype Community,

I have successfully targeted my hidden class of elements and displayed each element separately using this code:

    var x = document.getElementsByClassName("bubble");
	var i; 
	for (i = 0; i < x.length; i++) {
	   if (x[i].style.display != "block"){
	   x[i].style.display = "block"
	   break;}	
	}

Now I just need to move the entire class up programmatically with javaScript but have gotten stuck :frowning:
If anyone could take a look at my function and help get this baby working that would be wonderful Thanks!
Connor
targeting and moving class javascript.hype.zip (25.0 KB)

Hi Connor!

You are closer than You think… I removed the “break” and added “px” to the “-200” in the “showBubblesMoveUp” function:

var x = document.getElementsByClassName("bubble");
var i; 
for (i = 0; i < x.length; i++) {
  if (x[i].style.display != "block"){
  x[i].style.display = "block"
  x[i].style.top="-200px";
  }	
}

Hi Jim

Thanks for taking a look.
Could you please upload the hype document with your changes?
I tried to follow your suggestions of: removing the “break” and adding “px” to the “-200” in the “showBubblesMoveUp” function but now the elements are not displayed.
Thanks
targeting and moving class javascript.hype.zip (25.1 KB)

I did not include the final “curly brace” … } … in the code as there was no top line to match.
Sorry for the confusion.

The function written in full this time:

function showBubblesMoveUp(hypeDocument, element, event) {
var x = document.getElementsByClassName("bubble");
var i; 
for (i = 0; i < x.length; i++) {
      if (x[i].style.display != "block"){
      x[i].style.display = "block"
      x[i].style.top="-200px";
     }	
  }
}

Hype Demo: targeting_moving_class_JHSv1.hype.zip (24.2 KB)

1 Like

Apologies for not being more clear… I am trying to move the whole class up incrementally every time the button is pressed. Similar to how each of the bubble elements are shown individually per click. In the end the function would mimic text messages on a user’s phone.

I feel like i need another if statement comparing the class’s current location variable to the new location.

Or appending the bubble class and adding a new child to it, which would in effect move the class up.

A very quick look and not looking to change your setup to much…

Give the bubble and id like “bubble-1”,“bubble-2” and so on, then the code below will be able to help you organise the bubble arrive order.

Like I said though a very quick look. I suspect there are much better ways of doing all of this.

	var bubbleElements = document.getElementsByClassName("bubble");
	
	var thisBubble =  ""
 
	  
	
	for (i = 0; i < bubbleElements.length; i++) {
	
	thisBubble = hypeDocument.getElementById('bubble-'+ (i +1))
		 
		 
	if (thisBubble.style.display != "block"){
			
			thisBubble.style.display = "block"
			
			var elTop = hypeDocument.getElementProperty(thisBubble, 'top')
			hypeDocument.setElementProperty(thisBubble, 'top', 245 - 50, 0.1, 'easeinout')
			
			return	
			
	} else {
		
			if (thisBubble.style.display == "block"){
			var elTop = hypeDocument.getElementProperty(thisBubble, 'top')
			hypeDocument.setElementProperty(thisBubble, 'top', elTop - 100, 1.0, 'easeinout')
		 
	}
		
		}
	 
		 
		 
	}

targeting_moving_class_MHSv1.hype.zip (32.4 KB)

2 Likes

Wow, thank you MarkHunte! Will study this and thanks for your time and help!!

@MarkHunte,

Thank you for your assistance , now all I need is for the user to be able to reverse and go back to the previous element which have already been shown.

I have tried re engineering your code with the opposite style selectors:

var bubbleElements = document.getElementsByClassName("bubble");

var thisBubble =  ""

  

for (i = 0; i < bubbleElements.length; i++) {

thisBubble = hypeDocument.getElementById('bubble-'+ (i +1))

	 
	 
if (thisBubble.style.display == "block"){
		
		//thisBubble.style.display != "block"
		
		var elBottom = hypeDocument.getElementProperty(thisBubble, 'bottom')
		hypeDocument.setElementProperty(thisBubble, 'bottom', 250 - 10, .5, 'easeinout')
		
		return	
		
} else {
	
		if (thisBubble.style.display =! "block"){
		var elTop = hypeDocument.getElementProperty(thisBubble, 'bottom')
		hypeDocument.setElementProperty(thisBubble, 'bottom', elBottom - 75, .25, 'easeinout')
	 
}

without any success. Any pointers? Thank you :slight_smile:
targeting_moving_class_CLv2.hype.zip (21.2 KB)