hamburgerlove413
-
Posts
29 -
Joined
-
Last visited
hamburgerlove413's Achievements
Member (2/5)
0
Reputation
-
Hello, So I have this program I'm trying to create where there are 9 articles (the html tag) and I want 3 random ones to display at any one time. When you click the link in the article, it should bring up that link in an iframe. A skip button then appears and when you click it, the iframe should disappear and three different random articles should come up. It works fine for the first time you click, but any time after that it just gets more and more messed up. If anyone can look at my code and tell me where I've gone wrong, it would be a great help. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New Path Page</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <style> article { color: white; } article a, article a:visited, article a:hover { color: white; } .offer-one, .offer-two, .offer-three, .offer-four, .offer-five, .offer-six, .offer-seven, .offer-eight, .offer-nine { height: 300px; padding-top: 18px; text-align: center; font-size: 20px; } .offer-one { background-color: #93104d; } .offer-two { background-color: #285b6c; } .offer-three { background-color: #368a2c; } .offer-four { background-color: #93104d; } .offer-five { background-color: #285b6c; } .offer-six { background-color: #368a2c; } .offer-seven { background-color: #93104d; } .offer-eight { background-color: #285b6c; } .offer-nine { background-color: #368a2c; } iframe { width: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe></iframe> <a class="skip">SKIP</a> <div class="offers"> <div class="row"> <article class="col-md-4 offer-one"> <h2>test</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-two"> <h2>test2</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-three"> <h2>tes3</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-four"> <h2>test4</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-five"> <h2>test5</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-six"> <h2>tes6</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-seven"> <h2>test7</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-eight"> <h2>test8</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-nine"> <h2>tes9</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> </div> <? // end of row ?> </div> </div> <? //end of container ?> </body> </html> and the Jquery: <script> $(window).load(function() { $('.offers article').hide(); $('iframe').hide(); $('.skip').hide(); var offers = [".offer-one",".offer-two",".offer-three",".offer-four",".offer-five",".offer-six",".offer-seven",".offer-eight",".offer-nine"]; var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); $('.offers article a').click(function(e) { e.preventDefault(); var setSRC = $(this).attr('href'); $('iframe').attr('src',setSRC); $(offerOne).fadeOut(1); $(offerTwo).delay(200).fadeOut(1); $(offerThree).delay(400).fadeOut(1, function() { $('iframe').fadeIn(1, function() { $('.skip').show(); }); }); }); $('.skip').click(function(e) { e.preventDefault(); $('.offers article').hide(); $('.skip').hide(); $('iframe').fadeOut(1); $('iframe').hide(); var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); }); }); </script>