Menu
Hi there!
I have a function in my website to place the stuff in the screen depending on user’s resolution, this function is called with the event onload (because if I just execute the code before onload is done it returns an error because body is null, can I just place the javascript code after body tag??)
The problems I have:
– There’s a small flash mp3 player in the site loading some songs: the onload event doesn’t take place till the mp3 are loaded, so the page looks like a mess till that moment.
– I’m using the following code to adapt contents to resolution, it works fine with some browsers but doesn’t work in older IE or FF.
In the code:
Wrapper is the main container.
control_vert_col is a vertical column with position “absolute” that must allways be 30 px inside wrapper.
[CODE]
function adaptBodyBack()
{
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != ‘undefined’)
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != ‘undefined’
&& typeof document.documentElement.clientWidth !=
‘undefined’ && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName(‘body’)[0].clientWidth,
viewportheight = document.getElementsByTagName(‘body’)[0].clientHeight
}
if(viewportwidth > 1920)
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1920×1200.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1680) && (viewportwidth <= 1920))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1920×1200.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1600) && (viewportwidth <= 1680))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1680×1050.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1440) && (viewportwidth <= 1600))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1680×1050.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1360) && (viewportwidth <= 1440))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1440×900.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1280) && (viewportwidth <= 1360))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1360×768.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1152) && (viewportwidth <= 1280))
{
var startposition = (((viewportwidth – 1000) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1280×1024.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘1000 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 1024) && (viewportwidth <= 1152))
{
var startposition = (((viewportwidth – 800) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1152×864.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘800 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if((viewportwidth > 800) && (viewportwidth <= 1024))
{
var startposition = (((viewportwidth – 800) / 2) + 30);
document.body.style.backgroundImage = ‘url(images/1024×768.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘800 px’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if(viewportwidth == 800)
{
var startposition = 30;
document.body.style.backgroundImage = ‘url(images/1024×768.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘100%’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if(viewportwidth < 800)
{
var startposition = 0;
document.body.style.backgroundImage = ‘url(images/1024×768.jpg)’;
document.getElementById(‘wrapper’).style.width = ‘100%’;
document.getElementById(‘control_vert_col’).style.marginLeft = startposition+”px”;
}
if(viewportheight < 700)
{
document.getElementById(‘control_vert_col’).style.backgroundPosition = ‘0px 20px’;
}
}