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();
});
Related
just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again
I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();
I am creating a Firefox extension that gets some information about an element on a webpage (say, the element's id attribute), upon clicking said element. I also would like to implement a feature in which hovering over the element will highlight it.
There are some existing solutions that essentially already do this. It seems that these existing solutions (such the "Select element with mouse" feature in Firefox's "Inspector" tool) essentially make use of two event listeners:
A mouseover listener: Highlights whatever element you move your mouse over an element.
A mouseout listener: Removes the highlighting when you move your mouse off of an element. (Otherwise, as you move your mouse over the whole page, eventually everything will be highlighted!)
I have attempted to make my own implementation which uses those two listeners (onmouseover and onmouseout). The highlighting is applied in the same manner as the linktargetfinder in this tutorial: whenever we want an element to be highlighted, we add a link-target-finder-selected property to the element's class attribute. A link reference to the CSS file is put into the head of the HTML document and refers to this CSS code:
.link-target-finder-selected {
outline: 2px solid red !important;
}
This implementation is very close to what we want, but unfortunately, there are a few (most likely related) issues.
First, with text boxes, the highlighting only applies when the mouse is on the border of the text box. Once you move into the interior of the text box, apparently the mouseout event is triggered -- the highlighting disappears, even though it is clear to you or me that the mouse is actually still hovering over the text box. It seems that I need to somehow force the mouseout event to not trigger until you move the mouse completely outside of the text box.
Second, I am having a very similar issue with multiple-select boxes. But I also want the behavior for multiple-select boxes to be somewhat nonstandard. The actual behavior is that a mouse-over will highlight the select box; the highlight will disappear as you begin to move inside the select box, and then the options within the select box will get highlighted as you move over them. Instead, I would like my add-on to function such that, upon entering the select box, the box will be highlighted, and nothing else will be highlighted or highlighted until the mouse leaves the entire box. The solution to this should essentially be the same as the solution to the text box issue.
Please let me know if you have any ideas for how I can fix these issues.
I just gave a solution to this:
https://stackoverflow.com/a/21598914/1828637
I do the same thing in my addon which i hope to release soon.
the mouseout event should not trigger when you move into the middle of a input field, thats weird.
if that really happens then on mouseover the input field, then add a MouseLeave event, (opposite of moustEnter event)
so still to the body add the event listener for mouseoever, and when an element is mousedover then it should un-outline the previously selected element (this is for robustness) and should add a mouseLeave event that will un-outline itself.
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter
try this code, when i tried it i didnt have to do the trick you did for textboxes:
var lastBoxedEl;
function moused(e) {
var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
if (lastBoxedEl) {
lastBoxedEl.style.outline = 'none'
}
lastBoxedEl = target;
target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);
you are using this in html right? i dont know how this would behave in xul
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?
How can I select text when I mouse over a div?
If you mean selecting the text as if you dragged over it, read this question. Whichever approach you try, to make it happen on mouseover, use .mouseenter():
$('#mydiv').mouseenter( function(){
my_superduper_selection_function(this);
});