Jquery: run code when text is selected - javascript

I have a HTML document which llokes like this:
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
I want text No text in the div above is selected to be changed to Some text in the div above is selected when, guess what, some of the text in the div above is selected :)
jQuery has a .select() event, that would make this rather easy to do, but seems, that it works when selected text is inside input or textarea.
Here is a code that I've tried:
$(document).ready(function()
{
//Some text inside div is selected
$('DIV.this_can_be_selected').select
(
function()
{
alert('Something is selected!');
$(this).next().html('Some text in the div above is selected');
}
);
}
);
Nothing is happening.
Is there a way to solve this problem?

jQuery core doesn't have anything for this, but there are some plugin options.
Your code would look like this:
$(function() {
$(document).bind('textselect', function(e) {
alert('Selected Text: ' + e.text);
});
});
You can test it out here.

Related

Select specific text from content editable div

consider below content editable div
.editable-div div {
display: inline-block;
}
<div contenteditable="true" class="editable-div">
<div> This </div> <div> is a an example</div><div> for inline block</div> <div>elemenst </div>
</div>
Put mouse cursor on anywhere in the content
Press shift+home
It will select only inline-block div content
I want to select the whole content till beginning of the div
I can not change inline-block style of inner divs
Due to above reason(5) I am doing an custom implementation for shift+home and shift+ end, that is why I need to select specific text from a div
*Select as In text selection (user-select) of browser, I already have links for selecting whole content of a div Selecting text in an element (akin to highlighting with your mouse)
but here I want to select specific text only. please help
I think window.getSelection() is what you're looking for.
var selection = "";
function getText() {
if (window.getSelection) {
selection = window.getSelection().toString();
} else if (document.selection && document.selection.type !== "Control") {
selection = document.selection.createRange().text;
}
return text;
}

Make div clickable, only when anchor is present in div (multiple divs)

Given a basic structure how can I turn a series of divs into links without turning every div into a link? Here's an example:
<div class="boxes">
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
</div>
And the associated jQuery I'm using to make the divs clickable:
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
The problem I'm running into is the click function gets applied to all divs instead of only those with links.
The desired behavior is to only create a fully clickable div only when an anchor element is found.
For the purposes of this use case, the div (.box) is generated dynamically and wrapping the element in an anchor tag (<div> </div>) is not possible.
Fiddle: https://jsfiddle.net/fu8xLg0d/
Because you add event listeners on all the .boxes .box classes, which are all your divs.
Just add something like :
$(".boxes .box").has('a')...
to narrow it to those only containing an a element
JSFiddle
use .parent to solve your purpose:
$(document).ready(function() {
if($('.boxes p a').length){
$("a").parent().parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
But yes, it can even create a problem so i will say to give a class to your link and then call its parent... :)
Plotisateur just beat me by a minute or two! :P
if($('.boxes p a').length){
$(".boxes .box").has('a').click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
Here's the code anyway: https://jsfiddle.net/fu8xLg0d/1/
You can try this.
$(document).ready(function() {
var anchorbox =$(".boxes p a");
if(anchorbox.length>0){
$(anchorbox).parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
div (.box) is generated dynamically.
Delegate the click event from the body to the target div and on click on the element check if it has anchor tag. For adding the pointer icon create a separate function which will add the icon to the div only if it has an anchor tag as child
$(document).ready(function() {
// separate function to add pointer only if a is present
addClassToElem();
$("body").on('click', '.box', function() {
if ($(this).find('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
})
});
function addClassToElem() {
$('.box a').each(function(a, b) {
$(this).parent().addClass('linkIcon')
})
}
.linkIcon {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
</div>
This little change, helps you to resolve the issue.
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
});
}
});
the difference from your code is, additionally add a checking
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.
It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

I need to update the text of a paragraph by inline edit

I've tried this
HTML
<div>
<h1>Some text here</h1>
<p>Text area text here</p>
</div>
jQuery
$(function(){
$('p').on('click', function(e){
e.preventDefault();
var txt = $(this).text();
$(this).parent().append('<textarea>' + txt + '</textarea>');
$(this).remove();
});
});
I need to update the text of a paragraph by inline editing. I need to back the paragraph with the new text typed there and remove the textarea when someone click outside of the textarea.
Thanks
Here is an update to your fiddle http://jsfiddle.net/99pxz8et/2/
what you need is to listen on change event for the new text area and then update it
$area.one('focusout', function() {
$p.show();
$p.text($area.val());
$area.remove()
});
Edit: changed .on() to .one()

Show/hide text by spiting it with html comment in div

How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>​
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.

Categories