jQuery UI state-focus is activated when switching tabs of web browser - jquery-ui

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

Related

iOS scroll/touch messing with z-index of elements

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.

Navigation Menu in Jquery Mobile

I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>

jQuery Mobile popup that doesn't move when scrolling the page

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.

jQuery radio buttons disappear after click in IE and FF, works fine in chrome

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.

jQuery UI buttonset colour doesn't clear out after de-selecting

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.

Resources