Results 1 to 8 of 8

Thread: Smooth Menu and Ultimate Fade In Slide Show

  1. #1
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Smooth Menu and Ultimate Fade In Slide Show

    1) Script Title: Smooth Navigational Menu (v1.5) AND Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm AND http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: I'm using both scripts on the same page and both work well. The only problem is when a menu is hovered and the submenu unfolds, the elements are hidden behind the fade in slide show images. I've seen options for flash elements to add wmode="transparent", but that doesn't seem to work. Any help would be appreciated!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Open the ddsmoothmenu.css file and add this at the top:

    Code:
    .ddsmoothmenu, .ddsmoothmenu *, .ddsmoothmenu-v, .ddsmoothmenu-v * {
    position: relative;
    z-index: 1003!important;
    }
    And at the end of the same file, add the highlighted as shown:

    Code:
    /* ######### CSS for shadow added to sub menus  ######### */
    
    .ddshadow{ /*shadow for NON CSS3 capable browsers*/
    position: absolute;
    z-index: 1002;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    }
    
    .toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
    opacity: 0.8;
    position: relative;
    z-index: 1002;
    }
    Make sure to clear the cache and refresh the page.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    brm_eng (01-13-2011)

  4. #3
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    John, thanks for the prompt reply. I modified the file as you suggested and the menu and slideshow are working perfect in Firefox!

    I have an IE problem now where the page bounces as the menu is expanded/contracted, and the images are not showing from the slideshow, but that may have been happening prior to my post, I just tried it in IE.

    My page is http://beta.nationalmoofest.com/

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    OK, there are some issues with the page, and one with my advice (sorry). My mistake was adding position and z-index for:

    Code:
    .toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
    opacity: 0.8;
    position: relative;
    z-index: 1002;
    }
    Revert that (get rid of the highlighted).

    Next, there are two opening html tags and the DOCTYPE is misplaced:

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    Change that section to look like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    As for the slideshow, no comma (red) after the last item (highlighted) in the imagearray:

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [615, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/sample1.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
    		["images/sample2.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
    		["images/sample3.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
    		["images/sample4.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
    	],
    	displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 750, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    </script>
    Get rid of that extra comma, and the slideshow will work in IE.

    There's a non-fatal error with the menu. You aren't using the second menu:

    Code:
    <script type="text/javascript">
    
    ddsmoothmenu.init({
    	mainmenuid: "smoothmenu1", //menu DIV id
    	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    	classname: 'ddsmoothmenu', //class added to menu's outer DIV
    	//customtheme: ["#1c5a80", "#18374a"],
    	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
    
    ddsmoothmenu.init({
    	mainmenuid: "smoothmenu2", //Menu DIV id
    	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    	//customtheme: ["#804000", "#482400"],
    	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
    
    </script>
    So get rid of that.

    Finally, for now - you have three versions of jQuery on the page. You only need one. Change this one as shown:

    Code:
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="ddsmoothmenu.js">
    
    /***********************************************
    * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    And get rid of these two:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    brm_eng (01-13-2011)

  7. #5
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    John, again, thanks so much for your help. It seems all problems are now fixed except the page jump in IE. I also checked Opera and it does as well, and have checked on three different PC's.

  8. #6
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    After googling around, it seems a 'page shift' may be a more accurate description of what's happening. The page will shift down the amount the menu should drop down.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Opera is good now here, perhaps you have an old cached version of the page in that browser. Try refreshing the page and/or clearing the cache in Opera. It's possible you have an older version of Opera though, one that's acting more like IE. As to that - You still haven't changed the (at the end of the ddsmoothmenu.css file):

    Quote Originally Posted by jscheuer1 View Post
    My mistake was adding position and z-index for:

    Code:
    .toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
    opacity: 0.8;
    position: relative;
    z-index: 1002;
    }
    Revert that (get rid of the highlighted).
    Take care of that and make sure the page is using the version without those highlighted lines, and IE will be fine too.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    brm_eng (01-14-2011)

  11. #8
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Beautiful! I had modified the last entry in that file, but forgot to upload it! Thanks so much for your help!

Bookmarks

Posting Permissions

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