4 iframes randomising content (URLs)

**benreynolds4** · Jun 12th, 2008, 06:41 AM

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

**Web Design Forums** · Jun 12th, 2008 06:41 AM

**Shadowfiend** · Jun 12th, 2008, 07:18 AM

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.

**benreynolds4** · Jun 12th, 2008, 07:23 AM

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

**seanmiller** · Jun 12th, 2008, 07:39 AM

I would definitely do it in php.

Will post a script in a moment.

Sean

**seanmiller** · Jun 12th, 2008, 07:51 AM

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

**benreynolds4** · Jun 12th, 2008, 08:31 AM

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

**seanmiller** · Jun 12th, 2008, 08:37 AM

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

**benreynolds4** · Jun 12th, 2008, 08:41 AM

ok...
sounds easy.... i'll give it a go...

don't i need to fiddle with mySQL or something?!
thanks

**seanmiller** · Jun 12th, 2008, 08:46 AM

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

**benreynolds4** · Jun 12th, 2008, 08:52 AM

hey thanks very much...

it's up now..

www.palacepalace.com/gallery.php

works a treat..

Thread: 4 iframes randomising content (URLs)

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Search tags for this page

random iframe