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!
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
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.)
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).
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.