Develop Reference

jQuery animate() step: cross browser now argument

Disclaimer: I'm very new in jQuery animations and this problem sounds so stupid it has to have an easy solution but I can't even find a reference of it existing when searching online.
Disclaimer 2: The code you'll see is not optimised, for now I just need it to work.
So I have this svg and I have to animate some of its components, and that's no problem.
I wrote this piece of code that should work even cross browser, but it doesn't and I know why but I have no idea how to fix it.
$('#button_next').bind('click', function(){
if(!(parseFloat($('#last_rectangle').attr('x')) <= 308.1)){
$('.activeScroll').each(function(){
var xValue = parseFloat($(this).attr('x'));
// $(this).attr('x', (xValue - 45 - 85.5));
$(this).animate(
{
x: "-=130.5"
}, {
duration: 1000, step: function(now) { $(this).attr('x', now); }
});
});
}
});
What this does (and it works in Chrome) is it changes the x value smoothly giving me an eased scrolling. It doesn't work in FF though. It works only if i substitute
$(this).attr('x', xValue-now);
with
$(this).attr('x', now);
And I get why when logging the now value. In FF it goes from 0 to -130.5 which is not what I want in the first case, in Chrome the same exact code outputs the relative numbers i need so it works like a charm.
For completeness this is what my HTML elements look like:
<rect x="177.6" y="12.9" class="activeScroll" width="85.5" height="2"/>
and I have multiple <rect> elements.
It seems like FF can't work with relative values, although xValue gets detected correctly so it can read (and write, as you can see by the commented line, which works cross-browser but it's not animated) the attribute x.
The documentation doesn't mention such a difference in now so I'm stuck with this problem.
I'm using jQuery 2.1.4, if you think the issue is the version, updating to 3.2.1 gives me the error that I'm setting a property that only has a getter, but it sets itself anyways in jQuery 2.1.4 so I really don't understand where the problem lies there.
Anyone has a clue?

Slow down setAttribute()

Is it possible to slow down a setAttribute()? For example, I have the following code:
function hide(i) {
var previewDiv = document.getElementById('preview');
var fullDiv = document.getElementById('full');
previewDiv.setAttribute('style', 'display:normal;');
fullDiv.setAttribute('style', 'display:none;');
}
Now want to make the display:none go to display:normal with a delay so it "fades" open instead of just bluntly open. Or is there another good way to achieve this?

It can be done in a multitude of ways. You could use jQuery's fadeIn method $('.element').fadeIn(); or using css and Javascript. I found this example http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/ by Chris Buttery.
I really comes down to taste. Although one could argue that the second option should be more optimal on most systems.

jQuery Unslide - Touch doesn't work

I already solved this, and I'm only posting to help others save some time.
I am using unslider for a business website, a website I'm making responsive, so the feature of adding touch support to the slider is appealing. Unfortunately it doesn't work straight out of the box, as the author claims.

UPDATE
The unslider plugin I used, was outdated. I downloaded it from unslider.com where I first found it( it's still an outdated version there), hence I had the difficulties.
If you need to get the latest version, go to: https://github.com/idiot/unslider/
And if you want to see my issue report: https://github.com/idiot/unslider/issues/69
The problem is that the author hasn't updated his project in 4 months, and since then the swipe event has been moved from $.event.swipe to $.event.special.swipe.
The problem occurs in line 108 of the unslider plugin, where it test for the existence of the swipe plugin.
108: if($.event.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
Just change it to:
108: if($.event.special.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
It's an easy fix, but will take some googling to figure out.
If you want to be sure it will work with earlier versions, you can do this:
108: if($.event.special.swipe || $.event.special.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
But I don't recommend that.
Also, the author doesn't mention this, but the swipe plugin page does, you need to include jquery.event.move in addition to jquery.event.swipe in your scripts.
I hope this helped someone :)
To answer the comment below:
Remember to include all files, in the right order, and remember all of them:
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.move.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.swipe.js"></script>
<script type="text/javascript" src="/scripts/unslider.min.js"></script>

This didn't work for me, but after extensive tweaks I got it to work smoothly. I blogged step by step what I did, but not why.
http://frazer.livejournal.com/21898.html
I hope that helps, especially people new to drupal.
In short - I added this to my page and I got responsive movement:
var wrap = jQuery(".slides_wrap"),
slides = wrap.find(".img_slide"),
width = slides.width();
slides
.on("move", function(e) {
// Move slides with the finger
// banner has moved -100% when one slide to the right
var left = 100 * e.deltaX / width;
wrap[0].style.left = parseInt(wrap[0].style.left.replace("%", ""))+left+"%";
})
.on("moveend", function(e) {
setTimeout(function(){
var left = parseFloat(wrap[0].style.left.replace("%", ""));
var left_rounded = Math.round(left/100)*100;
if(left%100!=0){
jQuery(".slides_wrap").animate({"left":left_rounded + "%"});
}
},800);
});

As of today (November 2014) it seems the swipe functionality was replaced by move. The plugin's url is http://stephband.info/jquery.event.move/ . Just import this one instead of swipe.
I hope someone find this useful. Had to check the commits to found out.

I am bumping on this subject as I am a real noob and had trouble to install the Jquery.event.swipe.js module
It's now solved, but here a few things noobs like me would make sure to check :
make sure you have both github.com/stephband/jquery.event.move.js and github.com/stephband/jquery.event.swipe.js in your projet folder
make a reference to those 2 files in your html file
make sure you have the unslider.js file in your projet folder as well (I had the unslider.min.js file instead which wasn't complete enough to make the swipe plugins work)
No extra javascript code is necessary in the html file, it should work with the above (at least it did for me)
both very good free tools, thanks to the coders

is there any down pits with using setTimeout() for jQuery "media query" type situation

I'm working on a responsive site. I'm browsing for a way to handle jQuery "media query" changes so to speak.
I got some calculations like height, width ect on some elements and i would need to recalculate those when the media query change, like from 1160px to 980px.
I found a solution that feels like a good one because it should be supported by most browsers (if not all?) but I'm just not sure if there is any performance or any other issues with having a setTimeout() running as frequent as this one.
jsfiddle for live example
setInterval(function() {
//code here
}, 100);​
maybe there is some other better way using a already made plugin by paulirish or any other crew? Please advice me with your experience on this subject.

I'm using this code to handle jquery "media queries". I took a element that got the size of my media queries (480, 980, 1160) as selectors, usually a wrapper or like in my case the header.
var myDivWidth = $('YOUR-SELECTOR').width();
$(window).resize(function () {
if ($('YOUR-SELECTOR').width() != myDivWidth) {
//If the media query has been triggered
myDivWidth = $('YOUR-SELECTOR').width();
//Your resize logic here
}
});

Jquery setInterval too fast when coming from another tab

I've got a site with endlessly sliding images using jquery's setIntervall() function.
When calling the page in Chrome 13 and I switch to another tab to come back a few seconds later the image sliding is happening faster, as if it tried to keep up to where it was if it hadn't switched to another tab.
How could I resolve this issue?
$(window).load(function() {
setInterval(nextSlide, 3500);
});
function nextSlide(){
offset += delta;
$("#slideContent").animate({left: -1 * offset}, 1000);
}

At the beginning I would like to apologize for all the mistakes - my English is not perfect.
The solution of your problem may be very simple:
$(window).load(function() {
setInterval(nextSlide, 3500);
});
function nextSlide(){
offset += delta;
$("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}
inactive browser tabs buffer some of the setInterval or setTimeout functions.
stop(true,true) - will stop all buffered events and execute immadietly only last animation.
This problem will also appears in Firefox > 5.0 - read this article: Firefox 5 - changes
The window.setTimeout() method now clamps to send no more than one
timeout per second in inactive tabs. In addition, it now clamps nested
timeouts to the smallest value allowed by the HTML5 specification: 4
ms (instead of the 10 ms it used to clamp to).
here you can read, how animate works - it fires setInterval function many times. How animate really works in jQuery

The latest versions of Chrome apparently slow down the operation of setInterval when a tabbed page is in the background and then when you bring that page forward it tries to catch up.
On the Chromium blog, Google said:
In the forthcoming Chrome 11 release, we plan to reduce CPU consumption even for pages that are using setTimeout and setInterval. For background tabs, we intend to run each independent timer no more than once per second. This change has already been implemented in the Chrome dev channel and canary builds.
Your interval is 3.5 seconds, but the animation itself may be using much shorter timers.
Possible ways to work-around it:
Stop your timer/animation when the window is not visible. Restart the timer/animation when the window becomes visible.
Instead of setInterval, use setTimeout and then just reset the setTimeout each time it fires to create your own repeating interval - though in your case, it may be jQuery's use of timers that are the issue - I don't know.
Slow your timers down so they don't run afoul of this (again might be inside of jQuery not your own timers).
The best option is probably to figure out when to just stop and then restart the animation.
Similar question here: Chrome: timeouts/interval suspended in background tabs?.
FYI, Chrome has new experimental API for detecting page visibility for just this reason. You can read about it here: http://code.google.com/chrome/whitepapers/pagevisibility.html. it helps solve the issue when your page is visible, but doesn't have focus.

Hey are you using Jquery 1.6?
This may be the cause since 1.6 uses requestAnimationFrame for animations.
You may want to check this page out for a replacement for setInterval, clearInterval
http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/
code:
https://gist.github.com/1002116 [edit: updated source, edit2: currently doesnt work with firefox due to firefox bug. -- I had do downgrade to JQuery 1.5]
From the blogger:
Then, where you were calling setInterval(func, poll), you now call
requestInterval(func, poll). Where you call clearInterval(interval),
you now call clearRequestInterval(interval);

Have you tried not using setInterval or setTimeout at all, but just use the complete function of the animate function to kick off the next slide? The delay function is set to 2500 ( i.e. 1000 for the animate subtracted from the 3500 of the setInterval). I haven;t tried this with Chrome, so please let me know if it works.
var slider = function(n){
$("#slideContent").delay(2500).animate({left: -1 * n * delta},
1000,
function(){slider(n+1)}
);
};
slider(1);

try setInterval() it works
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
var i=1;
$(document).ready(function(){
slideShow();
$("#next").click(function(){
slideShow();
});
});
function slideShow(){
if(i<3){
$("#slide-container").animate({ left:"+=35px" }, { duration:500})
$("#slide-container").animate({ left:"-=735px" }, { duration:250})
i++;
}
else {
$("#slide-container").animate({ left:"+=1400px" }, { duration:1000})
i=1;
}
setTimeout('slideShow()',2000);
}
</script>