Code for banner to auto-adjust to user's resolution?

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Code for banner to auto-adjust to user's resolution?

Postby PHPeter » Wed Jan 14, 2009 12:51 pm

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:

Syntax: [ Download ] [ Hide ]
 
<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>
 


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.
PHPeter
Forum Newbie
 
Posts: 7
Joined: Tue Dec 12, 2006 7:21 pm

Return to Miscellaneous

Who is online

Users browsing this forum: No registered users and 2 guests