SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help please - Page Loading Gif - onclick

    I am wanting to add a page loading Gif to my signup pages so peopel can see something is happening.

    I found this post here:

    http://www.sitepoint.com/forums/show...ing-javascript

    I would like the Gif to show onclick, and finish once the page has loaded.

    The CSS:

    Code:
    #loading-image {
    	width: 100px;
    	height: 100px;
    	position: fixed;
    	top: 140px;
    	right: 80px;
    	z-index: 1;	
    }
    The script from the SitePoint page:

    Code:
    <script language='javascript' type='text/javascript'>
    //Before starting ajax request display the div (paste it in  the beginning of your ajax request function
    var loadingdiv = document.getElementById('loading-image');
    loadingdiv.style.display = "block";
    
    //execute the code below after the ajax request is complete
    var loadingdiv = document.getElementById('loading-image');
    loadingdiv.style.display = "none";
    </script>
    I know that this line has a problem, the code is not correct, yet do not know how to correct it.

    Code:
    <!-- Start of PAGE LOADER -->		
    	<div id="loading-image">
          <img src="images/ajax-loader.gif" onlick="showloading-image()" alt="pageloadergif" width = "100" height = "100" />
          </div>	
    <!-- End of PAGE LOADER -->
    here is the code for the Button

    Code:
    <div class="input_row" align="right" style="width:500px; padding-top:20px;">
    <input class="cupid-green" type="submit" style="border:none" name="next" value="Next �"></input>
    </div>
    or what about this?

    Code:
    <div id="loading-image">
        <input class="input_row" name="next" type="submit" onclick="$(this).showloading-image('<img src=images/ajax-loader.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">
        </div>
    your help greatly appreciated

  2. #2
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been trying many code combinations:

    can some tell em why this is not working please?

    I have this script

    Code:
    <script type="text/javascript">
     $('#cupid-green').click(function(){
          $('#page_loader').show();
          $.ajax({
            ....
           success:function(result){
               $('#page_loader').hide();
           }
     }
    </script>
    In Bold below is the Next button, what is the Next Button id ? need the Button id for the cript (cupid-green)

    Code:
    <!-- Start of PAGE LOADER -->	
    	
        <div id="page_loader">
          <img src="images/ajax-loader.gif" style="display:none" alt="pageloadergif" width = "100" height = "100" />
          </div>
    	
    <!-- End of PAGE LOADER -->
    
      <!-- Start of Next Button -->	
    
              <div class="input_row" align="right" style="width:500px; padding-top:20px;">
                <input type="submit" value="Next " name="next" class="cupid-green" style="border:none" />
              </div>
          
              <input type="hidden" name="user_submit" value="0" id="user_submit" />
    
     <!-- End of Next Button -->	
            </form>
          </div>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    This isn't really my area but I can see some errors in your code.

    Code:
    $('#cupid-green').click(function(){
    You don't have an ID of cupid-green you have a class so change the js or the html to reflect this.

    e.g.
    Code:
    $('.cupid-green').click(function(){
    You are hiding and showing #page+loader but yet you have set the image itself to display none so it will never show.
    Code:
     <div id="page_loader">
          <img src="images/ajax-loader.gif" style="display:none" alt="pageloadergif" width = "100" height = "100" />
    </div>
    Move the display:none from the image and onto the div instead.
    Code:
    <div id="page_loader" style="display:none"> <img src="images/zoom.cur"  alt="pageloadergif" width = "100" height = "100" /> </div>

    I think there should be an extra closing bracket at the end here.

    Code:
     });
    </script>

    Rough test:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js "></script>
    </head>
    
    <body>
    <!-- Start of PAGE LOADER -->
    <div id="page_loader" style="display:none"> <img src="images/axax-loader.gif"  alt="pageloadergif" width = "100" height = "100" /> </div>
    <!-- End of PAGE LOADER --> 
    
    <!-- Start of Next Button -->
    <div class="input_row" align="right" style="width:500px; padding-top:20px;">
    		<input type="submit" value="Next " name="next" class="cupid-green" style="border:none" />
    </div>
    <input type="hidden" name="user_submit" value="0" id="user_submit" />
    
    <!-- End of Next Button -->
    </form>
    </div>
    <script type="text/javascript">
     $('.cupid-green').click(function(){
       $('#page_loader').show();
       
       alert('You should see the image now');		
       
      $('#page_loader').hide();
    	
     });
    </script>
    </body>
    </html>

    Don't use old school html like align="right" as that is deprecated in strict doctypes.

    Code:
    <div class="input_row" align="right" style="width:500px; padding-top:20px;">
    Use CSS instead and also avoid using inline styles as that makes testing awkward. Just add a class and style it as usual.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B, great! yes all working perfectly thank you

    Now how do I remove the alert? so the page can continue to load (showing the loading gif) onto the next page?

    I tried many times to get the code correct...............but

    Code:
    <script type="text/javascript">
     $('#cupid-green').click(function(){
          $('#page_loader').show();
          $.ajax({
            ....
           success:function(result){
               $('#page_loader').hide();
           }
     }
     });
    </script>
    yes the <div class="input_row" align="right" style="width:500px; padding-top:20px;"> is existing code before I started working with the code.

    I will create a CSS for it, help to validate every page

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,
    Quote Originally Posted by RayWilk View Post
    Now how do I remove the alert?
    Did you mean from the snippet I posted?

    You would just remove this line:
    Code:
     alert('You should see the image now');
    I feel though you were meaning something else

  6. #6
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B, quick reply, thank you

    yes but as soon as I remove the line: alert('You should see the image now');

    the loading gif has gone along with the Alert. It stops working

    Code:
    <script type="text/javascript">
     $('.cupid-green').click(function(){
       $('#page_loader').show();	
       
      $('#page_loader').hide();
    	
     });
    </script>
    Code:
    <script type="text/javascript">
     $('.cupid-green').click(function(){
       $('#page_loader').show();	
        complete:function  (){
        $('#page_loader').hide();
    	
     });
    </script>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think we need to see the page concerned and the full js that you are using.

    I'm not sure if you are using the snippets that are posted in the correct manor (with all the "blanks" filled in) and not sure how you are making this all happen.

    Are you clicking a button then loading some data into the same page via ajax and while this data is loading you want the gif displayed? If so do you have working code for the ajax call etc.?

  8. #8
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B,

    I think I was having late night brain fade, all is working well

    many thank yous for your time and patience

    But! if you have a look at this Register page you will see that the Loader.gif will show/start even when the Register info has not been filled in.

    http://www.dating-asian-singles.com/signup-stepone

    Is there a way to make the Loader.gif show only when the page has been completed ?

    your help greatly appreciated.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by RayWilk View Post
    But! if you have a look at this Register page you will see that the Loader.gif will show/start even when the Register info has not been filled in.

    http://www.dating-asian-singles.com/signup-stepone

    Is there a way to make the Loader.gif show only when the page has been completed ?

    your help greatly appreciated.
    Hi,

    How have you handled this in your other pages?

    It seems to me you are turning the gif on here:

    Code:
    <script type="text/javascript">
     $('.cupid-green').click(function(){
       $('#page_loader').show();	    
     });
    </script>
    But I couldn't trace where you are turning it off. I assumed you would be turning it off at the end of your form submission routine unless it's a new page that you are loading rather than an ajax call.

    If that's true then you would need to turn the gif off when your js registers an error. You could try adding it here but it may just turn the error off for good.
    Code:
     function hideAllError(){
    			  $('#page_loader').hide();	 
        document.getElementById('username_error').style.display   = "none";
    You may need to say how you are handling these things then it would be a job for one of the JS experts (like @Pullo ; ) to jump in as I am out of my depth here.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    It won't be too hard to sort this out

    Basically, at the moment you are showing the spinner as soon as the button is clicked.

    You also have this event handler attached to the form:

    Code JavaScript:
    onsubmit="return validate();"

    What you need to do, is to remove the inline event handler and replace it by something like this:

    Code JavaScript:
    $("#registrationForm").on("submit", function(){
    ...
    });

    FWIW, you're including jQuery, so we might as well use it to make our lives easier

    Then, within the submit event handler:

    Code JavaScript:
    $("#registrationForm").on("submit", function(){
      if(validate()){
        // Validation passed, so show the spinner
        $('#page_loader').show();
      } else {
        // Validation failed, so do nothing other than prevent the form's default submit action.
        return false;
      }
    });

    Just to make things clearer, I made you a little demo.

    If you submit the form empty, an error message is displayed.
    If you fill in a user name, then submit the form, then the spinner shows.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <base href="http://www.dating-asian-singles.com/" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Dating Asian Singles - Free Online Dating - Meet Singles Site</title>
        <link href="css/general.css" rel="stylesheet" type="text/css" />
      </head>
    
      <body>
        <div id="contentContainer">
          <div id="wideRightColumn">
            <div class="signupArea">
              <p class="searchBoxTitle">My Details:</p>
              <form name="frm_signup_one" action="signup-stepone.php" method="post" id="registrationForm">
                <div class="input_row">
                  <div class="input_column">
                    <label for="firstname">Username:</label>
                    <div class="rowcontent_full">
                      <input name="username" id="username" value="" size="26" type="text" />
                      <div class="row_error" id="username_error"></div><input type="hidden" name="valid_username" value="0" />
                    </div>
                  </div>
                </div>
            
                <div id="page_loader" style="display:none"> <img src="images/ajax-loader2.gif"  alt="pageloadergif" width = "42" height = "42" /> </div>
                <div class="input_row" align="right" style="width:500px; padding-top:20px;">
                  <input type="submit" value="Next" name="next" class="cupid-green" style="border:none" />
                </div>
              </form>
            </div>
          </div>
        </div>
        
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
          function validate(){
            if($("#username").val() === ""){
              $("#username_error").text("Please enter a name!").show();
              return false
            } else {
              return true;
            }
          }
          
          $("#registrationForm").on("submit", function(){
            $("#username_error").text("");
            
            if(validate()){
              //It's all good, Brother!
              $('#page_loader').show();
            } else {
              return false;
            }
            
            // This is just so you can see the result.
            return false;
          });
        </script>
      </body>
    </html>
    Hope that helps.

  11. #11
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B and Pullo,

    thank you for your great detailed replies, sorry for my late reply, usually I am emailed when a new post is made, yet no email arrived,

    was just checking the page and saw both your replies, so thank you again

    I will try implementing this code, and give you feedback as soon as I can,

    best wishes

  12. #12
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B and Pullo,

    today while implementing your code I was looking through the existing code/script, and I found this:

    Code:
    else {
                               hideAllError();
                               document.getElementById('username_error').style.color  = '#ea5c76';
                               document.getElementById('username_error').innerHTML    = username +" is not available.";
                       document.getElementById('username_error').style.display        = "inline";
                               document.forms['frm_signup_one'].valid_username.value  = 0;
                            }
                     }
                     else if(httpUsername.readyState<4){
                         document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
                     }
                    }
                    var url="ajax/check_username.php?username="+username+"&time="+new Date().getTime();
                    httpUsername.open("GET",url);
                    httpUsername.send(null);
            } else {
              hideAllError();
              document.forms['frm_signup_one'].username.value         = "";
              document.getElementById('username_error').style.color   = '#ea5c76';
    so the loader code is already there.............but not working, and ideas why not showing loading gif ?

    Code:
     }
       else if(httpUsername.readyState<4){
           document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
      }
    or can I add the code into the code below: $('#page_loader').show();

    Code:
     }
       else if(httpUsername.readyState<4){
           document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
      }
    all help greatly appreciated

  13. #13
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, and Pullo who generously gave their time, and code, all is working well now, so this post is closed. Best Wishes

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Thanks for taking the time to report back Ray.
    Appreciate it!

  15. #15
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you again Pullo & Paul best wishes


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
  •