www.webdeveloper.com
Results 1 to 8 of 8

Thread: Code That Shows "processing" Wheel When Link Is Clicked While Page Loads

  1. #1
    Join Date
    Mar 2013
    Posts
    24

    Code That Shows "processing" Wheel When Link Is Clicked While Page Loads

    I need to show a "spinning wheel" next to the link that is clicked while the linked paged loads.

    Anyone have the code that will do that?

    It would be much appreciated if you do...

    Thanks

  2. #2
    Join Date
    Apr 2013
    Posts
    56
    Perhaps something like this could be useful http://www.golubovic.iz.rs/2012/11/p...-using-jquery/

  3. #3
    Join Date
    Mar 2013
    Posts
    24
    Thanks, but what I needs is the spinning wheel graphic to show right next to the link clicked before the linked page even loads.

    Maybe this could be done with a javascript onclick event, and a div tag with the graphic that is made visible with the onclick event?

    What would the code for that be?

    Or is there a more elegant way to do this?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    have you tried to code anything yourself?

  5. #5
    Join Date
    Mar 2013
    Posts
    24
    Quote Originally Posted by Padonak View Post
    have you tried to code anything yourself?
    While I'm not a coder, I'm savvy enough to take existing code and adapt it for my situation.

    I don't know the code well enough to code something from scratch though.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    take this as a draft:

    HTML:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Example</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding-top:300px;}
    a:link,a:active,a:visited{text-decoration:none;font-weight:bold;background-color:transparent;color:#000;font-family:Helvetica,Georgia,Verdana;font-size:16px;}
    a:hover{text-decoration:none;font-weight:bold;background-color:transparent;color:Crimson;}
    #menu{position:absolute;top:20px;right:20px;padding:25px 25px;}
    #menu a{display:block;margin-top:5px;margin-bottom:5px; padding-left:20px;background-image:none;}
    #menu a.act{background:transparent url(loading.gif) left no-repeat;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    function somefunc(mode){
    $('#result').html('Loading...');
    $.get('func.php',{mode:mode},function(data){$('#result').html(data);$('#menu a').removeClass('act');});
    }
    $(document).ready(function(){
    $('#menu a').each(function(i){$(this).click(function(){$('#menu a').removeClass('act');$(this).addClass('act');});});
    });
    </script>
    </head>
    <body>
    <div id="menu">
    <a href="javascript:somefunc('')">LINK 1</a>
    <a href="javascript:somefunc('')">LINK 2</a>
    <a href="javascript:somefunc('')">LINK 3</a>
    <a href="javascript:somefunc('')">LINK 4</a>
    <a href="javascript:somefunc('')">LINK 5</a>
    </div>
    <div id="result">result goes here</div>
    </body>
    </html>
    PHP:

    Code:
    <?php
    /*---------------------------------------------------------------------*/
    $mode=(!empty($_GET['mode']))?$_GET['mode']:$_POST['mode'];
    switch($mode){
    default: sleep(5);echo '<h1>default mode</h1>';
    }
    ?>
    live demo

  7. #7
    Join Date
    Mar 2013
    Posts
    24
    Perfect! Thanks you Padonak.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    you welcome ))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles