IT Community - Software Programming, Web Development and Technical Support

How do I create a floating div?

This is a discussion on How do I create a floating div? within the HTML, CSS and Javascript Coding Techniques forums, part of the Web Development category; Hi all... How do I create a floating div? Thanks & Regards Pvinoth....


Go Back   IT Community - Software Programming, Web Development and Technical Support > Web Development > HTML, CSS and Javascript Coding Techniques

Reload this Page How do I create a floating div?

Register FAQ Members List Calendar Mark Forums Read

Reply
 
Thread Tools Display Modes
  #1  
Old 09-13-2007, 04:07 AM
Pvinothkumar Pvinothkumar is offline
D-Web Analyst
  
Join Date: Sep 2007
Posts: 235
Pvinothkumar is on a distinguished road
Default How do I create a floating div?
Hi all...

How do I create a floating div?

Thanks & Regards
Pvinoth.
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2  
Old 09-13-2007, 05:27 AM
a.deeban a.deeban is offline
D-Web Analyst
  
Join Date: May 2007
Posts: 278
a.deeban is on a distinguished road
Default Re: How do I create a floating div?
Hi vinoth....

here is the script to create a floating div.....

Quote:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
window.onerror = null;
var topMargin = 150;
var slideTime = 3000;
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', pageWidth * .5);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').sty le.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
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.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = 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>
<BODY onLoad="start()">
<DIV id="floatLayer" style="position: absolute; height:200px; width:200px; left:20px;

background-color: #7D92A9">This is a Floating Layer. Ho Ho Ho. </DIV>
thnx...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3  
Old 09-18-2007, 09:27 PM
kingmaker kingmaker is offline
D-Web Genius
  
Join Date: Jun 2007
Posts: 881
kingmaker is on a distinguished road
Send a message via MSN to kingmaker
Default Re: How do I create a floating div?
function displayFloatingDiv(divId, title, width, height, left, top)
{
DivID = divId;

document.getElementById('dimmer').style.visibility = "visible";

document.getElementById(divId).style.width = width + 'px';
document.getElementById(divId).style.height = height + 'px';
document.getElementById(divId).style.left = left + 'px';
document.getElementById(divId).style.top = top + 'px';

var addHeader;

if (originalDivHTML == "")
originalDivHTML = document.getElementById(divId).innerHTML;

addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
'<tr><td ondblclick="void(0);" onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px">' + title + '</td>' +
'<td style="width:18px" align="right">' +
'Close...</td></tr></table>';


// add to your div an header
document.getElementById(divId).innerHTML = addHeader + originalDivHTML;


document.getElementById(divId).className = 'dimming';
document.getElementById(divId).style.visibility = "visible";


}
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Create SubDomains Simran1 PHP Programming 1 01-08-2009 12:06 AM
Floating Window Using JavaScript seesamjagan HTML, CSS and Javascript Coding Techniques 2 08-14-2007 05:53 AM
How can I create thumbnails using PHP? oxygen PHP Programming 1 07-26-2007 02:25 AM
Explain Floating point operations in MIDP 1.0? itbarota Mobile Software Development 1 07-25-2007 03:09 AM
How do create Sub Domain? raj Server Management 0 07-17-2007 03:08 AM


All times are GMT -7. The time now is 12:51 AM.

Contact Us - IT Community - Archive - Top

Copyright ©2004 - 2007, DiscussWeb. All Rights Reserved.
Our Partners
One Way Moving Companies | Stamford Dentist | Euro Millions Lottery | Home Loans| Furniture

SEO by vBSEO 3.0.0