Logo Floats

[Total: 0    Average: 0/5]

This script creates a table that is a bar graph of the data given to it.

Head Code:

<style>
#divBottom {
  position:absolute; 
  font-family:comic,arial,helvetica; 
  text-align:center;
  height:20;
  width:200; 
  font-size:12pt; 
  font-weight:bold;
  background-color:steelblue;
  border-color:hotpink;
  border-width:1;
  border-style:solid;
}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Remeber to set the look of the divBottom layer in the stylesheet (if you wan't
another font or something)
********************************************************************************/

/*Set these values, gright for how much from the right you wan't the layer to go
and gbottom for how much from the bottom you wan't it*/

var gright=230
var gbottom=40

//Browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;


/********************************************************************************
Constructing the ChangeText object
********************************************************************************/
function makeObj(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'
   	this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')							
	this.moveIt=b_moveIt;
}
function b_moveIt(x,y){
	this.x=x; this.y=y
   	this.css.left=this.x
	this.css.top=this.y
}
/********************************************************************************
Initilizing the page, getting height and width to moveto and calls the 
object constructor
********************************************************************************/
var pageWidth,pageHeight
function geoInit(){
	oTest=new makeObj('divBottom')
	pageWidth=(ie)?document.body.offsetWidth-4:innerWidth;
	pageHeight=(ie)?document.body.offsetHeight-2:innerHeight;
	checkIt()
	//sets the resize handler.
	onresize=resized
	if(ie) window.onscroll=checkIt;
}
/********************************************************************************
This function executes onscroll in ie and every 30 millisecond in ns
and checks if the user have scrolled, and if it has it moves the layer.
********************************************************************************/
function checkIt(){
	if(ie) oTest.moveIt(document.body.scrollLeft +pageWidth-gright,document.body.scrollTop+pageHeight-gbottom)
	else if(n){
		oTest.moveIt(window.pageXOffset+pageWidth-gright, window.pageYOffset+pageHeight-gbottom)
		setTimeout('checkIt()',20)
	}
}

//Adds a onresize event handler to handle the resizing of the window.
function resized(){
	pageWidth=(ie)?document.body.offsetWidth-4:innerWidth;
	pageHeight=(ie)?document.body.offsetHeight-2:innerHeight;
	if(ie) checkIt()
}

//Here we will write the div out so that lower browser won't see it.
if(n || ie) document.write('<div id="divBottom"><a href="http://www.js-examples.com"><font color=black>www.js-examples.com</font></a></div>')
</script>

Body Code:

Normally you would have this in the body onload event handler.
<a href="javascript:geoInit()">start it</a>
Your content goes here!<br>
1<br><br><br><br><br><br><br><br><br><br>
2<br><br><br><br><br><br><br><br><br><br>
3<br><br><br><br><br><br><br><br><br><br>
4<br><br><br><br><br><br><br><br><br><br>
5<br><br><br><br><br><br><br><br><br><br>
<br>

Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *