Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2003
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slide in/out div!!!

    hi there, I need help with this slidein/out script.
    http://cloudseven.www4.dotnetplaygro...cloudseven.asp

    the divs right now are absolute positioned, and what I want to do is make it relative to where the text says 'position div here'. but making the z-index of the divs under the table with a white bg
    on startup. And when 'news.updates', 'gallery', 'about ' is clicked. The corresponding div will slideout relative to that table. I'm having such a problem getting the divs positioned correctly and hiding the divs under the white table. Newbie really needs help please!!!

  • #2
    New Coder
    Join Date
    Mar 2003
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I got it to work in a relative position, but I'm having trouble with the z-index property. I can't get the divs to go behind the table its in.

    here is what I'd modified...not too much.

    THE 3 LAYERS
    #glideDiv0, #glideDiv1, #glideDiv2 {
    position:absolute; visibility:hidden;
    width:240px; padding:4px; z-index:0
    }
    #slidebox { position: relative; z-index:1 }<!--need this layer to make slide layers relative position-->


    CODE FOR THE TABLE

    <td valign="top">
    <div id="slidebox">
    <div id="glideDiv0">
    <p>This is layer 1. It can glide into view when the page loads by calling the slideEm function at the end of the initGlideLyrs function. It also slides into view when you click its link.</p>
    </div>

    <div id="glideDiv1">
    <p>Layer 2 here. You can put anything you like in the layers and add as many as you need. Read code comments for specific information about setting up your layers. </p>
    </div>

    <div id="glideDiv2">
    <p>Layer 3 here.</p>
    <p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html">Terms of Use</a>.</p>
    <p>&nbsp;</p>
    <p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>
    </div>
    </div>
    </td>


    AND THE FUNCTION


    <script type="text/javascript">
    <!--
    /*
    This code is from Dynamic Web Coding
    at http://www.dyn-web.com/
    Copyright 2002 by Sharon Paine
    See Terms of Use at http://www.dyn-web.com/bus/terms.html
    Permission granted to use this code
    as long as this entire notice is included.
    */

    // resize fix for ns4
    var origWidth, origHeight;
    if (document.layers) {
    origWidth = window.innerWidth; origHeight = window.innerHeight;
    window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }

    window.onload=initGlideLyrs;
    // change speed of slide here
    var slide_in_speed = 600; // millisecond duration of slide into view
    var slide_out_speed = 500;// millisecond duration of slide out of view
    var glideLyr = new Array();
    var winHt;
    function initGlideLyrs() {
    // arguments: id, left position to slide to, top
    // set width in style sheet for (opera and ns4 benefit)
    glideLyr[0] = new dynObj('glideDiv0',10,0);
    glideLyr[0].setBgClr("#dee7f7");
    glideLyr[1] = new dynObj('glideDiv1',10,0);
    glideLyr[1].setBgClr("#eef2fd");
    glideLyr[2] = new dynObj('glideDiv2',10,0);
    glideLyr[2].setBgClr("#f7f7f7");
    // follow same pattern to add more
    // glideLyr [3] = new dynObj(id, left destination, top);
    setUpGlideLyrs();

    // to slide layer in onload
    //slideEm(0);
    }

    function setUpGlideLyrs() {
    // for non-capable browsers
    if (!glideLyr[0]) return;

    for (var i=0; i<glideLyr.length; i++) {
    // get left position based on width
    glideLyr[i].xMin = -(glideLyr[i].width);
    glideLyr[i].xMax = glideLyr[i].x; // hold destination x value
    glideLyr[i].shiftTo(glideLyr[i].xMin,glideLyr[i].y);
    glideLyr[i].show();
    }
    }

    // slideTo args: destx,desty,slideTime,what next
    var curGlideLyr;
    function slideEm(i) {
    if (glideLyr[i]) {
    if (curGlideLyr == i) return; // if same link
    // if layer currently in view, set up to slide new one into view
    // after current one slides away
    // reassign empty function to onSlideEnd
    if (curGlideLyr || curGlideLyr==0) {
    glideLyr[curGlideLyr].onSlideEnd = function() {
    glideLyr[curGlideLyr].slideTo(glideLyr[curGlideLyr].xMax,null, slide_in_speed);
    glideLyr[curGlideLyr].onSlideEnd = function() {}
    }
    // slide current layer out of view
    glideLyr[curGlideLyr].slideTo(glideLyr[curGlideLyr].xMin,null, slide_out_speed);
    }
    // if no layer currently in view
    else glideLyr[i].slideTo(glideLyr[i].xMax,null,slide_in_speed);
    curGlideLyr = i;
    }
    }
    //-->
    </script>


  •  

    Posting Permissions

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