I want to get the text selected and also the DOM element along with where the ending of the text selection offset was in the webpage some seconds after the selection completed.
So like you highlight some text and if in 3 seconds that text is still highlighted, then I want to run some code that has as parameters the highlighted text and the DOM element that was nearest ancestor of the text.
I found there is this selectstart event,
https://developer.mozilla.org/en-US/docs/Web/API/Document/selectstart_event
and also the selectionchange event but I don't see a selectend event.
Some ideas were along these lines:
document.addEventListener('selectionchange', () => {
// if (Math.abs(Date.now().getTime() - process_request_start.getTime()) / 1000 <= 5
// if (is_processing_request === true) {
// return;
// }
setTimeout(() => {
if (is_processing_request === true) {
return;
} else {
is_processing_request = true;
console.log(document.getSelection());
is_processing_request = false;
}
}, 5000);
});
So I am looking for elegant code examples that provide/emulate a selectend, I had some working ideas using setTimeout but looking for any other solutions, prefer working code and not assuming any Jquery/libs, just native DOM environment.
For this particular problem, clearTimeout is your friend! You just cancel the timeouts until the time has elapsed (I shortened it to 2 seconds for this example):
let waiting = null;
document.addEventListener('selectionchange', () => {
if (waiting) clearTimeout(waiting);
waiting = setTimeout(() => {
console.log(document.getSelection().toString());
waiting = null;
}, 2000);
});
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra diam quis aliquet pulvinar. Donec fringilla feugiat elit, vitae pretium turpis suscipit et. Integer tempus massa pellentesque arcu sagittis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis faucibus vestibulum tempus. Morbi at dolor rutrum, malesuada ex sed, tempor nisl. Aenean viverra accumsan accumsan. Suspendisse dignissim augue tellus, quis sollicitudin enim dignissim nec. Nunc mollis vehicula nibh, sed suscipit diam tristique vitae. Nam efficitur massa quis ultrices lacinia. Nunc consequat interdum nunc, vel luctus risus faucibus vel. In arcu diam, bibendum ac enim vel, dignissim vehicula quam. Donec non justo scelerisque, hendrerit est rhoncus, consectetur mi. Pellentesque a lorem eget ex placerat sodales eget sit amet metus. Phasellus aliquam vitae neque vel suscipit.
In in nisl tristique, dictum justo ut, consectetur risus. Suspendisse congue dignissim orci, scelerisque accumsan massa ornare vel. Sed finibus ultrices felis, eu ultrices magna consectetur nec. Proin eu fringilla risus. Cras id posuere ex, sed porta dui. Integer id dolor massa. Cras dui ante, congue a odio non, pulvinar faucibus nisi. Nunc in ex non quam rutrum tempus sit amet ac neque. Vestibulum blandit vulputate massa, ut tincidunt magna dictum id. Vivamus laoreet auctor sollicitudin. Duis eu quam ac lacus faucibus imperdiet sodales eu nisl. Integer auctor commodo turpis, a ultricies sem lacinia iaculis.
Quisque id mattis neque, ut dignissim lectus. Curabitur ex libero, rutrum sed massa a, ultricies fringilla justo. Pellentesque in interdum felis, et aliquet ante. Praesent mauris leo, pretium quis lectus non, ultricies elementum neque. Nam suscipit ullamcorper neque sed iaculis. Maecenas placerat nisl et convallis hendrerit. Suspendisse molestie erat non leo cursus, in maximus sem facilisis. Ut non magna quis purus pellentesque auctor sed sed lorem. Aenean sed iaculis metus, at bibendum libero. Pellentesque in est nec ipsum maximus rutrum in vel dui. Duis porta laoreet dolor, aliquet eleifend mi dapibus consequat.
Mauris posuere tempus libero ut ullamcorper. Aenean ac accumsan enim. Quisque ex felis, pretium euismod dui et, euismod malesuada sapien. Etiam et tempus nulla. Quisque aliquet aliquet risus dapibus vestibulum. Etiam blandit leo odio, ac fringilla ante molestie nec. Sed commodo ex a finibus commodo.
Fusce sed fringilla tellus. Fusce id sagittis ipsum. Vivamus lacus neque, interdum et enim et, ultricies consectetur quam. Aenean lacus augue, placerat id odio vitae, imperdiet sodales mauris. In ornare est sit amet vestibulum interdum. Fusce ultrices, mi non mollis condimentum, est ligula dictum arcu, sed hendrerit magna dolor et ex. Morbi faucibus interdum mattis. Duis vel luctus sem, vitae porta elit. In gravida, leo at laoreet iaculis, mi odio ultrices nulla, sed dictum metus enim ac mauris. Sed odio est, consequat vel turpis et, accumsan accumsan libero. Maecenas nec luctus quam. Aenean et lobortis libero, quis pulvinar felis. Vestibulum sed dolor ornare, ultrices justo non, aliquam felis. Mauris sagittis rutrum mi, sit amet imperdiet lorem luctus non. Praesent ac tortor maximus, facilisis diam sit amet, rutrum nunc. Fusce sit amet lectus pretium, vehicula arcu laoreet, elementum justo.</div>
Related
How do I determine in javascript, if an element is above the viewport (user has scrolled past it) (not just if it can be seen)?
In this snippet:
console.log(iselement1aboveviewport); would return:
0, if you have not seen the element (element is below viewport)
0, if you currently see the element (element is in the viewport)
1, if you have scrolled past the element (element is above the viewport).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
Explanation:
You should use Element.getBoundingClientRect
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
It returns an object that looks like this:
{
"x": 7.997159004211426,
"y": 229.81533813476562,
"width": 425.8238525390625,
"height": 18.18181800842285,
"top": 229.81533813476562,
"right": 433.8210115432739,
"bottom": 247.99715614318848,
"left": 7.997159004211426
}
If you want to know when the element is above the view port you need to keep an eye on the bottom property to be <= 0.
Working example:
const element1 = document.getElementById("element1");
window.addEventListener("scroll", function(){
console.clear();
console.log(element1.getBoundingClientRect().bottom <= 0 ? "Above" : "Under");
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
I basically want to access all the properties of an element that you get when say, that element is a target to an event. We do this via this.event.target to get access to all its properties.
What I want to do is search for scrollTop key of elements in the path of an event but all I am returned is their names instead of their equivalent JS objects.
Here's my try:
const viewport = this.event.path.filter(element => element.scrollTop) || { scrollTop: 0 };
But this just doesn't work and returns me an empty array.
you're not getting the scrollTop values because filter return the array containing all the elements having the properity scrollTop : do as following :
const viewport = this.event.composedPath().filter(element => element.scrollTop).map(e => { return e = {
//whatever you want to keep
scrollTop: e.scrollTop
}})
Here's a simple example to extract the scrollTop values from it with map
document.querySelector('html').addEventListener('click',function(e) {
let paths = e.composedPath().map(e => { return e.scrollTop || 0 })
console.log(paths)
});
div {
overflow-y: scroll;
height: 20px;
}
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium sed quam sed faucibus. Sed dictum enim non tortor egestas, sagittis mattis sem hendrerit. Duis quis massa turpis. Fusce consectetur facilisis lectus nec elementum. Praesent porttitor massa non enim bibendum, eu interdum lacus vehicula. Vestibulum efficitur felis sit amet ipsum venenatis interdum. Sed vulputate nibh id mi egestas, eu rutrum tellus dignissim. Sed suscipit risus condimentum libero pulvinar venenatis. Maecenas semper, erat eget dictum egestas, nisl urna finibus quam, a fermentum magna ante vel erat. Integer sed neque tristique, bibendum nisl et, pretium augue. Duis malesuada odio vitae commodo venenatis. Nunc consequat libero ac velit tempus sollicitudin. Sed scelerisque velit sem, ac pellentesque tellus rutrum eget. Aliquam convallis, ipsum id consectetur tempor, nibh odio fermentum orci, vitae imperdiet felis arcu vel elit. Sed venenatis et erat eget scelerisque. Aliquam consectetur nibh eu augue dignissim, a vestibulum ligula facilisis.
Quisque tincidunt in nulla ut placerat. Nullam posuere massa et urna eleifend consectetur. Praesent in odio mauris. Quisque pellentesque ante vitae justo consequat, vel posuere sapien lacinia. Aliquam varius diam nec purus scelerisque lobortis. Donec nisi mi, imperdiet posuere orci in, lobortis egestas purus. Aenean luctus egestas eleifend. Donec semper lectus nunc, eget consectetur nulla commodo vel. Aliquam erat volutpat. Quisque sodales enim sed diam pretium, eget finibus felis interdum. Mauris mattis id velit quis tincidunt. Fusce et pellentesque felis. Proin fermentum, est sed malesuada egestas, lorem nisl luctus mi, non tempor mi leo id nunc. In viverra rhoncus pulvinar. Duis dictum sem ac nisi fermentum, non iaculis eros convallis.
Vestibulum pharetra neque vitae auctor fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eu erat sed ante cursus congue quis nec metus. Donec et erat sed quam faucibus pellentesque. Donec eu orci id justo dignissim tempor at sit amet dui. Curabitur varius lobortis pellentesque. Duis et diam sed ligula laoreet maximus in vel ex. Sed consequat eleifend libero a accumsan. Maecenas convallis tellus lobortis tristique vulputate. Morbi luctus a nisl ac accumsan. Integer dignissim orci et rhoncus porta.
Curabitur lacinia ullamcorper turpis in tincidunt. Nulla facilisi. Sed blandit ultricies arcu, vitae luctus nisi suscipit non. Fusce iaculis dapibus risus. Praesent turpis purus, sodales eget condimentum nec, vehicula id erat. Cras placerat velit justo, non imperdiet quam efficitur in. Fusce sit amet nisl sed purus vestibulum interdum. In felis mi, finibus non sagittis ut, accumsan a velit.
Nunc et ullamcorper mi. Donec vulputate tortor ante, in consequat enim facilisis condimentum. Nullam fermentum, libero ac iaculis tincidunt, dui nibh varius enim, in sollicitudin elit arcu eget libero. Quisque tincidunt mauris ex, sed congue augue faucibus at. Phasellus accumsan urna id enim ullamcorper suscipit. Pellentesque id quam a enim hendrerit dictum. Etiam sit amet dapibus justo, at sollicitudin urna. Etiam sodales efficitur urna, tempor ullamcorper tellus blandit sit amet. Ut magna magna, euismod et viverra suscipit, tristique posuere enim. Phasellus augue ex, viverra a pretium vel, porttitor a turpis. In placerat lectus eu suscipit sodales. Nam at placerat odio. Vivamus ullamcorper fringilla quam in iaculis. Maecenas id viverra nibh. Nunc lorem nunc, auctor non augue a, aliquam dictum lorem. Phasellus pretium nibh in nunc fermentum scelerisque et vel turpis.
</span>
</div>
scroll the text and click on it
i want to show only 300 characters-long paragraph, below is the code im using to hide/show the full text, what should i do to make it show only 300 characters and then show full text when user clicks "show more" button?
TPL file:
<div id="tab-description">
<div id="more-1" class="fulltext">
<p><?php echo $description; ?></p>
</div>
<button aria-expanded="false" aria-controls="more-1" class="toggle-content" hidden><span class="text">Show more</span></button>
</div>
JavaScript:
if ('querySelector' in document &&
'addEventListener' in window) {
var toggleButtons = document.querySelectorAll('.toggle-content');
var fullTextWrappers = document.querySelectorAll('.fulltext');
var fullText;
var toggleButtonText;
[].forEach.call(fullTextWrappers, function(fullTextWrapper) {
// hide all full text on load
fullTextWrapper.setAttribute('hidden', true);
});
[].forEach.call(toggleButtons, function(toggleButton) {
// show toggle more buttons
toggleButton.removeAttribute('hidden');
// add listener for each button
toggleButton.addEventListener('click', function () {
fullTextWrapper = this.parentElement.querySelector('.fulltext');
toggleButtonText = this.querySelector('.text');
// change attributes and text if full text is shown/hidden
if (!fullTextWrapper.hasAttribute('hidden')) {
toggleButtonText.innerText = 'Show More';
fullTextWrapper.setAttribute('hidden', true);
toggleButton.setAttribute('aria-expanded', false);
} else {
toggleButtonText.innerText = 'Show Less';
fullTextWrapper.removeAttribute('hidden');
toggleButton.setAttribute('aria-expanded', true);
}
});
});
}
What I would do is split on each letter and then splice the first 300 items out.
let para = p.textContent.split('')
let first300 = para.splice(0, 300)
Here is a basic usage example:
// Get the div content
Array.from(document.querySelectorAll('div')).forEach(div => {
let para = div.textContent.split('')
let first300 = para.splice(0, 300)
div.innerHTML = `<p>${first300.join('')}<span class="hidden">${para.join('')}</span></p><p>Show More/Less...</p>`
div.querySelector('.more').addEventListener('click', function(e) {
e.preventDefault()
this.closest('div').querySelector('p span:last-child').classList.toggle('hidden')
})
})
.hidden { display:none; }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
Something like this may help:
var desc = "";
document.getElementById("showText").onclick = showText;
function showText() {
document.getElementById("desc").innerHTML = desc;
}
function minifyText(len) {
var textElem = document.getElementById("desc");
desc = textElem.innerHTML;
textElem.innerHTML = desc.substring(0, len) +"...";
}
minifyText(11); // Shorten the text when page loads
<p id="desc">This is some text, for example your description</p>
<button id="showText">Show text</button>
Please i want to compare my div with id = message old document height to new document height.
If there is a difference, then it should scroll to bottom automatically, else nothing should happen. I wish to do this in pure javascript.
This is what i have so far but confused on how to get things done.I know there is surely a way but not succeeding.
function Scroll(){
var elem = document.getElementById('message');
elem.scrollTop = elem.scrollHeight;
}
Thanks for quick response.
If you just want a one-step 'jump' scroll, you can use
window.scrollTo(0, document.body.scrollHeight):
function Scroll() {
var elem = document.getElementById('message');
if (elem.scrollHeight > window.innerHeight) {
window.scrollTo(0, document.body.scrollHeight);
}
}
Scroll();
<div id="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lorem efficitur eros fringilla vestibulum vel in nisl. Nullam porttitor auctor euismod. Duis efficitur eu ipsum sit amet porta. Etiam sagittis velit id urna ultricies, id semper nisi
ornare. Donec ullamcorper orci dui, et eleifend metus dictum quis. Donec libero nisl, sodales at odio sit amet, dignissim egestas enim. Pellentesque consectetur erat eget tellus vehicula efficitur. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Vivamus suscipit, lacus id maximus fermentum, erat velit venenatis diam, ac viverra mi erat in nunc. Aenean eu urna dignissim, elementum dui quis, elementum eros. Duis eleifend metus sed risus sodales efficitur. Fusce sit amet ipsum et magna
luctus tristique. Mauris vitae libero et odio aliquet rhoncus. Donec sed dui ac massa volutpat elementum. Nullam et nibh sit amet nisl accumsan placerat. Morbi at tortor non metus tempor euismod. Nam eget mi at diam sodales tristique non et lacus. Aenean
non nunc imperdiet, consectetur nibh egestas, semper orci. Sed tristique sem odio. Phasellus ultrices lorem venenatis purus pellentesque, in vestibulum augue congue. Vestibulum eu maximus mauris. Nulla facilisi. Etiam in semper velit, nec accumsan nunc.
Curabitur vel fermentum velit, quis blandit velit. Cras eu scelerisque est. Nunc vel dictum ipsum. Maecenas eleifend efficitur metus nec auctor. Donec ut enim hendrerit, gravida urna eu, hendrerit mauris. Proin orci nulla, tristique vitae pharetra ut,
blandit eget erat. Sed lectus mauris, fringilla ut felis nec, feugiat faucibus sapien. Morbi est felis, suscipit at tellus pharetra, interdum gravida lectus. Praesent molestie euismod sagittis. Sed blandit dictum magna, ac ornare elit dignissim eget.
Morbi varius libero sit amet est fermentum, id convallis quam interdum. Praesent posuere eros id dignissim euismod. Sed urna quam, facilisis quis lacinia sit amet, pellentesque et lacus. Vivamus faucibus sagittis dictum. Duis posuere, ipsum elementum
molestie pulvinar, elit odio lobortis ipsum, non finibus velit urna vel neque. Aliquam vehicula augue non sapien fringilla varius. Suspendisse at pellentesque nibh. Vestibulum sollicitudin lacus quis lectus hendrerit venenatis at ut lacus. Donec condimentum
fringilla tellus id bibendum. Donec facilisis elit erat, at varius velit dictum vel. Vivamus bibendum tincidunt justo, lobortis euismod tortor semper vel. Morbi non felis tortor. Aliquam vitae elementum ligula. Praesent sem risus, gravida vitae neque
iaculis, interdum maximus nibh. Etiam eu ullamcorper dui. Etiam mauris lectus, bibendum quis semper eget, egestas a nunc. Maecenas maximus pharetra mi id egestas.</div>
Hope this helps!
I am writing a CGI application which sometimes takes up to one minute to run, but not always. In the cases I am able to predict the delay, I would like to open another window warning the user of the expected delay. My first attempt was to have my CGI script add the line
window.onload = function(){window.open('<URL FOR WINDOW WARNING OF DELAY>')}
to the javascript code embedded into the html document. However the warning window is only opened when the html document is fully loaded, which unfortunately only happens after my slow process has finished running. In other words, too late!
Is it possible to force Javascript to open a secondary window immediately, namely before the current html document is read in full?
Yes you can, it's waiting because you're putting it in the window.onload handler, which, well... waits for the entire window (and its resources) to finish loading.
However, even if you do wait for the onload handler, the popup will be blocked by popup blockers. The only safe way to open a window is within a click event handler.
The better way would be to put some HTML immediately following the open <body> tag and remove it from window.onload
window.onload = function() {
document.body.removeChild(document.getElementById('loader'));
}
#loader {
text-align: center;
position: absolute;
top: 20px;
left: 50px;
width: 500px;
height: 200px;
padding-top: 120px;
border: 2px solid firebrick;
background-color: white;
box-shadow: 0 0 5px 5px #eee;
}
<div id="loader">
Please wait while page loads
</div>
<img src="http://deelay.me/5000/http://i.forbesimg.com/media/lists/companies/google_416x416.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu convallis leo, a condimentum erat. Integer non blandit ligula, sed pretium ante. Cras convallis consequat lorem, tincidunt vehicula sapien dignissim ut. Fusce lacinia neque eu tortor gravida, a ornare eros mollis. Donec fringilla enim ut auctor iaculis. Fusce sed ipsum iaculis, pretium nunc aliquet, tempor ipsum. Ut ac purus sed massa finibus sollicitudin. Ut finibus sem vitae nibh interdum, et maximus mauris pretium. Sed imperdiet nulla non consequat ultrices. Praesent feugiat velit id lacinia faucibus. Aenean iaculis mi ac cursus tempus. Fusce interdum enim et leo hendrerit sollicitudin. Ut feugiat a tellus ac tincidunt. Integer eget convallis sem. Nullam eget dolor id augue volutpat efficitur. Nam at tortor nec purus cursus ullamcorper at sit amet mauris. Sed tristique, turpis ut commodo dictum, leo est bibendum enim, et convallis nunc nibh nec massa. Ut tempor ipsum sapien, ut aliquam libero volutpat et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc libero diam, porta a mattis eget, aliquet non urna. Nullam ex nisi, elementum tristique luctus eu, pharetra at leo. Nulla ac vestibulum nisl. Duis facilisis placerat augue non ornare. Proin tempor ultricies semper. Praesent odio dui, maximus nec erat sit amet, efficitur vestibulum metus. Phasellus in diam consequat, rhoncus quam nec, faucibus purus. Nulla nec scelerisque neque. Pellentesque pretium, dolor vel porta egestas, metus ex ullamcorper turpis, ac maximus est ipsum luctus nulla. Integer lobortis sapien id eros gravida maximus. Suspendisse potenti. Morbi ac volutpat elit, in pulvinar mauris. Aliquam enim est, lacinia id lacus vitae, interdum varius ex. Cras urna tortor, tristique sed nibh ac, vehicula ornare magna. Donec vel semper nisi, imperdiet aliquet diam. Nullam eget pretium ipsum. Morbi semper at eros ac ornare. Quisque id enim sit amet magna imperdiet tristique ut eget quam. In egestas condimentum nisi vel consectetur. Nunc auctor tellus sed mi malesuada, sed iaculis nisi feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus dictum scelerisque elementum. Nam convallis, risus ac dapibus iaculis, arcu neque pulvinar sapien, sit amet auctor nisi felis quis nunc. Proin mattis metus sed mauris imperdiet, et dictum diam vestibulum. Vivamus ac mattis tortor. Phasellus felis lorem, posuere a magna non, tempus dignissim lacus. Nulla vitae euismod turpis. Mauris a nunc quis ligula placerat pulvinar. Donec et quam vitae orci sodales vulputate at ac risus. Quisque eleifend augue in elit dignissim, et aliquet dui ultricies. Duis eget auctor nunc, ac facilisis velit. Mauris lacus nibh, finibus a blandit sed, hendrerit nec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nulla enim, tempor eu augue a, fringilla feugiat arcu. Proin molestie ex sit amet purus laoreet maximus quis in leo. Ut rhoncus metus nisi. Morbi in ipsum vitae erat sodales bibendum. Praesent vitae rhoncus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tristique odio. Ut sit amet lorem sed enim tristique tincidunt. Nunc quis dictum tortor. Vestibulum maximus dui malesuada, bibendum mi sed, finibus nunc. Aliquam erat volutpat. Sed semper risus nisi, non lobortis quam luctus a. Curabitur posuere felis eget erat aliquet imperdiet. Vestibulum mollis feugiat sapien quis ultrices. Vivamus quis ipsum eget nibh vehicula interdum sed nec justo. Pellentesque sagittis, lacus ac malesuada elementum, neque risus eleifend quam, at sollicitudin erat libero ac turpis. Vivamus eu lorem ut sapien fringilla facilisis. Mauris facilisis venenatis ex, nec dapibus ligula fringilla quis. Quisque tempus vehicula ante. Sed vel finibus arcu. Proin in leo at neque pulvinar tincidunt. Morbi efficitur diam nec vulputate interdum. Nunc dapibus felis sollicitudin quam imperdiet sollicitudin. Maecenas eu lacus in sem tempus iaculis. Duis placerat semper nibh, nec malesuada nunc ullamcorper ac. Vestibulum consectetur elit felis, non hendrerit dolor ornare aliquam. Praesent at pretium erat. Duis id velit et velit rutrum efficitur eu ut enim. Phasellus eget molestie nisl, sit amet vulputate turpis. Maecenas id ullamcorper sem. Aliquam ac quam quis purus pellentesque faucibus ac at tellus. Cras sollicitudin vulputate metus, nec tempus tortor. Donec in venenatis nibh. Vivamus maximus sem leo, nec aliquet quam bibendum in. Curabitur luctus, lectus in tempus pretium, nunc lorem lobortis metus, a mattis lectus odio id ante. Proin viverra sapien id felis vehicula, non condimentum ipsum pulvinar. Fusce vitae nisl dui. Nunc at aliquet ante.In non tellus in turpis malesuada tempor scelerisque eu dui. Vivamus sagittis porttitor dui, at lobortis massa commodo ut. Vestibulum ac elementum diam. Ut in egestas dolor. Aenean in ante elit. Etiam dictum nulla odio, sagittis pretium eros aliquam sit amet. Fusce venenatis hendrerit lacus, vitae semper quam molestie non. Aenean lacinia massa vitae felis ullamcorper auctor. Nulla sapien velit, sagittis ac sapien nec, varius pharetra erat. In ornare, arcu a vestibulum lacinia, lorem est molestie mi, eget dapibus dolor odio a mauris. Sed non nibh risus. Fusce facilisis mauris tristique, imperdiet sem quis, maximus turpis. In sit amet nibh venenatis, egestas dolor quis, sagittis mauris. Sed gravida, ex in gravida aliquet, sem nunc sollicitudin mi, sed vehicula turpis magna nec odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat massa et tempus lacinia. Duis consectetur ac libero nec hendrerit. Vivamus eu fringilla libero, euismod maximus felis. Nulla laoreet viverra magna nec auctor. Etiam dignissim sollicitudin tellus, non semper dui imperdiet vel. Pellentesque enim mi, imperdiet vitae suscipit vel, euismod ut lacus. Aliquam congue faucibus sapien, eu tempus erat aliquet at.
</p>
Try this:
var flag = true;
var DELAY = 10000;
setTimeout(function () {
if (flag == true) window.open('<URL FOR WINDOW WARNING OF DELAY>')
}, DELAY);
window.onload = function(){ flag = false; }
The idea is that if your page is not loaded in 10 000 ms, open a new window. But if the page will be loaded faster, it sets flag = false and the condition in timeout is not executed.