...

View Full Version : Javascript div fade in help



ladyramses
01-06-2007, 04:22 PM
I have a layout here: http://www.roomofrequirement.com/js

and if you click on the nav buttons at the top a div layer fades (well the background fades in). What I want it to do is after the first fade in, the background stays in place and only the text pops up once another button is clicked. So if I click on the site button first, the background fades and it stays there when I click on books, but only the text changes.

Is that possible?

Here is my code:



var ie4 = !!document.all
var w3c_dom = !!self.HTMLElement
var nc4 = !!(!w3c_dom && window.captureEvents)

if (w3c_dom && !ie4) {
document.writeln('&lt;script language="JavaScript" src="dom.js"></sc'+'ript>')
ie4 = true
}

var dhtml = (ie4 || nc4)
var local_delay;
var opacity;

// End

var active_page = 0

var visible, hidden
if (ie4) {
visible = "inherit"
hidden = "hidden"
}
else {
visible = "show"
hidden = "hide"
}

var pages_loaded = false
var layerTimerID = null
var pages = new Array()

function layerOver(num)
{

if (!dhtml || !pages_loaded)
return

opacity = 0;
//layerTimerID = setTimeout("layerChange(" + num + ")", delay)
layerChange( num );

}

function layerOut() {
//if (layerTimerID)
// clearTimeout(layerTimerID)
}

function layerChange(num) {
layerTimerID = null

if ( opacity == 20 )
{
var p_old = pages[active_page]
p_old.visibility = hidden
if ((w3c_dom) && (active_page != num))
p_old.display = "none"

active_page = num
var p_new = pages[active_page]
p_new.visibility = visible
//if (w3c_dom)
p_new.display = "inline"

p_new.filter = "alpha( Opacity="+opacity+" );"; // IE
p_new.MozOpacity = opacity/100; // Mozilla

opacity++;
layerChange();
}
else
{
//alert( "halt" );
opacity += 5;

pages[active_page].filter = "alpha( Opacity="+opacity+" );"; // IE
pages[active_page].MozOpacity = opacity/100; // Mozilla

if ( opacity < 100 )
layerTimerID = setTimeout("layerChange(" + num + ")", 40)
}
}

function initLayers()
{

if (!dhtml)
return

//document.writeln('<DIV id=' + ("layer" + page_max) + ' class=page><h2 align=center>Place the mouse pointer over the above links.</h2></DIV>')

for (var i = 0; i <= page_max; i++)
pages[i] = (ie4) ? document.all["layer" + i] : document.layers["layer" + i]

if (nc4)
page_height = 0

if (!page_height) {
var p_height
if (ie4)
p_height = pages[0].offsetHeight
for (var i = 0; i <= page_max; i++) {
var p = pages[i]
p_height = (ie4) ? p.offsetHeight : p.clip.height
if (p_height > page_height)
page_height = p_height
}
}
else {
for (var i = 0; i <= page_max; i++) {
pages[i].style.pixelHeight = page_height
pages[i].style.overflow = "auto"
}
}
if (ie4) {
for (var i = 0; i <= page_max; i++) {
var p = pages[i]
if (w3c_dom)
p.style.display = "none"
pages[i] = p.style
}
}

//document.writeln('<TABLE border=0 height=' + page_height + '><TR><TD></TD></TR></TABLE>')
//layerChange(page_max)
pages_loaded = true

}




this code is what is used on the main html page (I am including only one of the divs as an example):




<div style="display: none;" class="page" id="layer7">
<center>
<table height="132">
<tbody>
<tr>
<td valign="center">
<table width="232" height="132" border="0" align="right" cellpadding="0" cellspacing="0" class="fadearea">
<tr>
<td align="center"><BR>Flash Games<BR>Triva<BR>Puzzles<BR>Fun Lists<BR>Spoofs<BR>Photoshop Fun</td>
<td align="center"><BR>Song Parodies<BR>License Plates<BR>Caption Contest<BR>Mugglenet Interactive<BR>Project Legilimensia
</table>

</td></tr></tbody></table></center></div></div><!-- End ImageReady Slices -->
&lt;script language="JavaScript">


var page_max = 7
var page_height = 0
var delay = 1000

initLayers()

//-->
</script>

<map name="Map">
<area onMouseOver="layerOut()" onClick="layerOver(0)" onMouseOut="layerOut()" shape="rect" coords="4,181,65,250" style="cursor: pointer;">
<area onMouseOver="layerOut()" onClick="layerOver(1)" onMouseOut="layerOut()" shape="rect" coords="32,84,97,142" style="cursor: pointer;">
</map>

ladyramses
01-07-2007, 06:18 PM
Please if anyone can help, it would be GREATLY appreciated, I have been working on this for 2 weeks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum