Index with Class Navigation JavaScript Help!

Hello Hype Community!

I am working on an index with categories of content for my app.

I have organized the different content into classes and am trying to use for loops and if / else if statements to show and hide different classes when the user taps on a button to allow them to access different types of stories.

Here is my current JS function:

console.log('CycleClasses')

//Get classes 
var all = document.getElementsByClassName('all');
var dating = document.getElementsByClassName('dating'); 
var lessThanThree = document.getElementsByClassName('lessthanthree');
var thriller = document.getElementsByClassName('thriller');
//Set variables 
var i; //for all class
var j; // for dating class
var x; // for less than three class 
var t; // for Thriller class 


 //set up for loops 
for (i = 0; i <all.length; i++){ 
for (j = 0; j <dating.length; j++){
for (x = 0; x <lessThanThree.length; x++){
for (t = 0; t <thriller.length; t++){
//conditional statement to cycle through categories of classes. 
	if (all[i].style.display = 'block') {
				all[i].style.display = 'none';
				dating[j].style.display = 'block'; 
			
	}else if (dating[j].style.display = 'block') {
				dating[j].style.display = 'none';
				lessThanThree[x].style.display = 'block';  
	}//else if (lessThanThree[x].style.display = 'block){
	//			lessThanThree[x].style.display = 'none' 
	//			thriller[t].style.display = 'block';  
	// }  

} 
}
}
}

I know I am close but for some reason the logic of my: else if() {} statements are not being executed. Meaning the first if statement works but the next else if statement fails to hide the class of 'dating' and show the class of 'lessthanthree'.

If someone could look over my code and point me in the right direction to get my function working that would really help me out!
Thanks!

Connor London

Index with cycling classes ConnorLondon .hype.zip (2.3 MB)

The most pressing mistake you are likely making is that you are using a single equals sign for equality, but this is an assignment operator. You must use a double-equals sign, so your conditionals would look like:

if (all[i].style.display == 'block') {
}else if (dating[j].style.display == 'block') {

Beyond this, it isn't quite clear to me how or why you are looping the way you are. You're doing a 4x nested loop over the same elements. I'm guessing what you actually want is scoping to the parent class element as you go, so it would be something like:

var all = document.getElementsByClassName('all');
for (i = 0; i <all.length; i++){ 
    var dating = all[i].getElementsByClassName('dating'); 
    for (j = 0; j <dating.length; j++){
        var lessThanThree = dating[j].getElementsByClassName('lessthanthree');
        for (x = 0; x <lessThanThree.length; x++){
            //... and so forth

But I'm not really sure about your class structure and such.

I would recommend doing a bit more JavaScript coding with simpler HTML structures and test for a bit at a small scale and work your way up to the full document.

There are some other oddities I see - for example your document seems to include Hype's runtime files in the Resources Library (HYPE-598.thin.min.js and HYPE-598.full.min.js), the document-specific waypoints file, and the restorable-plist document backups. These are always generated with each export and shouldn't be in the Resources Library section at all.

Hey Jonathan,
Thanks for your quick response. I understand your logic and I thought the same thing about using two == signs like so:
all[i].style.display == 'block;){} instead of a single = because the function is comparing if the class is visible instead of assigning the value of 'block' (visible) to the class.

However, the function stops working entirely when I use == instead of just = (where at least the first 'if' statement is executed when a single = sign is used)

Any idea why this would be happening?

My goal is to check if a class is visible -> if it is, hide that class and show the next class and so forth.

I am using four nested loops so each class has a different iterator to evaluate if the elements within them are shown or hidden instead of just a single iterator because I was getting undefined error messages in the console when I just used a single one.

I have tried to make the structure of the classes and accompanying javascript simple but i will check out 'scoping' and simpler HTML structures.
Thanks

JavaScript execution is normally so fast when hiding or showing elements that a simple hide All then show foo works.

Meaning you do not need to check if they are showing already, just hide All first and then show the ones you want.

Its that simple.

Have a look at

Just some remarks…

  • You don't need to put the runtime into the resources' folder, and you are linking it (full + min) ❶
  • You are pulling in jQuery three times in three different versions. I would limit that to one or even zero (jQuery is old and outdated) (❷-❹)
  • Not sure why you are pulling in way points (also this is happening twice CDN + resource library) (❺+❻)
1 Like

wow @MaxZieb is right lot of confusing stuff going on there !!!.

This is a simple example showing the concept.
showHide_.hype.zip (33.5 KB)

It uses multiple buttons to go through elements.


Same example but with single cycle button

showHideCycle_.hype.zip (25.3 KB)


This is a stripped down example of yours using cycling on a single button and one set of your tiles.
(It looked like you where laying tiles just to show and hide so got rid of them.)

Index with cycling classes ConnorLondon .hype 2.zip (1.9 MB)

2 Likes

Wow, thank you MarkHunte, MaxZieb, and Jonanthan! This has been extremely helpful and i will give it a whirl :smiley:

1 Like

Gotcha, I would also love to have as the button is pressed, each element moves to the top of the document so the user doesn't have to scroll to them...

Any pointers?

My non-javascript work around was to have different folders with the categories of tiles prepositioned at the top and hidden, instead of using javascript to move the classes of elements to the top.

I thought perhaps implementing the floating elements hype document with my document would achieve this but no dice so far. Looks like i need to get good at parent child stuff.
floatingElements.hype.zip (127.0 KB)

To clarify, do you want the element to simply move to the top (and perhaps the page scroll to the top as well), or do you want the element to become "position: fixed" or the similar "position: sticky"? (see here for fixed/sticky demos).

Hey!

I am trying to get each class of elements to move to the top of the DOM and have no spaces between any!

Is animating them up using Hype's keyframes an option?

So I wrote a Tag list with animation a while back to do what I think you are trying to do.

It was very specific in how it worked and would be a ball ache to break down and rewrite.

But if we add some attributes to your elements (data-item-id - for sort order when they animate back and forth)

Then we can use the project's above animation code to do what you want.

So we would add the code to sort the array of elements. ( each element given an index number in the attributes.

	//Get  all target elements 
		var aTarget_ = document.querySelectorAll(targetType)
		
		
		var aTarget_Arr = Array.prototype.slice.call(aTarget_);
		  //-- SORT For ANIMATION array
 aTarget_Arr.sort(function(obj1, obj2) {
  
	return $(obj1[0]).attr("data-item-id")  - $(obj2[0]).attr("data-item-id") 
	
});

Then after we show/hide them, we animate.

		///
		
	 //-- ANIMATION
 var rowCount = 20 // max deep number of rows
 var columnCount = 2 //- max number of columns
 var columnCounter = 0;
 var leftRange = 0;//-- initial left of first column
 var topRange = 0;// initail top of first row
  
  var topRangeSpacing = 275 ; //-- we space each ROW by this. normally the height + som px of an element.

 	
		
		
		 $.each(aTarget_Arr, function( index, thisItem ) {
 
 if (columnCounter >= columnCount) {
 
  
 topRange =  topRange + topRangeSpacing;
 leftRange = 0 ; //Start new column left

columnCounter = 0

   
  }
 
  $(thisItem).animate({ "left": leftRange, "top": topRange }, "slow" );
 
  
  
  
  leftRange = leftRange + 197 ; // add item width + some px
 
 columnCounter++

	});

Pretty simple in the end to use the code with minor changes for this setup.

Index with cycling classes With Animation.hype.zip (1.8 MB)

3 Likes

Oh my god, MarkHunte! You are my hero man!!!!
thank you,
Thank You,
THANK YOU!!!!!!
:pray: :pray: :pray:
(if you want to message me your venmo i'd be happy to send you a few $$)

2 Likes