floating div along with scrollbars (horizontal and vertical)

Posted on 2008-11-18
Medium Priority
Last Modified: 2012-06-21
I need a div(image in it) to float along with the scrollbars.
I implemented using position: fixed. but it is not working in IE 6.
so i used the script given in http://www.javascript-fx.com/submitscripts/float/float.html 
It is working fine for vertical scroll (height wise).
the link also has example 3 which scrolls width wise. but it will not scroll along with the horizontal scroll bar.

please give me the script/css which can work on IE6 that will float the div along with the scrollbars
Question by:divyasindhu
  • 3
LVL 16

Expert Comment

ID: 22992407
Please post your code snippet.

Author Comment

ID: 22992474
// this div has a large image.
//the user can select a part of the image and save (crop image)
<div id="originalDiv" style="z-index:0;">
<img src="<html:rewrite page="<%=imageParam%>"/>" id="uploadedImage" />
//the preview wrap will contain the preview of the selected portion of the large image
<div id="floatingDiv" style="position: absolute;z-index:1;">
        <div id="previewWrap">
<html:submit value="Save" styleClass="cssButton"></html:submit>
// i am using the following script to float the preview image
// the horizontal float is working.
//but the div is not moving horizontally

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers) {
el.cx = el.sx = sx;el.cy = el.sy = sy;
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0) {
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
return el;
JSFX_FloatDiv("floatingDiv", 10,30).floatIt();

Author Comment

ID: 22992803
A correction in the submitted code comments
the vertical float is working. but the horizontal float is not working

Accepted Solution

divyasindhu earned 0 total points
ID: 23040018
I got it working with the help of following links:

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question