floating div along with scrollbars (horizontal and vertical)

Posted on 2008-11-18
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
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
    LVL 16

    Expert Comment

    Please post your code snippet.

    Author Comment

    // 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) {;
    } = = sx; = = sy;
    var pX, pY;
    pX = ( >= 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(<0) {
    pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
    document.documentElement.clientHeight : document.body.clientHeight;
    } += (pX + -; += (pY + -;
    setTimeout( + "_obj.floatIt()", 40);
    return el;
    JSFX_FloatDiv("floatingDiv", 10,30).floatIt();

    Author Comment

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

    Accepted Solution

    I got it working with the help of following links:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now