-
4 iframes randomising content (URLs)
hi all. i would like these four iframes to randomise on refresh (or even by a button press) from a list of URLs I set.
It would be cool if it was a javascript.
here's the code
HTML Code:
</html>
<head>
<title>Untitled Document</title>
</head>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:50%; height:50%; border:0; }
</style>
<body marginheight="0" marginwidth="0">
<iframe src="http://www.yahoo.com/" width="50%" height="50%" frameborder="none" align="left">
</iframe>
<iframe src="http://www.nytimes.com/" width="50%" height="50%" frameborder="none" align="top" align="right">
</iframe>
<iframe src="http://www.youtube.com/" width="50%" height="50%" frameborder="none" align="right">
</iframe>
<iframe src="http://www.google.com/webhp?hl=en" width="50%" height="50%" frameborder="none" align="bottom">
</iframe>
</body>
</html>
any ideas....
thanks
ben
-
If it's when you refresh, then you can do this server-side in PHP. If you're determined to do it in Javascript, look at the [minicode]window.onLoad[/minicode] event, the [minicode]Math.random[/minicode] function, [minicode]document.getElementById[/minicode], and the frame [minicode]src[/minicode] property that you can set via JS.
-
i am really bad at configuring php....very new to it..
but i found this...for JS
HTML Code:
<script language="JavaScript1.2">
//Random iframe content- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
//For full source code, and Terms Of use, visit [url]http://dynamicdrive.com[/url]
//This credit MUST stay intact for use
var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
//Specify IFRAME display attributes
var iframeprops='width=50% height=50% marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" '
//Specify random URLs to display inside iframe
var randomcontent=new Array()
randomcontent[0]="http://www.yahoo.com/"
randomcontent[1]="http://www.google.com/"
randomcontent[2]="http://www.nytimes.com/"
randomcontent[3]="http://www.youtube.com/"
//No need to edit after here
if (ie||dom)
document.write('<iframe id="dynstuff" src="" '+iframeprops+'></iframe>')
function random_iframe(){
if (ie||dom){
var iframeobj=document.getElementById? document.getElementById("dynstuff") : document.all.dynstuff
iframeobj.src=randomcontent[Math.floor(Math.random()*randomcontent.length)]
}
}
window.onload=random_iframe
</script>
however..... i doesn't allow me to use this in multiple iframes?!?!
any ideas...
ben
-
I would definitely do it in php.
Will post a script in a moment.
Sean
-
Yer tis...
Code:
<?php
/* list of all possible sites */
$sites = array();
$sites[] = "seanmiller.net";
$sites[] = "bbc.co.uk";
$sites[] = "yahoo.com";
$sites[] = "webdesignforums.net";
$sites[] = "google.com";
$sites[] = "glastonbury.co.uk";
$sites[] = "glastonburyfestivals.co.uk";
$sites[] = "shepton.biz";
$sites[] = "www.mendip.gov.uk";
$sites[] = "theregister.co.uk";
/* now pick random 4 */
$keys = array_rand($sites,4);
/* assign to variables */
$site1 = "http://" . $sites[$keys[0]];
$site2 = "http://" . $sites[$keys[1]];
$site3 = "http://" . $sites[$keys[2]];
$site4 = "http://" . $sites[$keys[3]];
?>
<html>
<head>
<title>Random Example</title>
</head>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:50%; height:50%; border:0; }
</style>
<body marginheight="0" marginwidth="0">
<iframe src="<? echo $site1; ?>" width="50%" height="50%" frameborder="none" align="left"></iframe>
<iframe src="<? echo $site2; ?>" width="50%" height="50%" frameborder="none" align="top" align="right"></iframe>
<iframe src="<? echo $site3; ?>" width="50%" height="50%" frameborder="none" align="right"></iframe>
<iframe src="<? echo $site4; ?>" width="50%" height="50%" frameborder="none" align="bottom"></iframe>
</body>
</html>
See at http://seanmiller.net/frames
Hope that helps,
Sean
-
fantastic sean..that's exactly it
however... i am really timid about PHP - i just don't know how to configure this on my server.....i have godaddy..
hmm...
is there a simple way around this?
ben
-
If you have Linux hosting then you'll have php by default.
Upload the script above with the extension .php
ie. index.php or similar
If it works then you're sorted... there is no "configuration", so to speak.
Sean
-
ok...
sounds easy.... i'll give it a go...
don't i need to fiddle with mySQL or something?!
thanks
-
Nope, definitely not...
...unless you want to store stuff in a database, but it doesn't sound like you do. As I said, you should be able to tell if it works by simply uploading the file with the extension ".php" rather than ".html"
Sean
-
hey thanks very much...
it's up now..
www.palacepalace.com/gallery.php
works a treat..
