SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    89
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Show a gif on button click then hide it

    Hello.
    I want to make that when an user clicks on a button, like to summon a pokemon, it will show in the middle of a screen a .gif, then hide it.
    For example:

    Button: Change pokemon!
    will show this gif: http://static.tumblr.com/46cb5b1d63c...d8sao1_500.gif for 2-3 seconds(until the gif over) then close the gif window.

    Is there any way to do it?
    Owner of uReviews & MovieDB - Movie Database

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by theunreal View Post
    Is there any way to do it?
    There sure is
    Include the gif on your page and hide it by default.

    Then on button click fade it in and center it using this handy function:

    Code:
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
    }
    
    $(element).center();
    Then use setTimeout to fade it back out again after the desired amount of time has elapsed.
    https://developer.mozilla.org/en/doc...dow.setTimeout

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    89
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,



    There sure is
    Include the gif on your page and hide it by default.

    Then on button click fade it in and center it using this handy function:

    Code:
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
    }
    
    $(element).center();
    Then use setTimeout to fade it back out again after the desired amount of time has elapsed.
    https://developer.mozilla.org/en/doc...dow.setTimeout
    Sorry but I am not familiar much with JS and I need more exact information.
    How do I use this function?
    like onclick="jquery.fn.center()" ?
    and where do I put the setTimeout?
    Owner of uReviews & MovieDB - Movie Database

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by theunreal View Post
    Sorry but I am not familiar much with JS and I need more exact information.
    Can you post what code you have?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    89
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Can you post what code you have?
    It's a very big file, most of it is PHP
    For example I have this function
    $("div[id='change_player']").ready(function() {
    and I want to show an animation for 2-3 seconds in the middle of the screen like the animation above, then hide it
    <div id="change_player"
    Owner of uReviews & MovieDB - Movie Database

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well let's make a smaller example and use that to learn from.

    Can you make an HMTL page with the aforementioned button and gif image in it, then post the code here.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    89
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, well let's make a smaller example and use that to learn from.

    Can you make an HMTL page with the aforementioned button and gif image in it, then post the code here.
    <html>
    <head>
    </head>
    <body>
    <div id="change_player">my button - Click here</div>
    <img src="myimage.gif" style="display:none">
    </body>
    </html>
    Owner of uReviews & MovieDB - Movie Database

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Fair enough.

    One point to bear in mind is that you shouldn't use divs as buttons.
    For one thing a div has little or no semantic meaning. It also doesn't support the tabindex attribute, which puts keyboard users at a disadvantage.
    You can read more here, if you're interested: http://www.karlgroves.com/2013/05/14...ivs-and-spans/

    OK, so first thing to do is to include the jQuery library.
    This is not strictly necessary (you could of course do all of this in plain JavaScript), but it will make our lives somewhat easier.
    We do this at the bottom of the page, just before the closing </body> tag.
    We can also add the center() function.
    And, while we're at it, let's give the image a class of "hidden" and define that rule in the correct place:

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <style>
          .hidden{
            display: none;
          }
        </style>
      </head>
      <body>
        <button id="summonPokemon">Change pokemon!</div>
        <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
          $.fn.center = function () {
            this.css("position","absolute");
            this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
            this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
            return this;
          }
        </script>
      </body>
    </html>
    Now, the next thing to do, is to attach an event handler to the button, which deals with displaying the image:

    Code:
    $("#summonPokemon").on("click", function(){
      // Code here will be executed when the button is clicked
    });
    When clicked we need to display the image and center it:

    Code:
    $("#pokemon").fadeIn().center();
    Then after x seconds, fade it back out. This is where setTimeout comes in:

    Code:
    setTimeout(function(){
      // Code here will execute after x milliseconds
    }, x);
    which gives us:

    Code:
    setTimeout(function(){
      $("#pokemon").fadeOut()
    }, 1000);
    Complete code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <style>
          .hidden{
            display: none;
          }
        </style>
      </head>
      <body>
        <button id="summonPokemon">Change pokemon!</div>
        <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
          $.fn.center = function () {
            this.css("position","absolute");
            this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
            this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
            return this;
          }
    
          $("#summonPokemon").on("click", function(){
            $("#pokemon").fadeIn().center();
            setTimeout(function(){
              $("#pokemon").fadeOut()
            }, 1000);
          });
        </script>
      </body>
    </html>
    HTH

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    89
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Fair enough.

    One point to bear in mind is that you shouldn't use divs as buttons.
    For one thing a div has little or no semantic meaning. It also doesn't support the tabindex attribute, which puts keyboard users at a disadvantage.
    You can read more here, if you're interested: http://www.karlgroves.com/2013/05/14...ivs-and-spans/

    OK, so first thing to do is to include the jQuery library.
    This is not strictly necessary (you could of course do all of this in plain JavaScript), but it will make our lives somewhat easier.
    We do this at the bottom of the page, just before the closing </body> tag.
    We can also add the center() function.
    And, while we're at it, let's give the image a class of "hidden" and define that rule in the correct place:

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <style>
          .hidden{
            display: none;
          }
        </style>
      </head>
      <body>
        <button id="summonPokemon">Change pokemon!</div>
        <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
          $.fn.center = function () {
            this.css("position","absolute");
            this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
            this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
            return this;
          }
        </script>
      </body>
    </html>
    Now, the next thing to do, is to attach an event handler to the button, which deals with displaying the image:

    Code:
    $("#summonPokemon").on("click", function(){
      // Code here will be executed when the button is clicked
    });
    When clicked we need to display the image and center it:

    Code:
    $("#pokemon").fadeIn().center();
    Then after x seconds, fade it back out. This is where setTimeout comes in:

    Code:
    setTimeout(function(){
      // Code here will execute after x milliseconds
    }, x);
    which gives us:

    Code:
    setTimeout(function(){
      $("#pokemon").fadeOut()
    }, 1000);
    Complete code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <style>
          .hidden{
            display: none;
          }
        </style>
      </head>
      <body>
        <button id="summonPokemon">Change pokemon!</div>
        <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
          $.fn.center = function () {
            this.css("position","absolute");
            this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
            this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
            return this;
          }
    
          $("#summonPokemon").on("click", function(){
            $("#pokemon").fadeIn().center();
            setTimeout(function(){
              $("#pokemon").fadeOut()
            }, 1000);
          });
        </script>
      </body>
    </html>
    HTH
    Thank you very much! It's awesome! But there is any way to make this animation appear on more than 1 button for the same function?
    I mean, if I'll use this code and I will have 5-6 buttons with the same ID that shows this animation, it will not work / work only for one.
    I need it to work for all
    Owner of uReviews & MovieDB - Movie Database

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    No problem

    To have it work for more than one button, use class names instead of an id.

    Then you can do:

    Code:
    $(".summonPokemon").on("click", function(){
      // Code will be run when any button with the class summonPokemon is clicked
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •