Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > length unit convert and position: fixed in IE

Reply
Thread Tools

length unit convert and position: fixed in IE

 
 
Aquila Deus
Guest
Posts: n/a
 
      07-23-2004
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
 
Reply With Quote
 
 
 
 
Kris
Guest
Posts: n/a
 
      07-23-2004
In article <(E-Mail Removed) >,
http://www.velocityreviews.com/forums/(E-Mail Removed) (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
<(E-Mail Removed)> (nl), <http://www.cinnamon.nl/>
"De voordelen van toegankelijk bouwen": <http://www.struikelblok.nl/>
 
Reply With Quote
 
 
 
 
Aquila Deus
Guest
Posts: n/a
 
      07-23-2004
Kris <(E-Mail Removed)> wrote in message news:<(E-Mail Removed)4all.nl>...
> In article <(E-Mail Removed) >,
> (E-Mail Removed) (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!)
 
Reply With Quote
 
Aquila Deus
Guest
Posts: n/a
 
      07-24-2004
(E-Mail Removed) (Aquila Deus) wrote in message news:<(E-Mail Removed). com>...
<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!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Convert integer to fixed length binary string Ulrich Eckhardt Python 1 06-12-2009 02:03 AM
Re: Convert integer to fixed length binary string Mark Dickinson Python 0 06-11-2009 10:01 AM
is the syntax for fixed-length integers the same for C and C++? darren C++ 3 07-01-2008 09:47 AM
reading and parsing fixed length text file Julian McMaster Java 1 11-08-2005 02:45 AM
Free Fixed-Width/Fixed-Pitch fonts? johnp HTML 4 05-23-2005 06:14 AM



Advertisments