0

I'm looking to incorporate the following Jquery Snippet (color fadeIn on Hover) with my WordPress website located at http://www.threecell.com/demo. The code is included below based on how I've adapted it to the current menu tag structure. I've loaded the Jquery in my functions.php file.

$(document).ready(function(){ 

//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    $(this).fadeOut(0).addClass('hover').fadeIn(300);

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).fadeOut(300)
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });

});
});

The relevant menu styles are included here:

#access {
    padding:0 20px;
    background:#111;
    box-shadow:0 0 7px rgba(0, 0, 0, .1);
}

#access ul {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    font-weight:600;
    text-transform:uppercase;
}

#access li {
    position:relative;
    float:left;
    padding:0;
    margin:0;
}

#access ul li:first-child {
    padding-left:0;
}

#access a {
    display:block;
    padding:15px 24px;
    color:#f0f0f0;
    text-decoration:none;

}

#menu-sample-menu li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    padding: 0 12px 0 12px;
}

#menu-sample-menu li a.hover {
    background: orange;
}


#access li.current_page_item > a,
#access li.current-menu-item > a {
    background: orange;
    color: white;
    text-decoration:none;
}

#access a span {
    color:#999;
    font-size:11px;
    font-style:italic;
    font-weight:normal;
    line-height:1.62em;
    text-transform:none;
}

Thus far, the hover state isn't being triggered. Any assistance or guidance would be most appreciated.

Best regards,

T

user2325396
  • 105
  • 2
  • 12
  • It's actually a wordpress site - The menu is called using this a wp_nav_menu() function within the header.php file. Ideally, I'd like to adapt the code you provided into the existing structure so I don't have to edit any core files. Please let me know if you'd like to see the wp_nav_menu code - Thanks again! – user2325396 Aug 25 '13 at 03:04
  • Nevermind about the HTML, the link you provided will suffice. – htxryan Aug 25 '13 at 03:07

2 Answers2

1

I created a jsFiddle here: http://jsfiddle.net/RV6fE/3/

It seems to be working OK. I had to extract just the menu HTML from your site (it looks a little wonky in the fiddle).

Looking at your site, you've got a javascript error:

Uncaught TypeError: Property '$' of object [object Object] is not a function

I'm not sure what exactly is causing this issue (it looks like jQuery is being successfully loaded before this script block), but you can try one thing. In the code you pasted above, change this:

$(document).ready(function(){

to this:

jQuery(document).ready(function($){

The reason I suggest this is that it appears there is another jquery block on your site (which I assume is injected by the theme you're using) which sets the document.ready event in this way.

htxryan
  • 2,871
  • 2
  • 21
  • 21
  • Hey Ryan, you're help and time invested have been most appreciated.I actually reuploaded the original functions.php file to ensure that no undocumented changes were made on my part. I'll check out the code you posted in jsfiddle and adapt it into the site. If you don't mind my asking, what was changed from the original? Are you still noticing the error and if so, how are you seeing it? Per the suggestion of the individual who commented below, I added the Jquery script to a separate js file and loaded in the header.php file. Not sure if that could have contributed to the error or not – user2325396 Aug 25 '13 at 03:49
  • I'm glad to help -- many people have done the same for me many times. I'm using Chrome's built-in developer tools. In Chrome, hit F12 to bring them up. You can see the number of JS errors in the bottom-right corner next to a red "X". See these for more info: http://superuser.com/questions/52263/javascript-error-console-in-chrome https://developers.google.com/chrome-developer-tools/docs/console. And yes, the error is still there. – htxryan Aug 25 '13 at 03:51
  • Paying it forward is the only way :) As far as implementing your code can I use the Jquery and css while applying it to the existing html menu structure. In other words, will this work without editing the menu html code? Thx! – user2325396 Aug 25 '13 at 04:03
  • Awesome gonna test it out as soon as I get a chance and get back to you.... thx again! – user2325396 Aug 25 '13 at 04:07
  • Hey Ryan, I added changed the start of the Jquery script to "jQuery(document).ready(function($){" as you suggested and added the Jquery snippet and stylesheet to my site. It appears the hover state still isn't being triggered. Also, I went through the Jsfiddle code and while it's clear that it works in Jfiddle, I didn't notice any changes in the script and style sheet. Could you please point them out for me so I can see where I went wrong? Also not to push the envelope too much, but is there a way to prevent the text from fading in? Thx as usual – user2325396 Aug 25 '13 at 05:56
  • I'm getting a "Uncaught ReferenceError: $ is not defined " error. Perhaps this might be connected to why it's not working. Thx – user2325396 Aug 25 '13 at 06:04
  • It works now. The issue was that I attempted to run the script prior to Jquery being loaded. I'd still be interested in knowing what changes you implemented in the actual code if you get a chance. All I need is for the text to not fade in and I'm good to go. Thx again! – user2325396 Aug 25 '13 at 06:11
  • Glad you got it working. And actually, there were no changes to the actual javascript or CSS. I just put it in a Fiddle to prove it was working. – htxryan Aug 25 '13 at 07:01
  • Hey Ryan, I encountered a slight quirk with the hover states that I was hoping you could offer your thoughts on. I noticed that if you go back and forth quickly between two options, there appears to be some kind of lag in which the overstate stops working. If you have the time, could you check out http://www.threecell.com/demo and try speedily hovering between the two menu options? You'll notice that the background color eventually doesn't show up even though you're hovered over a particular menu item. Thx as usual! – user2325396 Aug 25 '13 at 20:31
  • It almost seems like if you hover back over an option before the rollout state finishes, the hover trigger doesn't occur. Thanks again Ryan – user2325396 Aug 25 '13 at 23:56
  • Again, I'm glad to help, but I think you should create a specific question. This back and forth in the comments whenever a new issue comes up is not really how StackOverflow works. – htxryan Aug 26 '13 at 02:39
  • Understood - I'm definitely getting familiarized with the protocols. I've included the link to the new question here. Thank you - http://stackoverflow.com/questions/18436136/menu-color-fade-on-hover-with-jquery – user2325396 Aug 26 '13 at 03:22
-1

The Jquery should be loaded in a separate javascript file, linking it on the head of the site code (header.php) as this:

<script type="text/javascript" src="URL IS HERE"></script>

or within tags also in the head of the page.

It is suggested not to insert plain javascript code in the functions.php file, as it is the core of other major functions on the Wordpress engine and reserved for php code structures.

gespinha
  • 7,968
  • 16
  • 57
  • 91
  • Thanks for the tip. I've added the Jquery to a separate file called colorfade.js and linked it as instructed in the head tags. If you have any additional thoughts on how to activate the proper hover triggers, please let me know. – user2325396 Aug 25 '13 at 03:13
  • Nowadays, simple hover states can be created over CSS, preserving some loading time for the page. You can create CSS3 hover as such: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1 – gespinha Aug 25 '13 at 03:26
  • this is true...unfortunately, CSS3 isn't supported in IE9 and I'd like to target that browser if possible – user2325396 Aug 25 '13 at 03:46