move a layer

**davelf** · 12-24-2009, 10:06 AM

hi, i need help with float layer.

This is the example that i get:

vertical float layer

the layer will follow your scroll vertically

my problem: i want to make it float horizontal.

somebody can help me...

**vwphillips** · 12-24-2009, 11:43 AM

Code:

<!-- THREE STEPS TO INSTALL Persistent LAYER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Eddie Traversa (psych3@primus.com.au) -->
<!-- Web Site:  http://dhtmlnirvana.com/ -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
window.onerror = null;
var topMargin = 100;
var slideTime = 1200;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);

function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
   }
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageHeight * .5);
window.setInterval("main()", 10)
}

function floatObject() {
 if (ns4 || ns6) {
  findHt = window.innerWidth;
 }
 else if(ie4) {
  findHt = document.body.clientWidth;
 }
}

function main() {
 if (ns4) {
  this.currentY = document.layers["floatLayer"].left;
  this.scrollTop = window.pageXOffset;
  mainTrigger();
 }
 else if(ns6) {
  this.currentY = parseInt(document.getElementById('floatLayer').style.left);
  this.scrollTop = scrollX;
  mainTrigger();
 }
 else if(ie4) {
  this.currentY = floatLayer.style.pixelLeft;
  this.scrollTop = document.body.scrollLeft;
  mainTrigger();
 }
}

function mainTrigger() {
 var newTargetY = this.scrollTop + this.topMargin;
 if ( this.currentY != newTargetY ) {
  if ( newTargetY != this.targetY ) {
   this.targetY = newTargetY;
   floatStart();
  }
  animator();
 }
}
function floatStart() {
 var now = new Date();
 this.A = this.targetY - this.currentY;
 this.B = Math.PI / ( 2 * this.slideTime );
 this.C = now.getTime();
 if (Math.abs(this.A) > this.findHt) {
  this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
  this.A = this.A > 0 ? this.findHt : -this.findHt;
 }
 else {
  this.D = this.currentY;
 }
}

function animator() {
 var now = new Date();
 var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
 newY = Math.round(newY);
 if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
  if ( ie4 )document.all.floatLayer.style.pixelLeft = newY;
  if ( ns4 )document.layers["floatLayer"].left = newY;
  if ( ns6 )document.getElementById('floatLayer').style.left = newY + "px";
 }
}

function start() {
 if(ns6||ns4) {
  pageWidth = innerWidth;
  pageHeight = innerHeight;
  layerSetup();
  floatObject();
 }
 else if(ie4) {
  pageWidth = document.body.clientWidth;
  pageHeight = document.body.clientHeight;
  layerSetup();
  floatObject();
 }
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY onLoad="start()">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<DIV id="floatLayer" style="position: absolute; height:200px; width:200px; left:30px; top:1px;z-index: 100">This is a Floating Layer. Replace this content with your own.</DIV>
<div style="width:3000px;" ></div>


<!-- Script Size:  3.52 KB -->

**davelf** · 12-25-2009, 04:56 PM

wow it's super cool, thx for your help vwphillips, i've been doing this for 2 days, and it's like magic when you fix the problem. Thx a lot .

Thread: move a layer

Thread Tools

Search Thread

move a layer

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions