Opera Not Showing Random iframe content

**elleink** · 12-29-2008, 02:34 PM

1) Script Title: Random iframe content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ndomiframe.htm

3) Describe problem: Opera Issue?

I'm using the random iframe script to rotate some homepage collages on a clients site. It works fine in IE, Mozilla and Safari, however I'm having issues with the iframe showing in Opera.

Here's a link to my demo site where I'm working on my project- http://elleinkstudio.com/

I am a novice when it comes to javascript so there is probably something simple I'm overlooking. Any help would be greatly appreciated.

**Snookerman** · 12-29-2008, 03:14 PM

The script works in IE4+/NS6+, and simply displays nothing in all other browsers.

**elleink** · 12-29-2008, 04:08 PM

I've searched high and low for another script and I cannot find one for the life of me.

Basically what I want to do is use a few iframes that contain a flash object and a image that's mapped and have them appear on her site randomly.

I like to provide cross-browser compatibility, is there any other way I can accomplish this?

**Snookerman** · 12-29-2008, 04:21 PM

I'm not really sure why this script is not cross-browser compatible but I'm sure you could use jQuery to write a simple script that should work in most browsers.

Otherwise, maybe someone with a bit more JavaScript knowledge can take a look at the script and rewrite it to work.

**jscheuer1** · 12-29-2008, 05:09 PM

The below is cross browser, and may be used as many times as you like on the page.

Code:

<script type="text/javascript">

//Random iframe content- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit http://dynamicdrive.com
//This credit MUST stay intact for use

if(document.getElementById && window.frames)
 (function(){
//Specify IFRAME display attributes
  var iframeprops='width=130 height=130 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"'

//Specify random URLs to display inside iframe
  var randomcontent=[];
  randomcontent[0]="random1.htm"
  randomcontent[1]="random2.htm"
  randomcontent[2]="random3.htm"
  randomcontent[3]="random4.htm"

//No need to edit after here
  document.write('<iframe id="dynstuff" src="" '+iframeprops+'><\/iframe>');

  var random_iframe = function(){
   var iframeobj=document.getElementById("dynstuff");
   iframeobj.id = '';
   iframeobj.src=randomcontent[Math.floor(Math.random()*randomcontent.length)];
  };

  if (window.addEventListener)
   window.addEventListener('load', random_iframe, false);
  else if (window.attachEvent)
   window.attachEvent('onload', random_iframe);
 })();
</script>

**Snookerman** · 12-29-2008, 05:16 PM

Here's a simple code written with jQuery, you can customize it to work with any element (iframe, div, etc) and you can use it several times by giving the elements different classes:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Random iframe</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
        </script>
        <script type="text/javascript">
        	/*Edit below*/
            var w = 'iframe'; //what is randomized?
            var c = 'random'; //class of random items
            var n = 4; //number of items
            /*Edit above*/
            $(function(){
                $(w + '.' + c).css({
                    'display': 'none'
                });
                var title = w + '.' + c + '[title="' + Math.ceil(Math.random() * n) + '"]';
                $(title).css({
                    'display': 'block'
                });
            });
        </script>
        <style type="text/css">
            iframe.hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <iframe title="1" class="random hidden" src="http://www.google.com/">
            google
        </iframe>
        <iframe title="2" class="random" src="http://www.dynamicdrive.com/">
            dynaimc drive
        </iframe>
        <iframe title="3" class="random hidden" src="http://www.yahoo.com/">
            yahoo
        </iframe>
        <iframe title="4" class="random hidden" src="http://www.w3c.org/">
            w3c
        </iframe>
    </body>
</html>

This one works in all browsers and if the user has JavaScript turned off, the iframe without the hidden class will show, so the users will always see an iframe. Good luck!

Edit: It seems John was quicker, but I'll leave the script here since I believe it could be useful to other people since it's much easier to use and customize than John's.

**elleink** · 12-29-2008, 07:56 PM

I finally got it to work properly. Thank you both so much! I really appreciate it.

Happy New Year to you and yours!

**Snookerman** · 12-29-2008, 07:59 PM

Happy New Year to you too!

Thread: Opera Not Showing Random iframe content

Thread Tools

Search Thread

Opera Not Showing Random iframe content

The Following User Says Thank You to Snookerman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions