Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Green IPB Ajax loading



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


Green Ajax loading

When you enter on IPBOARD forum, you see a top loading screen? Today you will learn will put this effect in your forum!


--> Tutorials, tips and tricks <--
Green Ajax loading


- Javascript
Code:
[panda=js]        jQuery(function() {
              jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i58.servimg.com/u/f58/17/89/00/23/ajax_l10.gif" alt="Loading..."></div>');
              jQuery('a').click(function() {
                  jQuery('#ajax_loading').slideDown();
                  setTimeout('load()', 1000);
              });
            });
            function load() {
              jQuery('#ajax_loading').slideUp('1000');
            }
            setTimeout('load()', 1000);
- CSS
Code:
[panda=css]        #ajax_loading {
            background: url("http://i58.servimg.com/u/f58/17/89/00/23/ajaxlo10.png") repeat-x scroll 0px 0px transparent;
            border: 1px solid rgb(123, 166, 13);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
            color: rgb(255, 255, 255);
            left: 46%;
            padding: 5px 0px 8px;
            position: fixed;
            text-align: center;
            top: 0px;
            width: 8%;
            z-index: 999;
        }
- Preview






© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Green Ajax loading

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Zyon

avatar
Punbb Guru
Punbb Guru
Thanks, this is grate tutorial!

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

3
Offline

  Michael_vx

avatar
Punbb Junior
Punbb Junior
thank you so much works good

Powered by PunBB
Currently 0 users have thanked Michael_vx for this post:

4
Offline

  J0k3R^

avatar
Pemanently Banned
Pemanently Banned
very nice
and works fine on my forum.
thank u Smile

Powered by PunBB
Currently 0 users have thanked J0k3R^ for this post:

5
Offline

  MoiLulu

avatar
Punbb Rookie
Punbb Rookie
Worked well, thank-you for this.

Powered by PunBB
Currently 0 users have thanked MoiLulu for this post:

6
Offline

  FrOsTyXi

avatar
V.I.P. Member
V.I.P. Member
Hello, just an addition to this cool feature. I tweaked mine a bit, so it's a black Ajax loading. Same as above no different besides color.

JavaScript
Code:
jQuery(function() {
              jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i38.servimg.com/u/f38/18/83/30/50/ajax-l10.gif" alt="Loading..."></div>');
              jQuery('a').click(function() {
                  jQuery('#ajax_loading').slideDown();
                  setTimeout('load()', 1000);
              });
            });
            function load() {
              jQuery('#ajax_loading').slideUp('1000');
            }
            setTimeout('load()', 1000);

CSS
Code:
#ajax_loading {
            background: url("http://i38.servimg.com/u/f38/18/83/30/50/imagee15.png") repeat-x scroll 0px 0px transparent;
            border: 1px solid #000000;
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
            color: rgb(255, 255, 255);
            left: 46%;
            padding: 5px 0px 8px;
            position: fixed;
            text-align: center;
            top: 0px;
            width: 8%;
            z-index: 999;
        }

Preview


Enjoy!

Powered by PunBB
Currently 0 users have thanked FrOsTyXi for this post:

7
Offline

  Andrei34

avatar
Punbb Rookie
Punbb Rookie
very good tuto thx

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum