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.
Related
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
The last days I'm working on a webapp for tablets, pc's, phones etc.. I have noticed that the user experience of this app is greatly improved in some cases by disabling the elastic effect of for example the iPad.
(Elastic effect meaning; when you touch the page on a plane that does
nothing, it will follow your finger and move the complete webpage,
even beyond de borders of the screen and on release launch it back to
the original position.)
Anyway! I have a little javascript code which does the trick, and I have been able to adapt it so most touch sensitive part do still work, whilst the page they are on is 'un'-touchable.
This is the piece of code: $(document).bind('touchmove', false);
Is there an easy way to apply this to the whole page, but make an exception for a div? I have tried some stuff but I'm not getting anywhere. Any help is appreciated! :D
Thanks!
I'm not sure whether this will work but its worth a shot. You select all elements on the page, then you remove your div from the list and bind the event to all these elements.
$('*').not('#yourdivId').bind('touchmove', false);
I am working on Magento eCommerce site and I am running into a problem after installing a color swatch plugin. The problem appears in the thumbnail views on the product page. What exactly is happening is, when you click the down or up arrow to scroll the thumbnails, after so many clicks, the slider will get stuck and replay the slides in the same position for at least 4-5 clicks, and then it will resume, but get stuck again once it does a full loop of the images. It was functioning 100% perfectly prior to installing the color swatch plugin. I looked in FireBug but I didn't really see any obvious errors, but I am still learning how to use the tool and could have made a mistake.
Here is the URL: http://modernego.info/index.php/spring-dress.html
Here is the URL to the template I purchased in its original stat (with the working slider): http://demo.emthemes.com/manwear/index.php/briefs/reprehenderit-voluptate-8.html
Does anyone have any ideas on how I can work this out? I've tried for over 10 hours trying to fix this doing various methods, trying to duplicate other files, etc.
I would greatly appreciate any help.
I think its not because of script errors, its because of events handling, i've the same situation earlier, i've used jQuery slider, it worked perfectly on normal page but when i placed it in a floating div then its mouse event wouldn't detached
then i've handled mouse event and changed as per mouse movements...
you may debug your page by events... i think some other events causing this problem..
I have a site, which upon clicking an image a lightbox pops up (eg http://www.huddletogether.com/projects/lightbox/).
Our customer still has some machines which run IE6 (upgrading is unfortunately beyond our control), so in order to block out some SELECT elements, I have used the old IFRAME shim trick (as described here: http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx).
However, I have the following problems:
The lightbox doesn't appear until the mouse is not longer hovering over the page - moving the mosue to a different window, or even just to the scroll bar causes it to appear;
While the mouse is over the page, the following doesn't happen:
Any jQuery animations related to the lightbox stop (or to be more precise, the animation continues in the background, only to have finished upon mouse out);
Animated gifs inside the lightbox stop running until mouse out;
Javascript in general stops until mouse out.
Everything seems to run fine in our other supported browsers (IE7 and FF).
Unfortunately I don't have a link to show you these effects, but hopefully I have explained myself enough for somebody to help (which will be very gratefully received)!
Edit:
Forgot to say, I know this is related to the IFRAME, as removing it causes the javascript to run fine, but obviously the ugly SELECT boxes bleed through the top DIV.
It sounds like you have something heavy running in a mousemove or mouseover event handler that's blocking animations, animated GIFs, etc.
I've got a strange error with IE8 and postcode lookups. It may not be postcode lookups as such that's causing it - just an AJAX call that modifies a select. I've set up a test page here. If you click on Find Address, and then double click (quite quickly) on one of the addresses that is within the boundary of the red-bordered div, you see the below bug in IE8.
Note: I'm finding it inconsistent to reproduce the bug, but if you scroll the list of addresses right to the bottom and then double click fast on Holly Cottage it should reproduce the bug.
If anyone can shed on light on this quirky behaviour it'd be much appreciated. Is this an IE8 bug?
I've found the problem - browsers do not like having javascript:void() set for the href attribute. If you want to have a working anchor whose default action is canceled, then use # for the href attribute, then have the event handler for that anchor return false to cancel the browser's default action.
Erm... right... sorry for my eagerness to post an answer and not double check that the problem was properly solved.
I'm finding it difficult to find the problem. I'm only going to hazard a guess here: the two effects running and ending at the same time confuses IE8, causing the div to be set to a height of 1px. This of course assumes a bug in the jQuery implementation of the effect queue, which I definitely cannot vouch for. It's just my theory at the moment - my unfamiliarity with IE developer toolbar prevents me from investigating further.
It's a problem with You running animations I suppose.
Your asynchronous action triggers some sliding animations.
First:
Try logging endings of all animations (put a callback function in the slide* call and log some text to console.) to see if they run in correct order - I suppose they don't and that's the problem.
Second:
Try adding .stop() before every asynchronously triggered animation so that it breaks other animations working at the same time.
Third:
If the above didn't help try this for every animation:
if($(this).data('running')==0){
$(this).data('running',1).slideUp(function(){$(this).data('running',0)});
}else{ /*call with timeout or ignore...*/ }
It's a basic semaphore on an element.
OR
You can use .animate and animation queues in jQuery properly, but it'd be a bit of an overkill for this case (I think).
My first reaction is it may be a CSS issue. If I find the default value, and click the 'Find Address' link one time, I see a similar (though not identical) layout problem. The height on each section looks collapsed, as if the floating sections aren't picking up the correct content height. If I incrementally specify a height on each contentRow or switch the display from block-none-block on pcodeLookupAddressEdit_risk_address, the formatting is corrected.
I don't know the specific cause, but, you may want to check the CSS and the show/hide behavior on the slide.