jQuery cycle plugin paging + CSS3PIE - javascript

I am using the jQuery cycle plugin for a slideshow of images. With rounded bullets as pagers (because it's all the rage now so it seems). This worked perfectly in the 'modern' browsers except for IE. It is messing up the activePagerClass on the pagers.
Because IE can't do border-radius, I use the CSS3PIE behavior.

Changing
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
in the jQuery source code to
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$('a',this).removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
fixed it.
So it seems there is an issue with the children() function and the use of CSS3PIE. I'm not a fan of the behavior property and I would rather not use it, but the client wants rounded bullets in IE...
So I hope it helps somebody.

Related

Flexslider breaks jQuery accordion [duplicate]

I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.
The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.
When I check with firebug, there's an element.style rule applying to ul.slides:
transform: translate3d(-89px, 0px, 0px);
Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.
Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.
I think I've figured it out, in principal at least...
.flexslider{display:none;} seems throw off the re-size function of Flexslider.
You could just remove it, but that makes for some ugly loading.
To avoid said ugly loading I put together a quick, work-around- jsFiddle
$(document).ready(function(){
$(".flexslider").css('display','block').slideUp();
});
There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.
Another method I played with a bit was to try and force the re-size function like so-
$(".client").click(function () {
$('.flexslider').resize(); // Problematic but promising
var project = this.id;
var project_id = '#' + project + '-project';
var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
elem.slideUp('slow', function () {
$(project_id).slideDown('slow');
});
});
This sort of solved the mini-picture issue, but was spotty at best.

scroll fixed position = jQuery Jank with offset top in safari

I'm trying to get 2 sets of classes to have fixed positions in jQuery.
$(window).scroll(function(){
$(".staticTextGrid").each(function(){
$(this).css('margin-top',($(window).scrollTop() - $(this).parent().offset().top+160));
});
$(".staticTextGridTop").each(function(){
$(this).css('margin-top',($(window).scrollTop() - $(this).parent().offset().top));
});
});
This is what I'm doing but it doesn't want to play nice in safari (causing it to jank and jitter). Any points in the right direction would be great. My thanks in advance.
You haven't said what safari is doing that isn't playing nice so I can only have a stab at it. But sometimes safari doesn't render the page again on a css change. try adding this to the end of your function. It's not the best solution but it will at least confirm the problem! :)
$("body").addClass("tempClass").removeClass("tempClass");

Issues with simple Isotope example in Safari

I'm thinking of redoing my homepage again and thought to use Isotope to make it spiffier. I've experimented with Isotope in the past and was frustrated by not being able to make it work like I wanted. This time I'm trying to do something simpler. I made a super simple example to illustrate my latest issue. Images do not show in Safari and some other browsers unless you resize the browser window.
Below is a sample of my code, the divs are written to the screen with PHP. I might switch to UL and LI but since the HTML is there just not being displayed until the browser window is resized... Is there some JavaScript force redraw/reload I should be doing, there was nothing about that in the Isotope documentation that I've encountered and the demos work in Safari on my MacBook Pro.
I tried a few other browsers, it works as designed in IE8, but Firefox on my work machine seems to react the same as Safari.
<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
<div class="item"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></div>
</div>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
Have you tried putting your function into Windows.load?
$(window).on('load', function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
I've moved on. I have everything working how I like on www.muschamp.ca now. I didn't really make any changes to Isotope or the JavaScript / CSS though I tried many. The big change I made which finally solved this problem was to use PHP to determine the image's height and width. The Isotope documentation says it will work without this, but in my experience it works far better if you give the JavaScript accurate image dimensions.
I'm not sure how much of a performance hit I take using getimagesize() http://php.net/manual/en/function.getimagesize.php but adding a call to that before writing out my image tag(s) results in perfect rendering every time. I fetch slightly fewer images / RSS feeds as a compromise.
Hopefully my trial and error and simple demo helps some people.

CSS3 Animation in IE8/9

I understand that CSS3 animations do not work in IE. I was just wondering if there is a JavaScript workaround for this problem.
Here's a link to what I want to recreate in IE: http://animation.kashoo.co.uk/
Any advice would be great.
After a quick Google search I found a jQuery plugin that changes jQuery's standard $.animate() function so that it will use CSS3 transitions whenever possible:
$.animate-enhanced
edit:
After trying the above plugin on a site of mine, the site broke. I'm not sure if you will have the same problem or not, but here is my workaround:
You will need Modernizr.js
Basically, you check (with Modernizr) whether the browser supports a given feature, and then decide whether to animate with CSS3 or Javascript.
For example:
(Let's say you are animation an object to move to the right by 200px)
if(Modernizr.csstransitions) {
// use your appropriate browser prefixes
yourDomObject.style.transition = 'left 2s';
yourDomObject.style.left = parseInt(yourDomObject.style.left) + 200 + 'px'
} else {
var left = parseInt($(yourDomObject).css('left')) + 200 + 'px';
$(yourDomObject).animate({
'left' : left
},2000,'easeOutExpo');
}
Check out jQuery's animate functions:
http://api.jquery.com/animate/
There are many JQuery plugins that provide animations. Here's one that has a flip effect similar to the one you are looking for. http://lab.smashup.it/flip/

jQuery animations are choppy and stutter in Firefox

I like to think I'm not a dummy, but I can't get my jQuery horizontal slideshow to animate smoothly especially in FireFox (on a Mac). Anyone have advice?
Animation is being done like so:
$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});
Example link:
http://mayfourteenth.com/w/lookbook?preview=1
I've tested in Firefox, Chrome(dev) and Safari on windows and the animation stutters in all browsers(but more in FF though).
To increase JavaScript performance you could get rid of all the getElementById or $("div#mydividentyfier") calls.
If you store them in variables instead they will be cached.
Example:
It could increase performance quite a bit to do this:
var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {
lookbook.width(lookbook).width()*$('#lookbook img').length)
if (look_caption) {
look_caption.html(lookcaps[0]);
look_caption.fadeIn();
}
Instead of:
if ($('#lookbook').length) {
$('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
if ($('#look_caption')) {
$('#look_caption').html(lookcaps[0]);
$('#look_caption').fadeIn();
}
I would also recommend using data URIs for the images as it reduces the amount of httpRequests you have to make to get the page loaded.
The animation looks smooth for me in Chrome. However, I believe there are several things you can do to improve smoothness:
First, it's fine to preload all of the images in advance as you do here (at the top). However, displaying them all at once, as in the "Example link", hurts performance, as they are all animating at once:
<div id="lookbook">
<div><img src="/q_images/lib/lookbook/1.jpg"></div>
<div><img src="/q_images/lib/lookbook/2.jpg"></div>
...
<div><img src="/q_images/lib/lookbook/15.jpg"></div>
</div>
Instead of doing this, you can simply cue up the next and previous image on either side of the current image, but then don't have the rest of the images in the page until they're needed. (Preloading them is still fine though.)
Other things which can improve performance slightly are things like the following:
Use smaller (by pixels and/or file size) images.
Make minor code optimizations by computing things in advance.
Use a stand-alone animation library instead of jQuery.
You may also want to use this
.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous
Instead of
.animate({left: -((lookbook-1)*825)+'px'});

Categories