[jQuery] Re: Cycle plugin issue in Safari & Chrome
I see. My gotcha on this is that the images are user-submitted, so while I have a width set for them, the height is going to be variable. I wrapped the function that calls cycle in a $(window).load function to wait until images have loaded, and that seems to have fixed me right up. Thanks much. On Oct 21, 7:39 pm, Mike Alsup wrote: > Slideshows work best when you declare the image sizes using the height > and width attrs. When the images are cached it's not a problem > because the browser knows the dimensions of the image, but if the > images are not cached there is a reasonable chance that your slideshow > will start before the images have been fully loaded. In that case, if > you're not explicit about the dimensions of the slideshow and the > slides (in css), you'll get what you get. > > Mike > > On Oct 21, 6:11 pm, "poundcommapo...@gmail.com" > > wrote: > > An update - I've been told it's happening on Firefox in most cases as > > well. I have v3.5.3 on a PC and that works fine, though I've been told > > the same issue happens on 3.0 on a PC and I've seen it for myself on > > 3.5.3 on a Mac. > > > >http://staging.pixelluxe.com/tt/child.html
[jQuery] Re: Cycle plugin issue in Safari & Chrome
An update - I've been told it's happening on Firefox in most cases as well. I have v3.5.3 on a PC and that works fine, though I've been told the same issue happens on 3.0 on a PC and I've seen it for myself on 3.5.3 on a Mac. > http://staging.pixelluxe.com/tt/child.html
[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 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] Cycle plugin issue in Safari & Chrome
Hi. I have two Cycle slideshows on this page. The first shows exactly as expected. The second drops the bottom of the background image when the slides change. This happens in Webkit browsers (or at least Safari and Chrome) only. Any ideas why/ http://staging.pixelluxe.com/tt/child.html
[jQuery] Re: Changing image src and css properties of new image
Hey James,
Thanks for the advice. That's close, but not quite there. It does now
pull the height from the correct image, but there's a noticeable delay
that I've got to get around.
See example here: http://wilsonmcguire.com/eebuild/index.php?/work
Click on some of the options on the right, and you'll see the new
image fade in, and then jump down into place. Any way to have the CSS
change prior to the image loading in?
Marcus
On Oct 5, 3:03 pm, James wrote:
> Try putting that part in fadeIn's second parameter, a callback
> function that executes after the fadeIn is completed:
>
> $("#list .item a").click(function() {
> var imgPath = $(this).attr("href");
> $("#left p img").hide().attr({ src: imgPath })
> .fadeIn(600, function() {
> var workImgHigh = $("#work #left p img").height
> ();
> $("#work #left p").css({"height":workImgHigh
> +"px","margin-top":"-"+workImgHigh/2+"px","top":"50%"});
> });
> return false;
> });
>
> On Oct 5, 7:29 am, "poundcommapo...@gmail.com"
>
> wrote:
> > Hi.
>
> > I have written a quick function to change the src attribute of an
> > image. I also need to set some CSS properties on that image's parent
> > to get it to stay centered in the containing div. Here is the code
> > I've written.
>
> > $("#list .item a").click(function() {
> > var imgPath = $(this).attr("href");
> > $("#left p img").hide().attr({ src: imgPath }).fadeIn(600);
> > var workImgHigh = $("#work #left p img").height();
> > $("#work #left p").css({"height":workImgHigh+"px","margin-
> > top":"-"+workImgHigh/2+"px","top":"50%"});
> > return false;
> > });
>
> > The problem is that variable workImgHigh is getting set on the height
> > of the original image in that spot, _before_ the src changes.
>
> > How can I modify this to have the variable grab the height of the
> > incoming image?
>
> > Thanks much,
> > Marcus
[jQuery] Changing image src and css properties of new image
Hi.
I have written a quick function to change the src attribute of an
image. I also need to set some CSS properties on that image's parent
to get it to stay centered in the containing div. Here is the code
I've written.
$("#list .item a").click(function() {
var imgPath = $(this).attr("href");
$("#left p img").hide().attr({ src: imgPath }).fadeIn(600);
var workImgHigh = $("#work #left p img").height();
$("#work #left p").css({"height":workImgHigh+"px","margin-
top":"-"+workImgHigh/2+"px","top":"50%"});
return false;
});
The problem is that variable workImgHigh is getting set on the height
of the original image in that spot, _before_ the src changes.
How can I modify this to have the variable grab the height of the
incoming image?
Thanks much,
Marcus
[jQuery] A little help needed with form processing and page redirects
Hi. I have what I feel like should be a simple problem, but I'm having a hard time sorting it out. The page is located here: http://staging.pixelluxe.com/tbs/ I apologize in advance that all the code is on one line - client request (also, the inline styles are their requirement). Anyway, this is a simple quiz. There are 8 multiple-choice questions in sets of radio groups. Each radio group has four possible answers with values of 1, 2, 3, or 4. On submit, I need a script to add up the user's selections and redirect the user to 1 of 4 pages depending on the total score. I'm currently doing it with a simple PHP script and meta-refresh, but the client wants a client-side solution, with the PHP only as a backup if JavaScript is disabled. Anyone know how to make that happen? Thanks so much.
