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?
Related
I have a weird problem... I'm just hoping someone will believe me.
I'm currently working with a platform called K2 where in a form I've injected some jQuery. The script is scrolling a list control to a specific element within that list and works without any problems in Chrome and in IE. But not in Edge (v16.16299), unless I have DevTools open.
This is the function. If I put an alert() before animate() I'm getting it, without having DevTools open... So I guess it has to do something with animate or scrollTop?
$(function() { jQuery.fn.scrollTo = function(elem) { $(this).animate({ scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top - 4 }, 500); return this; }; });
scrollTo is then called within a K2-rule):
$("#idOfParent").scrollTo("input[value='aValueImGetting'");
I'm clueless and the closest thing I've found is this, which didn't help me since I can't update Edge due to... stuff: Javascript in Edge only works with devtools open
However, the last comment about this being solved from an update is from 2016, and my Edge version is from mid 2017?
I've been having a weird issue with Safari on iOS.
I'm using jQuery to manipulate a couple of divs, moving them, wrapping them and giving them dynamic heights. On every browser, these changes are perfectly working during the first page load, on Safari, sometimes yes and sometimes not.
basically in Safari, it loads the page without applying any changes, then if I keep refreshing it, it never works, but if I reenter the url, on the address bar and I hit "enter", that time it works.
Now, I solved it wrapping the function that triggers those DOM manipulations in a setTimeout function and I give it a delay of 400. SO now it waits 400ms before firing the function, and this way it's working, but I don't like it that much. I was wondering if you guys know a better system.
my code:
$('.wrap-services, .wrap-banner-cta, .wrap-logos, footer').wrapAll('<div class="fixer"></div>');
$('.fixer').insertAfter('.content');
function getHeight() {
var imgOffset = $('.wrap-hero-home picture.splash-main img').offset().top;
var fixerHeight = $('.fixer').height();
imgHeight = $('.wrap-hero-home picture.splash-main img').height();
$('.fixer').css('top', (imgOffset + imgHeight) + 50);
$('.container').height((imgOffset + imgHeight + fixerHeight) + 50);
}
//this is what I use now to prevent that issue
setTimeout(getHeight, 400);
Thanks
Technically, jQuery's bind method is deprecated, so you should probably use on, like they suggest:
$(window).on('load', function(){
//Do something
});
See the notes in this page related to the deprecation: http://api.jquery.com/bind/
If you're using an old version of jQuery, I guess it wouldn't matter, then proceed with bind
I have a very simple piece of javascript code that just should work and it only works when I run it in the browser console:
<script>
$(".hopscotch-close").click(function () {
alert("Hi");
Cookies.set("tourState", "closed")
})
</script>
Because it runs in the console I know that:
1) the ".hopscotch-close" is OK;
2) there are no errors in the code that could prevent it from running;
Also:
1) because is a "click" event I know that I haven't got a problem with the DOM being ready (and I can put everywhere - but in this case in at the bottom of the <body>;
2) I know I don't have an issue because of using the same name for a class than something else that exist;
3) The behavior is the same in Safari and Firefox, so its not a Browser issue.
I know this is tough without the full code, but if someone has experienced this maybe has na idea about what could be the problem.
From your comments I sense that the element is getting appended dynamically so instead of
$(".hopscotch-close").on('click',
you need to make use of event-delegation as
$(document).on('click','.hopscotch-close',function(){
That will do the trick.
If you are appending .hopscotch-close to any already existing static
element then instead of $(document).on('click' you can use
$('#yourStaticElementId').on('click','.hopscotch-close',function(){
which improves site performance.
It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}
<ul id="MarqueePro2"></ul>
</ul>
<script>
var speed=60;
var MarqueePro=document.getElementById("MarqueePro");
var MarqueePro2=document.getElementById("MarqueePro2");
var MarqueePro1=document.getElementById("MarqueePro1");
MarqueePro2.innerHTML=MarqueePro1.innerHTML;
function Marquee()
{
if(MarqueePro2.offsetTop-MarqueePro.scrollTop<=0)
{
MarqueePro.scrollTop-=MarqueePro1.offsetHeight;
}
else
{
MarqueePro.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
MarqueePro.onmouseover=function() {clearInterval(MyMar)}
MarqueePro.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
appers shake under IE browser.how to solve the problem?
and thx very much!
scrollTop behaviour in IE is extremely dodgy. Two things can affect it:
1) The document type - you have to get the right one - there appears to be some issues with transitional and loose DTDs.
2) Whether or not there is overflow set on the container.
See http://forums.digitalpoint.com/showthread.php?t=11965. It presents a solution to both issues of scrollTop in IE.
(At the risk of enacting a stackoverflow cliche, you might want to consider using a framework such as jQuery, which will take a lot of such annoyances out of the equation).
I'm not sure what your script intends to do, but for Javascript effects, check out the frameworks:
JQUery
Prototype / Scriptaculous
Mootools
they have worked out most cross browser issues and are very easy to use.
You may want to set speed to a higher number.
The second argument to setInterval is the delay in milliseconds. 60 milliseconds is quite fast; 50 milliseconds is 1/20th of a second.
Maybe try 100 or 200 to see if things improve?