•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 402,884 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,102 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser: Programming Forums
Views: 2762 | Replies: 20
 |
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation: 
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
If your pages are online, send me a link and I will take a look at them.
•
•
Join Date: Aug 2006
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by Deacon J
If your pages are online, send me a link and I will take a look at them.
They're not online yet. Right now, they're on a test site that can only be viewed internally here at work. They should go live next week. Me trying to have the page adjust for people with 800x600 is going to be a post-launch project.
But, here's a screenshot.
http://i44.photobucket.com/albums/f3...NES/design.gif
Last edited by AlloyNES : Aug 11th, 2006 at 2:43 pm.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
Re: Is this possible? plz help Oh crap...
The initial line in that first code
Should be
Plus it should have been in a function and called after the page loaded.
Here is the corrected code:
Looks like I forget to change the second lines to widths as well...no wonder the thing didn't work! Sorry about that.
Here is an alternative to the switch-case statement as well:
The initial line in that first code
pageImage = getElementById('imageID');Should be
var pageImage = document.getElementById('imageID');Plus it should have been in a function and called after the page loaded.
Here is the corrected code:
window.onload = setImage;
function setImage() {
var pageImage = document.getElementById('imageID');
switch(screen.width) {
case 640:
pageImage.style.height = '480px';
pageImage.style.width = '640px';
break;
case 800:
pageImage.style.height = '600px';
pageImage.style.width = '800px';
break;
case 1024:
pageImage.style.height = '768px';
pageImage.style.width = '1024px';
break;
case 1152:
pageImage.style.height = '864px';
pageImage.style.width = '1152px';
break;
case 1280:
pageImage.style.height = '1024px';
pageImage.style.width = '1280px';
break;
case 1600:
pageImage.style.height = '1200px';
pageImage.style.width = '1600px';
break;
case 1920:
pageImage.style.height = '1440px';
pageImage.style.width = '1920px';
break;
default :
pageImage.style.height = '768px';
pageImage.style.width = '1024px';
break;
}
}Looks like I forget to change the second lines to widths as well...no wonder the thing didn't work! Sorry about that.
Here is an alternative to the switch-case statement as well:
onload = setImage;
function setImage() {
var ww = getWindowWidth();
var im = document.getElementById('imageID');
if (ww < 800) {
im.style.height = 500 + 'px';
im.style.width = 500 + 'px';
}
else if (ww >= 800 && ww < 1024) {
im.style.height = 724 + 'px';
im.style.width = 724 + 'px';
}
else {
im.style.height = 1000 + 'px';
im.style.width = 1000 + 'px';
}
}
function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number')
windowWidth = window.innerWidth;
else {
if (document.documentElement && document.documentElement.clientWidth)
windowWidth = document.documentElement.clientWidth;
else {
if (document.body && document.body.clientWidth)
windowWidth = document.body.clientWidth; }; };
return windowWidth;
};
Last edited by FC Jamison : Aug 11th, 2006 at 3:05 pm.
•
•
Join Date: Aug 2006
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
So... of the last two codings you listed in your latest reply, which one do I use in the .js file? When you said alternative, does that mean its optional? I'm slightly confused.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
Use one or the other in your .js file. They should both yield the same result.
You can then modify the code to fit your needs.
You can then modify the code to fit your needs.
Last edited by FC Jamison : Aug 11th, 2006 at 3:35 pm.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
Well...almost the same result. The first code checks the screen resolution, the second code checks the browser window width.
It depends on what you want to base your image size on.
It depends on what you want to base your image size on.
•
•
Join Date: Aug 2006
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
the body-image stayed the same when I changed resolutions. Not sure what I'm doing wrong.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
did you refresh your browser window?
It will only resize the image when the page is loaded.
It will only resize the image when the page is loaded.
Last edited by FC Jamison : Aug 11th, 2006 at 4:00 pm.
•
•
Join Date: Aug 2006
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
I'm staying with the first code then. I did refresh. But, as I said before, it doesn't seem to be functioning the way I want.
Is there a way to have the site detect the resolution of the computer and if it's 800x600, change out the main body (which is one big image) with another one. What I have for all the pages so far looks great on anything greater than 800x600. What I need to do is make sure it is viewable without scrolling for ppl who use 800x600. If I could have the regular image change to a customized image for 800x600 viewing, that would be great. This way we wouldn't hafta worry about the main image chaning sizes. It would just change the image filename. Can this be done?
Such as (this is just to spell it out):
careers1.jpg is tailored for 1024x768 and higher
careers2.jpg is tailored for 800x600
If the resolution of the cpu is 800x600
Change careers1.jpg to careers2.jpg
ELSE
stay as careers1.jpg
Is there a way to have the site detect the resolution of the computer and if it's 800x600, change out the main body (which is one big image) with another one. What I have for all the pages so far looks great on anything greater than 800x600. What I need to do is make sure it is viewable without scrolling for ppl who use 800x600. If I could have the regular image change to a customized image for 800x600 viewing, that would be great. This way we wouldn't hafta worry about the main image chaning sizes. It would just change the image filename. Can this be done?
Such as (this is just to spell it out):
careers1.jpg is tailored for 1024x768 and higher
careers2.jpg is tailored for 800x600
If the resolution of the cpu is 800x600
Change careers1.jpg to careers2.jpg
ELSE
stay as careers1.jpg
Last edited by AlloyNES : Aug 11th, 2006 at 4:07 pm.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
Hmm...
yes...it can be done.
You will need to creat another .js file and add the following:
You call this javascript from the location in the html page where you want the image to appear.
[html]
<body>
<script src="image.js" type="text/javascript"></script>
</body>
[/html]
Also, screen.width worked in my browser, but you might also try window.screen.width in the switch statement of the codes I posted earlier.
There is a more complicated code I have been working on that will do exactly what you want...resize the page when the resolution (or browser size) is changed. It will take me a day or so to see if I can get it to work right in Opera.
yes...it can be done.
You will need to creat another .js file and add the following:
if (window.screen.width <= 800)
document.write('<img name="" src="image1.jpg" width="779" height="550" alt="">');
else
document.write('<img name="" src="image2.jpg" width="1003" height="725" alt="">');You call this javascript from the location in the html page where you want the image to appear.
[html]
<body>
<script src="image.js" type="text/javascript"></script>
</body>
[/html]
Also, screen.width worked in my browser, but you might also try window.screen.width in the switch statement of the codes I posted earlier.
There is a more complicated code I have been working on that will do exactly what you want...resize the page when the resolution (or browser size) is changed. It will take me a day or so to see if I can get it to work right in Opera.
Last edited by FC Jamison : Aug 11th, 2006 at 4:31 pm.
|
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- can someone plz help me with this? (Visual Basic 4 / 5 / 6)
- I NEED SUPPORT **"IMPORTANT"** PLZ HELP (Windows NT / 2000 / XP / 2003)
- Windows media player (Windows NT / 2000 / XP / 2003)
- Bridge.dll...Make it go away, Plz (Viruses, Spyware and other Nasties)
- can sum1 look @ dis plz (Viruses, Spyware and other Nasties)
- Hijackthis log file - plz help (Viruses, Spyware and other Nasties)
- IE not working...PLZ help :cry: (Web Browsers)
- PLZ help it's urgent! (Web Browsers)
- plz help ppl...... (Computer Science and Software Design)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: email address harvesting - prevention?
- Next Thread: Youth Group Forum - again
