Author:
erics , September 26th, 2011
Just an addendum to the previous post about ajax loader spinner images…
jQuery ( '.page-number, .pgNext:not(.pgEmpty)' ) . live ( "click" , function ( event ) {
jQuery ( '#Spinner' ) . fadeIn ( ) ;
} ) ;
Categories: How-To's , Technology Tags: ajax , howto , javascript , JQuery , jquery.pager , JS , Loader , Pager , Spinner , tips
| No comments
Author:
erics , September 23rd, 2011
GET Resources http://code.jquery.com/jquery-1.6.4.min.js http://jqueryui.com/resources/download/jquery-ui-1.10.1.custom.zip LOAD Resources
< LINK rel = "stylesheet" HREF = "/css/smoothness/jquery-ui-1.8.14.custom.min.css" >
<script src = "/js/jquery-1.6.4.min.js" > </script>
<script src = "/js/jquery-ui-1.8.16.custom.min.js" > </script>
HTML Substitute your own loader graphic from http://www.ajaxload.info/
< img
src = "//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif"
alt = "Please wait..."
class = "Spinner hidden"
id = "Spinner-first"
/ >
CSS
. Spinner
{
margin : 0 ;
padding : 0 ;
border : 0 ;
}
. Spinner . hidden
{
display : none ;
}
JS Show the spinner called “first”: jQuery(‘#Spinner-first’).fadeIn(); Hide the spinner called “first”: jQuery(‘#Spinner-first’).fadeOut(); Hide all spinners that start with an ID of “Spinner”: jQuery(‘[id^=Spinner]’).fadeOut(); That’s All Folks…
Categories: How-To's , Technology Tags: ajax , ajax-loader.gif , CSS , gif , html , img , javascript , JQuery , jQuery UI , jQueryUI , JS , Loader , Spinner
| 1 comment