0

I am trying to set up a 404 page so that it will show a random graphic each time a user hits it. Currently the way I have it coded, the graphic is only loaded some of the time(I'd say it's about 50/50 right now). Just looking for a better way to code it so that one of the divs will be shown every time.

Here is my HTML:

<div id="errorpages">
    <div class="error">
        <img src="404.gif">
    </div>

    <div class="error">
        <img src="4042.gif">
    </div>
</div>

And the JavaScript:

<script type="text/javascript">
this.random404 = function(){
    var length = $("#errorpages div").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#errorpages div:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
    $('.error').hide();
    random404();
});
</script>

Any help would be greatly appreciated, thanks!

user13286
  • 3,027
  • 9
  • 45
  • 100
  • 1
    [It works for me](http://jsfiddle.net/GaurangTandon/Pcw9x/). Maybe there is some other problem ? – Gaurang Tandon Apr 01 '14 at 15:29
  • You have to keep track of what the user has seen already. Use [jquery.cookie](https://github.com/carhartl/jquery-cookie). – Bogdan Iulian Bursuc Apr 01 '14 at 15:29
  • I don't want to keep track of what the user has seen, I just want it to display a random div each time someone hits that page. If they see the same div 6 times in a row, that's fine, as long as it's random. @Gaurang, It's working there because that's the only code on the page. However, implemented into my site there is a lot of other code so sometimes it's not showing the div(I'm assuming because it's firing before the divs are loaded). – user13286 Apr 01 '14 at 15:37
  • 1
    You're using different selectors for show and hide. Perhaps this is where your error lies. Use `$("#errorpages div").hide()` for consistency. – Preston S Apr 01 '14 at 15:44
  • Thanks Preston, that's a good suggestion, I actually ended up solving in a different way, but I appreciate it. – user13286 Apr 01 '14 at 15:47

3 Answers3

3

Why circulate divs? It adds to much additional code. Just set the images to an array and work off of Math.rand from there. Jquery not necessary. 

<script type="text/javascript">
var images = [], index = 0;
images[0] = "Caption 0 <img src='1.gif'>";
images[1] = "Caption 1 <img src='2.gif'>";
images[2] = "Caption 2 <img src='3.gif'>";
images[3] = "Caption 3 <img src='4.gif'>";
images[4] = "Caption 4 <img src='5.gif'>";
images[5] = "Caption 5 <img src='6.gif'>";
images[6] = "Caption 6 <img src='7.gif'>";
images[7] = "Caption 7 <img src='8.gif'>";
index = Math.floor(Math.random() * images.length);
document.write("<p>Head</p>" + images[index] + "<p>Foot</p>");
</script>
Rich
  • 4,134
  • 3
  • 26
  • 45
1

In case you're using underscore, you could achieve it using the method _.sample(): http://underscorejs.org/#sample

Or you could use the method _.shuffle() and always pick the first element: http://underscorejs.org/#shuffle

Igor Escobar
  • 1,047
  • 1
  • 12
  • 13
  • Thanks Igor, I actually ended up using a very similar solution to the shuffle method, just not using Underscore. Thanks for the suggestion! – user13286 Apr 01 '14 at 15:53
  • 1
    No problem! In case you want to improve your shuffle solution, you may enjoy this discussion: http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript – Igor Escobar Apr 01 '14 at 15:56
0

Ended up going another route. Instead of displaying a random div, I am sorting the divs randomly and then just displaying the first div.

<script type="text/javascript">
var divs = $("div.error").get().sort(function(){ 
            return Math.round(Math.random())-0.5;
           }).slice(0,1);
$(document).ready(function(){
    $(divs).show();
});
</script>

SOURCE

Community
  • 1
  • 1
user13286
  • 3,027
  • 9
  • 45
  • 100
  • I think by doing that you user will end up having to download all images but your javascript will show only one. It's a unnecessary load delivered to your user. A better approach is create a array with all your images, shuffle it and take its first position then take its value and set it to your image's src attribute. – Igor Escobar Apr 01 '14 at 16:02