Results 1 to 5 of 5

Thread: Ultimate Fade-in slide show DIV behind another DIV

  1. #1
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slide show DIV behind another DIV

    1)Ultimate Fade-in slide show

    2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem:

    Hello,
    I've been trying to get the UFISS to run behind another DIV tag ( a menu bar that goes across the screen ). I've done this by using <div id="fadeshow1" style="position:absolute;z-index:-1">, HOWEVER, now the ONMOUSEOVER discriptions do not work when a "point" top the image on display.

    The code im using is :-

    Code:
    <script type="text/javascript" src="js/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: [970, 580], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["img/cover/29013_402390686776_523696776_4543044_4313361_n.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/30873_404675446776_523696776_4595003_6809531_n.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["img/cover/4451309881_030443968e_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/_MG_0741.JPG", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/4451724161_31ededc718_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/4452381428_b338c0abee_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/4452381428_b338c0abee_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/4539367440_19dc519d03_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["img/cover/4582147115_12f86f4061_b.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:42000, cycles:0, wraparound:false},
    	persist: true, //remember last viewed slide and recall within same session?
    	fadeduration: 4000, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    
    </script>
    
    </head>
    <body id="home">
    
    <div id="content" >
    <div id="headerHome"> 
    <img src="img/layout/logo.gif" alt="logo" width="337" height="61" title="logo" />
      <div class="menu" >
        <ul>
          <li><a href="option1/option1.html" class="tipHome" title="::<img src='img/homepage/option1.gif'><br /><strong>option1</strong><br />option1.">Portraits</a></li>
          <li><a href="option2/option2.html" class="tipHome" title="::<img src='img/homepage/option2.gif'><br /><strong>option2</strong><br />option2.">Landscapes</a></li>
          <li><a href="option2/option3.html" class="tipHome" title="::<img src='img/homepage/option3.gif'><br /><strong>option3</strong><br />option2.">events</a></li>
          <li><a href="option4/option4.html" class="tipHome" title="::<img src='img/homepage/option4.gif'><br /><strong>option4</strong><br />option4.">other</a></li>
          <li><a href="option5/option5.html" class="tipHome" title="::<img src='img/homepage/option5.gif'><br /><strong>option5</strong><br />option5.">awards</a></li>
          <li><a href="option6/option6.html" class="tipHome" title="::<img src='img/homepage/option6.gif'><br /><strong>option6</strong><br />option6.">Me</a></li>
        </ul>
      </div>
    </div>
    <div id="fadeshow1"  style="position:absolute;z-index:-1"></div>
    
    </div>
    Please can someone point out where im going wrong ?

    Thanks
    G-oker
    Last edited by jscheuer1; 05-15-2010 at 02:52 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    By giving the slide show a negative z-index, it is below the surface of the page and cannot receive a hover event from the mouse.

    Instead, leave the slide show alone (get rid of the highlighted):

    Code:
    <div id="fadeshow1" style="position:absolute;z-index:-1"></div>
    and increase the z-index of the menu. You may be more familiar with the menu than I am and see a way to do so more precisely, but looking at your markup, this should work (add to your stylesheet):

    Code:
    .menu, .menu * {
    position: relative;
    z-index: 10000important;
    }
    You may have to add headerHome to that:

    Code:
    #headerHome, .menu, .menu * {
    position: relative;
    z-index: 10000important;
    }
    - John
    ________________________

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

  3. #3
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello John,

    thank for the advise.
    I tried it, but the menu bar just hide behind the slideshow again.

    Attached is my CSS code, can you point out where I'm going wrong with your suggestions?

    Thanks

    body {
    margin: 0px;
    padding: 0px 0px 30px 0px;
    background: #48494a url(../img/layout/backNavbar.gif) repeat-x 0 top;
    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
    font-size: 11px;
    }

    body#home {
    text-align: center;
    background: #272727 url(../img/layout/back_Home.gif) repeat-x fixed 0 0;
    padding: 20px 0px 0px 0px;
    }

    body#home div#content {
    width: 970px;
    margin: 0px auto;
    text-align: left;
    padding: 0px;
    }

    body#home div#headerHome {
    width: 970px;
    position: absolute;
    margin: 470px 0px 0px 0px;
    background: #000000 url(../img/layout/backNavbar.gif) repeat-x;
    }

    body#home .menu {
    margin: 0px 10px 0px 0px;
    top: 0px;
    display: block;
    }

    body#home .portfolio {
    margin: 0px;
    padding: 0px;
    }

    body#home .portfolio img {
    border: 0px;
    padding: 0px;
    margin: 0px;
    }

    .tooltipHome-tip {
    background: url(../img/homepage/baloonHome.png) no-repeat;
    padding: 10px 10px 0px 12px;
    color: #ffffff;
    width: 200px;
    height: 142px;
    text-align: left;
    z-index: 13000;
    }
    .tooltipHome-tip img {
    margin: 0px 0px 4px 0px;
    }
    .tooltipHome-title {
    font-weight: bold;
    font-size: 12px;
    }

    .tooltipHome-text {
    font-size: 11px;
    color: #a4a4a4;
    }
    div#header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 51px;
    background: #000000 url(../img/layout/backNavbar.gif) repeat-x;
    padding: 0px 0px 0px 10px;
    margin: 0px;
    }

    div#logo {
    width: 337px;
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 10px;
    }

    div#bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
    background: #6c6c6c url(../img/layout/backBottom.gif) repeat-x;
    padding: 7px 0px 0px 30px;
    margin: 0px;
    color: #ffffff;
    border-top: 1px solid #393939;
    }

    div#content {
    width: 100%;
    padding: 0px;
    margin: 0px;
    }
    body#contact div#content {

    padding: 0px;
    margin: 0px;
    }

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There's very little way to be sure without seeing it:

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


    I can tell you that this has come up many, many times and the solution is always raising the z-index of the menu. Just how to do that in your particular case may be a bit tricky though.
    - John
    ________________________

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

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

    G-Oker (05-16-2010)

  6. #5
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi John, I got it working my changing:-

    <div id="headerHome">
    <div id="fadeshow1" style="position:absolute; z-index:-1"></div>

    to

    <div id="headerHome" style="position:absolute;z-index:1">
    <div id="fadeshow1" style="position:absolute"></div>

    Thanks for the advice.

    G-Oker

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
  •