Help with jCarousel - plain list showing up while loading

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Help with jCarousel - plain list showing up while loading

Libai-2

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Rancy Og
how about load initCallback before document is ready?

On Tue, Nov 18, 2008 at 11:21 PM, Libai <[hidden email]> wrote:

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L




--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Libai
Thanks very much Hui for your quick response... However I'm at the beginning level of javascript so not sure what you mean... Would you please explain further?

Btw here is my current related code:


<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};


jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 10,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>

Thanks again!

L

On 19 Nov 2008, at 12:31, Hui (Paul) Xiong wrote:

how about load initCallback before document is ready?

On Tue, Nov 18, 2008 at 11:21 PM, Libai <[hidden email]> wrote:

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L




--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Rancy Og
instead of use $(document).ready( funciton(){}) try to use this:   $(window).bind("load", function() {))

good luck


On Tue, Nov 18, 2008 at 11:40 PM, Libai Zhuo <[hidden email]> wrote:
Thanks very much Hui for your quick response... However I'm at the beginning level of javascript so not sure what you mean... Would you please explain further?

Btw here is my current related code:


<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};


jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 10,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>

Thanks again!

L

On 19 Nov 2008, at 12:31, Hui (Paul) Xiong wrote:

how about load initCallback before document is ready?

On Tue, Nov 18, 2008 at 11:21 PM, Libai <[hidden email]> wrote:

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L




--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 






--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Libai
Tried it but unfortunately it's still the same :( 

I found in the jCarousel package there are image files such as "loading-small.gif" and "loading.gif", so I suppose jCarousel should have included some sort of loading effects... But I can't see it on my page. So I'm thinking maybe I did something wrong?

Thanks

L

On 19 Nov 2008, at 12:48, Hui (Paul) Xiong wrote:

instead of use $(document).ready( funciton(){}) try to use this:   $(window).bind("load", function() {))

good luck


On Tue, Nov 18, 2008 at 11:40 PM, Libai Zhuo <[hidden email]> wrote:
Thanks very much Hui for your quick response... However I'm at the beginning level of javascript so not sure what you mean... Would you please explain further?

Btw here is my current related code:


<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};


jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 10,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>

Thanks again!

L

On 19 Nov 2008, at 12:31, Hui (Paul) Xiong wrote:

how about load initCallback before document is ready?

On Tue, Nov 18, 2008 at 11:21 PM, Libai <[hidden email]> wrote:

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L




--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 






--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Libai
In reply to this post by Rancy Og
Hello all,

Just like to update you that the problem has been sorted using some CSS tweaks :)

I found the UL is ul#mycarousel.jcarousel-skin-ie7 while the page is loading, and then converted to ul#mycarousel.jcarousel-list.jcarousel-list-horizontal by the jQuery codes, that's how I came up with the solution below:

#mycarousel.jcarousel-skin-ie7{
background:url(../../images/loading.gif) center center no-repeat;
width:932px;
height:177px;
 }
#mycarousel.jcarousel-skin-ie7 li{
 display:none;
 }

This will stop all the list items from showing up while the page is loading, instead it'll put a "loading.gif" image as the background of the UL :)

Feel free to go to http://www.redevolution.com/wrapper/carousel-test/ and check the final result :)

L

On 19 Nov 2008, at 12:48, Hui (Paul) Xiong wrote:

instead of use $(document).ready( funciton(){}) try to use this:   $(window).bind("load", function() {))

good luck


On Tue, Nov 18, 2008 at 11:40 PM, Libai Zhuo <[hidden email]> wrote:
Thanks very much Hui for your quick response... However I'm at the beginning level of javascript so not sure what you mean... Would you please explain further?

Btw here is my current related code:


<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};


jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 10,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>

Thanks again!

L

On 19 Nov 2008, at 12:31, Hui (Paul) Xiong wrote:

how about load initCallback before document is ready?

On Tue, Nov 18, 2008 at 11:21 PM, Libai <[hidden email]> wrote:

Hello, I'd really be grateful if anybody would be kind enough to help
me with this.

This is my demo jCarousel site http://www.redevolution.com/wrapper/carousel-test/

The thing is while the page is loading, you can see a plain list of
all the carousel items, which is very ugly.... Then after the page
finishes loading, the jCarousel will show up and it looks great...
Therefore I'm just wondering is it suppose to be this way or did I
miss something? I'd really like to stop the plain list from showing
up, so pleeeease help!

Thanks in advance! :)

L




--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 






--

Thank you,

Hui (Paul) Xiong
PH.D. Student
Industrial & Systems Engineering Dept.
The Ohio State University
http://hxiong00.googlepages.com/




Libai Zhuo

Designer and Custom Coder

Red Evolution Joomla Support Forum: 


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Help with jCarousel - plain list showing up while loading

Jigga

It worked - Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---