I have some contenteditable divs with the same class, the div is dynamically created so I don't know how many there are.
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
I want the text in the last one to be selected (like if you hold the left mouse button down over the text) with a button
The obvious way in jquery:
$(".scale1:last").click();
Doesn't work, it selects the hole page.
I also thought about ways in javascript like Selection.selectAllChildren and Selection.addRange() but i have no elegant way of knowing the last div
How to make text selection checkout here
To reach your goal - replace ID selection with following code:
var query = document.querySelectorAll(".scale1"),
text = query[query.length-1];
Try:
$('.scale1:last').text()
or
$('.scale1').last().text()
Either would work, even for dynamically added elements.
DEMO
Related
I have a div that is content editable and I use this div as an Input for my code. The problem is the user input. If a user writes something in the div, it's just a normal text, but if he makes a new line there is in a div. Can I somehow make it that the first line is also in a div? Or is it possible to just make break elements if there is a new line?
By the way, I want to use a content editable div, because I want to color some parts of the text different that others, why I can't use a text area.
<div contenteditable="true">
"1"
<div>2</div>
</div>
As you can see in the code below if you set the first child element tag as a div, each added child will be a div as well.
var div = document.querySelector("div[contenteditable=true]");
div.addEventListener('input', (e) => {
console.log(e.target.children)
});
console.log(div);
<div contenteditable=true>
<div></div>
<div>
Edit: To have any character at the beginning and be able to click it, copy the invisible character in the first child div.
or copy it here:
I want to check if an element on page contains a text phrase, it shows a second hidden container? For example, '#product-description' contains 'best gift' then a hidden container '#best-gift-graphic' over the product image is shown. I've found answers that skirt around this, and tackle parts, but I can't seem to put it all together.
I've found solutions that hide the element that contains the text:
<script type="text/javascript">
$(document).ready(function () {
$("div p:contains('text')").parent('div').hide();
});
</script>
I need to apply the show/hide to a second container, not the container with the target phrase in. Really new to jquery and just want to understand the syntax. Thanks in anticipation.
You need to check the length to see if any items exist, you can then use .hide() to hide your corresponding element if there is any:
if ($('#product-description:contains("best gift")').length) { // check if this exists
$('#best-gift-graphic').hide(); // hide this
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product-description">best gift</div>
<div id="best-gift-graphic">this is hidden</div>
I am attempting to put together a java script that, upon a user's selection of some text inside a specific div id, will return that selection's start and end indices ignoring internal html tags.
Consider the following example:
<p>Some text that will be ignored</p>
<div id="X">
<p>Here is some text that should be considered</p>
<p>Here is a bit more <span>tex</span>t in a separate paragraph but the same div id</p>
</div>
Now, If I highlight be considered. Here is and use
var currentRange = window.getSelection().getRangeAt(0);
console.log('startContainer\t'+currentRange.startContainer);
console.log('startOffset\t'+currentRange.startOffset);
console.log('endContainer\t'+currentRange.endContainer);
console.log('endOffset\t'+currentRange.endOffset);
console.log('textLength\t'+currentRange.toString().length);
console.log('text\t'+currentRange.toString())
I get startOffset:29 and endOffset: 4.
My Question:
Is it possible to keep track of which <p> tag I am inside of while using the Range() object? I will eventually have more html elements in this div tag, but want to be able to get the indices range of the selection as though it were all one string, ignoring all html elements inside.
Thanks for all the help!
I'm trying to create simple selection option for users when selecting a particular font style. If they click on a font div, the background of that div should change color.
The problem I'm having is that the first font div works perfectly in changing color - however the other font divs do not follow suit.
JSFiddle
HTML
<div class="fonts">
<div id="font" class="minecraft-evenings">
Hello
<p>Minecraft Evenings</p>
</div>
<div id="font" class="minecrafter">
Hello
<p>Minecrafter 3</p>
</div>
<div id="font" class="volter">
Hello
<p>Volter</p>
</div>
</div>
JavaScript/JQuery
$(document).ready(function() {
$('#font').click(function() {
$(this).css("background-color", "#000");
$('#font').not(this).css("background-color", "#f1f1f1");
});
});
The problem:
ID's are meant to be unique identifiers. You should be using classes if you want to identify multiple elements. For this reason, when you select by ID with $("#font"), jQuery (which uses native javascript's getElementById) will only return the first element it comes across that has that ID. This is because if the DOM is valid, it shouldn't find anymore instances of that ID and it would be a waste of processing to continue looking.
A solution:
Remove the font ID's from your divs and replace them with a class instead, like class="font". Since you already have some classes identified, you can use multiple classes separated by spaces, like: class="font minecrafter". After doing this, you will be able to select your elements with the font class using this selector: $(".font")
I have a dynamic list created and need to be able to select data held within two span tags when clicked. My code so far is:
var app_data="<li class='auto'
data-short='"+this['dish_short']+"'
data-desc='"+this['dish_desc']+"'
data-dish_id='"+this['dish_id']+"'>
<span class='m_name'>"+this['dish_name']+"</span> - £<span
class='m_price'>"+this['dish_price']+"</span>
</li>";
Please note that the line breaks within the code are to make it more readable rather than it being all on one line.
What I am trying to do is select the text from each of the span classes although so far with the code below it is selecting all the text eg. the dish name AND the dish price.
Code:
$('li').click(function(){
//alert($('li', this).data('short'));
var m_name=$(this, 'span .m_name').text();
console.log(m_name);
});
For dynamic list created use .on to assing click or other events.
Example
$(document).on('click','li',function(){
//code here
});
The context part goes as the second argument (i.e. $(selector, context)), as well as m_name class is set to <span> elements, so there shouldn't be any space in the selector:
var m_name = $("span.m_name", this).text();