I have this typewriter script which uses timeout in a self-referencing function to add a character to element.
The problem is that is takes longer on firefox than in chrome and I want it to complete within the same duration across all browsers.
Chrome: Performed in: 3.167695
Firefox: Performed in: 4.10383
var start = performance.now();
txt = $('#text').html();
typeWriter(txt,0);
function typeWriter(text, n) {
if (n < (text.length)) {
$('#text').html( text.substring(0, n+=2) );
setTimeout(function() {
typeWriter(text, n);
}, 1);
}else{
var end = performance.now();
$('body').append('<h4>Performed in: ' + (end - start)/1000);
}
}
#text{
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>
Should I use the timer to figure out how many characters to add per cycle? What's the best way to fix this?
Use requestAnimationFrame - you can then set a pretty accurate elapsed time - in the example I use 3 seconds
the wait is 1000/60 - because requestAnimationFrame runs at 60fps
the code could easily just be
var count = txt.length 3 / 60;
Where the 3 is the number of seconds you want this to take, and remove the var wait and elapse - I've only included the code like this to help see what's happening
var start = performance.now();
var txtEl = document.getElementById('text');
var txt = txtEl.textContent;
var wait = 1000/60;
var elapse = 3000;
var count = txt.length * wait / elapse;
var typeWriter = function (text, n) {
if (n < (text.length)) {
txtEl.textContent= text.substr(0, n+=count);
requestAnimationFrame(function() {
typeWriter(text, n)
});
} else {
var end = performance.now();
document.body.insertAdjacentHTML('beforeEnd', '<h4>Performed in: ' + (end - start)/1000);
}
}
typeWriter(txt, 0);
#text{
font-size:10px;
}
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>
Firefox: 3.022785
Chrome: 3.022000
Close enough for gubmint work, would you say?
SetTimeout is an asynchronus call whatever time you specified in setTimeout does not mean it will be executed exactly after that time. Whenever you do
setTimeout()
It request will be stored on stack and it will be able to execute AFTER that time. After doenot means as soon as. so we do not have any control on that.
Now question is that what is difference between two browsers? Chrome uses v8 javascript engine and firefox uses spidermonkey. So it is like you are asking two persons to do same task in same time.(correct me if i am wrong)
Related
I'm using AOS.js (Animate On Scroll Library), but the scrollbars appear while elements are animating since they are out of the window.
Obviously, if I add 'overflow: hidden' to the body or the parent element, users wouldn't be able to scroll through the content when the window resizes.
Does anyone have an idea how to solve this? How to hide overflow only while the element is animating?
I found this in the AOS.js documentation, but I'm not sure what it is, where to put it and whether this is for my problem or something else.
JS Events - AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:
document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
document.addEventListener('aos:out', ({ detail }) => {
console.log('animated out', detail);
});
If I am getting this right you want to hide your both vertical and horizontal scrollbars from a div or any element that have overflow: scroll?
If yes then you can simply add this in your css to hide them:
.[your element class name]::-webkit-scrollbar {
width: 0px;
height: 0px;
}
Preview Below:
.items {
height: 80vh;
width: 80vw;
border: 5px solid black;
background: #aae5fd;
overflow: scroll;
padding: 20px;
}
.items::-webkit-scrollbar {
width: 0px;
height: 0px;
}
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus
assumenda enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis
doloremque similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea
optio eveniet vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi
saepe, accusantium, ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia
harum eum, possimus fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est!Lorem
ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus assumenda
enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis doloremque
similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea optio eveniet
vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi saepe, accusantium,
ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia harum eum, possimus
fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est</div>
I have a button that you click on and a div appears.
If you'll scroll down from an iPhone you'll see that it's not scrolling smoothly as it should. for some reason it's losing that behavior and I don't know why.
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>
Try adding this css.
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
When I have an unordered list of paragraph text inside the container, the read more/readless does not hide any text before the UL list
https://codepen.io/tickatop/pen/NZavXg
Almost made me run crazy
<div class= "col2">
<p class="lead" height="50">>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa, <ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id.
Perspiciatis provident accusamus esse possimus, eveniet corrupti exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt. Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
<button class="more more-lead">Read more...</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
I'm not sure if this is helpful or not, but it has the function you are hoping for so it is an alternative at least. It also works for any number of read-more sections on a single page.
Note that the read more button has the class .more, and an attribute for which links it to the element that it sets the height for.
Hope this helps
Demo
// Hide on load via jquery to avoid issues where JS is disabled
// Cycle through each more button
$(".more").each(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Set height from inline property
elem.css("height", elem.attr("height")).css("overflow", "hidden");
});
// Add click event to more button
$(".more").click(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Toggle expanded class
// Could check for inline property being auto / set and adjust if you want to avoid an !important CSS rule
elem.toggleClass("expanded");
// Toggle text of buttons
if ($(this).text() == "Read more...") {
$(this).text("Read less...");
} else {
$(this).text("Read more...");
}
})
.expanded {
height: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col2">
<div id="lead" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="lead">Read more...</button>
</div>
<div class="col2">
<div id="second" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="second">Read more...</button>
</div>
I have this js script that will make the page fade in when the user enters, and fades out when the user clicks a link to another page. It works, but somehow I have my anchor links within the page and whenever I click the links, it takes me to the anchor and within a few seconds it redirects me to a null page like localhost/website/null
here's the code:
jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click', function(event) {
var thetarget = this.getAttribute('target')
if (thetarget !="_blank" ) {
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function() {
jQuery('body').fadeIn();
}, 1000)
I'm not understanding the problem -- maybe there isn't an issue? Refer to the snippet below?
Meta/Sidenote: SO needs a better way of creating snippets for comments -- this shouldn't be an answer, but there's no better way to supply a SO-generated demo.
jQuery('.container').css('display', 'none');
jQuery(document).ready(function($) {
var $container = $('container').fadeIn();
$('a').on('click', function(e) {
var _target = this.getAttribute('target');
if (_target != "_blank") { // (e.g., null, '_self')
var _href = this.getAttribute('href');
e.preventDefault();
$('.container').fadeOut(function() {
window.location = _href;
});
}
});
});
setTimeout(function() {
jQuery('.container').fadeIn();
}, 1000)
.container {
background: #09c;
padding: 1em;
height: 100%;
width: 100vw;
}
a:nth-child(2n)::after {
content: "\A";
white-space: pre;
}
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
_self (external link)
_self (internal link)
_blank (external link)
_blank (internal link)
No target (external link)
No target (internal link)
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, reprehenderit, nostrum. Tempora totam, iusto, inventore cupiditate hic quam quas explicabo dolore mollitia eius ullam rerum minus placeat nobis in debitis magni non, dolor aut libero
dignissimos fugiat. Sed laboriosam itaque necessitatibus hic excepturi, perferendis, exercitationem cumque incidunt asperiores labore dolor.</p>
<p>Minus velit rerum, reiciendis perspiciatis pariatur accusamus, magni voluptatibus, voluptatem fugit optio libero quidem! Nostrum pariatur eveniet ipsum obcaecati aperiam deleniti hic quam facilis reprehenderit dolor ipsam suscipit, quidem laboriosam
impedit fugiat sit dignissimos delectus qui. Suscipit necessitatibus natus omnis eveniet molestiae nostrum aut culpa, tempora, voluptatibus modi eius nisi.</p>
<p>Illo quo, iure doloremque unde ullam iste. Fuga ullam dicta voluptate, odio sint molestiae expedita sequi, placeat omnis porro. Blanditiis ut, laboriosam nobis necessitatibus esse ipsam, magnam facilis in placeat delectus quidem eos laborum, illum
similique fugiat nesciunt doloremque ratione unde vel fugit excepturi dolor minima, amet tenetur. Tempora, eveniet.</p>
<p>Aliquam ex assumenda eum perspiciatis odio suscipit nemo in delectus. Iste in, ipsam iure deserunt, explicabo ipsum maxime. Praesentium, vitae, quos quia sed doloribus laboriosam. Architecto sapiente totam quisquam esse saepe asperiores provident
voluptatibus aperiam, similique sunt fugit cupiditate beatae aspernatur laborum, eius quas ab tempore consequatur officiis vero! Fugiat.</p>
<p>Explicabo minima necessitatibus soluta odio, sunt saepe aspernatur quasi molestiae cum? Nulla eveniet ad accusantium sed sapiente quod ea soluta repellendus culpa, ut deleniti dolore. Porro amet, quasi dignissimos provident modi nihil rerum quis explicabo,
voluptatem illo assumenda itaque. Maxime sequi asperiores enim tempora maiores dolor. Nihil quidem repudiandae asperiores!</p>
<p>Dicta facere at dolorum ut veritatis recusandae praesentium nesciunt illo, omnis doloremque labore repellendus soluta officia distinctio aperiam pariatur minus quia placeat enim, amet, quae repellat reiciendis nihil magni. Ad expedita dolores cupiditate
debitis dolore? Unde vitae inventore provident reiciendis adipisci dolorum ad ipsa possimus excepturi, mollitia nobis. Perspiciatis, voluptate.</p>
<p>Officia minima nulla delectus neque sapiente in voluptates iste facere dolorum sequi, animi fuga illo enim alias explicabo, culpa? Quaerat nesciunt animi, eius assumenda quidem sunt saepe nam suscipit voluptate eaque, laborum minus expedita nostrum
praesentium iusto eveniet officia ab tempore eos at. Dolores minus qui fugit, temporibus sequi tempora!</p>
<a id="foo" name="foo">ID:foo</a>
</div>
</body>
i want to show popup when user scroll to 50% of the page height with javascript. i got a problem:
1.when the popup show then i click close to close the popup, and i continue scroll down, the popup show again. (i try to didnt look like that).
2. if i go to the top of the page and i scroll to bottom again, the popup show again. basicaly i just want the popup to show 1 times any suggestion?
heres the jsfiddle
https://jsfiddle.net/xsv2u0sy/
window.onscroll = function(ev) {
if ((window.innerHeight+window.scrollY) >= halfScreen) {
if(popUp.className === "hide"){
popUp.className = "";
}
}
};
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
if(popUp.className === ""){
popUp.className = "hide";
}
});
}
Used simple boolean value condition.
Jsfiddle link
var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;
var bool = true;
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= halfScreen && bool) {
if (popUp.className === "hide") {
popUp.className = "";
}
bool = false;
}
};
for (var i = 0; i < closePopUp.length; i++) {
closePopUp[i].addEventListener('click', function(event) {
if (popUp.className === "") {
popUp.className = "hide";
}
});
}
#popup {
background: red;
position: fixed;
top: 50%;
left: 50%;
padding: 15px;
height: 150px;
transform: translate(-50%, -50%);
overflow: hidden;
}
.hide {
display: none;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
<button class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
voluptate</p>
</div>
Just track if it was opened already.
var needsPopup = true;
window.onscroll = function(ev) {
if (needsPopup && (window.innerHeight+window.scrollY) >= halfScreen) {
if(popUp.className === "hide"){
popUp.className = "";
needsPopup = false;
}
}
};
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
if(popUp.className === ""){
popUp.className = "hide";
}
});
}
If you are done with the event you should unbind it.
var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;
function checkScroll(ev) {
if ((window.innerHeight + window.scrollY) >= halfScreen) {
popUp.className = "";
document.removeEventListener('scroll', checkScroll, false);
}
};
for (var i = 0; i < closePopUp.length; i++) {
closePopUp[i].addEventListener('click', function(event) {
if (popUp.className === "") {
popUp.className = "hide";
}
});
}
document.addEventListener('scroll', checkScroll, false);
#popup {
background: red;
position: fixed;
top: 50%;
left: 50%;
padding: 15px;
height: 150px;
transform: translate(-50%, -50%);
overflow: hidden;
}
.hide {
display: none;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
<button class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
voluptate</p>
</div>