View Full Version : slide in/out div!!!

03-31-2003, 05:05 AM
hi there, I need help with this slidein/out script.

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!!!

03-31-2003, 08:03 AM
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.

#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-->


<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 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 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><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>


<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); }

// 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[1] = new dynObj('glideDiv1',10,0);
glideLyr[2] = new dynObj('glideDiv2',10,0);
// follow same pattern to add more
// glideLyr [3] = new dynObj(id, left destination, top);

// to slide layer in onload

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

// 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;