WordPress › Support » How to configure this JS to add classes to alternate menu items?

tracyberna
Member
Posted 11 months ago #
I'm trying to use a bit of JS to add the CSS class "alt" to alternating lis on my menu, so I can style them with a different color. I worked on a site previously and one of the programmers told me he used this bit of code to accomplish this, so there is precedent. I've placed it in the head section:
```
<script type="text/javascript">
  $('#nav-right ul li:nth-child(odd)').addClass('alt');
  $('#nav ul li:nth-child(odd)').addClass('alt');
</script>
```
Unfortunately, it doesn't do a thing. The reason I'm asking in this forum instead of a JS one is because WP is already adding about a million class to the menu already, and I was wondering if somehow that interferes with what I'm trying to do. I thought maybe this script would just throw in "alt" with all the other classes that were already there, but apparently not. I've also tried different, more specific CSS within the code (e.g., $('#nav-right ul#menu-primary-navigation li:nth-child(odd)').addClass('alt');), thinking maybe I just wasn't be specific enough about my target, but no luck.

Any idea how to make this work?
stvwlf
Member
Posted 11 months ago #

Are you sure the jQuery library is loaded before that code? If not it won't work.

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
tracyberna
Member
Posted 11 months ago #
Oh yeah! I'd forgotten about that "do jQuery the right way in WP" thing. I followed the directions there - put the <?php wp_enqueue_script("jquery"); ?> before the <?php wp_head();?> tag, then put in my own script after the <?php wp_head();?> tag. But unfortunately, it didn't work.

I think this script might use JS version 1.4.2, but I'm not sure. In the headers of my site, the following appears:
```
<script type='text/javascript' src='http://mysite.com/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://mysite.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
```
This means there's some jQuery being loaded, yes? Do I have to call the specific version of jQuery my script was written for, or should a later version be backward compatible?

stvwlf
Member
Posted 11 months ago #

Your script is so basic it will work with any jQuery version.

The load is correct.

I notice you are not using
jQuery(document).ready(function($){
Is your script at the bottom of the page?

You can't use the $ that way in WordPress. Try either this

<script type="text/javascript">
  jQuery('#nav-right ul li:nth-child(odd)').addClass('alt');
  jQuery('#nav ul li:nth-child(odd)').addClass('alt');
</script>

or this

<script type="text/javascript">
jQuery(document).ready(function($){
  $('#nav-right ul li:nth-child(odd)').addClass('alt');
  $('#nav ul li:nth-child(odd)').addClass('alt');
});
</script>

tracyberna
Member
Posted 11 months ago #

The second one worked! :D Thank you so much!

mizzmuzikluvr
Member
Posted 9 months ago #

I think this post is doing exactly what I want to do- but I can't get it to work!

My header.php includes the following code:

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

In the template of the page I want the lists to by styled on, I've added:

<?php 

/*
Template Name: Committee
*/

get_header(); ?>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('#minuteslist ul li:nth-child(odd)').addClass('oddminuteslist');
  $('#committeelist li:nth-child(odd)').addClass('oddcommitteelist');
});
</script>

And the CSS looks like this:

#minuteslist ul li:nth-child(odd), .oddminuteslist {background-color:#FFC; background-image: url(images/downloadcolor.png);}
#committeelist li:nth-child(odd), .oddcommitteelist {background-color:#FFC}

But it does nothing. The css li:nth is styling correctly in Firefox and Chrome, but the javascript class assignment (My IE workaround) isn't functioning. Any ideas?

Thanks!

stvwlf
Member
Posted 9 months ago #
Put the jquery code in header.php after
<?php wp_head(); ?>

If the name of the Committee template file is committee.php. you can add this to the header.php file (take it out of the page template)
```
<?php wp_head(); ?>

<?php if ( is_page_template('committee.php') ) { ?>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('#minuteslist ul li:nth-child(odd)').addClass('oddminuteslist');
  $('#committeelist li:nth-child(odd)').addClass('oddcommitteelist');
});
</script>
<?php } ?>
```
I didn't test this - could have a typo. The principle is how you want to do it.
mizzmuzikluvr
Member
Posted 9 months ago #

Thanks for the idea, I took the script out of the committee.php and I added it into the header with and without the php if statement. Still nothing. No syntax errors or anything either.
stvwlf
Member
Posted 9 months ago #

is the committee page visible on the web? if so either post the URL or email it to me.
mizzmuzikluvr
Member
Posted 9 months ago #

Emailed away.
stvwlf
Member
Posted 9 months ago #

hi - haven't received an email.
mizzmuzikluvr
Member
Posted 9 months ago #

Sent via the @mountainwebdev from both my work account and my gmail.
stvwlf
Member
Posted 9 months ago #
Hi - from what you emailed me, the issue is only in IE.

The problem is not with the jQuery. The class of oddminuteslist is assigned to the LI by jQuery, even in IE.

The issue is with the CSS.
```
#minuteslist ul li:nth-child(2n+1), .oddminuteslist {
    background-color: #FFFFCC;
    background-image: url("images/downloadcolor.png");
}
```
The background color is not getting assigned to the element that has the class.

IE will not know what this means
#minuteslist ul li:nth-child(2n+1)
I realize that is why you have the .oddminutes list. Perhaps IE is ignoring the while selector. Since the jQuery works on FF as well you really don't need the first selector. Try changing it to this
```
.oddminuteslist {
    background-color: #FFFFCC;
    background-image: url("images/downloadcolor.png");
}
```
and see if that makes any difference. (It may, it may not)

At any rate the CSS is the problem so if that doesn't work, look around further at what might be wrong.
mizzmuzikluvr
Member
Posted 9 months ago #

Thanks so much for your insight. When I seperated out the .oddminuteslist it started performing in IE. I'd like to know, how did you confirm that it was styling correctly in IE? When I inspect the code using Developer Tools (even now when it's working) It shows no oddminutelist class being applied?

Thanks so much!
stvwlf
Member
Posted 9 months ago #

I determined it was assigning the oddminuteclass in IE because it saw it applied to the LI in the left pane of developer tools - IE8.

I also saw how it was working on FF in Firebug and could see you had the IE-valid and IE-inalid selectors in the same CSS assignment. Based on past experience with IE I suspected that was the problem, that IE was choking on the valid selector because it came after a selector that is invalid to IE.

Even with that I didn't see the background color assignment in the CSS right pane on the main Developer tools panel. When I looked at the CSS only page and dug a level deeper into the oddminuteclass assignment, I did find the background color after you changed how you'd entered it.

I also looked using an older tool I used to use in earlier versions of IE called DebugBar. I saw the CSS assignment there. I find I can't rely on IE Developer Tools to perform the way I can with Firebug. So I approach things logically with common sense, deducing where its most likely an issue is coming from. Thus I first checked to see if jQuery was working in IE. And it was. Thus it was unlikely it was the problem. Finding a CSS selector that was invalid in IE made me suspect that might be the problem - it was the first and most obvious possibility.

Reply

You must log in to post.

WordPress.org

Forums

[resolved] How to configure this JS to add classes to alternate menu items? (15 posts)

Reply

About this Topic

Tags

Code is Poetry