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 to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript div fade in help

    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:

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


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

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please if anyone can help, it would be GREATLY appreciated, I have been working on this for 2 weeks.


  •  

    Posting Permissions

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