Jump to content

randomizing link problem


hamburgerlove413

Recommended Posts

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 by hamburgerlove413
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.