Page 1 of 1

Javascript div fade-in help

Posted: Sat Jan 13, 2007 12:52 am
by ladyramses
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I have a layout here: [url]http://www.roomofrequirement.com/js[/url]

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:

[syntax="javascript"]
var ie4 = !!document.all
var w3c_dom = !!self.HTMLElement
var nc4 = !!(!w3c_dom && window.captureEvents)

if (w3c_dom && !ie4) {
document.writeln('<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):

Code: Select all

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

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

[quote="[url=http://forums.devnetwork.net/viewtopic.php?t=30037]Forum Rules[/url] Section 1.1"][b]3.[/b] Do not make multiple, identical posts. This is viewed as spam and will be deleted.[/quote]

Posted: Sat Jan 13, 2007 1:20 am
by JellyFish
Here's an idea I hope helps. Onclick of the menu buttons have a loop through all of the layers, looking for the one that's opacity is highest, and then fade that layer with the layer that corresponds to the button pressed.

Hopefully that makes sense. :D

Posted: Sat Jan 13, 2007 1:51 am
by ladyramses
thanks for replying!

it makes perfect sense but I am a bit confused on how to implement it.