I'm sure I'm not the only person asking this question. When you have a jQuery UI implementation, and you use the .buttonset(); command to turn a set of checkboxes into a button-set (multi selectable), I'm having trouble when a user de-selects an item after selecting it.
So let's say on hover, it turns into a certain colour (based on the settings of the jQueryUI theme I downloaded), and after clicking, it turns into the active state colour. When I click the same item again, and move the mouse away, it remains the hover colour, causing confusion as to whether the item is deselected or not.
And this only happens on Firefox only - seems to work fine on Chrome & Safari.
Here's a demo link: http://www.tylervolker.com/mls-search
I tried to force a blur() event to these items but no dice it seems.
$('.label').click(function(){
$(this).blur();
});
What am I missing? Or is this just a Firefox thing I need to live with until either jQueryUI updates their code, or Firefox appends this?
This appears to be this known jQuery UI bug - http://bugs.jqueryui.com/ticket/5518. The button widget isn't set to be addressed by the jQuery UI dev team until 1.11 so I wouldn't expect a fix for this anytime soon.
There are some suggested workarounds in the related issues on that ticket.
Related
I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I have two datetimepicker instances on my page. I have hidden the NOW button from one of the datetimepickers by setting display:none on its css for "focus" event.
The strange thing is on IE it hides the NOW button, but when I click on the calendar date, the button comes and goes (flicker). I don't see this behavior on Firefox and Chrome. Any idea why this happens and how to overcome this?
Does it specifically have to hide on focus? If it were always display: none then you likely wouldn't have that problem.
I'm having an issue with KendoUI charts which started occurring on iOS 6 devices, which I have reproduced in Safari, Chrome and Mercury.
When a user performs a "taphold" action (touching the screen and keeping the finger pressed for about a second) over an element, the element is highlighted in blue and the "copy/select/select all" context menu is brought up, as shown in the following screenshot.
This seems to occur for any type of element so it is not necessarily a KendoUI issue, but in case anyone else has encountered this, I would like to know if it is possible to somehow disable this feature. I've tried using the jQuery .disableSelection() method, but to no avail.
The reason for needing to fix this is that my app has some functionality bound to the jQuery mobile "taphold" event when performed on a chart, and the selection of the chart or one of its elements, along with the context menu appearing, can be distracting and confusing for the user.
Thanks!
Try the css rule -webkit-user-select:
-webkit-user-select: none;
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.