PDA

View Full Version : Frames issue



Haisook
07-28-2005, 07:36 PM
I'm using frames with absolute positioning. Basically, I've edited a premade template which - as an example - has this code for a frame:

<div id="sidebar" style="position:absolute; width:240px; height:385px; z-index:1; left: 115px; top: 185px; visibility: visible;" class="dashedborder">
<table width="220px" height="200px" border="0" align="center" cellpadding="10" cellspacing="0">

The problem is when I "restore" a window, the frames are not in the place I want them to be. When the window is "maximized", it's fine.

My website is: http://sp-ss.blogspot.com/
[Try to view it maximized, then restore the window and resize it to a smaller version]

So I need the frames to be fixed, whether I change the size of the window or not.

Thanks a lot

jscheuer1
07-31-2005, 09:54 PM
I recently developed this script. It may fit the bill, configure it and put it in the head:


<script type="text/javascript">

/*Absolute Elements Left Adjust to Window Width
with exclude Id's Array option - DOM version
John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */

/*Set to orignal offset of left "margin", the
distance from left that your content appears
fullscreen in your preferred resolution. */
var origOffset=116

/*IMPORTANT NOTE! - The first display element
on your page with the above value set for its
left position must have an id. */

/*Set to preferred resolution, the resolution
at which the layout looks centered or 'good'
to you when viewed full screen. */
var prefRes=1024

var excludeIds=new Array() // <<< Do not edit or remove this line!

/*Set Id's to be excluded below, use as many as you need.
Things like special or temporary elements used by
other scripts are good candidates. This script will
assign the id 'missing#' to absolutely positioned
elements with no id, where '#' is the element's position
in the DOM. If you want any of these elements excluded,
give them a unique id and add it to the list below. */

excludeIds[0]='temp'
excludeIds[1]='motiongallery'
excludeIds[2]='u1'

/*This script automatically appends itself to any existing
onload and onresize events. However, if you have onload
or onresize events from other scripts that are dependent upon
the layout and dimensions of the page, they need to run after
this script. If so, put their events in the function below. */

function addLoads(){ // <<< Do not edit or remove this line!
if (typeof(restarea)!=='undefined') // test variable 'restarea' from script 'cmotion'
fillup(); // onload function from 'cmotion'
return;
} // <<< Do not edit or remove this line!

/////////////////////No Need to Edit Below/////////////////////
var runCount=1, layOrigNew=new Array();
function iecompattest(){ // Credit: Dynamic Drive
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function exIds(el){
var idTest=1
for (j = 0; j < excludeIds.length; j++)
if (excludeIds[j]==el.getAttribute('id'))
idTest=0
return idTest
}

function assignId(el){
var idTest=1
if (el.getAttribute('id')==null||el.getAttribute('id')==''){
idTest=0
el.setAttribute('id', 'missing'+i, 0)
}
return idTest
}

function leftAdjLayers(){
var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mac')!==-1&&agt.indexOf("msie")!==-1){
addLoads();
return;
}
var ray, wWidth, leftAdj=0, layersReAdj=0;
wWidth=window.innerWidth? window.innerWidth : iecompattest().offsetWidth
leftAdj=Math.floor((wWidth-prefRes)/2)
if (runCount){
layers=document.getElementsByTagName('*')
ray=layers
}
else
ray=layOrigNew
for (i = 0; i < ray.length; i++){
if (runCount)
layOrigNew[i]=[' ', ' ', ' ']
if (exIds(layers[i])){
if (runCount)
layOrigNew[i][0]=origOffset<=layers[i].offsetLeft? layers[i].offsetLeft : ' '
layOrigNew[i][1]=layOrigNew[i][0]+leftAdj
if (runCount&&layOrigNew[i][0]!==' ')
layOrigNew[i][2]=assignId(layers[i])? layers[i].getAttribute('id', 0) : 'missing'+i
}
}
while (layOrigNew[0][2]==' '||layOrigNew[0][2].indexOf('missing')!==-1)
layOrigNew.splice(0, 1)
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][1]<=origOffset&&layOrigNew[i][1]!==' ')
layersReAdj=Math.min(layOrigNew[i][1],layersReAdj)+origOffset
if (layersReAdj<0)
for (i = 0; i < layOrigNew.length; i++)
layOrigNew[i][1]=(layOrigNew[i][1]!==' ')? layOrigNew[i][1]-layersReAdj : ' '
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][0]!==' '){
document.getElementById(layOrigNew[i][2]).style.left=layOrigNew[i][1]+'px'
}
runCount=0
addLoads();
}

if ( typeof window.addEventListener != "undefined" ){
window.addEventListener( "load", leftAdjLayers, false );
window.addEventListener( "resize", leftAdjLayers, false );
}
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", leftAdjLayers );
window.attachEvent( "onresize", leftAdjLayers );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
leftAdjLayers();
};
}
else
window.onload = leftAdjLayers;

if ( window.onresize != null ) {
var oldOnresize = window.onresize;
window.onresize = function ( e ) {
oldOnresize( e );
leftAdjLayers();
};
}
else
window.onresize = leftAdjLayers;

}
</script>