JavaScript onLoad resize
Question
I'm fairly new to programing, especially javascript. I have created what I am regarding as an net-art project that refreshes a browser and cycles through a series of images. I want the browser window to automatically resize to the dimensions of the images, 612x612 px. I've tried everything I can think of, everything I've come across on the web, and nothing seems to work with the code I have set up for the refresh and image load. I need assistance.
Let me say that I am normally against such unser unspecified browser resizes or any intrusive script that doesn't allow the user to make that decision on his/her own. But this is an art project and will only exist as part of a gallery on my own website and the user will be warned ahead of time, before clicking the link, that their browser will resize.
What I want is for the browser to resize to the specified dimensions when the page loads, then cycle through the images, via the automatic refresh.
So please, anyone who would be willing to offer their assistance with this I would be very very grateful. I've gotten pretty far I think and this resize is the last little bit of the puzzle. Thank you in advance.
You can see the rough project with no resize here: http://jasonirla.com/bgchange%202/
and the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="title" content="Background Change" />
<meta name="description" content="Background Change" />
<title>Everyday Sky</title>
<script type="text/javascript">
// auto refresh window PT 1
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// no. of images in folder is 43
var totalCount = 43;
// change image on refresh
function ChangeIt() {
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpeg';
}
</script>
</head>
<!-- Refresh PT 2 with timer in seconds 5000=5seconds-->
<body onload="JavaScript:timedRefresh(100);">
<script type="text/javascript">
ChangeIt();
</script>
<style type="text/css">
body {
background-repeat: no-repeat;
}
</body>
</html>
2 answers
solution1
1 2012-07-22 19:55:52
It's true, you can only set the size of a browser window by creating a new window with JavaScript but many security settings will block pop-up windows. I think it's bad UI design to do what you're attempting anyway. If you really want something modern and highly functional, Lightbox (as mentioned above) is a great tool as well as the dialog box in the jQuery UI.
solution2
0 2012-07-22 20:37:59
Since this for an exhibition, you will choose what browser to use but most new browsers dont let JavaScript resize them anymore. Worth a try, though.
<body onload="JavaScript:timedRefresh(100);resizeTo(500,500);self.moveTo(640,10);>
....
</body>
Cheers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.