Capture html content on click - javascript

I'm looking for a way to highlight the current html element on mouse-hover (not a specific object, anything the user encounters)
and when the user clicks the item I want to copy the content of the current html element.
How can I do that in Javascript? is there a library that I can use?
Thank you

To add a hover effect, just add a :hover rule to your CSS sylings and add the changes in style to it. No need for JS at all. In the below example, the background color changes on hover.
Same thing can be done for any element on the page by adding the css rule to the <body> tag instead of a specific object:
body *:hover { background-color: steelblue; }
To add the click event, use JS to add an click listener to either all the items, or to the container of the items. innerHTML will then give you the 'content' of the HTML node that you can do anything with. In the example below, we just send the content to another function that will log it to the console.
You could write all of this into one statement, but it's usually preferred to break these things down into small pieces so you can mix n match later on when changes are needed.
var addClick = function( callback ) {
document.querySelector( '#list_items' ).addEventListener( 'click', function( event ) {
var item = event.target;
if ( item.nodeName === 'LI' ) callback( item.innerHTML );
} );
};
var event_handler = function( content ) {
console.log( 'the content of the clicked item is: ' + content );
};
addClick( event_handler );
.list-item {
background-color: white;
border: 1px solid black;
margin-bottom: 4px;
padding: 4px;
}
.list-item:hover {
background-color: steelblue;
}
<ul id="list_items">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
</ul>

This is a way we can do this.
var elements = document.querySelectorAll(".reader");
var elementArray = [...elements]
elementArray.map(function(ele){
ele.addEventListener('mouseover', function(){
this.setAttribute("style","background:yellow");
})
ele.addEventListener('mouseleave', function(){
this.setAttribute("style","background:white");
})
ele.addEventListener('click', function(){
alert(this.innerHTML);
})
})
<html>
<div class="reader">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit, quam id viverra molestie, augue sapien hendrerit nisl, sed fermentum ante elit porta risus.
</div>
<p class="reader">
Nulla tincidunt tempor tempus. Pellentesque sed nisi eget felis pulvinar sagittis. Maecenas id erat iaculis, tincidunt urna eu, viverra metus. Pellentesque in libero auctor turpis tempor mollis.
</p>
<p class="reader">
Quisque vitae felis nisi. Praesent hendrerit sit amet nibh id scelerisque. Phasellus dictum, leo non sollicitudin pulvinar, arcu diam vestibulum leo, a eleifend libero enim et lorem.
</p>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
</html>

document.execCommand needs a user event to work. It will not work on hover, but it will on clicks and the like (mousedown, mouseup, etc.).
It seems browsers do support it consistently now.
Check out my JSFiddle.
$('.image').hover(function () {
// will not work, no user action
$('input').select();
document.execCommand('copy');
});
$('.image').mousedown(function () {
//works
document.execCommand('copy');
});
Copy commands triggered from document.execCommand() will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. How implementations can be configured to allow write access to the clipboard is outside the scope of this specification.
If you don't like jQuery, a good alternative is clipboard.js

Related

Is it possible to create a vertical line on the side of a SELECTED text?

What I need exactly is to be able to select a text which goes over 1 or more lines and after I push a button, I want a vertical line to appear on the left side of the selected text.
For example, in the text on the below picture I would want a blue vertical line to appear on the left side of line 2 to 4 when I click the button.
Example
Thanks for any help!
So far this is the workaround that I am using. Not working as I want to as you may see if you run the code.
b {
font-weight:normal;
border-left: 2px solid blue;
padding: 2;
position: absolute;
left: 0%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<span id="content" style="line-height: 1.8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa.
</span>
<br/><br/>
<button id="vertical_line">Vertical Line</button>
<script>
document.getElementById("vertical_line").onclick = function() {
// Get Selection
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
// Set design mode to on
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Colorize text
document.execCommand("bold", false,);
// Set design mode to off
document.designMode = "off";
}
</script>
</body>
</html>
Once I select a text and then click the button, the selected text will be surrounded by the tags "< b >". What I did is edit the style of "bold" in CSS. It's quite an ugly work-around so far. I would be grateful if anybody can come up with a smarter solution.
There is a vertical line appearing, but still not along the side as I want it to do.
Cheers
Set a div to the text you are wanting to get the verticle line on
//in your HTML
<div id="left-boarder">
<p> words here </p>
</div>
//in your CSS
#left-boarder {
boarder-left: 1px solid black;
}

In jquery accordion, how to make sure when you click on one header, the other one closes?

I'm using Jquery Accordion to show and hide certain divs. There's also a "Show All"/"Expand All" button. Everything works fine, except for when I click on the header of section 1 and then click on header of Section 2, Section 1 remains expanded. How do I make it collapse when another one is open whilst retaining the show all and hide all functionality? I have tried multiple answers on StackOverFlow, jquery forums and fiddles. Each one of them seem to be missing one thing or the other. Can someone please help me?
This is a fiddle that is almost close to what I want: http://jsfiddle.net/apd8526c/
This is what it is doing:
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function() {
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function(){
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
Check this working code. I have added
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function () {
$('#accordion .ui-accordion-content:visible')['slideUp']().trigger('hide');
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen ? 'slideUp' : 'slideDown']()
// trigger the correct custom event
.trigger(isOpen ? 'hide' : 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function () {
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen ? 'hide' : 'show']()
.trigger(isAllOpen ? 'hide' : 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (isAllOpen) {
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (!isAllOpen) {
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.accordion-expand-holder {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<p class="accordion-expand-holder">
<a class="accordion-expand-all" href="#">Expand all</a>
</p>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 2
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 3
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
</body>
</html>

display all textarea rows without scrolling [duplicate]

This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 7 years ago.
How can I display all textarea rows instead of having that vertical scroll. I have tried with css using min-height and max-height and height: auto but is not working.
.form-control{
width:400px;
min-height: 100px;
max-height: 900px;
height: auto;}
I don't really know if is possible to do that with css.
Maybe is possible with native javascript so I am trying something like this
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!")>
}
}
I find something nice here but it only increase and decrease rows , so how can I display all textarea rows without using scroll. DON'T NEED SOLUTION WITH FIXED HEIGHT, NEED SOMETHING DYNAMIC or other solutions that works only on chrome browser or only on firefox like Object.observe().
Demo
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!") >
}
}
body {
padding: 20px;
}
.form-control {
width: 400px;
min-height: 100px;
max-height: 900px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>
External JSFiddle.
Simple jQuery solution is:
$(function() {
$('textarea').each(function() {
$(this).height($(this).prop('scrollHeight'));
});
});
Check Fiddle.
As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('textarea');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
Check Fiddle Here.
No Javascript required.
You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:
.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
<div class="textarea" contenteditable="true">
The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.
Here is the code from the example.
The following example shows how to make a textarea really autogrow while typing.
function autoGrow(oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
textarea.noscrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Autoadjust
This example will take care of the case where you remove lines.
function autoAdjustTextArea(o) {
o.style.height = '1px'; // Prevent height from growing when deleting lines.
o.style.height = o.scrollHeight + 'px';
}
// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================
// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);
textarea.noscrollbars {
overflow: hidden;
width: 400px; /** This is via your example. */
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Using Jquery and some logic I have tried to do what you need.
Here is the jsfiddle;
https://jsfiddle.net/45zsdzds/
HTML:
<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>
Javascript:
$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');
CSS:
textarea[name='FurnishingDetails']{
height:2em;
}
Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.

Live text highlight

Hello I am new with JavaScript trying to find solution for my problem.
Is there any way I can live highlight my text like we do in PDF's ?
Something like this: Plunker
Relevant Code
<div class="box">
llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam
gravida ac nibh non sollicitudin.
</div>
<button type="button">highlight</button>
I have a button which allow/enable text highlighting on click. Then I drag my mouse selecting texts will get yellow background color.
Is this possible ? Any example will really help.
Thanks
Demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) { });
.box span {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MainCtrl">
<div class="box">llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam gravida ac nibh non sollicitudin.</div>
<button type="button">highlight</button>
<div class="box" style="margin-top:100px">
DEMO:
<br>llentesque volutpat tempus eleifend. Integer viverra erat ante. <span>Aliquam gravida ac nibh non sollicitudin.</span>
</div>
</div>
The Stack Overflow entry covers numerous methods for highlighting text on a page using javascript:
How to highlight text using javascript
If this isn't what you wanted, comment below.
here's a quick example that I made for you to play with. Basically you want some sort of event, I think on('input') works well here, and then check to see if there is a <span> element somewhere.
This is not a complete example of course, and could use some more work, but it should get you started.
$('#textarea').on('input', function() {
var text = $('#textarea').val();
$('#result').html(text);
if ($('#result').html().indexOf('<span>') > -1) {
$('span:not(.highlighted)').addClass('highlighted');
}
});
// Set the value initially and trigger the event.
$('#textarea').val('Hello <span>World</span>.').trigger('input');
textarea {
width: 196px;
height: 100px;
}
#result {
border: 1px solid gray;
width: 200px;
height: 200px;
overflow: scroll;
}
.highlighted {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='textarea'></textarea>
<div id='result'></div>

Constrain user selection to node without making it editable?

I have the following page:
<div class="a">
...
</div>
<div class="b">
...
</div>
My users interact with this page by selecting various pieces of text within .a and .b. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between .a and .b.
Is there a way to constrain the user's selection to a <div>?
Unfortunately, this content is not user editable - which is unfortunate, because setting contenteditable="true" on each <div> achieves the constraint I'm looking for.
How about starting with this:
HTML:
<div class = "a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus.
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.noSelection {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
div + div {
padding-top: 10px;
}
jQuery:
$(function() {
$("div").hover(function() {
$(this).siblings("div").toggleClass("noSelection");
});
});
Here's a fiddle: http://jsfiddle.net/J2fJz/.

Categories