PDA

View Full Version : I'll trade this code for help!

Marlboro
01-19-2001, 04:30 PM
Ok - the code below is my first attempt to "liquidize" a page for IE4, IE5, NS6 and NS4. Liquidizing means that objects on the page will automatically relocate based on screen size (event = onresize).
The code below works on IE4, IE5, IE5.5 and NS6. I would love it if someone could modifiy it so that it also works on NS4 (4.5 or higher preferably). Also I am experiencing an issue the ns6 is not properly locating the DIVs on the initial page load, but will upon resize - ideas? fixes? (like it is not able to calculate the height of DIVs)

For the really adventurous - if you want to streamline my code by all means do (interation is wondeful!), but please re-post it here so all can benefit, noting your enhancements.

Comments wanted - NS4 suport REALLY appreciated!
Mark
ps: the code does contain ASP code, so you will need to load this onto a server (the ASP is UA detection and var substitution)

If you do use this in some production code on your site, please be sure to contribute the source to me in your code. tia

===begin page resize code======
====orginal author: mark wray 1/2001=========
<%
if instr(request.servervariables("http_user_agent"),"MSIE 5") then 'ok
varHgt2 = "xHgt2 = document.getElementById('sec1').clientHeight + 20;"
elseif instr(request.servervariables("http_user_agent"),"Netscape6") then 'ok
varHgt2 = "xHgt2 = document.getElementById('sec1').offsetHeight + 20;"
elseif instr(request.servervariables("http_user_agent"),"MSIE 4") then 'ok
varHgt2 = "xHgt2 = document.all.sec1.scrollHeight +20;"
elseif instr(request.servervariables("http_user_agent"),"Mozilla/4") then
varHgt2 = "xHgt2 = document.layers.sec1.y +20;"
end if

if instr(request.servervariables("http_user_agent"),"MSIE 5") then
varHgt3 = "xHgt3 = document.getElementById('sec1').clientHeight + 20;"
elseif instr(request.servervariables("http_user_agent"),"Netscape6") then
varHgt3 = "xHgt3 = document.getElementById('sec1').offsetHeight + 20;"
elseif instr(request.servervariables("http_user_agent"),"MSIE 4") then
varHgt3 = "xHgt3 = document.all.sec1.scrollHeight +20;"
elseif instr(request.servervariables("http_user_agent"),"Mozilla/4") then
varHgt3 = "xHgt3 = document.layers.sec1.y +20;"
end if

if instr(request.servervariables("http_user_agent"),"MSIE 5") then
varHgt4 = "xHgt4 = document.getElementById('sec1').clientHeight + document.getElementById('sec2').clientHeight + 40 ;"
elseif instr(request.servervariables("http_user_agent"),"Netscape6") then
varHgt4 = "xHgt4 = document.getElementById('sec1').offsetHeight + 20 + document.getElementById('sec2').offsetHeight + 20;"
elseif instr(request.servervariables("http_user_agent"),"MSIE 4") then
varHgt4 = "xHgt4 = document.all.sec1.scrollHeight + document.all.sec2.scrollHeight + 40;"
elseif instr(request.servervariables("http_user_agent"),"Mozilla/4") then
varHgt4 = "xHgt4 = document.layers.sec1.y + document.layers.sec1.y + 40;"
end if
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>ULTRAPRISE.COM</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT">

<LINK href="../../ultrastyle1.css" rel="stylesheet" type="text/css">

<style>
#sec1 {position: absolute; top:0px; left: 0px; background-color:white; border-style:solid; border-width:2px; border-color:black;}
#sec2 {position: absolute; top:0px; left: 0px; background-color:MistyRose; border-style:solid; border-width:2px; border-color:black;}
#sec3 {position: absolute; top:0px; left: 0px; background-color:WhiteSmoke; border-style:solid; border-width:2px; border-color:RoyalBlue;}
#sec4 {position: absolute; top:0px; left: 0px; background-color:LightGrey; border-style:solid; border-width:2px; border-color:black;}
</style>
<script>


ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ng5 =(document.getElementById)? true:false


var posL
var posT
var layW

//liquidize mode -
function setPos(id){
getSize();
posL = winW - (winW -10)
posT = winH - (winH -10)
layW = winW-40
//alert(posT);
if (document.getElementById) {//ie5x-ns6
document.getElementById(id).style.left = posL;
document.getElementById(id).style.top = posT;
document.getElementById(id).style.width = layW;}
if (document.all){//ie4x
document.all(id).style.left = posL;
document.all(id).style.top = posT;
document.all(id).style.width = layW;}
if (document.layers){//ns4x
document.layers[id].left = posL;
document.layers[id].top = posT;
document.layers[id].width = layW;}
}


var xHgt2
var posL2
var posT2
var layW2
function setPos2(id2){
<%=varHgt2%>
posL2 = winW - (winW -10);
posT2 = xHgt2;
layW2 = (winW/2)-60;
//alert(document.all.sec1.style.scrollHeight)
//alert(xHgt2);
if (document.getElementById) {//ie5x-ns6
document.getElementById(id2).style.left = posL2;
document.getElementById(id2).style.top = posT2;
document.getElementById(id2).style.width = layW2;}
if (document.all){//ie4x
document.all(id2).style.left = posL2;
document.all(id2).style.top = posT2;
document.all(id2).style.width = layW2;}
if (document.layers){//ns4x
document.layers[id2].left = posL2;
document.layers[id2].top = posT2;
document.layers[id2].width = layW2;}
}

var xHgt3
var posL3 //left co-ord
var posT3 //top co-ord
var layW3 //width dimension
function setPos3(id){
<%=varHgt3%>
posL3 = layW2 +15
posT3 = xHgt3;
layW3 = (winW/2)-60;
//alert(xHgt3);
if (document.getElementById) {//ie5x-ns6
document.getElementById(id).style.left = posL3;
document.getElementById(id).style.top = posT3;
document.getElementById(id).style.width = layW3;}
if (document.all){//ie4x
document.all(id).style.left = posL3;
document.all(id).style.top = posT3;
document.all(id).style.width = layW3;}
if (document.layers){//ns4x
document.layers[id].left = posL3;
document.layers[id].top = posT3;
document.layers[id].width = layW3;}
}

var xHgt4
var posL4 //left co-ord
var posT4 //top co-ord
var layW4 //width dimension
function setPos4(id){
<%=varHgt4%> //=xHgt4
posL4 = winW - (winW -10);
posT4 = xHgt4;
layW4 = (winW/2)-60;
//alert(xHgt3);
//alert(xHgt4);
if (document.getElementById) {//ie5x-ns6
document.getElementById(id).style.left = posL4;
document.getElementById(id).style.top = posT4;
document.getElementById(id).style.width = layW4;}
if (document.all){//ie4x
document.all(id).style.left = posL4;
document.all(id).style.top = posT4;
document.all(id).style.width = layW4;}
if (document.layers){//ns4x
document.layers[id].left = posL4;
document.layers[id].top = posT4;
document.layers[id].width = layW4;}
}
//end liquidization

//resize functions
function doRe(){
setPos('sec1');
setPos2('sec2');
setPos3('sec3');
setPos4('sec4');}
</script>

</head>

<body bgcolor="#ffffff" onLoad="doRe()" onResize="doRe()">
<script>
//screen size detection
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ng5 =(document.getElementById)? true:false

var winH
var winW

function getSize(){
if (ns4) {
winW = window.innerWidth;
winH = window.innerHeight;
if (window.innerWidth < 530) {winW = 530;}
}
else if (ie4) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
if (document.body.offsetWidth < 530) {winW = 530;}
}
else if (ng5) {
winW = self.innerWidth;
winH = self.innerHeight;
if (self.innerWidth < 530) {winW = 530;}
}
}

//===end screen size detect mode

</script>
<div id="sec1">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr><td class="pagetitle" nowrap>welcome User </td><td class="pagetext" align="left">This is sample demo that shows the potential power of using a liquidized layout off of a grid control schema. This is sample demo that shows the potential power of using a liquidized layout off of a grid control schema. This is sample demo that shows the potential power of using a liquidized layout off of a grid control schema. This is sample demo that shows the potential power of using a liquidized layout off of a grid control schema. <b>sec1</b></td></tr>
</table>
</div>

<div id="sec2">
<table border="0" cellpadding="2" cellspacing="0"><tr><td>
This is some body content to just take up space and see what happens if this were an actual content section. Do not be alarmed this is only a test. <b>sec2</b>

<%=request.servervariables("http_user_agent") %>
</td></tr></table>
</div>

<div id="sec3">
<table border="0" cellpadding="2" cellspacing="0"><tr><td>
This page uses the technique of determining a DIV height to move other DIVs down upon document resize (if content exists above the pert layers). This method does not work in NS4.x due to being unable to ascertain the height of DIVs. The file xxxxxxx will contain a newer method that monitors the screen width and then adjusts the vertical positioning of the DIVs accordingly <b>sec3</b>

<%=request.servervariables("http_user_agent") %>
</td></tr></table>
</div>

<div id="sec4">
<table border="0" cellpadding="2" cellspacing="0"><tr><td>
This is some body content to just take up space and see what happens if this were an actual content section. Do not be alarmed this is only a test. <b>sec4</b>

<%=request.servervariables("http_user_agent") %>

<a href="#" onClick="doRe()">re-flow</a>
</td></tr></table>
</div>
</body>
</html>
whkoh
01-26-2001, 11:28 PM
Try for ref:

http://www.google.com/search?q=redirect+according+to+screen+size&hl=en&lr=&safe=off
Marlboro
03-06-2001, 01:04 PM
Thanks but I'm not really looking for a redirect based on screen size. I'm looking to 'liquify' a page. This is a rather complex routine and requires that the UA be able to ascertain the width and heights of various divs, and calculate remaining div values based on previous div values.

Thanks anyway



Originally posted by whkoh
Try for ref:

http://www.google.com/search?q=redirect+according+to+screen+size&hl=en&lr=&safe=off
Dr. Web
03-06-2001, 02:45 PM
is your code from frontpage Marlboro? if so can you get rid of the <, and I'll take a look at it. Thanks.
Marlboro
03-06-2001, 02:55 PM
Dr Web -
No its not from FP (I'll not take offense this time ;-) )

Apparently I posted with some sort of code switch in the wrong mode when I was a tourist.

I can repost if you like or send the direct to your email - your call.



Originally posted by Dr. Web
is your code from frontpage Marlboro? if so can you get rid of the <, and I'll take a look at it. Thanks.
Dr. Web
03-06-2001, 06:09 PM
sure, to my email. I thought I recognized the &blah blah blah as frontpage gibbrish. I should have known a DHTML guru wopuldn't consider FP!

warpedminds33@hotmail.com
Marlboro
03-07-2001, 10:35 AM
I sent you an email w/ 2 attachments of the code..enjoy.

I've seen some liquidizing code out there but they basically deal with making tables scale to 100%, which is not always an ideal thing to do due to layout or real-estate issues.

I've not seen anything like my code for a liquidized DIV page (both vertical and horizontal)....the horizontal is the simple part. The complex part is vertical spacing/alignment/heights when there are other DIVS directly above (gui wise) other DIVs. The more vertical DIVs, the more complex the code - if you understand what I mean. But its doable, my code is proof it is! - its just a little buggy right now, but once I figure out how/when JS does its calculations in both IE and NS and handle the differences it should be smooth sailing!!



Originally posted by Dr. Web
sure, to my email. I thought I recognized the &blah blah blah as frontpage gibbrish. I should have known a DHTML guru wopuldn't consider FP!

warpedminds33@hotmail.com