Brand new to Genesis. jQuery script works on other themes but not on Genesis.

[tubescreamer84]

site: http://genesis.malayatech.com (URL at bottom of post is wrong and I can't figure out how to change it)

I have a jQuery script that sets the li > a children font size to 0 and then increments it in a while loop. It is supposed to check the combined width of the parent li's during each iteration of the while loop. The issue is that it never updates the li width after the child font size adjustment. If you look in the console the combined value of the li widths never changes. This is a clean wordpress install without any non core plugins. I have the genesis theme and genesis sample theme. The only thing I have added is a couple test menu items, my custom2.js file, and set the menu LI's to inline-block in the style.css file.

This script works fine on Avada theme and Twenty Sixteen. To my eyes Genesis seems to be using the local wordpress version of jquery which is the same file the other themes use. I will take full responsibility if the issue is my script and the other themes are just allowing bad code that Genesis doesn't. Script is located below:

jQuery(document).ready(function() {

var fontSize2 = 0;
var widthVar =0;

while(fontSize2 < 50){
fontSize2 += 2;
widthVar = 0;

jQuery('.menu-item a').each(function(){

jQuery('.menu-item a').css('font-size',fontSize2 +'px');
widthVar += jQuery('.menu-item').width();
});
console.log("Combined widths of LI's: "+widthVar);

}
});

http://genesis.malayateh.com

[tubescreamer84]

Bump. Has anybody experienced jQuery not functioning correctly within the Genesis framework? This is not a case of getting errors with the script. This is the script working perfectly in one theme and not functioning correctly when genesis is activated.

I'm not looking for a magic solution to my script. Just any information on how Genesis might handle jQuery different from other themes. Anything that might be specific to Genesis.

[Victor Font]

There's nothing in Genesis that prevents jQuery from running. I write some very complex jQuery scripts that run perfectly on the Genesis framework.

Your script is running just fine. The code you posted above is not the code you are using on your site. Your site is running this:

jQuery(document).ready(function() {
 
 var fontSize2 = 0;
 var widthVar =0;
 
 while(fontSize2 < 50){
	fontSize2 += 2;
	widthVar = 0; 

	jQuery('#menu-main-menu .menu-item a').each(function(){
		widthVar += jQuery('#menu-main-menu .menu-item').outerWidth();
		
		//console.log('count');
	});
	console.log("Combined widths of LI's: "+widthVar);
 				jQuery('#menu-main-menu .menu-item').css('font-size',fontSize2 +'px'); 

 }
 
});

You are setting the font-size to 50px, which is exactly the style that has been added to each li element.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tubescreamer84]

I want to thank you for looking in to this. However the issue with my script isn't that it doesn't update the font size. It is that the line that calculates the outer width of the parent LI's doesn't use the updated sizes within the loop. If you view the console you will see that the combined widths of the menu LI's is the same for all 25 iterations of the loop.

I created a jsFiddle that shows how the script functions outside of the Genesis framework: https://jsfiddle.net/tubescreamer84/poww0xs6/
If you run this script and then check the console you will see that the output values are incrementing each time the loop is run because the child anchor elements font size is being increased thus making the parent li container grow as well.

I need this functionality for a script that dynamically updates the size header menu items that have a center logo. Example can be seen here: http://jeromeblog.malayatech.com when the window is resized the menu items adjust along with it. When I switched to the Genesis framework and sample theme my script quit updating the outWidth on each run of the loop and instead keeps returning the initial width which renders my script useless. I can switch the theme back to Twenty Sixteen or Avada and it runs perfect. Not to mention the jsFiddle also runs as expected.

[Victor Font]

The code that you setup on jsFiddle is different than the code you have on your site. You are testing the size for different elements. In the code on your site, you are testing for the anchor link. In the code on fiddle you are testing the code for the li. If you run the function against the li only, it works.

jQuery(document).ready(function() {
 
 var fontSize2 = 0;
 var widthVar =0;
 
 while(fontSize2 < 50){
	fontSize2 += 2;
	widthVar = 0; 

	jQuery('#menu-main-menu .menu-item').each(function(){
		widthVar += jQuery('#menu-main-menu .menu-item').outerWidth();
		
		//console.log('count');
	});
	console.log("Combined widths of LI's: "+widthVar);
 				jQuery('#menu-main-menu .menu-item').css('font-size',fontSize2 +'px'); 

 }
 
});

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tubescreamer84]

I really appreciate your willingness to look into this. However I think I'm still not getting my issue across very well. I'm going to give this one more try. I have updated both the code on the site and the jsFiddle (https://jsfiddle.net/tubescreamer84/poww0xs6/6/ ) with the same exact code which is listed below.

I have also appended the widthVar variable to the .menu element on every iteration of the loop so that you can see it without having to inspect. This can be found on line 20 on both the site and jsFiddle. You should notice that the jsFiddle shows the correct widths of the li elements as they grow from each execution of the loop.

When I run the script on the site this value stays the same and shows the initial combined value of the LI outer widths. This is the part of the script that isn't working as expected. The font size changes on the menu anchor elements is inconsequential. Line 13 and line 20 are the only ones I care about. I need line 20 to function like it does in the jsFiddle and update everytime. This only seems to happen when the Genesis frame work and child themes are active. I have tested this in both the Genesis sample theme and the altitude-pro theme and it happens on both of them.

I hope that this makes sense to you and thank you again for being patient with me.

var fontSize2 = 0;
var widthVar =0;
 

 while(fontSize2 < 50){
	fontSize2 += 1;
	widthVar = 0; 

	jQuery('.menu li').each(function(){
  	//THIS LINE IS ANOTHER IMPORTANT LINE
		widthVar += jQuery('.menu li').outerWidth();
		
		
	});
	console.log("Combined widths of LI's: "+widthVar);
  
  //THIS LINE IS THE IMPORTANT LINE
 	jQuery(".menu").after(fontSize2 + "<p>Combined widths of LI's 2: " + widthVar + "</p>");
  
  jQuery('.menu li a').css('font-size',fontSize2 +'px'); 

 }

[Victor Font]

Here's the working code:

var fontSize2 = 0;
var widthVar =0;
 

 while(fontSize2 < 50){
	fontSize2 += 1;
   widthVar = 0;

	jQuery('ul#menu-main_menu').children().each(function(){
  	//THIS LINE IS ANOTHER IMPORTANT LINE
        widthVar += jQuery(this).outerWidth();
	});
	console.log("Combined widths of LI's: " + widthVar);
  
  //THIS LINE IS THE IMPORTANT LINE
 	jQuery("#menu-main_menu").after(fontSize2 + "<p>Combined widths of LI's 2: " + widthVar + "</p>");
  
  jQuery('#menu-main_menu li a span').css('font-size',fontSize2 +'px'); 

 }

The entire thing came down to the fact that there is an extra span element for the schema markup in the Genesis menu that doesn't exist in the default WordPress themes. Thanks for the challenge.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tubescreamer84]

Should have known that it was going to be something that simple. So in order for a script like this to work you need to target the child furthest down the chain? Thanks again for solving this for me.

[Victor Font]

You're welcome. I also changed this line to just focus on the main menu li elements (jQuery('ul#menu-main_menu').children().each(function()). If I didn't use the children filter, it was also adding in sub-menu li items. I don't think that's what you wanted.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts