Hi nice people of the Internet,
I created a listener for the scroll position of the user:
<svelte:window bind:scrollY={y} />
I would like to save this variable in a store, to make it accessible throughout the website. But for that I would need a setter. Is there a good performant way to do this?
I tried this, but it does not work:
$: () => scrollPos.set(y);
$: console.log("LOG: scrollPos", $scrollPos);```
You should be able to just bind directly to a store value:
<script>
import { writable } from 'svelte/store';
const y = writable(0);
</script>
<svelte:window bind:scrollY={$y}/>
Unfortunately it turns out you've found a bug — that doesn't currently work, for whatever reason. I've opened an issue here: https://github.com/sveltejs/svelte/issues/3832
Here's the code:
<script>
import { y } from './store.js';
import LogScrollPosition from './LogScrollPosition.svelte';
let scrollY;
$: y.set(scrollY);
</script>
<button on:click={() => scrollY = 200}>
Go down
</button>
<h1>Hello!</h1>
<LogScrollPosition />
<p>
Vestibulum arcu turpis, condimentum non lorem quis, volutpat laoreet turpis. Praesent euismod, libero eu pulvinar imperdiet, dolor ex molestie lacus, sed egestas arcu felis non libero. Aenean laoreet arcu porttitor dolor pulvinar eleifend. Pellentesque lacinia neque sit amet nulla blandit, at ullamcorper orci ultricies. Cras pulvinar nec est sit amet sollicitudin. Sed luctus massa nibh, eu luctus magna tincidunt vel. Morbi tempor velit elit, nec cursus risus pellentesque quis. Aliquam erat volutpat. Vivamus tristique lacus vel lorem lacinia, a accumsan turpis gravida. Maecenas dapibus gravida mauris, iaculis placerat urna rhoncus at. Vivamus vel malesuada nisi. Suspendisse pulvinar pellentesque lectus, non imperdiet nisi tempus sed. Maecenas vel magna eu diam faucibus semper ut nec neque.
Aliquam malesuada gravida libero, sit amet pellentesque felis viverra vel. Maecenas est tortor, eleifend ut est nec, maximus vehicula eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt fringilla urna id fermentum. Proin rhoncus iaculis ipsum. In a sapien sapien. Sed eget justo ac turpis sodales imperdiet. In condimentum mauris ut ex sagittis, id malesuada ligula dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus volutpat id velit et vehicula. Vivamus lectus orci, aliquam a maximus et, rhoncus in nibh. Etiam interdum sagittis justo et scelerisque. Quisque dapibus pulvinar pulvinar. Curabitur pulvinar, odio id eleifend consequat, sapien nulla congue metus, ut porttitor massa ipsum eget mauris. Duis a facilisis velit, non semper massa. Vestibulum semper velit nisi, sit amet blandit eros consectetur sit amet. Morbi accumsan magna a ex tempus imperdiet. Duis vitae convallis ipsum, imperdiet efficitur magna. Praesent ultrices turpis nec enim molestie, non aliquet tellus luctus. Sed porttitor nibh sit amet metus malesuada imperdiet et vitae ligula. Donec sit amet ullamcorper nisl. Nulla rhoncus ligula non tellus finibus efficitur. Nullam accumsan mattis risus at cursus. Duis ligula ligula, ullamcorper ac risus nec, hendrerit vulputate massa.
Phasellus pellentesque mauris ligula, id dapibus nisi lobortis a. In eget quam tincidunt, mattis ante eu, dignissim nisl. Proin sollicitudin dolor porttitor, tincidunt ipsum at, consequat leo. Morbi consequat imperdiet mauris, sed maximus tellus venenatis ut. Vestibulum tempus nisi ac semper volutpat. Vivamus rhoncus augue eu erat aliquet sodales. Ut consequat sapien enim, in pulvinar mauris dapibus varius. In mi mi, aliquam vel ante eu, lobortis aliquet lorem. Donec vulputate ac lorem ac laoreet.
</p>
<svelte:window bind:scrollY={scrollY} />
Essentially you were close, but don't make the function reactive with $: () => .... Just do $: scrollPos.set(y).
Here's an example REPL.
Reactive statements will be re-evaluated when the values they depend on change, so you could just make scrollPos.set(y) reactive and it will work as expected.
Example (REPL)
<svelte:window bind:scrollY={y} />
<script>
import { writable } from 'svelte/store';
let y;
const scrollPos = writable(0);
$: scrollPos.set(y);
</script>
<div style="height:1000px;">
<h1 style="margin-top:200px;">{$scrollPos}</h1>
</div>
Related
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>
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
What's a good way to figure out the index of an element in a NodeList when you have the NodeList and a DOM element in the NodeList?
You don't need to convert the NodeList to use indexOf(), just use
Array.prototype.indexOf.call(nodeList, element)
See below:
var p = document.getElementById('3')
var nodelist = document.getElementsByTagName('p')
console.log(Array.prototype.indexOf.call(nodelist, p))
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor sem, egestas id lectus sit amet, bibendum aliquam nulla. Quisque quam arcu, sagittis vitae consectetur ac, interdum vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum rhoncus ipsum id ultricies. Integer sodales posuere magna, eu vehicula velit condimentum vitae. Quisque id felis sapien. Nullam gravida laoreet efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur luctus ac dui eu placerat. Nam ornare lorem sapien, at dapibus lorem aliquam in. Cras sapien odio, fermentum quis ante sed, faucibus consequat elit.
</p>
<p>
Nam ac suscipit massa. In molestie pharetra placerat. Sed ultrices ut diam vel consequat. Morbi et lectus in massa rhoncus volutpat. Duis sit amet tempus ligula, in gravida leo. Nunc posuere rutrum nibh. Ut non sem ac augue efficitur efficitur. Nunc ornare dui enim, quis interdum purus ultricies non. Donec sapien quam, aliquam in metus vel, euismod porta metus. Phasellus euismod pretium velit a efficitur. Aliquam faucibus ultrices libero a dictum. Morbi convallis magna quis accumsan scelerisque. Donec porta elit sed orci pellentesque, id pulvinar nunc luctus.
</p>
<p>
Aliquam enim diam, rhoncus et arcu nec, sodales pharetra mauris. Morbi sodales finibus magna, in aliquet magna ultrices ut. Praesent varius placerat nulla, non mattis justo commodo rhoncus. Phasellus dolor ligula, finibus ac ipsum vel, dictum ullamcorper turpis. In ut ullamcorper mi. Vestibulum laoreet interdum vulputate. Phasellus venenatis feugiat turpis eget pretium. Integer blandit tellus urna, sed commodo purus efficitur sit amet. Curabitur ex lacus, elementum et augue ut, egestas hendrerit ipsum. Curabitur condimentum diam felis, at efficitur nunc convallis sed.
</p>
<p id="3">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam massa nunc, hendrerit eu odio nec, rhoncus ultricies purus. Pellentesque eros velit, porttitor eu lectus vel, convallis sagittis tortor. Praesent facilisis, augue ac volutpat interdum, odio nulla ornare nulla, sed luctus sapien lectus at ipsum. Vestibulum auctor lobortis pellentesque. Aliquam interdum in lacus sed rhoncus. Suspendisse a velit quis leo iaculis dapibus.
</p>
<p>
Nunc eget tristique eros. Cras elementum, nunc eu vestibulum tempor, eros nibh mattis turpis, ac varius erat nisi in felis. Proin nulla libero, viverra quis cursus lacinia, venenatis ac quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vitae est non metus rutrum dignissim tincidunt quis elit. Sed rhoncus augue eu orci ornare congue. Suspendisse feugiat dapibus blandit. Suspendisse a egestas diam, ut efficitur leo. Sed porttitor ornare tristique. Quisque quis nisl a felis viverra mollis a sed nibh. Sed maximus, dolor at ultrices lacinia, quam sem lobortis enim, eu malesuada augue enim vel neque. Integer dapibus eros eget tortor egestas, quis bibendum ipsum tempor.
</p>
If you think that's too verbose you can store a reference to Array.prototype.indexOf.call():
const indexOf = Function.prototype.call.bind(Array.prototype.indexOf)
console.log(indexOf({ 500: 'foo', length: 1000 }, 'foo'))
Just make sure the target of indexOf() has numeric properties and a length.
Convert it to an array:
var arr = Array.prototype.slice.call(nodeList);
Then use indexOf on it:
var index = arr.indexOf(element);
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.