I have a form which consists of multiple panels. Each panel is collapsed (display:none) until the user touches the caption/bar to uncollapse it, except the first. So my problem is when I get to the last input on my expanded form I can't focus on the next input element(with the next button on iOS) because it's not displayed. Im thinking a invisible element after the last element on my form, that when it gains focus it expands the collapsed panel underneeth. Hope that makes sense.
Regards.
Thanks guys but I figured it out. I used an input at the last element in the form to detect focus and collapse the next panel. Like done here http://www.webdeveloper.com/forum/showthread.php?t=130036
Tnks
Related
I have many text boxes in a page and all are disabled on init.In Ipad only,(Safari and chrome)on page load the focus comes automatically on the fourth text box.
I removed that text box then focus comes on the 3rd one and so forth.
Since that textbox is disabled,you can see the textbox highlighted on init.When you click anywhere on the screen then a keyboard pops up for a half a second and then closes.
I dont want the focus to be on the textbox on init.It can be at the dropdown(optional) or no focus at all.
In ipad safari,textbox is highlighted and on clicking anywhere on screen keyboard opens.
In ipad chrome,there is focus and keyboard popup on init itself.
How can i prevent this.
use jquery/javascript
The opposite of focus is blur. You can just call this to remove focus from all inputs:
$("input").blur();
Or as you said, if you want to have focus on your select instead, just give the focus to this element. It should remove the focus from the input then.
// change the selector to your exact 'select' element
$("select").focus();
I am using jQuery Token Input plugin with one of my custom written plugins in one of my projects.
My plugin basically adds an anchor tag to an element that it was initialized on and upon clicking the anchor link a text input element is shown which is bound to jquery token input plugin.
On FocusOut event i want to hide the text input (in this case which would be a ul initialized by jquery token input in place of the text input).
All works fine till now.
But if I press the alt key, the main ul is hidden as expected but the dropdown ul is still visible.
To see the problem that i am facing you can also view this JSFiddle. Sorry, about the CSS part, i did include the CSS file but for some reason it does not work as expected.
Now, in the fiddle if you click the + Add button the input and the dropdown (with instructions) appears, then if you click anywhere else in the preview window, it disappears, which is what is expected behaviour.
But if you click on the add button and once the input and dropdown appears and then if you press the alt key (which initiates the focusout event) the input disappears but the dropdown still shows. Why is that ?
What could be the reason causing this ?
Update:
I apologize if I made it a little complicated. Following is comparison between the expected behavior and the problem.
Case 1: (focusout event triggered by clicking somewhere in the body).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user focuses out by clicking somewhere else in the body > The Input and dropdown disappears.
This is the expected behaviour.
Case 2: (focusout event triggered on alt keypress).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user presses the alt key which triggers the focusout event > The Input disappears but dropdown does not.
I need to make sure the dropdown disappears in this case too.
Note: The Dropdown CSS is messed up in the fiddle for some reason. The text that says type somethig is the dropdown element.
Add shortcut library and add the following code . It works
shortcut.add("Alt", function() {
$('.token-input-dropdown').hide()
});
Demo :http://jsfiddle.net/abdennour/dHSWu/5/
Likewise,be kept away the tags using margin to avoid overlapping of events
a.addInput{
margin:2px;
}
div.token-input-dropdown{
margin:2px;
}
I have a fiddle here: http://jsfiddle.net/ybZvv/43/
The problem I have is with the text inputs not changing. Please follow steps in fiddle below so you can see what is happening:
When you open fiddle, click on the "Add Question" button, this will add a table row copying the controls from the top into the table row.
In the table row click on the "Open Grid" and select button 5. You will see 5 letter buttons appear underneath from A-E.
Turn on all of the letter buttons by clicking on them (They should turn green to symbolize that the button is turned on)
You will see right at the bottom of the fiddle that it shows all of the text inputs of each value of the buttons which are turned on. This is fine.
The problem is here. If you go back into the table row and click on the "Open Grid" link again but this time choose "3", you will see the letters buttons change to A-C. Now letters D and E are not shown so they are turned off. But problem is that if you go to the bottom of the fiddle, the text input form D and E are still shown, they should be removed.
So my question is: what needs to be changed in the fiddle so that when the user changes their option type, it only displays the text inputs of those buttons which are still on after option has changed?
when you choose a option your code cleans the number box and the letters get changed ok.
The logic you apply to letters with class 'answerBtns answers' need to be apply also to the letter at the bottom. You must apply a class and do de process in javascript when get another choose.
I have 2 divs which I show or hide depending on a button click event.
I use the .hide() and .show() jquery methods.
One of the divs has two radiobuttons.
when this particular div is hidden and then shown the radiobutton selection is lost.
Can someone help please.
I can't reproduce this problem. Check this fiddle http://jsfiddle.net/qAs9x/3/ - the value of radio group stays the same after hide/show.
On my page I have two tabbed sections of content. When the page is first loaded, the first tabbed area is displayed and the other one is hidden. I have some javascript in place which switches tabs and hides/displays the relevant content when one of the tabs are clicked. To mark which tab is the active tab, the active tab is given the class of "current".
When I submit a button on that page, I want it to do one of two things depending on which tabbed area is displayed. To find out which tab has been clicked, I check the class attribute of each tab:
Select Case True
Case tab1.Attributes("class").Contains("current")
....
Case tab2.Attributes("class").Contains("current")
....
End Select
However, checking the class attribute in this way shows that even though tab2 has been selected, tab1 always has the "current" class.
If however I create a hidden input like this:
<input type="hidden" id="SelectedTab" runat="server" class="SelectedTab" />
and then whilst changing tabs in my javascript, also set the name of the selected tab to display in the value of the hidden input, the correct tab name is recognised from the click event in my VB code.
Could someone please explain why this is?
Instead of using the hidden field, use the asp.net hidden field control and try again the same what you are doing.