SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position elements over <div>

    Hi,

    I really like this slideshow here: http://www.dynamicdrive.com/dynamici...nslideshow.htm and want to try overlaying some CSS elements onto it.
    So the 2 elements would be in the image area, on top of it, as it fades in and out.

    I'm trying to position the tall rectangle to the left and the long rectangle at the bottom of the background image.

    Here's my code:
    PHP Code:
    <html>

    <
    head>
    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],
    ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],
    ["http://i30.tinypic.com/531q3n.jpg"],
    ["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
    })

    </script>
    </head>

    <body>

    <div style="background:#000;width:80px;height:150px">&nbsp;</div>
    <div style="background:#666;width:250px;height:30px">&nbsp;</div>
    <div id="fadeshow1"></div>

    </body>

    </html> 
    What is the best way to achieve this?


    Many thanks for any pointers.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to position the tall rectangle to the left and the long rectangle at the bottom of the background image.
    Hi,
    I would think that you should be able to nest those two divs in your slideshow div.

    Like this maybe -
    Code:
    <div id="fadeshow1" style="background:#CDF;width:250px;height:180px">
        <div style="background:#000;width:80px;height:150px">&nbsp;</div>
        <div style="background:#666;width:250px;height:30px">&nbsp;</div>
    </div>
    So the 2 elements would be in the image area, on top of it, as it fades in and out.
    If nesting them as in-flow blocks causes problems you might be able to absolute position them in there to remove them from the flow. Then you can also set a stacking order on them with z-index.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the reply Rayzur.

    Just to confirm, the blocks won't be part of the slideshow, but just navigation and breadcrumb trail that will not change as the slideshow plays on in the background.

    Thanks for the reply, I'm going to try this out in a mo.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Just to confirm, the blocks won't be part of the slideshow,
    Right, I knew they were not.

    If it causes problems nesting them directly in the slide show you can wrap them all in a div and set position:relative on that wrapping div. Then lay the left and bottom div on top of your slideshow via absolute positioning.

    This is what I had in mind -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
     
    <style type="text/css">
     
    body {
        background: #fff;
        font-size:100%;
    }
    #slidewrap {
        width:250px;
        height:180px;
        background:lime;
        position:relative;
    }
    #fadeshow1 {
        width:250px;
        height:180px;
    }
    #left {
        position:absolute;
        z-index:1;/*if needed*/
        left:0; top:0;
        width:80px;
        height:150px;
        background:#000;
    }
    #bottom {
        position:absolute;
        z-index:1;/*if needed*/
        left:0; bottom:0;
        width:250px;
        height:30px;
        background:#666;
    }
    </style>
    </head>
    <body>
     
    <div id="slidewrap">
        <div id="fadeshow1"></div>
        <div id="left"></div>
        <div id="bottom"></div>
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply again Rayzur.

    The above code works great.
    But unfortunatey when I test it with my slideshow, the slideshow seems to go over my left & bottom elements.

    Could you possibly take a look using the slideshow code above and see if you get the same issue?

    Really appreciate all the help so far, it means a lot.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    That script has a z-index:999; on line 154.
    You either need to reduce it or set your AP divs higher as shown in the working code below.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     
    <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js"></script>
     
    <script type="text/javascript">
     
    var mygallery=new fadeSlideShow({
     
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
     
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
     
    imagearray: [
     
    ["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],
     
    ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],
     
    ["http://i30.tinypic.com/531q3n.jpg"],
     
    ["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!
     
    ],
     
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
     
    persist: false, //remember last viewed slide and recall within same session?
     
    fadeduration: 500, //transition duration (milliseconds)
     
    descreveal: "ondemand",
     
    togglerid: ""
     
    })
     
    </script>
     
    <style type="text/css">
    body {
        background: #fff;
        font-size:100%;
    }
    #slidewrap {
        width:250px;
        height:180px;
        background:lime;
        position:relative;
    }
    #fadeshow1 {
        width:250px;
        height:180px;
    }
    #left {
        position:absolute;
        z-index:1000;/*if needed*/
        left:0; top:0;
        width:80px;
        height:150px;
        background:#000;
    }
    #bottom {
        position:absolute;
        z-index:1000;/*if needed*/
        left:0; bottom:0;
        width:250px;
        height:30px;
        background:#666;
    }
    </style>
     
    </head>
    <body>
     
    <div id="slidewrap">
        <div id="fadeshow1"></div>
        <div id="left"></div>
        <div id="bottom"></div>
    </div>
     
    </body>
    </html>

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, 999??? That's high enough to land on my keyboard(!)

    That now works perfectly.

    Once again Rayzur, many thanks for your help and patience. Have a great weekend!


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
  •