Random iframe onload as fullscreen background

Discussion in 'JavaScript' started by 7643sfsag6, Jan 27, 2016.

0
  1. #1
    Hi all, I have looked all over but cant seem to find how to do this:

    Basically I would like to have an iframe that is my background as fullscreen behind everything.

    The "src" of the iframe I would like to randomly change onload. I think I will have about 3 or 4 sources.

    This is what I have thus far, but nothing is working!!!

    Any ideas?

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script>
function getRandomUrl(urls) {
    var minIndex = 0;
    var maxIndex = urls.length - 0.5;
    var randomIndex = Math.floor(Math.random() * (maxIndex - minIndex)) + minIndex;
    return urls[randomIndex];
}

var urls = [
"http://www.7-zip.org/",
"http://www.win-rar.com/",
"http://www.winzip.com/"];

var randomSelectedUrl = getRandomUrl(urls);

$("#vitrine").html(
"<iframe class='random-iframe' src='" + randomSelectedUrl + "' width='100%' height='100%' frameborder='0' scrolling='yes' seamless='seamless'></iframe>");
</script>
<style>
iframe.random-iframe { display: none; }
vitrine {
    text-align: center;
    width: 100%;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
}
.iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

</head>
<body>
<div id="vitrine"></div>
<iframe class="random-iframe" src="http://www.winzip.com/" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
</body>
</html>
    Code (markup):
     
    7643sfsag6, Jan 27, 2016 IP
  2. 7643sfsag6

    7643sfsag6 Member

    Messages:
    58
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    ok done,

    was missing some schoolboy errors


    <html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<style>
vitrine {
    text-align: center; width: 100%; vertical-align: middle;height: 100%; display: table-cell;}
div,
body,
html {height: 100%; width: 100%;}
</style>
</head>

<body>
<div id="vitrine"></div>

<script>
function getRandomUrl(urls) {
    var minIndex = 0;
    var maxIndex = urls.length - 0.5;
    var randomIndex = Math.floor(Math.random() * (maxIndex - minIndex)) + minIndex;
    return urls[randomIndex];
}
var urls = [
"http://www.7-zip.org/",
"http://www.win-rar.com/",
"http://www.winzip.com/"];

var randomSelectedUrl = getRandomUrl(urls);

$("#vitrine").html(
"<iframe class='random-iframe' src='" + randomSelectedUrl + "' width='100%' height='100%' frameborder='0' scrolling='no' seamless='seamless'></iframe>");
</script>
</body>
</html>
    Code (markup):
     
    7643sfsag6, Jan 28, 2016 IP