So basically what I want to do is if the use hits mouse down inside of a div select the last cursor point inside of a textbox this way the user could still drag the mouse over the text to select it.
Currently I have this:
HTML:
<div class="VS-search-inner" onclick="innerSearchPanelClicked(event)">
JS:
function innerSearchPanelClicked(e){
var inputToFocus = $( e.target ).find("input").last();
if(inputToFocus.is('input')){
inputToFocus.focus();
var length = inputToFocus.val().length;
inputToFocus.setCursorPosition(length);
}
}
This works well on click but if I try to change it to mouse down it keeps loosing focus on the input.
The mouse click is going through after the input is selected, causing it to lose focus. Try using a timeout.
function innerSearchPanelClicked(e){
var target = e.target;
setTimeout(function () {
var inputToFocus = $( target ).find("input").last();
if(inputToFocus.is('input')){
inputToFocus.focus();
var length = inputToFocus.val().length;
inputToFocus.setCursorPosition(length);
}
},10);
}
Related
I added a listener to an unordered list to perform a function when a text area element within the ul was changed. When the text area is changed, I wanted to get the value of the now changed text area, and save it. When I try to save the value in newNotes, I am given back the INITIAL value of the text area, not the value after the text area has been changed. Isn't that the whole point of the listener, to be triggered upon a change?
ul.addEventListener('change',(e)=> {
if(e.target.tagName === "TEXTAREA") { // if the ul was changed and a textarea was targeted
const li = e.target.parentNode; // the parent list item of the text area
const liName = li.firstChild.textContent; // this is a string
var newNotes = e.target.textContent; // PROBLEM : RETURNS WRONG VALUE
console.log(newNotes);
updateNotesTo(liName, newNotes); // regarding localStorage
}
});
You want the value from textarea
Change
var newNotes = e.target.textContent;
To
var newNotes = e.target.value;
You have to use the .value attribute.
var newNotes = e.target.value;
See also, Textarea.textcontent is not changing
I am trying to swap two cells using two separate click events in javascript. The problem is that the values stored by the first click event is overwritten by the second click event, and the console shows me that the StringAdjacent value stored for the second click event has been overwritten. This is my code:
//Listen to a Set of Click Events to Swap Cells
document.getElementById('board').addEventListener("click", function(e){
click1ID = event.target.id;
click1Class = event.target.className;
stringAdjacency1 = click1ID.replace('cell','')
console.log(stringAdjacency1);
document.getElementById('board').addEventListener("click", function(e){
click2ID = event.target.id;
click2Class = event.target.className;
stringAdjacency2 = click2ID.replace('cell','')
console.log(stringAdjacency2);
});
console.log(stringAdjacency1, stringAdjacency2);
});
function swapIds(click1ID, click1Class, click2ID, click2Class) {
//Are cells adjacent? If so, swap Cells
//Check the winning combinations to see if there's a new match;
//Swap cells;
});
Please help! Thank you.
You are adding a click event listener, which when fired by clicking the first cell causes another click event listener to be added. So when you click the second cell, it will fire the first event listener (overwriting the value), plus the second listener you added after the first one.
You only need to register a single listener who's function can handle the logic:
Something like this should work (didn't test):
var firstCell = null;
document.getElementById('board').addEventListener("click", function(e){
if(!firstCell) {
firstCell = e.target;
} else {
var secondCell = e.target;
// do whatever logic you want
// reset first cell
firstCell = null;
}
});
This will set firstCell to be the first cell clicked, then the second click it will no longer be null, so it will go into the else condition and you can do whatever you want. Then you'll reset firstCell so the entire interaction can be repeated.
I have a p tag nested in a div tag. The div tag has a mouseover event handler attached to it, the p tag has no event handler. I want to be able to trigger the mouseover event no matter where I in the div tag I mouse over. At this point the mouseover is triggered differently depending on whether I'm over the text or over another section of the div tag.
function btnColorChange(evt){
var evtTrgt = evt.target;
evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
evtTrgt.style.color="rgb(233, 234, 235)";
evtTrgt.style.cursor = "pointer";
setTimeout(function(){
evtTrgt.style.color = "#330000";
evtTrgt.style.backgroundColor = "rgba(41, 82, 163,.5)";
}, 800);
}
var the_btns = document.getElementsByClassName("btn_ovrly");
for (var i = 0; i < the_btns.length; i++){
the_btns[i].addEventListener("mouseover", function(event){
btnColorChange(event);
}, true);
}
HTML - snippet containing the relevant code
<div id="chrts_ovrly">
<div id="btn_ovrly_l" class="btn_ovrly"><p>L text</p></div>
<div id="btn_ovrly_r" class="btn_ovrly"><p>R text</p></div>
</div>
Button descriptions:
1: default button state
2: button when mouseover the div but not the text
3: button after you mouseover the text - text color changed
4: button after initial mouseover of text and now mouseover the div only
5: button after initial mouseover of text and now mouseover the text only
I think it has something to do with event bubbling capturing but I'm not sure. Any help so that the mouseovers are consistent would be greatful.
One more piece of information, I also have a click event attached to the div tag. The click event works while I click on the div, but it doesn't work when I click when my mouse is over the text.
It is unusual to set a timeout that undoes the mouseover style while the mouse is potentially still in the target space. Are you maybe wanting something more along this line:
function btnColorChange(evt){
var evtTrgt = evt.target;
evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
evtTrgt.style.color="rgb(233, 234, 235)";
evtTrgt.style.cursor = "pointer";
evtTrgt.addEventListener("mouseout", undo);
}
var c = document.getElementById("chrts_ovrly")
c.addEventListener("mouseover", function(event){
btnColorChange(event);
}, true);
function undo(evt) {
var evtTrgt = evt.target;
evtTrgt.style.color = "yellow";
evtTrgt.style.backgroundColor = "gray";
evtTrgt.removeEventListener("mouseout", undo);
}
I know it sounds silly, but what I want to do is trigger click with some html element hovering over another element.
Lets say we got .cursor that is hovering anchor text. In this case click on .cursor should open a google page.
<div class="cursor"></div>
<div class="htmlPage">
Google
Faccebook
Stack
</div>
Any ideas how to do that?
and this don't count
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Cursor should be movable and should be able to click on other links.
Cursor is that blue circle hovering Google button.
Here I have cursor on google, now on click this should link to google, If i were to click on stack then stack should have opened.
If you are not using IE you can use pointer-events:none in CSS. Then your element will be unresponsive to any mouse interaction (and acting like a ghost foreground element).
The workaround for IE is someting like that:
var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
// Find the parent a element needed with here.parentNode and here.tagName === "A"
// And then fire the click function
I've never use jQuery but I think it should work.
Hope it could help
you can try to get the ".cursor" position on click and compare to each ".htmlPage a" positions and change the window.location.href with the one of the element that overlaps
$(".cursor").click(function(){
var cursor=$(this);
var cl = cursor.offset().left;
var cr = cl+cursor.width();
var ct = cursor.offset().top;
var cb = ct+cursor.height();
$(".htmlPage a").each(function(){
var page=$(this);
var pl = page.offset().left;
var pr = pl+page.width();
var pt = page.offset().top;
var pb = pt+page.height();
if(((cl>pl&&cl<pr)||(cr>pl&&cr<pr))&&((ct>pt&&ct<pb)||(cb>pt&&cb<pb))){
window.location.href=page.attr("href");
}
});
}).draggable();
http://jsfiddle.net/EUmeB/
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Attach an event handler to the cursor class.
$('.cursor').on('click',function()
{
window.location.href = $(this).siblings('.htmlPage').attr('href');
}
This gets the sibling of the element and makes the location equal to that sibling
To be a little more explicit, this might be best.
$('.cursor').click(function(){
$(this).next().children('a').click();
});
Try this:
Demo
// Target link in the next div, following div.cursor
$("div.cursor").click(function() {
var link = $(this).next(".htmlPage").children("a").attr("href");
window.location.href = link;
});
I am building some custom dropdown controls and the z-index isn't working properly.
// Add the empty class to the container div if no check boxes are checked.
$('.qx-container').each(function ()
{
var container = $(this);
if (!container.find('input[type="checkbox"]').is(':checked'))
{
container.find('.qx-content').text($('.qx-content').attr('empty-message'));
container.find('.qx-content').addClass('qx-empty-content');
}
else
{
handleCheckBoxToggle(container.find('input[type="checkbox"]'));
}
});
// Wire a mouse enter event to the container div. Turns the drop-down list's colors to gray if the slider isn't visible.
$('.qx-container').mouseenter(function ()
{
var container = $(this);
if (!container.find('.qx-slider').is(':visible'))
{
container.find('.qx-container-border-outer').addClass('qx-container-border-outer-hover');
container.find('.qx-container-border-inner').addClass('qx-container-border-inner-hover');
container.find('.qx-container-border-background').addClass('qx-container-border-background-hover');
}
container.data('hoverState', true);
});
// Wire a mouse leave event to the container div. Turns the drop-down list's colors to white if the slider isn't visible and
// sets the container div's empty class if no check boxes are checked.
$('.qx-container').mouseleave(function ()
{
var container = $(this);
if (!container.find('.qx-slider').is(':visible'))
{
container.find('.qx-container-border-outer').removeClass('qx-container-border-outer-hover');
container.find('.qx-container-border-inner').removeClass('qx-container-border-inner-hover');
container.find('.qx-container-border-background').removeClass('qx-container-border-background-hover');
}
if (container.text() == '')
{
container.text($(this).attr('empty-message'));
container.addClass('qx-empty-content');
}
container.data('hoverState', false);
});
// Wire a click event to the content div. Shows or hides the slider and changes the drop-down list's colors based on the slider's visibility.
$('.qx-container-border-outer').click(function ()
{
var outer = $(this);
var inner = $(this).find('.qx-container-border-inner');
var background = $(this).find('.qx-container-border-background');
var container = outer.closest('.qx-container');
var slider = container.find('.qx-slider');
var sliders = $('.qx-container').find('.qx-slider').not(slider);
// Close any other open sliders.
sliders.each(function ()
{
$(this).hide();
var containerDiv = $(this).closest('.qx-container');
var outerBorder = containerDiv.find('.qx-container-border-outer');
var innerBorder = containerDiv.find('.qx-container-border-inner');
var backgroundDiv = containerDiv.find('.qx-container-border-background');
outerBorder.removeClass('qx-container-border-outer-selected');
outerBorder.removeClass('qx-container-border-outer-hover');
innerBorder.removeClass('qx-container-border-inner-selected');
inner.removeClass('qx-container-border-inner-hover');
backgroundDiv.removeClass('qx-container-border-background-selected');
background.removeClass('qx-container-border-background-hover');
});
// Toggle the slider.
slider.slideToggle(50, function ()
{
if (!container.data('hoverState'))
{
outer.removeClass('qx-container-border-outer-hover');
inner.removeClass('qx-container-border-inner-hover');
background.removeClass('qx-container-border-background-hover');
}
if (slider.is(':visible'))
{
outer.addClass('qx-container-border-outer-selected');
inner.addClass('qx-container-border-inner-selected');
background.addClass('qx-container-border-background-selected');
}
else
{
outer.removeClass('qx-container-border-outer-selected');
inner.removeClass('qx-container-border-inner-selected');
background.removeClass('qx-container-border-background-selected');
}
});
});
// Wire a change event to the check boxes. Stores the user's selection in the content element & displays the text of which check box is checked.
$('.qx-slider').find($('input[type="checkbox"]')).click(function (event)
{
event.stopPropagation();
handleCheckBoxToggle($(this));
});
// Wire a mouse enter event to the slider row so the background color changes to gray.
$('.qx-slider-row').mouseenter(function ()
{
$(this).find('td').addClass('qx-slider-cell-hover');
});
// Wire a mouse leave event to the slider row so the background color changes to white.
$('.qx-slider-row').mouseleave(function ()
{
$(this).find('td').removeClass('qx-slider-cell-hover');
});
// Wire a mouse click event to the slider row to toggle the check box's checked attribute.
$('.qx-slider-row').click(function ()
{
var checkBox = $(this).find('input[type="checkbox"]');
checkBox.attr('checked', !checkBox.is(':checked'));
handleCheckBoxToggle(checkBox);
});
// Handles the checked event for each check box.
function handleCheckBoxToggle(checkBox)
{
// Reference to the containing content div.
var content = checkBox.closest('.qx-container').find('.qx-content')
// Holds the checked values (data is associated with the content div).
var checkBoxData = content.data('checkBoxData');
// Reference to all the check boxes in the slider.
var checkBoxes = checkBox.closest('table').find('input[type="checkbox"]');
// Create an array of check box values (associated with the content div) if it doesn't exist.
if (checkBoxData == undefined)
{
checkBoxData = new Array();
checkBoxes.each(function ()
{
checkBoxData[$(this).attr('interest-level-description')] = 0;
});
}
// Store the checked values of each check box.
checkBoxes.each(function ()
{
checkBoxData[$(this).attr('interest-level-description')] = $(this).is(':checked') ? 1 : 0;
});
// Create a commo-delimited string from the checked values.
content.data('checkBoxData', checkBoxData);
var output = '';
for (var property in checkBoxData)
{
if (checkBoxData[property] == 1)
{
output += property + ", ";
}
}
// Remove the trailing comma.
if (output.match(",") != null)
{
output = output.substr(0, output.length - 2);
}
// Set the content text and class based on the checked values.
if (output == '')
{
content.text(content.attr('empty-message'));
content.addClass('qx-empty-content');
}
else
{
content.text(output);
content.removeClass('qx-empty-content');
}
}
http://jsfiddle.net/heray/1/
If you click the items you'll notice the dropdown menu appears behind subsequent dropdowns. I've added z-indexes and position relative to every element I can think of.
Just so you understand how to use z-index, never assign a z-index to something unless you want it to be displayed over top of another element. The best practice is not to define a z-index (especially not assigning a value of 0) until you need to. In your example, the class you have after clicking the button (the actual dropdown) should have a z-index of 1 or greater, and nothing else in your document should have any z-index definition. if you have an element with z-index of 1, and then you put another element in the same physical spot with a z-index of 2 -- the container with the higher z-index will overlap the one's with the lower.
Remove the z-indexes from the dropdowns. Also, what makes you think that setting a z-index of 0 on them will make things better?
Updated fiddle.