hide/show header with javascript

crmpicco · April 6th, 2006, 08:59 AM

http://www.westandunited.co.uk/about.php

Looking at this URL above.

Is there a way to have a setup like the header in this page done with javascript?

i.e the switch from 'Stand' logo to 'Scottish Design Company of the Year'

Picco

www.crmpicco.co.uk
www.ie7.com

crmpicco · April 7th, 2006, 04:15 AM

Code:

function animateText(id,iStart,iCurrent,iDir) 
{
    var obj = document.getElementById(id);
    if(typeof(iStart)=="undefined") 
    {
        iStart = 0;
        iCurrent = iStart;
        iDir = +1;
    }
    if(iDir > 0 && iCurrent > obj.parentNode.offsetHeight) 
    {
        obj.innerHTML = "<br /><br /><br />";
        obj.innerHTML = obj.innerHTML + "empowered by Picco &copy;";
        iDir = -1;
    }
    iCurrent += iDir;
    obj.style.top = iCurrent + "px";
    var iSpeed = 2; // The Speed at which the image scrolls down and the text scrolls up (smaller = faster)

    if(iCurrent!=iStart) 
    {
        window.setTimeout(function() { animateText(id, iStart, iCurrent, iDir) }, iSpeed);
    }
}
window.onload = function() 
{
    window.setTimeout(function() { animateText('scrollHead') }, 1000);
    return true;
};


//////////////////////////////////////////////////////////////////////////




<table class="table_Header_Internal" onmouseover="style.cursor='pointer'">
    <tr>
        <td colspan="8" class="cell_Thick_Border">
            <table class="table_Header_Img">
                <tr>
                    <td align="right" valign="top">
                    <div style="position: relative; z-index: -5;">
                        <span id="scrollHead" class="div_Header_Pos">
                            <img border="0" src="/v2/asp/images/picco.gif">
                        </span>
                    </div>
                    </td>          
                </tr>
            </table>
        </td>
    </tr>
    <tr class="font_Headings">
        <td class="width_Headings" onclick="window.location='about.asp';" id="about">
        &nbsp;<% if sPageName = "about" then %>About.<% else %>About.<% end if %>&nbsp;</td>
        <td class="width_Headings" onclick="window.location='news.asp';" id="news">
        &nbsp;<% if sPageName = "news" then %>News.<% else %>News.<% end if %>&nbsp;</td>
        <td class="width_Headings" onclick="window.location='work.asp';" id="work">
        &nbsp;<% if sPageName = "work" then %>Work.<% else %>Work.<% end if %>&nbsp;</td>
        <td class="width_Headings" onclick="window.location='jobs.asp';" id="jobs">
        &nbsp;<% if sPageName = "jobs" then %>Jobs.<% else %>Jobs.<% end if %>&nbsp;</td>
        <td onclick="window.location='contact.asp';" id="contact">
        &nbsp;<% if sPageName = "contact" then %>Contact.<% else %>Contact.<% end if %>&nbsp;</td>
    </tr>
</table>

//////////////////////////////////////////////////////////////////////


.cell_Thick_Border { 
border-bottom: 0.1cm groove black;
height: 18px;
}
.table_Header_Internal,.table_Header_Img {
width: 100%;
z-index: 10;
}
.div_Header { 
background-color: white; 
font-family: Times New Roman, serif; 
font-size: 18pt; 
font-weight: bold; 
height: 24px; 
margin: 10px; 
overflow: hidden; 
padding-bottom: 0px; 
padding-left: 5px; 
padding-right: 5px; 
padding-top: 0px; 
text-align: right; 
width: 400px; 
}
.div_Header_Pos {
position:relative;
}

This is my code, for hiding/showing the image and then text. however, i cant seem to get it to stop at the black thick line. can this be done?

www.crmpicco.co.uk
www.ie7.com

crmpicco · April 10th, 2006, 03:45 AM

Code:

function animateText(id,iStart,iCurrent,iDir) 
{
    var obj = document.getElementById(id);
    if(typeof(iStart)=="undefined") 
    {
        iStart = 0;
        iCurrent = iStart;
        iDir = +2; // Increasing Value also increases speed
    }
    if(iDir > 0 && iCurrent > obj.parentNode.offsetHeight) 
    {
        /*
        obj.innerHTML = "<img border='0' src='/v2/asp/images/picco.gif' style='visibility: hidden' />";
        obj.innerHTML = obj.innerHTML + "empowered by Picco &copy;";
        */
        obj.innerHTML = "<OBJECT codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' WIDTH='200' HEIGHT='100' id='picco'><EMBED src='picco.swf' bgcolor='#333399' WIDTH='200' HEIGHT='100' NAME='picco' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT>";
        //obj.innerHTML = "<img border='0' src='picco.swf' />";
        iDir = -2; // Increasing Value also increases speed (must match the speed above)
    }
    iCurrent += iDir;
    obj.style.top = iCurrent + "px";
    var iSpeed = 15; // The Speed at which the image scrolls down and the text scrolls up (smaller = faster)

    if(iCurrent!=iStart) 
    {
        window.setTimeout(function() { animateText(id, iStart, iCurrent, iDir) }, iSpeed);
    }
}

// If the Client's browser is MSIE then proceed with the functions to show/hide image    
if (browser.isIE)
{
    window.onload = function() 
    {
        var iWait = 1000; // How many seconds to wait after page loads to hide the image
        window.setTimeout(function() { animateText('scrollHead') }, iWait); 
        return true;
    };
}

I am trying to load this 'object' which is a flash file (picco.swf) from my javascript into a <td> cell using innerHTML. Is this possible, as it does not seem to work at the moment.

The code in question is:

Code:

obj.innerHTML = "<OBJECT codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' WIDTH='200' HEIGHT='100' id='picco'><EMBED src='picco.swf' bgcolor='#333399' WIDTH='200' HEIGHT='100' NAME='picco' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT>";

This code works, when coded into the cell, but I am looking to have it appear from below and gradually go to the top as it did previously with the text 'empowered by Picco'.....

Code:

<td align="right" valign="top">
    <div style="position: relative; z-index: -20;">
        <span id="scrollHead" class="div_Header_Pos">
            <OBJECT codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
            WIDTH="200" HEIGHT="100" id="picco">
                <EMBED src="picco.swf" bgcolor=#333399 WIDTH="200" HEIGHT="100" NAME="piccoo" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> 
            </OBJECT>                            
        </span>
    </div>
</td>

www.crmpicco.co.uk
www.ie7.com