Gday All,
The following code displays a div based on the option that has been selected within a drop down box.
$(document).ready(function() {
$("#SomeDropdown").change(function() {
var theVal = $("#SomeDropdown option:selected").val();
$("#SomeDiv_" + theVal).css("visibility", "visible");
});
});
How do I display the div when the user hovers over the value within the drop down box? (Instead of clicking on it)
Cheers,
Michael
I don't think you can with a standard select box. You can only attach a hover event on the actual drop down as a whole (though you can attach it only if a value is selected in it).
If you must have this functionality, you may need to develop your own styled drop down... however this has it's own problems (usability for one).
Related
I'm trying to create a color picker and have run into a massive issue. Say for example I want to click on a div behind some text to change it's color, I won't be able to do this because the text will override the bg. What can I do here to make it so I can click the element without including the dom box that all elements have?
By running stopPropagation() it will only select the clicked element.
$(".ColorCardBackgroundView").click(function(e) {
e.stopPropagation();
document.getElementById('ColorCardBackground').jscolor.show();
});
I am trying to create a JavaScript that chooses an option from a drop down, clicks that options and then clicks another button to add this option to cart, how would I create this in a JavaScript code?
Here's what I've tried:
browser.getelementbyid("id").invokemember("click");
Try using jQuery, it helps alot I find.
$('#YourElement').click()
It sounds like what you want to do is:
when something change in a drop down field
you want to trigger a click on another element
Because you want to listen to the change event here's a short example and an area to play with the code: https://jsfiddle.net/je5Lgne5/
$('#products').change(function() {
var selectedOption = $(this).val();
$('#cart').append($('<li />').html(selectedOption));
});
I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.
In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.
Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.
A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="text1" size="20" value="Test1"/>
<input type="text" id="text2" size="20" value="Test2"/>
<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>
I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.
I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.
UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.
Attempting to answer this part of your question:
Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.
For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/
Note: Am using the same getSelection function from #David's answer.
If you select any text and then right-click on the input, a custom popup menu appears. Click "option 1". You will find that the selection is not lost even though the focus has shifted to that anchor tag.
However, for the second part of your question regarding focus shifting to another textbox, #David's answer suffices.
Update: (after your comments)
Please see this updated fiddle: http://jsfiddle.net/783mA/1/
Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)
This demonstrates your question in the comment that the selection is still not lost while navigating the menu.
Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.
To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.
This is why in the new fiddle above, I purposely used buttons to demonstrate.
You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:
function getSelection(elm) {
var start = elm.selectionStart;
var end = elm.selectionEnd;
return elm.value.substring(start, end);
}
$('input').focus(function() {
var self = this;
$(this).data('interval', setInterval(function() {
$(self).data('selection', getSelection(self));
},20));
}).blur(function() {
clearInterval($(this).data('interval'));
});
Now you can stuff like:
$('#text2').focus(function() {
console.log('selection in #text1 was: '+$('#text1').data('selection'));
});
Demo: http://jsfiddle.net/qCCY5/
I have open/close 'options' of 'select' on click anyone 'div' or 'button'.
How this done by javaScript or JQuery.
Thanks.
If what you're asking is how to cause a drop-down select to drop down programmatically (e.g., in response to a click somewhere else that triggers your code), you can't do that.
You can easily simulate a click on an element, but a click on a <select> won’t open up the dropdown.
$('div').bind('click', function() {
// code for open and close your select
});
Here the reference Can I open a dropdownlist using jQuery
If you want to manipulate a <select> control, you can try using its size property. If its size is > 1, it will display options. Something along the lines of:
[somediv].onclick = function(){
[someselect].size = 10;
}
Like T.J. Crowder rightfully remarked, this doesn't 'open' a dropdown, but it offers the possibility (using styling etc.) to simulate it.
I noticed that change() can be triggered for a <select> even if the option was not changed.
See my jsfiddle example.
Changing the selection will change the text input displayed. However (and I do know it's a bit of stretch) if you:
select the drop down by clicking on its label Selection:
press down on the keyboard (assuming Show A was selected)
then select Show A with the mouse pointer it will trigger change().
Is there an easy workaround for this (right now I'm thinking of using a variable to keep track what the last selection was upon change())?
EDIT:
It seems it is a Chrome-specific problem. I was able to fix the problem by using a variable to keep track of what the last selected item was. I guess this a bug left for the jQuery/Chrome developers.
I would store the current value as data on the element (rather than a variable) like this:
$('#variable').data('currentval', $('#variable').val()).change(function() {
var t = $(this);
if (t.data('currentval') != t.val()) {
$(this).data('currentval', $(this).val());
$('#listA').toggle('fast');
$('#listB').toggle('fast');
}
});
http://jsfiddle.net/emMx6/2/