length unit convert and position: fixed in IE

Discussion in 'HTML' started by Aquila Deus, Jul 23, 2004.

  1. Aquila Deus

    Aquila Deus Guest

    Hi all!

    I got the two things work last night, the code is here:

    //////////////////////////////////////////////////////////
    var ojsIsIe = (navigator.appName == "Microsoft Internet Explorer");

    var ojsUnitPointWidth; // Pixels per point (float)
    var ojsUnitCentimeterWidth; // Pixels per cm (float)
    var ojsUnitMillimeterWidth; // Pixels per mm (float)
    var ojsUnitInchWidth; // Pixels per inch (float)
    var ojsUnitPicasWidth; // Pixels per picas (float)

    var ojsUnitPointHeight;
    var ojsUnitCentimeterHeight;
    var ojsUnitMillimeterHeight;
    var ojsUnitInchHeight;
    var ojsUnitPicasHeight;

    function ojsInitMeasureUnits() {
    var x = document.createElement("div");
    x.style.position = "absolute";
    x.style.width = "1000pt";
    x.style.height = "1px";
    document.body.appendChild(x);
    ojsUnitPointWidth = x.offsetWidth / 1000;
    document.body.removeChild(x);
    delete x;

    ojsUnitInchWidth = ojsUnitPointWidth * 72;
    ojsUnitPicasWidth = ojsUnitPointWidth * 12;
    ojsUnitCentimeterWidth = ojsUnitInchWidth / 2.54;
    ojsUnitMillimeterWidth = ojsUnitCentimeterWidth * 10;

    var y = document.createElement("div");
    y.style.position = "absolute";
    y.style.width = "1px";
    y.style.height = "1000pt";
    document.body.appendChild(y);
    ojsUnitPointHeight = y.offsetHeight / 1000;
    document.body.removeChild(y);
    delete y;

    ojsUnitInchHeight = ojsUnitPointHeight * 72;
    ojsUnitPicasHeight = ojsUnitPointHeight * 12;
    ojsUnitCentimeterHeight = ojsUnitInchHeight / 2.54;
    ojsUnitMillimeterHeight = ojsUnitCentimeterHeight * 10;
    }

    // baseWidth is used only when the width is a percentage
    function ojsParseWidth(widthText, baseWidth) {
    if (widthText == "auto" || widthText == "") {
    return null;
    } else if (widthText.substr(widthText.length - 1) == "%" ) {
    return parseInt(widthText) * baseWidth / 100;
    } else {
    var unit = widthText.substr(widthText.length - 2);
    var value = parseInt(widthText);

    if (unit == "px") {
    return value;
    } else if (unit == "pt") {
    return value * ojsUnitPointWidth;
    } else if (unit == "in") {
    return value * ojsUnitInchWidth;
    } else if (unit == "cm") {
    return value * ojsUnitCentimeterWidth;
    } else if (unit == "mm") {
    return value * ojsUnitMillimeterWidth;
    }
    }
    return parseInt(widthText);
    }

    // baseWidth is used only when the height is a percentage
    function ojsParseHeight(heightText, baseHeight) {
    if (heightText == "auto" || heightText == "") {
    return null;
    } else if (heightText.substr(heightText.length - 1) == "%" ) {
    return parseInt(heightText) * baseHeight / 100;
    } else {
    var unit = heightText.substr(heightText.length - 2);
    var value = parseInt(heightText);

    switch (unit) {
    case "px":
    return value;
    case "pt":
    return value * ojsUnitPointHeight;
    case "pc":
    return value * ojsUnitPicasHeight;
    case "in":
    return value * ojsUnitInchHeight;
    case "cm":
    return value * ojsUnitCentimeterHeight;
    case "mm":
    return value * ojsUnitMillimeterHeight;
    }
    }
    return parseInt(heightText);
    }

    function ojsRelocateFixedElement(element, event) {
    // The function works on IE only. And there is no need to call this in
    // web browsers that support position: fixed.
    if (! ojsIsIe) {
    return;
    }

    var p = document.body;

    var left = ojsParseWidth(element.style.left, p.offsetWidth);
    if (left) {
    element.runtimeStyle.left = p.scrollLeft + left;
    }

    var right = ojsParseWidth(element.style.right, p.offsetWidth);
    if (right) {
    element.runtimeStyle.right = p.scrollLeft + p.offsetWidth - right;
    }

    var top = ojsParseHeight(element.style.top, p.offsetHeight);
    if (top) {
    element.runtimeStyle.top = p.scrollTop + top;
    }

    var bottom = ojsParseHeight(element.style.bottom, p.offsetHeight);
    if (bottom) {
    element.runtimeStyle.bottom = p.scrollTop + p.offsetHeight -
    bottom;
    }
    }

    function ojsUpdateFixedElement(element, propertyName) {
    if (propertyName == "style.left"
    || propertyName == "style.right"
    || propertyName == "style.top"
    || propertyName == "style.bottom") {
    ojsRelocateFixedElement(element);
    }
    }

    // The function set "position: fixed" for given DOM element. On IE it
    // captures onpropertychange event so that later you can just change
    // style.left, style.right, style.top, style.bottom to control the
    // element's position on browser.
    function ojsSetElementFixed(ele) {
    if (ojsIsIe) {
    ele.ojsFixed = true;
    ele.style.position = "absolute";
    window.attachEvent("onscroll", function t(event){
    ojsRelocateFixedElement(ele, event);
    });
    window.attachEvent("onresize", function t(event){
    ojsRelocateFixedElement(ele, event);
    });
    ele.attachEvent("onpropertychange", function t(event){
    var pn = window.event.propertyName;
    ojsUpdateFixedElement(ele, pn);
    });
    } else {
    ele.style.position = "fixed";
    }

    return ele;
    }

    //////////////////////////////////////////////////////////////////

    Notes:

    1.UnitXXXPerPixel reflects the DPI set in web browser, not the real monitor
    DPI.

    2.The position of element set by ojsSetElementFixed() is uneffected by
    predefined styles. ex: you set the "top" of div#FIXED in css file, then
    call this function with a div whose id is FIXED, but the "top" set in css
    file doesn't affect it at all. I don't know why, maybe it's about the
    order. The "top" may appear in element.currentStyle, but never in
    element.style.

    3.Currently ojsSetElementFixed works only for top-level elements. And if
    you set both of left and right, and specify a width which doesn't equal to
    right - left (or top, bottom, with specified height), things may work
    weird...

    4.Code is tested on IE6 and Moz 1.7.1 only... Can somebody tell me how to
    install more than one version of IE on the same computer? (no multi-OS)


    Cheers!

    --
    me = d2004xx = d2003xx = d2002xx
    Aquila Deus, Jul 23, 2004
    #1
    1. Advertising

  2. Aquila Deus

    Kris Guest

    In article <>,
    (Aquila Deus) wrote:

    > I got the two things work last night, the code is here:


    Don't do that. Post a URL to the stuff instead.

    --
    Kris
    <> (nl), <http://www.cinnamon.nl/>
    "De voordelen van toegankelijk bouwen": <http://www.struikelblok.nl/>
    Kris, Jul 23, 2004
    #2
    1. Advertising

  3. Aquila Deus

    Aquila Deus Guest

    Kris <> wrote in message news:<4all.nl>...
    > In article <>,
    > (Aquila Deus) wrote:
    >
    > > I got the two things work last night, the code is here:

    >
    > Don't do that. Post a URL to the stuff instead.


    Well, but currently there is no good way to do this. I don't trust my
    web-site (damned windows!)
    Aquila Deus, Jul 23, 2004
    #3
  4. Aquila Deus

    Aquila Deus Guest

    (Aquila Deus) wrote in message news:<>...
    <snip>

    fixed code:


    function ojsRelocateFixedElement(element, event) {
    if (! ojsIsIe) {
    window.alert("ojsRelocateFixedElement should never be called in non-IE"
    + " browser");
    }

    var p = document.body;

    if (! element.ojsFixedRelocateCalled) {
    element.ojsFixedUpdating = true;
    var left = ojsParseWidth(element.currentStyle.left, p.offsetWidth);
    var right = ojsParseWidth(element.currentStyle.right, p.offsetWidth);
    var top = ojsParseHeight(element.currentStyle.top, p.offsetHeight);
    var bottom = ojsParseHeight(element.currentStyle.bottom, p.offsetHeight);

    if (left != null) {
    element.style.left = left;
    }
    if (right != null) {
    element.style.right = right;
    }
    if (top != null) {
    element.style.top = top;
    }
    if (bottom != null) {
    element.style.bottom = bottom;
    }

    element.ojsFixedRelocateCalled = true;
    element.ojsFixedUpdating = false;
    }

    var left = ojsParseWidth(element.style.left, p.offsetWidth);
    var right = ojsParseWidth(element.style.right, p.offsetWidth);
    var top = ojsParseHeight(element.style.top, p.offsetHeight);
    var bottom = ojsParseHeight(element.style.bottom, p.offsetHeight);

    if (left != null) {
    element.runtimeStyle.left = p.scrollLeft + left;
    }
    if (right != null) {
    element.runtimeStyle.left = p.scrollLeft + p.clientWidth - right
    - element.offsetWidth;
    }
    if (top != null) {
    element.runtimeStyle.top = p.scrollTop + top;
    }
    if (bottom != null) {
    element.runtimeStyle.top = p.scrollTop + p.clientHeight - bottom
    - element.offsetHeight;
    }
    }

    function ojsUpdateFixedElement(element, propertyName) {
    if ((! element.ojsFixedUpdating)
    && (propertyName == "style.left"
    || propertyName == "style.right"
    || propertyName == "style.top"
    || propertyName == "style.bottom"
    || propertyName == "style.width"
    || propertyName == "style.height")) {
    element.ojsFixedUpdating = true;
    ojsRelocateFixedElement(element);
    element.ojsFixedUpdating = false;
    }
    }



    style.right and style.bottom and pre-defined stylesheet can work now, done!
    Aquila Deus, Jul 24, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Julian McMaster

    reading and parsing fixed length text file

    Julian McMaster, Nov 8, 2005, in forum: Java
    Replies:
    1
    Views:
    7,661
    Roedy Green
    Nov 8, 2005
  2. johnp
    Replies:
    4
    Views:
    3,664
    Toby Inkster
    May 23, 2005
  3. darren
    Replies:
    3
    Views:
    321
    Adem24
    Jul 1, 2008
  4. Mark Dickinson
    Replies:
    0
    Views:
    539
    Mark Dickinson
    Jun 11, 2009
  5. Ulrich Eckhardt
    Replies:
    1
    Views:
    878
    casebash
    Jun 12, 2009
Loading...

Share This Page