JavaScript - Floating Box With Css And Javascript

Hello everyone,

I've been looking for a script that will float my website
navigation bars within a table or table cell. I can find
scripts that will float down the whole page but obviously
thats not as I want it.

If anyone knows of one that fits what I want or knows whether
it is even possible then I would be very grateful if you could
let me know either way.

i want to make a floating menu.. but the administrator want it to be selected from database...

Does anyone have an idea? or how to make it?
also i want to know if it can be done or not????

Hi all,

I wasn't sure of the proper search terms to use to find an answer in the JS forums. I'm trying to create a floating navigation bar which only becomes visible at a certain scroll point on a page - specifically, when the static navigation row is scrolled out of view.

I have a floating navigation bar already. And I suspect I'd need to give the static menu an ID to reference in the JS. I'm just not certain on how to proceed.

Any help would be greatly appreciated. Thanks.

Hi everybody Im new here and javascript newbie ,so I need your helps
I want to use a left floating banner on my site www.guruht.com so the floating banner don't cover any text content when a visitor zoom in the page or use a very low resolution like 800x600 or 1024x700.
this is the code I use but the banner cover the text :
Code:

<style>
#floating_banner_bottom {
text-align: left;
width: 00%;
bottom: 00px;
margin-bottom: 0px;
height: 50px;
position: fixed;
z-index: 50;
left: 0px;
</style>





<div id="floating_banner_bottom">
<!-- Button to Close Banner -->



<a style="display:scroll;position:fixed;bottom:50px;left:0px">

banner code

<br />

<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;"> 


<i style="font-family: Georgia,&quot;Times New Roman&quot;,serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i>

<center>
<img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" />
</center>
</a>
</div>

<a/>
</a></a></div>
<!-- End Here -->

Hello all from Romania, I tried few hours yesterday to edit the javascript settings because I want to be displayed once per session.

If you can help me, or edit because I know it's very simple but for me... isn't the same thing.

This is the code I want to be displayed once per session, and IF you can to close after x seconds, but important is once per session.

Quote:
<style>
#topbar {
height:30px;
width:auto;
background: #005094 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#adsground {
height:auto;
margin:0 auto;
width: 310px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:Center;
padding:4px;
}


#headlineatas {
margin-left:85px;
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:170px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>


<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>


<div id="headlineatas">
<div id="topbar">

<span style="color:#fff;font-size:13px;font-wegight:bold;text-shadow:black 0.1em 0.1em 0.1em">Asculti AlyceRadio.</span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.google.ro/" target="_blank" onclick="getValue()">X</a></span>
</div>
<div id="adsground">
<p align="left"><h3></h3></p>

another text here

<p>

</p></div></div>
Thanks !

I need a back to top link on the bottom of my page that stays there all the time while people are scrolling..

is this possible?

is this close to what i'm looking for?

http://javascript.internet.com/page-...ting-link.html

i've seen it on some other sites but I can't find any to reference now...

I'm totally new to this!

thanks for your help!

-B

On Mashable's site, in their post pages (not the home page), there's a floating widget to the left of the content that descends as you scroll down below the fold, but doesn't ascend above a certain point.

I'd love to replicate this, but their site is so clogged with code that I'm having a really hard time parsing apart the (javascript) scripting that's controlling this.

Thoughts or any help identifying the moving parts?

First I would like to thank you for taking the time out to help me out with my problem, I really appreciate it. I am trying to make my fixed div scroll on the top right of the page at all times BUT it needs to stay below the menu/header. Here is what I have so far ( no javascript ) http://www.dead-game.com/pom/test.html

I want it to function exactly like http://www.dead-game.com/pom/index.html

Any help would be GREATLY appreciated

Thank you very much!

I have this floating banner code and I want to show it once per visitor. How could I have it to show once per visitor?


<style>
#floating_banner_bottom {
text-align: left;
width: 00%;
bottom: 00px;
margin-bottom: 0px;
height: 50px;
position: fixed;
z-index: 50;
left: 0px;
</style>


<div id="floating_banner_bottom">
<!-- Button to Close Banner -->



<a style="display:scroll;position:fixed;bottom:50px;left:0px">

banner code

<br />

<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;">


<i style="font-family: Georgia,&quot;Times New Roman&quot;,serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i>

<center>
<img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" />
</center>
</a>
</div>

<a/>
</a></a></div>
<!-- End Here -->

Hi there im trying to automatically time out a floating div window. So far have this which works when i preview in the server but not live on the site:

Code:

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> 
<title>Floating Window</title> 
<script src="Drag.js"></script>
</head> 

 <body onload="setTimeout(function(){ document.getElementById('window').style.display='none'; },7000);"> 

<div id="window" style="position:absolute; overflow:hidden; z-index:10; left:0px; top:0px; width:100%; height:100%; 

background-color:#ffffff;">

<div align="center"><img src="site_logo.gif" width="700" height="100"></div>
 
 <div style="position:absolute; top:3px; left:95%; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';"> 
<img src="close_button.gif" width="48" height="14" border="0"></a></div> 

<div align="center"><img src="interstitial.gif" width=700 height=373 alt="" border="0"></div>

</div>

</body>
</html>

the bit in red is the code thats not working/timing out after 7 seconds in the live site.

the bit in blue is the code that does close the window but only if you click the close button.

Ive also tried inserting something like this:

<script type="text/javascript">
function nodeHide() {
this.parentNode.parentNode.style.display = 'none';
}

window.onload = setTimeout("nodeHide()", 7000);
</script>

but i just get errors....

I also tried this:

<script type="text/javascript">
<!--
function nodeHide(){
this.parentNode.parentNode.style.display = "none"
}

//-->
</script>
</head>
<body OnLoad = "setTimeout('nodeHide()', 7000)">


but i get an error saying this.parentNode.parentNode. is null or not an object.

any help you could give would be great!

Lisa

Hi Guys,

I'm wondering if anyone knows of some simple javascript that allows me to create a floating image rollover enlargement, similar to the ones on the homepage of ThemeForest.

I've been Googling for hours, so, if anyone knows of a script, i'd be much appreciative.

Thanks,
Christian

Can't seem to figure out how to add the borders to the floating table head?
The javascript file I'm using table_floating_header.js, got it from site http://code.google.com/p/js-floating...ers/wiki/Usage

[code]
var floating_header = function() {
this.header = document.createElement('table');
this.header_height = 0;
this.getkeys = function(obj) {
var keys = new Array();
for ( var key in obj ) {
keys.push(key);
}
return keys;
};

this.getXY = function( o ) {
var y = 0;
var x = 0;
while( o != null ) {
y += o.offsetTop;
x += o.offsetLeft;
o = o.offsetParent;
}
return { "x": x, "y": y };
}

this.setheader = function() {
var win = window.pageYOffset ? window.pageYOffset : 0;
var cel = document.documentElement ? document.documentElement.scrollTop : 0;
var body = document.body ? document.body.scrollTop : 0;
var result = win ? win : 0;
if ( cel && ( ! result || ( result > cel ))) result = cel;
var screenpos = body && ( ! result || ( result > body ) ) ? body : result;
var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height;
if ( screenpos > this.theady && screenpos < theady_max ) {
this.header.style.borderCollapse= 'collapse';
this.header.style.top=Math.round(screenpos) + 'px';
this.header.style.left=this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).x + 'px';
this.header.style.display = 'block';
this.header_height = header.offsetHeight;
}
else {
this.header.style.display = 'none';
}
}

this.addclass = function(obj, newclass) {
if ( obj.classes == null ) {
obj.classes = new Array();
}
obj.classes[newclass] = 1;
obj.className = this.getkeys(obj.classes).join(' ');
return true;
};

this.theady = 0;

this.build_header = function() {
this.table_obj = document.getElementsByTagName('THEAD');
if ( ! this.table_obj ) {
alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen");
return;
}
this.table_obj = this.table_obj[0];
while ( this.table_obj.tagName != 'TABLE' ) {
if ( this.table_obj.tagName == 'BODY' ) {
alert('The THEAD section MUST be inside a table - how did you do that???');
return;
}
this.table_obj = this.table_obj.parentNode;
}

thead = this.table_obj.getElementsByTagName('THEAD')[0].cloneNode(1);
thead.id = 'copyrow';
this.header.style.position='absolute';
this.header.style.display='none';
this.header.appendChild(thead);
this.header.style.width = this.table_obj.offsetWidth;
var srcths = this.table_obj.getElementsByTagName('THEAD')[0].getElementsByTagName('*');
var copyths = thead.getElementsByTagName('*');
for ( var x = 0; x < copyths.length; x++ ) {
copyths[x].className = srcths[x].className;
copyths[x].align = srcths[x].align;
copyths[x].background = srcths[x].background;
copyths[x].bgColor = srcths[x].bgColor;
copyths[x].colSpan = srcths[x].colSpan;
copyths[x].height = srcths[x].height;
copyths[x].rowSpan = srcths[x].rowSpan;
pr = Math.round(srcths[x].style.paddingRight.split('px')[0]);
pl = Math.round(srcths[x].style.paddingLeft.split('px')[0]);
bl = ( Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) : 0;
br = ( Math.round(srcths[x].style.borderRightWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderRightWidth.split('px')[0]) : 0;
pt = Math.round(srcths[x].style.paddingTop.split('px')[0]);
pb = Math.round(srcths[x].style.paddingBottom.split('px')[0]);
bt = Math.round(srcths[x].style.borderTopWidth.split('px')[0]);
bb = Math.round(srcths[x].style.borderBottomWidth.split('px')[0]);
if ( srcths[x].currentStyle ) {
for ( var y in srcths[x].currentStyle ) {
if ( y == 'font' || y == 'top' ) continue;
copyths[x].style[y] = srcths[x].currentStyle[y];
}
pr = Math.round(srcths[x].currentStyle.paddingRight.split('px')[0]);
pl = Math.round(srcths[x].currentStyle.paddingLeft.split('px')[0]);
bl = ( Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) : 0;
pt = Math.round(srcths[x].currentStyle.paddingTop.split('px')[0]);
pb = Math.round(srcths[x].currentStyle.paddingBottom.split('px')[0]);
bt = Math.round(srcths[x].currentStyle.borderTopWidth.split('px')[0]);
}
if ( srcths[x].onclick ) copyths[x].onclick = srcths[x].onclick;
var width = ( srcths[x].offsetWidth - pr - pl > 0 ) ? srcths[x].offsetWidth - pr - pl : 0;
copyths[x].style.position = srcths[x].style.position;
copyths[x].style.top = ( srcths[x].offsetTop - pt - pb > 0 ) ? srcths[x].offsetTop - pt - pb : srcths[x].offsetTop;
copyths[x].style.top = srcths[x].style.top;
copyths[x].style.height = srcths[x].offsetHeight;
copyths[x].style.left = srcths[x].offsetLeft;
if ( ! copyths[x].currentStyle ) {
//copyths[x].style.width = Math.floor(document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width").split('px')[0]);
copyths[x].style.width = document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width");
}
else {
copyths[x].style.width = srcths[x].offsetWidth - pr - pl; // - bl;
copyths[x].width = srcths[x].width;
}
if ( x == copyths.length - 1 ) {
this.header.style.paddingBottom = pb;
this.header.style.borderBottom = bb;
}
}
this.addclass(this.header, 'main');
document.body.appendChild(this.header);
theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
}

var origonload = window.onload;
window.onload = function() {
if (origonload) {
origonload();
}
this.build_header();
};

window.onscroll=this.setheader;

};
floating_header();

[code]

HTML example page code
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<!-- <meta HTTP-EQUIV='REFRESH' CONTENT='60'> -->
<script src="table_floating_header.js"></script>


</head>
<body>
<table border=2 cellspacing=0 cellpadding=0 width=990 align=center>
<thead>
<tr>
<td colspan=13 bgcolor='palevioletred'>Title of Page
- 12APR12--09:01</th>
<td colspan=3 bgcolor='palevioletred'>More Text</th>
</tr>
<tr>
<th colspan=13 bgcolor='wheat'>More Text</th>
<th colspan=3 bgcolor='wheat'><font size=1.0>Date </th>
</tr>
<tr>
<td colspan=13 bgcolor='wheat'align=center><a href='l'> Link</td>
<th colspan=3 bgcolor='wheat'><font size=1.0>End 13APR12 &nbsp; &nbsp</th>
</tr>
<tr>
<th colspan=3 bgcolor='peachpuff'>Text</th>
<th colspan=3 bgcolor='peachpuff'>Text</th>
<th colspan=1 bgcolor='wheat'></th>
<th colspan=6 bgcolor='peachpuff'>Text</th>
<th colspan=3 bgcolor='wheat'><font size=1.0>Curr 12APR12 &nbsp; &nbsp; &nbsp; </th>
</tr>
<tr bgcolor=peachpuff>
<th colspan=3></th>
<th colspan=3></th>
<th colspan=1 bgcolor='wheat'></th>
<td></td>
<td></td>
<td></td>
<td align=center><b>Text</td>
<td></td>
<td></td>
<td colspan=3 bgcolor='wheat'></td>
</tr>
<tr bgcolor='peachpuff'>
<td><b>Text</td>
<td ><b>Text</td>
<td><b>Text</td>
<td align=center><b> Text </td>
<td align=right><a href=''> Link Text </td>
<td align=right><b> Text </td>
<th colspan=1 bgcolor='wheat'></th>
<td align=center><b> Text </td>
<td align=right><a href=''> Link Text </td>
<td align=right><b> Text </td>
<td align=center><b> Text </td>
<td align=center><b> Text</td>
<td align=right><a href=''> Link Text </td>
<td align=center><b>Text </td>
<td align=center> <a href=''> Link Text </td>
<td align=center><b>Text</td>
</tr>
<tr>
</thead>
<tbody>
<td>1</td>
<td> </td>
<td> </td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</TD>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=center> - </td>
<td align=center> - </td>
</tr>
<tr>
<td>2</td>
<td>Text </td>
<td>Text </td>
<td align=right> 21</td>
<td align=right> 0</td>
<td align=right> 6</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</TD>
<td align=right> 24</td>
<td align=right> 0</td>
<td align=right bgcolor=RED> 21</td>
<td align=right bgcolor=RED> 0% </td>
<td align=right> 0</td>
</tr>
<tr>
<td>3</td>
<td>text </td>
<td>text </td>
<td align=right> 44</td>
<td bgcolor=green align=right> 204</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</TD>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 248</td>
<td align=center> - </td>
<td align=center> - </td>
</tr>
<tr>
<td>4</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</TD>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=center> - </td>
<td align=center> - </td>
</tr>
<tr>
<td>5</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 6</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</TD>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=center> - </td>
<td align=center> - </td>
</tr>
<tr>
<td>6</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td align=right> 4</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 4</TD>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=right> 0</td>
<td align=center> - </td>
<td align=center> - </td>
</tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=BLUE> 85% </td>
<td align=right> 3</td>
</tr>
<tr>
<td>7</td>
<td>text </td>
<td>text </td>
<td align=right> 0</td>
<td align=right> 47</td>
<td align=right> 4</td>
<th colspan=1 bgcolor='wheat'></th>
<td bgcolor=yellow align=right> 7</td>
<td align=right> 0</td>
<td align=right> 8</td>
<td bgcolor=GREEN align=right> -1</TD>
<td align=right> 20</td>
<td align=right> 17</td>
<td align=right> 47</td>
<td align=right bgcolor=RED> 85% </td>
<td align=right> 3</td>
</tr>

</tbody>
</table>
</body>
</html>
[code]
I'm using both Firefox and IE
Thanks!

I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously.
The html page is as follows:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JAVASCRIPT TESTING</title>
<script language="javascript" type="text/javascript" src="FloatingMenu.js">
</script>
<link rel="stylesheet" type="text/css" href="formatting.css">
</head>
<body>
<div id="header1">
<b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b>
</div>


<div id="content">
<p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create.

Signing Scripts
In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to.

With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client.

A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it.

Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following:

Unambiguously assigns ownership of the script to a person or organization.

Allows an HTML page to use multiple signed scripts.

Places the signed script into a Java Archive (JAR) file.

Places the source of the script in the JAR file.

Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script.

.</p>
</div>


<div id="movable">
<b>Please Login or Register</b>
</div>
</body>
</html>

JAVASCRIPT FILE IS AS FOLLOWS:

Code:

var startY=0;
var currY=startY;
var destY=currY;
var timerID=0;
var tmr_on=0;
var temp;
function floatMenu() {
	clearInterval(timerID);
	tmr_on=0;
if (document.documentElement.scrollTop) {
temp=document.documentElement.scrollTop; }
else {
temp=document.body.scrollTop; }
destY=temp+startY;
startFloat();
}

function startFloat() {
if(currY==destY) {
clearInterval(timerID);
tmr_on=0;
}
else if(currY<destY) {
currY+=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
else if(currY>destY) {
currY-=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
}
window.onscroll=floatMenu;
window.onresize=floatMenu;

AND CSS FILE IS AS FOLLOWS:

Code:

#header1 {
background-color: #66ccff;
border: 1px solid #66ccff;
margin-bottom: 5px;
}

#content {
padding: 10px;
border: 1px solid #66ccff;
margin-bottom: 5px;
margin-left: 21%;
height: 800px;
}

#content a {
text-decoration: none;
color: blue;
display: block;
}

a {
text-decoration: none;
color: blue;
}

#movable {
position: absolute;
width: 20%;
background: #fdcfcc;
top: 0px;
left: 0px;
}

At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable.
Problem is coming on both IE and FF.Any help seriously appreciated...

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

Hello,
I am using JavaScript to show/hide a floating div layer. The code i have works perfectly in Google Chrome but will not display at all in Internet Explorer. Any solutions would be greatly appreciated - coding below and attached:
Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>James</title>
		<script type="text/javascript" language="JavaScript"><!--

function HideContent(d) {
	if(d.length < 1) { return; }
	document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
	if(d.length < 1) { return; }
	document.getElementById(d).style.display = "block";
}

function ReverseContentDisplay(d) {
	if(d.length < 1) { return; }
	
	// Hide everything but the one we want to toggle
	HideAllContent(d);
	
	if(document.getElementById(d).style.display == "none"){
		document.getElementById(d).style.display = "block";
	}else{
		document.getElementById(d).style.display = "none";
	}
}

/**
 * Hides all the content panes on the page, they must be listed in arr
 * @param except - The id of a div not to hide
 */
function HideAllContent(except){
	// Make an Array with all the id's of the divs we want to hide
	var arr = [
			
				"uniquename1",
				"uniquename2",
				"uniquename3",
				];
	// Loop through the Array and call HideContent to hide them
	for( var i=0; i<arr.length; ++i ){
		if( arr[i] != except )
			HideContent( arr[i] );
	}
}
//--></script>
	</head>
	<body>
		<h1>Showing and hiding divs with javascript</h1>
		<p>Click the links below to show or hide the appropriate divs.</p>
		
		<!--
			Links that you want to click.
			Use onclick to call the ReverseContentDisplay() javascript method.
			This will toggle the display property div of the name passed into
			it to "block" or "none".
		-->
		<a href="#" onclick="ReverseContentDisplay('uniquename1')">link 1</a>
		<a href="#" onclick="ReverseContentDisplay('uniquename2')">link 2</a>
		<a href="#" onclick="ReverseContentDisplay('uniquename3')">link 3</a>
		
		<!--
			The divs that you want to hide.
			Each div has its css display property set to "none" so they are
			hidden when the page first displays.
		-->
		<div id="uniquename1" style="display: none;">
			<p>Div 1</p>
		</div>
		<div id="uniquename2" style="display: none;">
			<p>Div 2</p>
		</div>
		<div id="uniquename3" style="display: none;">
			<p>Div 3</p>
		</div>
	</body>
</html>