The problem with my function is that when I scroll down, the clone of the element I want to drag is positioned under my mouse pointer, this only happens in FF, IE and Safari, Chrome works like it should.
I already tried all answers on this question :
jQuery draggable shows helper in wrong place after page scrolled
But without succes,
I use jQuery 1.8.3 & jQuery UI 1.10.3
hopefully anyone has any idea on how to fix this.
You can view a live version of my webpage here : http://www.solar-sell.eu/uw-pv-systeem/?gezin=true
The people are the draggable elements and the house is the drop area.
Thanks in advance!
It seems to me that the problem is a jQuery UI bug - http://bugs.jqueryui.com/ticket/9315
Related
I'm using Select2 as dropdown with jQuery Mobile. Scrolling through the list works good on an Android browser. The list flows freely. But on On iOS devices, the scrolling isn't flowing freely. The scrolling halts immediately. Refer to this.
Help is required in fixing this.
try adding -webkit-overflow-scrolling: touch; to containing div.
Answered by: Omar
I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.
I have multiple sets of jQuery radio buttons on a jQuery modal dialog. Clicking one in each set hides or shows divs. Anyway, they work perfectly in Chrome, but in FF and IE, they work hide/show the divs properly... but they start disappearing as they're clicked.
I've tried adding plain radio buttons that do nothing, but they still disappear individually as they're clicked. Am I missing some sort of declaration?
I would post the code, but it can literally be a copy from the jQuery website for radio buttons and they'll still disappear.
Thanks for any help.
Have you tried the same example page from another system? If all examples you can find have this behavior, I'd start to suspect your display driver or even hardware. Give a link for a page that you see the problem with, and we can see if it happens for us.
I'm still not quite sure what the problem is, but I implemented a work around.
In Chrome, I remember I had to add an unused jQuery radio button at the top... that hides when the dialog is opened... and "unhides" when the dialog is closed (the dialog is hidden when closed, so the user doesn't ever see this radio button).
For some reason I had to add another one of these jQuery radio buttons that hides and unhides itself to prevent the disappearing jQuery radio buttons in IE9 and FF. So in my case, Chrome required one of these fake buttons... while IE and FF needed two.
Anyway, I think the root of the problem stems from my overall layout template. I think multiple divs all over the place are screwing something up somewhere.
I'm just an amateur programmer so I know this isn't the solution that I'm sure many people would be looking for, but it works for now so at least I'm able to move on.
I'm using the jQuery UI vertical slider, and when I click on a new tab of a web browser (Firefox, Chrome, and IE) the state-focus is activated for no apparent reason of the slider.
When I click on the slider that state-focus goes away, and when I click on the window there is no state focus (which is what it's suppose to do.), only switching tabs.
I know this is a bug but I can't find the piece of code to remedy it. Help?
I'm using jQuery UI 1.8.21.
This has been solved by separating the ui-state-focus from ui-state-active in jquery ui slider-vertical's default css.
So the bug doesn't effect the presentation of the slider.
Here's similar problems user are having:
jQuery UI button not "unclicking"
http://forum.jquery.com/topic/button-and-dialog-ui-state-focus-on-button-being-kept
I am using Trent Richardson's timepicker and I am having an issue with the jquery-ui sliders that are used in his widget. The draggable boxes in the sliders are not rendering fully. I am left with what looks like the border of what would have been the boxes on the far left side of the slider and it does not move when I click on it.
I have tried using this tool with the full version of jquery and jquery-ui packages so I know that I am not missing a package and I have not found anyone else with a similar problem. Everything else works just fine in the timepicker so I believe that this is a problem specific to the slider. My javascript is identical to the first example shown in the link above.
Has anyone experience a similar problem when working with sliders?
UPDATE
Found the issue. It turns out I did not have sliders selected when I downloaded the css files for my datepicker. I had since then downloaded the necessary slider functions but forgot to redownload the css...
DOH!
Yes that's it, the solutin is to add the slider css to your project. The file can be found here :
http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.slider.css