[jQuery] Re: images show before jquery and cycle plugin work their magic
Hi, Sorry for the late response. For some reason I thought I had this thread tagged when someone replied. Anyways, good news. My problem is resolved per your suggestion. I changed the container div to position:relative, set the dimensions, and set overflow:hiddne and whoa-la -- everything looks great Thanks for the help, Thor On Oct 20, 5:35 pm, Karl Swedberg k...@englishrules.com wrote: If you have large images, they would take longer to load. No way around that. One thing you can do to avoid having the images span down the page is to add a style declaration for them in your stylesheet: position:absolute; I believe the cycle plugin sets the cycled elements to position:absolute as a safeguard in case it hasn't been done in the css already, but you should really do that yourself in the stylesheet. Also, make sure you set the container element to position: relative (if it's position: absolute, you can keep it that way) and set its overflow property hidden and give it explicit height and width. You still might see images loading one after the other, but at least they'll be overlapping, confined within the same space as dictated by the height and width of the container element. There are ways to get around this last issue, too, but first see how my suggestions so far work for you. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Oct 20, 2009, at 7:38 PM, thor wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastest jQuery and Jquery cycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4 images in my DIV span down the page and then merge into one at the end of the page load. I've seen other implementation of these 2 components but the images don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have it load correctly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the page load first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners with jquery functionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
[jQuery] Re: images show before jquery and cycle plugin work their magic
Hi, Yes I found a solution. I changed the div that holds the images. The position is now relative and the overflow is set to hidden. Looks great. hope that helps. On Oct 23, 8:26 pm, joe joel...@sbcglobal.net wrote: Thor I am having the exact same problem - have you found a solution?? can someone explain overflow and overflow of hidden? poundcommapo...@gmail.com your message is cryptic - can you elaborate. I am not calling the plug-in from a parent element, unless head would be the parent element? Joe On Oct 20, 4:38 pm, thor bry...@gmail.com wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastestjQueryandJquerycycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4imagesin my DIV span down the page and then merge into one at the end of the pageload. I've seen other implementation of these 2 components but theimages don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have itloadcorrectly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the pageload first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners withjqueryfunctionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
[jQuery] Re: images show before jquery and cycle plugin work their magic
Thor I am having the exact same problem - have you found a solution?? can someone explain overflow and overflow of hidden? poundcommapo...@gmail.com your message is cryptic - can you elaborate. I am not calling the plug-in from a parent element, unless head would be the parent element? Joe On Oct 20, 4:38 pm, thor bry...@gmail.com wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastestjQueryandJquerycycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4 images in my DIV span down the page and then merge into one at the end of the page load. I've seen other implementation of these 2 components but the images don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have it load correctly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the page load first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners withjqueryfunctionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
[jQuery] Re: images show before jquery and cycle plugin work their magic
try giving the carousel UL a huge width , say 10,000 px, and carousel wrapper set height, width and overflow : hidden this is done by the script also but until script fully fires your css should make up for it Sam wrote: I'm not entirely sure that some of these fixes apply to my situation as I'm not using cycle plugin. I am having the same issue as the original poster however, please see for yourself. http://samgabellshoots.com/ Any pointers on how to fix or at least 'hide' the issue until after load would be greatly appreciated :) On Oct 21, 4:40pm, Mike Alsup mal...@gmail.com wrote: I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide. Another approach is to have a CSS rule that hides all but the first slide.
[jQuery] Re: images show before jquery and cycle plugin work their magic
Charlie, Thanks for the reply, unfortunately the changes you suggested do not seem to make a difference. Please refer to my previous link to see the same issue happening with the changes applied. On Oct 22, 7:21 am, Charlie charlie...@gmail.com wrote: try giving the carousel UL a huge width , say 10,000 px, and carousel wrapper set height, width and overflow : hidden this is done by the script also but until script fully fires your css should make up for it Sam wrote:I'm not entirely sure that some of these fixes apply to my situation as I'm not using cycle plugin. I am having the same issue as the original poster however, please see for yourself.http://samgabellshoots.com/Any pointers on how to fix or at least 'hide' the issue until after load would be greatly appreciated :) On Oct 21, 4:40 pm, Mike Alsupmal...@gmail.comwrote:I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide.Another approach is to have a CSS rule that hides all but the first slide.
[jQuery] Re: images show before jquery and cycle plugin work their magic
I am having the same issue that Thor describes, and although I have tried the fixes suggested by Karl I have been unable to fix the issue. Maybe there is a different way to achieve the goal? Perhaps there is a way to pre-load the entire jcarousel container and then place it in the page rather then have it build the carousel as it loads? Cheers, Sam On Oct 20, 6:35 pm, Karl Swedberg k...@englishrules.com wrote: If you have large images, they would take longer to load. No way around that. One thing you can do to avoid having the images span down the page is to add a style declaration for them in your stylesheet: position:absolute; I believe the cycle plugin sets the cycled elements to position:absolute as a safeguard in case it hasn't been done in the css already, but you should really do that yourself in the stylesheet. Also, make sure you set the container element to position: relative (if it's position: absolute, you can keep it that way) and set its overflow property hidden and give it explicit height and width. You still might see images loading one after the other, but at least they'll be overlapping, confined within the same space as dictated by the height and width of the container element. There are ways to get around this last issue, too, but first see how my suggestions so far work for you. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Oct 20, 2009, at 7:38 PM, thor wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastest jQuery and Jquery cycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4 images in my DIV span down the page and then merge into one at the end of the page load. I've seen other implementation of these 2 components but the images don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have it load correctly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the page load first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners with jquery functionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
[jQuery] Re: images show before jquery and cycle plugin work their magic
Hi Thor, I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide. Marcus On Oct 20, 7:38 pm, thor bry...@gmail.com wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastest jQuery and Jquery cycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4 images in my DIV span down the page and then merge into one at the end of the page load. I've seen other implementation of these 2 components but the images don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have it load correctly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the page load first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners with jquery functionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
[jQuery] Re: images show before jquery and cycle plugin work their magic
I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide. Another approach is to have a CSS rule that hides all but the first slide.
[jQuery] Re: images show before jquery and cycle plugin work their magic
I'm not entirely sure that some of these fixes apply to my situation as I'm not using cycle plugin. I am having the same issue as the original poster however, please see for yourself. http://samgabellshoots.com/ Any pointers on how to fix or at least 'hide' the issue until after load would be greatly appreciated :) On Oct 21, 4:40 pm, Mike Alsup mal...@gmail.com wrote: I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide. Another approach is to have a CSS rule that hides all but the first slide.
[jQuery] Re: images show before jquery and cycle plugin work their magic
If you have large images, they would take longer to load. No way around that. One thing you can do to avoid having the images span down the page is to add a style declaration for them in your stylesheet: position:absolute; I believe the cycle plugin sets the cycled elements to position:absolute as a safeguard in case it hasn't been done in the css already, but you should really do that yourself in the stylesheet. Also, make sure you set the container element to position: relative (if it's position: absolute, you can keep it that way) and set its overflow property hidden and give it explicit height and width. You still might see images loading one after the other, but at least they'll be overlapping, confined within the same space as dictated by the height and width of the container element. There are ways to get around this last issue, too, but first see how my suggestions so far work for you. --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Oct 20, 2009, at 7:38 PM, thor wrote: Hi, I am looking for assistance with a loading problem and my apologies if this is beyond the scope of this group. I am running the lastest jQuery and Jquery cycle plugin. I haven't done any customization per se only trying to get the two components to work. I am at the point where things seem to work, however when the page loads all 4 images in my DIV span down the page and then merge into one at the end of the page load. I've seen other implementation of these 2 components but the images don't flash first and then merge. Do you believe I need to create another function or put some more logic into my page to have it load correctly. My goal would be to have everything seemlessly loaded from the start. I've explored the document.ready function and believe I have it in the correct location of my site. No matter what though other parts of the page load first I realize there are a lot of unknown variables but maybe someone has an idea? My site is clippervacations.com and I am going to change out the current homepage banners with jquery functionality. Nothing is LIVE right now, but perhaps someone can get an idea. Thanks, Thor
