jQuery: The Write Less, Do More JavaScript Library

Ajax Load, CSS Insert on Loading Gif and Fade Out

View: New views
3 Messages — Rating Filter:   Alert me  

Ajax Load, CSS Insert on Loading Gif and Fade Out

by artesianwells :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello,

I would like to add css through jquery to make a loading gif appear.
Say in the css stylesheet itself, #vv is set without a width, so I was
hoping to put a width on the css loading gif background image in
jquery to make it appear. If this is not possible to do in jquery,
then a style:non alternative and then making the css show in jquery
would be fine. unfortunately I do not know how to do either of this in
jquery or how to make the gif fade in and out. The concept syntax (non
working) I had in mind is below. (Note: If wondering, I have 3 divs on
my website to be loading in a slider, but only the first div needs to
show the loading gif, the first slide)


$(function(){

$("#first").empty().fadeIn(80)$('#vv').css('width:48px').fadeOut(500);
$("#first").load("ahahpage.html #u");
$("#second").load("ahahpage.html #k");
$("#third").load("ahahpage.html #b");

});

Thankyou

Re: Ajax Load, CSS Insert on Loading Gif and Fade Out

by Nathan Bubna :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Why not just use something like this:

http://plugins.jquery.com/project/loading

On Tue, Nov 10, 2009 at 5:37 AM, artesianwells <joshualhs@...> wrote:

> Hello,
>
> I would like to add css through jquery to make a loading gif appear.
> Say in the css stylesheet itself, #vv is set without a width, so I was
> hoping to put a width on the css loading gif background image in
> jquery to make it appear. If this is not possible to do in jquery,
> then a style:non alternative and then making the css show in jquery
> would be fine. unfortunately I do not know how to do either of this in
> jquery or how to make the gif fade in and out. The concept syntax (non
> working) I had in mind is below. (Note: If wondering, I have 3 divs on
> my website to be loading in a slider, but only the first div needs to
> show the loading gif, the first slide)
>
>
> $(function(){
>
> $("#first").empty().fadeIn(80)$('#vv').css('width:48px').fadeOut(500);
> $("#first").load("ahahpage.html #u");
> $("#second").load("ahahpage.html #k");
> $("#third").load("ahahpage.html #b");
>
> });
>
> Thankyou
>

Re: Ajax Load, CSS Insert on Loading Gif and Fade Out

by artesianwells :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Thankyou Nathan, I am sure this plugin and the filement group loading
plugin are great, but I wanted a really lightweight solution that uses
the css.

If anyone knows how to set it up properly the chaining the etc (if
possible using .empty()). Please post. I am sure there are others who
would like a lightweight ahah solution. I am not interested in calling
html through jquery with link to gif. Would like a flicker free
loading gif that is already loaded through css

Thanks from Josh

On Nov 11, 2:30 am, Nathan Bubna <nbu...@...> wrote:
> Why not just use something like this:
>
> http://plugins.jquery.com/project/loading
>