I have the need of determining, via Javascript, if a drop box is expanded or collapsed.
When the user clicks on the drop box, it gets focus and expands, while after selecting an option is keeps focused but looks collapsed. I don't care about the focus, I need to test for collapsing.
How can I do that?
Thank you
[Edit] I'm using a plain old <select> tag
How about checking the visible children of dropbox div ?
In Firefox (with the Firebug extension installed), see what CSS classes are applied to the combobox when it is expanded and collapsed. If there's a class unique to when the box is in its collapsed state, you can use Javascript to check when the combobox has that class.
Or, if you're controlling the combobox yourself, you can add or remove a CSS class to let you know what the state is of the box.
Related
In my menu , i have two columns, one for submenu text and other for respective images. this portion is working fine. But i want to set a default image, which will display when user will not hover on any dropdown item or out of dropdown. but i have 2-3 dropdown menu. how to identify each individually. Thanks
code[https://jsfiddle.net/shreya_js/4h7sgpdL/48/]
I am not sure if I got your question right.
If you need a different default image for every main menu point, then append a url/image-path to the li-tag via data-src for example.
EDIT: something like this?
https://jsfiddle.net/2a3joxfz/7/
all a-tags got an rel attribute.
Can anyone explain to me how to trigger the "open" event on a select box ?
I've seen many sites hide select boxes and trigger it to open when clicking a div. Unify.js does this. I've gone through every line of code in Unify and I can't find out how to do it
Thanks
After sleeping on it, I realized that plugins like Unify don't trigger the select element to open. Rather, the real select box is placed over the faux-select box and set to 0 opacity. This gives the impression of a javascript even being triggered when in fact you're just clicking/tapping an invisible select element.
My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.
I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.
Basically, I'm building a mobile site with LOTS of content. I have a header, then a menu with three buttons that I need to open select menus so that the iPhone's select wheel will appear. Any ideas? So far my searching says not possible...
two ideas spring to mind.
Use CSS style properties to set the select tags to Display:none. Use javascript to change to display:block when the button is pressed.
Have a place holder div and inject the select tag using .innerHTML.
In both cases you will need to set the focus to the appropriate select tag.