Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    131
    Thanks
    28
    Thanked 7 Times in 7 Posts

    jQuery - Firebug gives an error/warning!

    Hello.

    I'm coding a simple hover-opacity thing for some images on my site on the navigation bar.
    Although I'm receiving this message in my Firebug.

    uncaught exception: Syntax error, unrecognized expression: .

    Here's the navigation code:

    Code:
    <div class="navigation">
    
    <a href="home"><img class="home" src="images/navigation/home.gif" /></a> - <a href="home" class="home">Home</a>
    <a href="news"><img class="news" src="images/navigation/news.gif" /></a> - <a href="news" class="news">News</a>
    
    </div>
    So the effect I've made is, when I hover the image, its opacity gets set to 1. And when I move my mouse away the image changes opacity to .5

    And when I hover the text "Home" or "News" the same effect happens with the image.

    And here's my jQuery:

    Code:
    $(function(){	
    	$('.navigation img').css({
    		opacity: .5
    	});
    	
    	$('.navigation img').hover(function(){
    		$(this).stop().animate({ opacity: 1 },300);
    	}, function(){
    		$(this).stop().animate({ opacity: .5 },300);
    	});
    	
    	$('.navigation a').hover(function(){
    		var imageClass = $(this).attr('class');
    		
    		$('.navigation img.' + imageClass).stop().animate({ opacity: 1 }, 300);
    	}, function(){
    		var imageClass = $(this).attr('class');
    		
    		$('.navigation img.' + imageClass).stop().animate({ opacity: .5 }, 300);
    	});
    });
    I can't seem to find the error in my script(s).

    Any help is appreciated.


    EDIT: Apparently the error appears when I make anchor tags around the image.

    Code:
    <a href="home"><img ... /></a>
    This gives the error. :S

    Code:
    <img ... />
    But this doesn't? How can this be?
    Last edited by [vengeance]; 09-11-2009 at 05:56 PM.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Does Firebug give you a line reference?

    Check your $('.navigation a').hover(function(){. Inside there, you have a couple of these:
    Code:
    $('.navigation img.' + /*blah*/
    What's that dot after img?
    Are you a Help Vampire?

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    131
    Thanks
    28
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by tomws View Post
    Does Firebug give you a line reference?

    Check your $('.navigation a').hover(function(){. Inside there, you have a couple of these:
    Code:
    $('.navigation img.' + /*blah*/
    What's that dot after img?
    Firebug gave no reference.
    That's a class dot. I tried removing it, but then it gave no effect whatsoever, and the error was still occuring.

    I tried deleting some stuff and found out that, when I make anchor tags around my image it gives that error. I don't know why though.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Sorry - I should have looked at the rest of the expression first.
    Are you a Help Vampire?

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    131
    Thanks
    28
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by tomws View Post
    Sorry - I should have looked at the rest of the expression first.
    No sweat.

    But I don't understand how the anchor tag can cause that. Maybe it's another thing, I don't know.

    I made a work around though. I removed the anchor tags and did this:

    Code:
    $(function(){
    	$('.navigation img').click(function(){
    		var pageLink = $(this).attr('class');
    		
    		window.location.href = pageLink
    	});
    });
    It works, but if you or anyone else knows an explanation for this Firebug error, I'd appreciate any help with it.

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The error is complaining about a dot - the unrecognized expression is a dot, if I'm looking at it correctly. And since it only happens with anchor tags, that's why I initially hit on those lines.

    Here's a thought - perhaps the var imageClass = $(this).attr('class'); is returning null. If that's the case, then the concatenation would be screwed up and might cause it to barf. That should be easy enough to test.

    However, given my limited use of jquery, I suppose it could end up being something else entirely.
    Are you a Help Vampire?

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    131
    Thanks
    28
    Thanked 7 Times in 7 Posts
    Oh, man. I found the error.
    I completely forgot about my div with the class name of "navigation". My jQuery code made every anchor tag inside the div get the effect, and then stuff happened afterwards, lol. :x


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •