PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Dec 21, 2014 9:47 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Wed Jan 14, 2009 12:51 pm 
Offline
Forum Newbie

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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group