Back To Programming / Scripting / Coding Forum

Javascript/HTML wondering

  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 6th, 2003, 9:55 am

Would it be possible to have javascript auto-detect the resolution width and then take that information and place it into the 'width=' on an image so that it would automatically make the width of the image the width of the screen at full-screen view? I don't know much about HTML or javascript but I am trying to learn more of it... If so how would you auto-load it into the 'width='. That is the only thing I am having trouble with. If you know the code I should have would you post it or e-mail it to me? This way I can make sure my code is correct. Thanks for the help!
Sart
*the confused lil web developer*
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 6th, 2003, 9:55 am

  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post November 6th, 2003, 12:04 pm

Code: [ Select ]
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.innerWidth) {
var imgWidth = window.innerWidth;
} else if (document.all) {
var imgWidth = document.body.clientWidth;
}
document.write("<IMG SRC='image1.jpg' WIDTH='"+imgWidth+"' HEIGHT='100'>");
-->
</SCRIPT>
  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. if (window.innerWidth) {
  4. var imgWidth = window.innerWidth;
  5. } else if (document.all) {
  6. var imgWidth = document.body.clientWidth;
  7. }
  8. document.write("<IMG SRC='image1.jpg' WIDTH='"+imgWidth+"' HEIGHT='100'>");
  9. -->
  10. </SCRIPT>


Probably something like that, I didn't get a chance to test it.



Or depending on what you are trying to do you can set it as a background image for a table cell whos width is set to 100%. This will tile the image across the full span of the table cell.
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 6th, 2003, 1:22 pm

First I must say THANKS! You confirmed what I thought was possible. The javascript is what I was having problem with... The inserting an image.. IT WORKS! Now I just gotta find out auto-refresh page. First gotta find out if it even xist... Well yet again me and my teacher thank you...
Sart
*is happy*
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post November 6th, 2003, 1:56 pm

Yeah, you can auto-refresh, there is a Javascript method, but the META TAG method is easier (unless you are doing a refresh on action event instead of refresh after x number of seconds)...

This should help...

http://webdesign.about.com/cs/metatags/a/aa080300a.htm
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 7th, 2003, 9:21 am

Well then... Do you know where I might find Javascript code on-line? I need to find a way to refresh when taking the screen from full to windowed. So the new banners work properly. If you don't understand what I am saying please say so... I know I am confusing... Just don't know how to get my thoughts into words is all. OK! So ramblin over now.. Thanks!
Sart!
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post November 7th, 2003, 2:47 pm

In the function you call to resize your window, try adding
Code: [ Select ]
window.location.refresh();
That will run along with the code in your function when it is run (assuming your window resize code is inside a function).
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 10th, 2003, 12:28 pm

Well.. The window.location.refresh(); is not working... I know it is reload() instead of refresh but it is now autorefresh... I think I need something that is like this
if(window.size.resize()){
window.location.reload();
}
That does not seem to work well either... I think I am calling the resize function wrong... It is not a function I made but one that is a normal javascript function... I just don't know the name of it. Is there a way to do a refresh this way? Once the screen is resized it refreshes.. That is my long drawn-out question. TkS!
Sart
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post November 10th, 2003, 1:14 pm

Ok, well I am in a rush so I don't have time to check things out, but try this as a work around...

Set the IMG Width to 100%...

Code: [ Select ]
<IMG SRC="yourImage.jpg" WIDTH="100%" HEIGHT="100" BORDER="0">
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 12th, 2003, 11:11 am

That does not work... I tried that before.
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 12th, 2003, 1:37 pm

OK! I got a working code... Somewhat... It reloads the page.. I want a refresh.. Is there a javascript function that will refresh the page? Like window.location.reload() reloads the page... I tried the window.location.refresh() and window.location.refresh and window.refresh() and window.refresh .... I can't get it! GARR... OH! if anyone wants to know how to do it just type in the body tag *in HTML* onResize= "window.location.reload()" This will reload the page... it takes it a long time to reload the page rather than refresh and I don't want it to take a long time to view my page... SO! Wheew!
Your lil coder! Sart!
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 13th, 2003, 12:43 pm

Yahoo! I got it workin... Check this out.
Code: [ Select ]
function refresher(){
if (time !== 0){
window.location.href = "call page here";
} else {
time = 1;
}
var time = 0;
}
</script>
</head>
<body onResize="refresher()"><table width="100%" border="0">
<tr>
<td><SCRIPT LANGUAGE="JavaScript" type="text/javascript">
if (window.innerWidth) {
var imgWidth = window.innerWidth- 6;
} else if (document.all) {
var imgWidth = document.body.clientWidth - 6;
}
document.write("<img src="call image here" WIDTH='"+imgWidth+"' HEIGHT='200'>");
</SCRIPT>
</td> </tr> </table>
  1. function refresher(){
  2. if (time !== 0){
  3. window.location.href = "call page here";
  4. } else {
  5. time = 1;
  6. }
  7. var time = 0;
  8. }
  9. </script>
  10. </head>
  11. <body onResize="refresher()"><table width="100%" border="0">
  12. <tr>
  13. <td><SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  14. if (window.innerWidth) {
  15. var imgWidth = window.innerWidth- 6;
  16. } else if (document.all) {
  17. var imgWidth = document.body.clientWidth - 6;
  18. }
  19. document.write("<img src="call image here" WIDTH='"+imgWidth+"' HEIGHT='200'>");
  20. </SCRIPT>
  21. </td> </tr> </table>


That is the code i used to get the page to refresh on resize.... AND get the image to be the size of the screen (minus 6 pixels for the end of the cell... Don't know why though) OK... So... I am not a genius but I feel good about myself now.. YaHOO!!!
Sart!
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post November 13th, 2003, 3:09 pm

Congrats, sorry I wasn't able to try and help, been backed up with other coding projects.

And as for the minus 6 part, I think I know why.

The code gets the available viewable space of your browser window, however, it does not exclude HTML Margins (html pages have a default margin area around them) since you can remove/change them so they still count as just viewable area. So since your html page probably still has these margins then it threw off the sizing a bit.
  • sartori
  • Novice
  • Novice
  • No Avatar
  • Joined: Nov 06, 2003
  • Posts: 17
  • Status: Offline

Post November 14th, 2003, 9:20 am

Well.. TkS yet again..
Sart!
  • behill01
  • Born
  • Born
  • No Avatar
  • Joined: Nov 17, 2004
  • Posts: 1
  • Status: Offline

Post November 17th, 2004, 10:11 pm

I just thought i'd chime in here. There is a much easier way... Simply modify your <BODY> tag as follows:

<body onResize="window.location=window.location;">

I relize this is a similar solution, but easier to follow and it worked great for me. I also note that this thread is OLD :shock:, but since I still found it through Google over a year later, I figured I'd go ahead and reply. Best to everyone!

-BEH

Page 1 of 1

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 172 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.