Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 6th, 2006, 08:59 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default hide/show header with javascript

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
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
Reply With Quote
  #2 (permalink)  
Old April 7th, 2006, 04:15 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
Reply With Quote
  #3 (permalink)  
Old April 10th, 2006, 03:45 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
HIDE/SHOW pallone Javascript How-To 11 April 16th, 2007 10:24 AM
how to show/hide forms ? ashrafzia C# 3 November 3rd, 2006 11:07 AM
show/hide row(s) eugz Beginning PHP 0 March 19th, 2006 10:10 PM
Conditional Hide Report Page Header SGL Access VBA 0 August 30th, 2004 02:36 PM



All times are GMT -4. The time now is 09:49 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.