randomizing link problem

hamburgerlove413 · November 12, 2015

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>

Edited November 12, 2015 by hamburgerlove413

Sign In

randomizing link problem

Recommended Posts

hamburgerlove413

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information