How to get cursor placed element from onclick button using javascript - javascript

I have contenteditable div in HTML5. I have a ul li inside the DOM. When I click on that button I want that cursor placed inside the li using javascript. How can I do that?
<span class="mT2 mL10 bullotIcon fR vam" onclick="iconClick(this)">clickButton</span>
<div id="editableEvent" class="w100p ht70 f13 textField w250 boxSizeBB whiteBg selev grayBdr oA" contenteditable="true" style="height: 100px;">
<ul>
<li>dafdsasdsdfasdfd</li>
<li>dfsfsdfdsfsdfdfdsfsdfsdfdsf</li>
<li>sdfsdfsdfsdfsdfdfsdffdf</li>
</ul>
</div>
function iconClick(obj){
if ($('#editableEvent').getSelection) {
console.log($('#editableEvent').getSelection().anchorNode.parentNode);
}
}
Normally my cursor was inside the content editable div. on click button i want the cursor placed element like 'li' Thanks in advance

Add code below after you click button.
document.getElementById("editableEvent ul li").style.cursor = "default";

To remove an LI that was clicked on, you can use an event's target property to work out what you clicked on then remove it.
Plain JS:
document.getElementById('editableEvent').onclick = function(e){
if(e.target instanceof HTMLLIElement){
e.target.remove();
}
}
jQuery:
$('#editableEvent').click(function(e){
$target = $(e.target);
if($target.is('li')){
$target.remove();
}
});

I am just providing links that may help you
https://stackoverflow.com/a/3976125/3979414 - to find the current position in contentEditable text.
https://stackoverflow.com/a/1211981/3979414 - to find the cursor mentioned tag
https://stackoverflow.com/a/4232971/3979414 - to remove the corresponding tag

you can also try:
$('li').on('click',function(){
$(this).remove();
});

On click li, I was add one class on it after button clicked i remove that class element
"Li clicked":
callLiFunction: function (obj){
$('#editableEvent').find('.liCreated').removeClass('liCreated');
$(obj).addClass('liCreated');
}
"button clicked":
funcCallDel : function() {
$('#editableEvent').find('.liCreated').remove();
}
Thanks for get some idea from you people.

Related

Toggling the class of an object with jquery

I have elements that are added by the user (when they click a button), it adds a p and a pre element. The pre element is invisible and has no class while the p element has a class of "query-p".
What I'm trying to do is to make it so whenever the user clicks on a p element with "data-id='p1'", it add the class "show" to the pre element with "data-id='pre1'" or for example when you click on a p element with "data-id='p2'", it add the class "show" to the pre element with "data-id='pre2'" and so on.
This is my jquery code :
$(function () {
$("p[data-id]").on("click", function() {
var idFound = $(this).data("id");
if ($("p[data-id]").attr("class") == "query-p" && $("pre[data-id]").attr("class") != "show") {
$("pre[data-id]").attr("class", "show");
}
else if ($("pre[data-id]").attr("class") == "show") {
$("pre[data-id]").removeAttr("class");
}
});
});
This is my HTML (the elements that I'm working with are not in this code, I put it here because it might help): https://pastebin.com/eKVbUZHQ
This is my other javascript file (it mostly contains the code that adds the elements that I'm working with) : https://pastebin.com/yEZuuhA8
The problem that I'm having is that my code shows all pre elements instead of only the one it's supposed to.
EXAMPLE :
I added new elements with :
p element 1 : id="display-pre1" class="query-p" data-id="p1"
pre element 1 : id="display-pre-a1" data-id="pre1"
p element 2 : id="display-pre2" class="query-p" data-id="p2"
pre element 2 : id="display-pre-a2" data-id="pre2"
The pre elements are hidden with "display: 'none'".
All elements with class "show" have "display: 'block'".
The pre elements have no class.
Now, whenever I click on the first p element, it adds the class "show" to both the pre element 1 and the pre element 2, so they both get "display: 'block'", when I click it again it hides both of the pre elements again.
Hope this helps a bit.
Some of the issues within the click handler:
With $("p[data-id]") you select all p elements with a data-id attribute, while you need to only select the clicked one.
With $("pre[data-id]") you select all pre elements with a data-id attribute, while you need to only select one with a particular value for that attribute.
You compare the class attribute with "query-p", but then why not put this condition in a way that the click handler is only defined for those? Then you don't have to check this anymore once the user has clicked.
The code with attr("class") and removeAttr("class") assumes that an element will have at the most one CSS class. This is restricting the possibilities. Elements should be allowed to have multiple CSS classes defined for it.
Here is a small snippet to demo how it could work:
$(function () {
$("p.query-p[data-id]").on("click", function() {
var data = $(this).data("id").replace(/^p/, "pre"),
$pre = $("pre[data-id=" + data + "]");
$pre.toggleClass("show");
});
});
pre { display: none }
pre.show { display: block }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="query-p" data-id="p1">para 1</p>
<p class="query-p" data-id="p2">para 2</p>
<pre data-id="pre1">pre 1</pre>
<pre data-id="pre2">pre 2</pre>

jQuery click event handle both class element and element inside

I have the following HTML:
<div class="eventContainer" id="dennaVecka" style="background-color: #2B4699;">
<p>Denna vecka</p>
</div><!--eventContainer ends-->
<div class="eventList" id="dennaVecka_table">
...
</div>
And the following jQuery:
eventID = null;
$('.eventContainer p, .eventContainer').click(function (e) {
//eventID = $(this).attr('id');
eventID = e.target.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
//alert(e.target.id);
});
I want: When div class eventContainer or the paragraph inside it is clicked, I want to use the ID of eventContainer (id="dennaVecka") to display the div class eventList beneath it. My problem with the current setup is that I don't know how to get the ID of eventContainer if the paragraph is clicked. If I click the paragraph I will get the ID of the paragraph ("undefined").
Is there a way to get the ID of eventContainer in jQuery no matter if I click the div or the paragraph?
Maybe I should setup the HTML in another way?
Use the fact that click event bubbles up to the parent container. In this case you can bind only one event handler to .eventContainer and read this.id to get container id:
$('.eventContainer').click(function (e) {
eventID = this.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
});
So if you click p element inside .eventContainer event will still be handled by above listener on .eventContainer, with this pointing to it.

jQuery select the function selector

I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here

how to get text from nested span when li is clicked, with simple javascript

I don't get jQuery yet, so javascript please. I need help adjusting my JS so it gets text from a nested span inside an li when clicked. i have it working now if you click the text, but id like it to work if you click the entire li without it getting the other nested elements (the image).
right now im working with the following html and js:
HTML:
<ul><li><img><span onclick="myfunction(this)">TEXT</span></li></ul>
<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />
JS:
function myfunction(span) {
var textInsideLi = span.innerHTML;
var field = document.getElementById("iSupervisorUserName");
field.value = textInsideLi;
I would like the text from SPAN to be written to the input when the li is clicked, not just the span. I know I should move the onClick call from the span to the li, but how do I adjust the JS so it get only the text inside the span and not the IMG as well?
here you go
html
<ul><li onclick="myfunction(this)"><img><span>TEXT</span></li></ul>
js
function myfunction(li){
document.getElementById("iSupervisorUserName").value=
li.getElementsByTagName('span')[0].textContent;
}
or
function myfunction(li){
document.getElementById("iSupervisorUserName").value=
li.childNodes[1].textContent;
}
anyway i would add an eventlistener to the ul or the li's.. as inline js is a mess if you wanna update the code later.also there is alot more code generated if you add onclick="myfunction(this)" on each li.
You may get the inner <span> element with .getElementsByTagName() method:
HTML:
<ul><li onclick="myfunction(this);"><img><span>TEXT</span></li></ul>
JavaScript:
function myfunction(li) {
var span = li.getElementsByTagName('span')[0],
textInsideLi = span.textContent || span.innerText,
field = document.getElementById('iSupervisorUserName');
field.value = textInsideLi;
// ...
}

How to show button on div mouse hover

i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.
Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.
Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}
Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});
first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}

Categories