Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 09-19-2011, 08:43 PM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Enhancing a suckerfish menu with jquery fades

I'm trying to add some simple jquery animations ... a slideDown and a fadeOut to enhance a suckerfish drop down menu. I'd like to be able to give it a bit of a delay both on hover and mouseOut. I'm attempting to override the CSS in the head of the page with the jquery for everyone with javascript enabled.

I must be overlooking something with the targeting or something. The test page is live at http://www.savagepixels.com/testSite/suckerfish.html

Roll over the text ... it should slide down on hover and fade out on mouse out ... at least I thought so ...

The code from my script.js file is as follows:
Code:
// suckerfish enhance $('#menu li ul').css({ display: "none", left: "auto" }); $('#menu li').hover(function() { $(this) .find('ul') .stop(true, true) .slideDown('fast'); }, function() { $(this) .find('ul') .stop(true,true) .fadeOut('fast'); });

Thanks all.

Last edited by HTMLBasicTutor; 09-19-2011 at 08:53 PM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 09-19-2011, 08:55 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
What happens when you change fadeOut to slow?
 
Reply With Quote
  #3  
Old 09-19-2011, 09:43 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
I just noticed there is a Javascript error:
Quote:
Webpage error details

Message: Object expected
Line: 2
Char: 1
Code: 0
URI: http://www.savagepixels.com/testSite/scripts/script.js
 
Reply With Quote
  #4  
Old 09-20-2011, 05:44 PM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Really? It looks good to me ... just some simple targeting. In Firebug I don't get any errors.

Also, switching to "slow" didn't make a difference ... so I got a whole 'nother thing going on here.

I'm stumped ...
 
Reply With Quote
  #5  
Old 09-21-2011, 07:26 AM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Could this be related to a doctype issue?

I did some basic testing using the alert() function in jquery, just to make sure everything was configured properly, and it all worked. Just can't seem to make it animate my menu ...

So this must be related to my poor targeting or something. I use the target '#menu li ul' .... but maybe it should be '#container #menu li ul' ... or something like that? (I already tried that, btw, and it didn't work.)

Thanks
 
Reply With Quote
  #6  
Old 09-21-2011, 07:29 AM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Wait a minute ... does all this jquery script need to be wrapped in a document.ready function? I thought I was okay if the script file was included separately in the head ... Unfortunately I'm not at home right now and can't test this
 
Reply With Quote
  #7  
Old 09-21-2011, 05:28 PM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Yep. That was a bozo mistake on my part. I just needed the document ready function. The functioning code is:
PHP Code:
$(document).ready(function() {
    $(
'#menu li ul').css({
        
display"none",
        
left"auto"
    
});
    $(
'#menu li').hover(function() {
        $(
this)
            .
find('ul')
            .
stop(truetrue)
            .
slideDown('slow');
    }, function() {
        $(
this)
            .
find('ul')
            .
stop(true,true)
            .
fadeOut('slow');
    });
}); 
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Target URLs not loading with jquery menu scgroove Coding Forum 13 01-26-2011 08:12 AM
Sons of suckerfish dropdown Jesse Vlasveld Coding Forum 4 04-05-2007 03:26 PM
CSS Suckerfish drop down menu in Firefox sachi Coding Forum 9 01-29-2007 07:12 PM
Enhancing icons Louis Graphic Design Forum 7 08-21-2006 06:17 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:00 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC