CODEWITHSUNDEEP
javascripthtmlcssonclickclick-counting
deckard
deckard

Reputation: 11

How to make a clickcounter (corresponding with jQuery 2.0.2/2.0.1)

I'm trying to make a fundraising webpage (for charity), and for the display I've decided to go with a rabbit jumping Around The World.

What I've got so far is a non looping gif that plays on click, and can only be clicked once every so many seconds. you can check out the webpage here.

This is a rough version of what the finnished product will look like, but I want to add a clickcounter to the picture, so that everytime the rabbit jumps, +1 gets added to the count, and then I will make the clicks go universal (but we'll take that some other time). this is a link to a JSFiddle containing the codes I've used so far (unincluding some minor tweaks). How can I add a clickcounter to this script? Feel free to use the JSFiddle link, and check out the page!

Heres the full script for the page in its current state:

<html>
<head>
<title>Around The World</title>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>

<style type="text/css">
    body {margin:0; }
</style>

<script>
$(function(){
    var image = new Image();
    image.in_action = false;  // flag to determine current state. Initialize to ready to     animate.
    image.duration = 750;  // This is rough, if you are creating the gif you can peg this     to the proper duration
    image.src ='transparent.gif';
    $('#img').click(function(){
        if (!image.in_action) {
           image.in_action = true;  // Set the image as in progress
           $(this).attr('src',image.src);
            window.setTimeout(function() {
                image.in_action = false;  // After image.duration amount of miliseconds,     set as finished
            }, image.duration);
        }
    });
});
</script>


<style>
img {
    position: relative;
    top: 100px;
    width:150px;
    height:206px;
}
</style>

</head>
<body bgcolor="00FFFF">

<center>
<img id = "img"

src = "still.png">
<center>

</body>
</html>

Thanks to all in advance!

Upvotes: 0

Views: 44

Answers (1)

fast
fast

Reputation: 885

Not sure if i understood right, but might be a simple global variable:

...
<script>

var counter = 0;

$(function(){
    var image = new Image();
...
   if (!image.in_action) {
       counter++;               // Increase counter by 1
       $('#click-counter').text('Number of clicks: '+counter); // maybe show somewhere
       image.in_action = true;  // Set the image as in progress
...

Upvotes: 0

Related Questions