I've got a strange problem that's being reported when using a site I'm working on. There's a jQuery animation that appears to "stop" in an incomplete state. The site is www.snopsize.com and the problem occurs when you hit the big yellow carat next/back icons. Ideally, the next item should animate into view in the list.
This works on every device I have access to (a bunch of PCs running Chrome, Safari, IE, and Firefox), but I'm hearing reports that the animation just hangs halfway through and the views end up sitting stuck halfway between the next and the previous, and trying to move through the list just keeps animating to strange halfway points.
The code driving the animation is really simple:
$("#snop_container").stop(true, true).animate({left: '-=' + snop_width});
and
$("#snop_container").stop(true, true).animate({left: '+=' + snop_width});
for next and back. The snop_width is set to 775px and never changes. I'm really perplexed that this seems to work on everything I have access to but seems to fail occasionally given a certain Mac setup. I have no idea what could be happening, but any advice whatsoever would be greatly appreciated!
Related
We're trying to build a chat view in React that behaves like WhatsApp or Telegram: First, it should show 20 initial chat messages, and if users scroll up, additional messages are being loaded.
To make this happen, we remember the position of the first message on top, load more messages before it, and then scroll back to that message to keep the scroll position where it was (and thus prevent the content from jumping).
This already works perfectly on Desktop and Android browsers. But when we try it out on Safari iOS, the browser behaves pretty weird. Sometimes it jumps to the wrong position, and sometimes the whole messages disappear. They will re-appear once you scroll the page again with your finger.
Does anyone know the reason for this strange behavior and/or a solution for this? We've been searching the web for months now.
(Bonus: Any hint to a working (!) React component that allows lazy loading of content on top of a list while pertaining scroll position reliably on iOS would be highly appreciated. We tried quite a number of them, but none worked.)
I'm new to the HTML\CSS\Javascript thing, so please excuse my incompetence. I know for some bits (mainly class modification) I'm not using jQuery, but only because I couldn't get it to work, so I went old-skool.
I have a web page (here: http://dashboards.kantarhealthspain.com/uk/segmentation/Segmentation_v0.4.html) that works just fine in Chrome (and Safari) on my desktop. You click on the massive squares in the middle of the page, and then click on the >> to go to the next 'page'. Eventually you get to the point where it hides\unhides one of 4 segments based on what you've chosen. It's a bit clunky, but it works, which right now is a win...
When I view the same page on an iPad, the layout isn't quite as good, but that's not my problem. When you get to the final question to show\hide the segments, it seems to change the way the whole page is rendered - every element seems to take up so much room.
Debugging on an iPad is very difficult, as I'm using a Windows machine to develop, and the Safari emulator doesn't actually emulate what's going on, as it doesn't break on desktop Safari (for Windows).
I don't even know where to start looking on this - any hints would be much appreciated.
EDIT: Now I've fixed the evil HTML, it looks like when the divs at the bottom are shown\hidden, the height of each div above doubles(?) I've made the background of NavDiv and Breaker fuschia and maroon so they show up, and the double in size. The height is a percentage of the size of the page (I presume) - what's going on there?! Does the percentage recalculate when areas are unhidden?
Thanks
Tom
I've got many divs on the page (close to 20) which are both jQuery-UI resizable and draggable. There are also some css-based changes that are triggered on mouseover and mouseout for each div. In the middle of playing around with these divs, sometimes, one of them just "gets stuck", i.e. just can't be dragged around any more. Using the Firebug and the console, I've seen that it does have both classes: ui-draggable and ui-resizable but it's still just "stuck". Is this something that normally happens with too many divs on the page? Just jQuery-UI get stuck like this? Most of the time everything works as expected, sometimes any of the divs suddenly can't be moved.
My code to make things draggable was simple. For each div, I had a plugin that worked on itself, and part of its code was :
$this.draggable({
cursor: 'move'
});
I have recently encountered this problem and... I have no idea what the cause is. As far as I can tell it was probably caused by something happening around mouse handlers- possibly accidentally rebinding something that draggable was using, but I couldn't see any sign of it. Either way, draggable was failing silently and reverting the changes I was working on when it occurred did not help - the code which had worked at the start of the day was now also failing.
That is an indicator to me that something was weird with the way my browser and development server were interacting because that code worked earlier and now it had stopped. My solution was to stop the server, close the browser, run a git clean -fdx - careful with that one, other source control systems exist - on my project and then restart the server and client. Hey presto my old stuff worked - and the new code did too, once I popped it out of my git stash.
New to using Adobe Edge, though very familiar with Flash/AS. I need to do animation sequence that is not flash-based, so trying out Adobe Edge. The animation itself is all done, everything works correctly. However, when the JS is loaded on the site and viewed (at least in Chrome/FF) when an object is easing out it creates black bars behind it - looks like it's skidding to a halt.
These disappear when anything is moved - background, any div, anything layered on top, etc. Can handle with setInterval flashing a transparent div on top of it, but seems a bit of a ridiculous way to solve. Has anybody else run into this? Is there a setting I'm missing?
Figured this out after ton of testing, etc. Basically the way Adobe Edge works - at least at this point - is that if you put the animation on top of something else, the background color will "leak" through the animation and show up as skid mark looking lines. After playing with every setting in their UI, nothing would handle. Final work around was to put a background image behind the animation that matched, so when it showed through it wasn't detectable.
I'm trying to build a menu with 5 blocks that the user can spin around.
You can see a demo here: http://m.iijax.com/menu.php
Works fine on iPhone, (if a little sluggish sometimes, but that is beside the point :p ) if i draw my finger more then 90 pixels (which i set as a limit) in either direction the menu spins.
On Android (2.1, a Samsung Galaxy S) however the menu does nothing until i release my finger from the screen, I've tried adding an alert on the 2 functions that changes a bunch of classes around to spin the menu either to the right or left and they do get triggered as I draw my finger.
So my best guess is either the browser locks access to the DOM until touchEnd, or it blatantly cheats and simply shows me some kind of screenshot of the page awaiting touchEnd.
Can anyone confirm either of these theories? I've spent about an hour searching here and on google and found nothing, but maybe I haven't found the rightsearch terms.
I've tried lots of swipe and slider examples I've found however and haven't found anything that animates in real time as i draw my finger.
Would also be interesting to know if this menu works on newer Android versions.