Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow overlaps Smooth Menu

  1. #1
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow overlaps Smooth Menu

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

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

    3) Describe problem:
    Hello there, I love the DD scripts but I do have a little problem. The menu at the top goes behind the slideshow that is underneath, like this:



    I put the slideshow script underneath the menu script and tried using z-index but couldn't make it work. This is the code in short

    Code:
    ...
    
    MENU SCRIPT HEAD
    <link rel="stylesheet"...
    </script>  
    
    SLIDESHOW HEAD
    <script type="text/javascript"...
    </script>
    </head>
    
    <body>
    MENU
    <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
    <li>...
    </div>
    
    SLIDESHOW
    <div id="fadeshow1" ;></div>
    ...
    in long

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <style type="text/css">
    #left30z3	{left:30px;top:30px;z-index:3;}
      </style>
    
    <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.3.2/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>
    
    <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>  
    
    <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>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [560, 184], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    				["http://www.dynamicdrive.com/forums/designfiles/logo.gif", "", "", "Special: So bizarr-blutig endet TWILIGHT"],					
    		["http://www.dynamicdrive.com/forums/designfiles/logo.gif", "", "", "Bericht: Universal Studios Hollywood, Los Angeles - Der Themenpark besucht"]
    	],
    	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "peekaboo",
    	togglerid: ""
    })
    
    </script>
    
    
    </head>
    
    <body>
    
    <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    <li><a href="#">Folder 0</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
    		<ul>
        		<li><a href="#">Sub Item 3.1.1.1</a></li>
        		<li><a href="#">Sub Item 3.1.1.2</a></li>
        		<li><a href="#">Sub Item 3.1.1.3</a></li>
        		<li><a href="#">Sub Item 3.1.1.4</a></li>
        		<li><a href="#">Sub Item 3.1.1.5</a></li>
    		</ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    
    <div id="fadeshow1" ;></div>
    
    
    
    </body>
    
    </html>
    Additional problem: How can I deactivate the silver shadow of the submenus? In IE6 there's only a neat silver border, but in Firefox 368 there is such a blocky shadow (see above). The code in the CSS reads

    Code:
    /* ######### CSS for shadow added to sub menus  ######### */
    
    .ddshadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    }
    
    .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
    opacity: 0.8;
    }
    Thanks very much

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    try this css to get the slideshow behind the menu
    Code:
    #fadeshow1 {
     z-index: 1;
    }
    you should remove the red ; in this part
    <div id="fadeshow1" ;></div>

    to remove the shadow you can try this
    Code:
    .toplevelshadow { 
      display: none !important;
    }

  3. #3
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It worked! Thank you so very much, have a great day my friend

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
  •