I am trying to take the ui-datepicker-header and convert it to an accordion. It actually works (sort of). I want to hide notes here for the user to reveal if they choose.
I need the accordion to be collapsed when the page opens. What I have always open expanded despite using these parameters:
$('.ui-datepicker-header').accordion({
active: false,
collapsible: true,
autoHeight: false,
event: "click"
});
Once the page renders I see the arrow image is correct but I need click the header twice to get it to close. After this it works as expected.
Here's a fiddle demo: http://jsfiddle.net/mv5492/PuWWS/17/
Since these are both ui components I figured this would work fine.
Thanks in advance!
Mike
Move the $('.ui-datepicker-header').accordion(... declaration below the $('.ui-datepicker-header').append() statement that appends the text to the header.
This means that the aria- tags will be applied to the text under .ui-datepicker-header, and the text will be set to display: none when the page loads.
Related
I am making a sexual health app as part of a uni project. I have a form which is driving me crazy. I have realised that a common problem in jquery mobile is that fixed footers move to the middle of the page when the keyboard opens, I have fixed this problem with the follow JS
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea, select', function() {
$("div[data-role=footer]").hide();
});
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea, select', function() {
$("div[data-role=footer]").show();
});
This code fixes the problem with the keyboard perfectly, however, on the questions that require a select input from a range of answers (picture link below), as you cycle through with the left arrow key and answer each question the footer moves. The footer does not move is you cycle through and leave the answers at the default "choose one". It is very strange and probably a really easy fix that I don't know about so any help would be really appreciated.
PS. The green bar in the photo is the footer and not the header :P
Image link
http://imgur.com/olWSrfu
I'd use the onscroll event in your body.
Try it out, I think it's gonna fix your problem
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
I have a kind of "widget" - a data table with some rich functionality like sorting, row selection and else.
In some cases (widget placement/nesting in DOM) clicks on it's rows are not triggered in iOS 7 Safari.
Widget is using jQuery 1.6.4
I can't publish a whole widget code (and you really wan't this to happen ;)), but I can narrow down a reproduction scenario to the following case:
Simple html table with some rows, two cols in each
First column contains a "checkbox" - simple div which is normally hidden and becomes visible, then parent row getting hovered. Visibility is triggered with CSS only
Every row has a click event handler. No mater what it does. In my example it will trigger an alert()
Table's parent is a block element with a fixed height and overflow-y set to auto
Table is bigger than it's parent, so, some table content is hidden and can be seen with scrolling
Here is a jsFiddle: http://jsfiddle.net/822eG/4/
On any desktop browser items are successfully hovered, click is triggered. On iOS7 hover is working but click is NOT triggered.
NOTE: On iOS you must tap twice to trigger click. First click will trigger hover and you'll see a "checkbox", then second tap must trigger a click, but it doesn't...
Any of those conditions is REQUIRED to reproduce an issue. Remove a single one and it starts working...
If you remove a "checkbox" appearance - click will work (http://jsfiddle.net/822eG/5/).
If you remove a height fix - it will work (http://jsfiddle.net/822eG/6/).
If you remove a overflow scrolling - it will work (http://jsfiddle.net/822eG/8/).
Any workaround is needed but functionality should be kept untouched. So, I can't remove "checkbox", size fix, hovering, clicking or overflow scrolling. Also, changing HTML markup is hardly to happen.
NOTE I've got a solution - see my answer below. But I still need a better workaround to keep using CSS as mush as possible.
ADD: Filed a bug to Apple #16072132
Try this:
.wrapper {
-webkit-overflow-scrolling: touch;
}
To get iOS to ignore hover states, try this:
.wrapper
{cursor: pointer;}
You can use this on any element to get it to function as expected.
Suddenly, I've got a solution... Using JavaScript I can remove :hover selector but still keep functionality.
If I will trigger checkbox visibility not by CSS :hover but by class and set it via javascript, it will work.
http://jsfiddle.net/822eG/10/
My current working solution requires no any changes in a whole code base and works fine in our conditions
With MutationObserver, monitor node insertion into head
If new node is inserted, and this is a link, check document.styleSheets
For each sheet check it's rules
If rule selector (access by document.styleSheets[n].rules[i].selectorText) contains :hover check styles for this selector
If styles contains display different from none or visibility different from visible - this is a "show by hover" style
For each such style change it's selector - replace :hover by .hover and declare a body delegate for mouseenter and mouseleave events which will toggle .hover class on triggered element
Full source code here: https://gist.github.com/Olegas/9143277
..try using this:
$('.row').on('touchstart click', function(){
alert('clicked');
});
Is it possible to make the jQuery UI Accordion first loads collapsed, so, no tab will load opened or active in default.
I know the option to make it collapsible but I want it to load totally collapsed then the user choses one tab.
I'm using the latest jquery 1.4.4 + jquery UI custom 1.8.6
Thanks.
Set active to false
which is the same as setting each tab to display:none;
Can you use this:
jQuery Accordion open collapsed
http://forum.jquery.com/topic/collapse-accordion-all-at-once
Simply set all the according content elements to display: none. This will hide them all, until clicking the accordion title expands the content under it.
James
this worked for me:
$("#accordion").accordion({
heightStyle: "content", header: "h3", collapsible: true, active: false
});
I am trying to get a simple jQuery UI dialog to work in an ASP.Net project. I have some buttons inside the dialog's <div>, but they weren't posting back. Upon closer inspection, for whatever reason when making the <div> a panel it moves it in the DOM so that it is the last tag before </body>. This would all be fine and dandy except for it also moves it outside of the <form> tag which is needed so that the buttons can do a postback.
What is the purpose of this behavior and how can I override it?
An example is here: http://jsbin.com/olumu4/
Looking at Firebug though I get this:
alt text http://img80.imageshack.us/img80/9049/dialog.png
This is a common problem with jQuery/ASP.NET.
After you assign your modal like this
$(".modal-window").dialog({
modal: true
});
do this
$(".modal-window").parent().appendTo($("form:first"));
If you have more than one modal on a page, I've found it doesn't work as expected, so in that case when you call the open method on the modal, do this:
$('.modal-window').dialog('open').parent().appendTo($('form:first'));
If you want to have it auto-open. You can append it right after the model is assigned.
$(".modal-window").dialog({
modal: true
}).parent().appendTo($('form:first'));
Hope this helps,
Marko
I have had this problem before, an option is to setup an even on the $(form).submit that appends what is in the dialog to the form.