Code for banner to auto-adjust to user's resolution?
Posted: Wed Jan 14, 2009 11:51 am
Hello everyone. As part of the web application I am developing, I need to place a business's logo in the form of a banner at the top of the page. This banner should adjust automatically to the user's resolution, so that it always takes up the screen's full width (it would be even better if it could adjust to the web browser's window width, as the user will not always have it maximized). I have tried several approaches to make this work, coding with html and javascript (unfortunately, I cannot use PHP or other languages on this particular issue at the moment), but I have been unsuccessful. Currently the banner is inside a table which contains a few cells, the banner on the first row (as background, although I can change it to "img scr" if need be) and a couple of links on the second row. I tried first setting the table cell's width to 100%, but this only goes as far as the banner goes (the banner is a .jpg image of 1024x75). I also tried creating several banner images for each of the following resolutions: 800x600, 1024x768, 1280x1024, 1440x900, 1600x1200, 1920x1200, and then using the following code to check the user's browser window and select a banner according to it:
However, it is not working. Actually, no banner is shown when using this approach!
A colleague suggested I split the banner into two or three separate images and work with them independently (each image on a different cell on the same row), but I cannot see how this would work.
Any suggestions? It is ok if the solution uses one or several banner images (for each resolution), as long as it can be achieved using html and/or javascript.
If you need any more details please let me know.
Code: Select all
<TABLE border = "0">
<TR>
<script type="text/javascript">
winwidth=document.all?document.body.clientwidth:window.innerwidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
if (winwidth > 640) {
document.write('<TD width="800" height="75" valign="bottom" background="/apps/Comm/images/image800.jpg">'); //800x600
}
else if (winwidth > 800) {
document.write('<TD width="1024" height="75" valign="bottom" background="/apps/Comm/images/image1024.jpg">'); //1024x768
}
else if (winwidth > 1024) {
document.write('<TD width="1280" height="75" valign="bottom" background="/apps/Comm/images/image1280.jpg">'); //1280x1024
}
else if (winwidth > 1280) {
document.write('<TD width="1440" height="75" valign="bottom" background="/apps/Comm/images/image1440.jpg">'); //1440x900
}
else if (winwidth > 1440) {
document.write('<TD width="1600" height="75" valign="bottom" background="/apps/Comm/images/image1600.jpg">'); //1600x1200
}
else if (winwidth > 1600) {
document.write('<TD width="1920" height="75" valign="bottom" background="/apps/Comm/images/image1920.jpg">'); //1920x1200
}
</script>
</TR>
A colleague suggested I split the banner into two or three separate images and work with them independently (each image on a different cell on the same row), but I cannot see how this would work.
Any suggestions? It is ok if the solution uses one or several banner images (for each resolution), as long as it can be achieved using html and/or javascript.
If you need any more details please let me know.