Targeting and moving a class of elements with Javascript

Using JavaScript with Hype
1

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)

2

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";
  }	
}
3

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)

4

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
5

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.

6

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
7

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

8

@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)

9

Hello Hype amigos,

I need to get a list of hidden elements and show them in a new list, thereby increasing the size of the DOM and using the .scrollToBottom function. Operating similar to a SMS texting system.

Except instead of content arriving from 1 user to another it goes from a hidden list to a new list.

This is what I have so farChatBot ConnorLondon.hype.zip (19.2 KB) using a strategy of setting an entire class “bubble” to hidden and then running a function which:

  • 1st: cycles through the hidden class of bubbles and makes them visible incrementally with a counter.

  • 2nd . Then each element is moved up by resetting its property.

This almost works except when the bubbleBack function runs the order the bubble class can get messed up.

I also know a better way to programmatically achieve my goal is to use the .scrolltoBottom method with 2 lists. But haven’t been able to crack it.

If anyone can give me pointer a to get across the finish line that would be greatly appreciated.

Thanks!

Connor

10

Hi,

Sorry I did not get back to you on this…

I quick change to the code may be what you are looking for. We add and remove a class name. and use that as the condition met.

bubbleForward code:

    	console.log('bubbleForward()');
	var bubbleElements = document.getElementsByClassName("bubble");
	
	var thisBubble =  ""
 
	  
	
	for (hypeDocument.customData.bubbleIndex = 0; hypeDocument.customData.bubbleIndex < bubbleElements.length; hypeDocument.customData.bubbleIndex++) {
	console.log(hypeDocument.customData.bubbleIndex)
	thisBubble = hypeDocument.getElementById('bubble-'+ (hypeDocument.customData.bubbleIndex +1))
		 
		  
		 
	if (!thisBubble.classList.contains("showing")  ){
			
			thisBubble.style.display = "block"
			
			thisBubble.classList.add("showing")
			
			var elTop = hypeDocument.getElementProperty(thisBubble, 'top')
			hypeDocument.setElementProperty(thisBubble, 'top', 250 - 10, .5, 'easeinout')
			
			 
			return	
			
	} 
	
	if (thisBubble.classList.contains("showing") ){
		
			
			var elTop = hypeDocument.getElementProperty(thisBubble, 'top')
			hypeDocument.setElementProperty(thisBubble, 'top', elTop - 75, .25, 'easeinout')
			
			
		 
	 }
	 
		 
		 
	}

bubbleBackward code:

    	console.log('backBubbles()');
 
	var bubbleElements = document.getElementsByClassName("bubble");
	
	var thisBubble =  ""
 
	  hypeDocument.customData.bubbleIndex = 0 
	
	for (i = 0; i < bubbleElements.length; i++) {
	
	 bubbleElements[i].classList.remove("showing")
	
	thisBubble = hypeDocument.getElementById('bubble-'+ (i +1))
	
			if (thisBubble.style.display == "block"){
			var elTop = hypeDocument.getElementProperty(thisBubble, 'top')
			hypeDocument.setElementProperty(thisBubble, 'top', elTop + 250, .25, 'linear')
			
			};		
	 
		 
	}

ChatBot MHv2.hype.zip (23.3 KB)

2 Likes
11

Hi Mark,

Awesome, thank you for your help, I really appreciate it!

After keeping the bubbles in order, the last thing i need to accomplish (hopefully with your assistance, thanks again!) is to allow the user to easily navigate back and forth from the fist item in the class to the last.

Currently ChatBot MHvCLv2.hype.zip (20.5 KB) if the user taps through the story, bubbleForward(), and then scrolls up (bubbleBack() but then needs to scroll back down again (to the next bubble), it’s too difficult to navigate back down to the last class item.

How would I make it so their next tap would show the next blocked item in the class after scrolling up?

I’m thinking I need to use the .scrollToBottom command??
Hopefully this back sense.
Thanks,
-Connor