How to dynamically add links with jQuery [duplicate] - javascript

This question already has answers here:
Use JQuery to build an anchor
(5 answers)
how to add text link inside a div using jquery?
(3 answers)
Closed 1 year ago.
I am a program beginner and I am learning by myself now!
First of all, I am very sorry that my English is not very good, I will try to express it completely, thank you.
My question is, I am working on an effect to limit the number of words in a range, if the number of words is more than that it will hide and show a show more hyperlink that can be clicked into, but how can I add a link instead of a string at the end?
$(function(){
let len = 50;
$(".demo").each(function(i){
if($(this).text().length>len){
$(this).attr("title",$(this).text());
let text=$(this).text().substring(0,len-1)+" show more"
$(this).text(text);
}
});
});
.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<p class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.</p>
</div>


You can add any arbitrary html easily using jquery with code such as
$(this).append("<button type='button'>");
$("<button type='button'>").appendTo(this);
(this = each .demo inside the .each loop)
There's lots of different ways to do this, each with a different use. For example, this would be better built directly into the HTML so you don't get a FOUC (flash of unstyled content) where your full text is shown then hidden - but the question is specifically about adding with jquery.
To start with, it's probably easier to create what you want and then add it.
var btn = $("<button type='button'>");
$(this).append(btn);
this will keep a reference to the btn which you can manipulate later, eg
btn.click(function() { ...
Semantically, a hyperlink <a href= should "go" somewhere - for this you should use a button. You can make it look like a link with some css (found with a quick SO search).
$(function() {
let len = 50;
$(".demo").each(function(i) {
if ($(this).text().length > len) {
$(this).attr("title", $(this).text());
let text = $(this).text().substring(0, len - 1);
$(this).text(text);
var btn = $("<button type='button' title='click to show more'>show more</button>");
$(this).append(btn);
btn.click(function() {
// restore the text, which was stored earlier in the `title`
var demo = $(this).closest(".demo");
demo.text(demo.attr("title"));
// no longer need the button - inside the click handler `this` is now the button
$(this).hide();
});
}
});
});
.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}
/* https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link */
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
font-style:italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<p class="demo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
</p>
</div>
As an alternative, you can also do this with css and adding/removing a class on the parent .box:
$(function() {
$(".showmore").click(function() {
$(this).closest(".box").removeClass("min");
});
});
.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}
/* https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link */
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
font-style:italic;
}
.box.min p {
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
.box .showmore {
display:none;
}
.box.min .showmore {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box min">
<p class="demo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
</p>
<button type='button' class='showmore' title='click to show more'>show more</button>
</div>


There are a few things you need to do to create the "show more" link and have it function.
A couple options for the link itself: You can make it inline with the text by making the .demo class inside a <span> element, adding the link after it, then wrapping both in a <p> (see full code snippet). Another option is just add the link after your paragraph in the HTML as an anchor (or button, etc.):
<div class="box">
<p class="demo> <!-- your full text --> </p>
<a id="showMore"> show more</a>
</div>
Then, add the code to show the link, and create the function to show the original full text. You should store the full text in a variable, prior to hiding it with your substring so you can access it again after full the text is removed. You can style the #showMore in css as you please. Similar code can add a "hide more" element, too.
$(function() {
let len = 50;
$(".demo").each(function(i) {
// Store the original full text, so you can add it back
let fullText = $(this).text();
if ($(this).text().length > len) {
$(this).attr("title", $(this).text());
let text = $(this).text().substring(0, len - 1)
$(this).text(text)
// Show the "show more" link
$("#showMore").show();
// Add function to swap to full text and hide the link
$("#showMore").click(function() {
$("#showMore").hide();
$(".demo").text(fullText);
});
}
});
});
.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}
/* Add the styling for "show more" element */
#showMore {
display: inline;
color: #ef5c28;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<!-- If you want the "show more link inline, make the full text inside a span and move the class from p to the span -->
<p><span class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.
</span>
<a id="showMore"> show more</a>
</p>
</div>


With this: $(this).text().length
You're taking first 50 characters...
You want to get the text and and split it by spaces " " first.
let allWordsInArray = $(this).text().split(" ")
If the array is longer than 50 then add the link and truncate the array...
let finalText = ""
if (allWordsInArray.length > 50) {
finalText = allWordsInArray.slice(0, 50).join(" ") + "..." +"<a href='somelink'>sometext</a>";
}
else {
finalText = allWordsInArray.join(" ")
}
And finally write it out
$(yourCustomContainer).html(finalText)
You have your first 50 words + link...

Related

Terms and Conditions modal read-detection - Plain Javascript (No libraries)

I'm trying to figure out a way to create a scrollable modal that detects when the reader has scrolled to the bottom before enabling the 'Agree' button. This is for a Terms and Conditions type of box. I am also trying to create this with nothing more than plain html, css, and javascript. This is what I have so far.
var termsModal = document.getElementById("terms-modal");
// Get the button that opens the modal
var agreeCheckbox = document.getElementById("agree-checkbox");
// Get the <span> element that closes the modal
var closeModal = document.getElementsByClassName("close")[0];
var modalContent = document.getElementsByClassName("modal-content");
var agreeButton = document.getElementById("agreeBtn");
var agreementContainer = document.getElementById("agreement");
// Enables agree button when user scrolls all the way down
// modalContent.scroll(function() {
// var disable = (((agreementContainer.height())) >= (modalContent.scrollTop() + modalContent.height() + 1));
// agreeButton.disabled = disable;
// })
// When user clicks agree button in modal, keeps agree checkbox checked
agreeButton.onclick = function() {
agreeCheckbox.checked = true;
termsModal.style.display = "none";
}
// When the user clicks the button, open the modal
agreeCheckbox.onclick = function() {
if (agreeCheckbox.checked === true) {
termsModal.style.display = "block";
} else {
agreeCheckbox.checked === false;
}
}
// When the user clicks on <span> (x), close the modal
closeModal.onclick = function() {
termsModal.style.display = "none";
agreeCheckbox.checked = false;
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
termsModal.style.display = "none";
agreeCheckbox.checked = false;
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
padding-bottom: 100px;
left: 0;
top: 0;
scroll-behavior: smooth;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
/* overflow: auto; Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
overflow: hidden;
border-radius: 5px;
}
.modal-header {
display: flex;
justify-content: flex-end;
width: 100%;
padding-right: 5%;
}
.modal-inner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* align-self: center; */
/* padding-bottom: 10%; */
width: 70%;
background-color: #fefefe;
border: 1px solid #888;
/* margin-bottom: 20%; */
margin-right: 10%;
margin-left: 10%;
height: 450px;
/* padding: 20px; */
border-radius: 5px;
}
#agreement {
height: 350px;
margin-bottom: 5%;
border-radius: 5px;
display: flex;
flex-direction: column;
}
/* Modal Content */
.modal-content {
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
background-color: #fefefe;
margin: auto;
/* padding: 20px; */
border: 1px solid rgb(179, 179, 179);
border-radius: 5px;
width: 97%;
/* margin-bottom: 20%; */
overflow-y: scroll;
}
.modal-footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<!-- <a href=""> -->
<input type="checkbox" id="agree-checkbox">
</>
<p>
I HAVE READ THE <span>PRIVACY POLICY</span> AND AGREE TO THE <span>TERMS AND CONDITIONS</span> OF THIS AGREEMENT.
</p>
<!-- </a> -->
<!-- The Modal -->
<div id="terms-modal" class="modal">
<div class="modal-inner-container">
<div class="modal-header">
<span class="close">×</span>
</div>
<!-- Modal content -->
<div class="modal-content">
<!-- <p>Some text in the Modal..</p> -->
<div id="agreement" class="termsImages">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae reprehenderit est, hic esse, numquam omnis autem exercitationem eum a nobis perspiciatis et labore voluptatibus accusamus molestias eveniet laboriosam amet cumque ut, fuga soluta atque
porro eaque voluptatem? Doloremque, culpa modi. Corrupti optio similique excepturi inventore architecto ipsum, officiis explicabo sunt ducimus, iusto dolorum animi eius pariatur fuga consectetur rerum? Ratione, amet. Explicabo culpa accusamus
consectetur esse odio quis, unde officiis quidem veniam, doloremque sed modi error tenetur eligendi quisquam molestiae, ut dicta suscipit nisi officia necessitatibus voluptatem ex delectus. Praesentium tenetur consequuntur repellendus voluptatum,
dolorem adipisci. Voluptate ab repellendus eum nobis alias quae corporis odit quasi unde, aut pariatur quod! Laboriosam qui quisquam minima quia, eum perspiciatis odio non ullam ipsum culpa quae iste voluptatum velit aspernatur? Nisi vitae dolor
fuga dignissimos facere culpa voluptate, delectus ipsam iste laboriosam at iure. Quod porro perferendis modi laboriosam, error expedita explicabo similique et ex, facilis dignissimos natus, tenetur cupiditate iure tempora debitis aspernatur
repudiandae sequi voluptatem eos blanditiis! Veritatis pariatur hic illum. Nemo laboriosam aliquam reiciendis! Voluptas sequi modi nisi veniam error vel aperiam a ab ipsam, nam porro rerum laudantium totam corporis suscipit maiores quam nihil
temporibus asperiores, ex consequuntur doloremque! Illo nisi tenetur minima consectetur ad iste non molestias fugit, laborum molestiae delectus fugiat saepe quos dolorum? Magni nobis consequatur ut maiores adipisci magnam rem ex odit nesciunt
ullam temporibus rerum quis, nostrum distinctio quisquam facilis quia ducimus necessitatibus impedit earum deleniti. Mollitia, tempore minima? Atque molestiae perspiciatis velit dolore eius? Nisi id aperiam magnam consequatur eum distinctio,
architecto aliquid temporibus. Natus accusantium magni fugit aliquid, libero ratione. Modi maiores asperiores, consectetur dignissimos impedit eaque similique culpa quo obcaecati sequi rerum possimus assumenda! Modi nesciunt alias quisquam quas!
Quas, maiores. Molestias tenetur nihil, ducimus nam a possimus fugit minima fugiat assumenda dolor molestiae soluta delectus veritatis laborum laudantium quia quae magnam porro saepe quibusdam doloremque. Dignissimos quaerat laborum possimus
quis nisi at, sequi delectus, quasi inventore tempore facilis modi repudiandae? Aperiam dolores quos inventore eveniet mollitia est ipsa. Nihil repellat molestiae possimus qui itaque! Cum id recusandae error et dolor beatae iure quidem dolorem
ratione, eveniet, consequuntur laborum veritatis. Sapiente quis nostrum possimus illo nihil quisquam consequuntur. Commodi quidem nisi rem porro impedit at, praesentium qui non fugiat aspernatur illo reiciendis et quos soluta atque similique
aut? Dolore illum quas obcaecati laboriosam, eos tempora delectus ex rerum iure, temporibus soluta voluptates. Neque recusandae, aspernatur inventore voluptatibus sint quae? Quibusdam repellendus deserunt nobis illo adipisci iste. Sed explicabo
dolore accusantium, inventore repellat ratione praesentium minus magni doloremque, itaque ab sunt error, at ut consectetur repudiandae ullam ea repellendus distinctio? Illum modi similique rerum tenetur odit ad quae, vitae architecto repellendus
illo harum iste quas iusto eveniet molestiae reprehenderit ab nisi quasi ullam. Aliquid enim vero hic ipsam natus consequuntur, at repellat ipsa inventore, sequi veritatis eveniet deserunt illum ut? Error a autem sint consequatur, nulla totam
quisquam. Dicta repellendus iste corporis ut? Iusto aperiam aut placeat recusandae similique quis perspiciatis fugit molestiae sapiente consectetur voluptates, quia quae tempora error obcaecati eum perferendis exercitationem ipsam delectus!
Saepe earum, alias hic dignissimos deleniti doloribus, minus architecto aliquam odio explicabo vitae ab, blanditiis numquam. Itaque nihil deleniti omnis nobis, vitae odit quam nam excepturi neque officiis iste ducimus quidem tenetur recusandae
voluptatem exercitationem, iure sequi sed eum repudiandae fugiat similique? Rem nostrum quidem in quia magnam necessitatibus placeat magni voluptate, dolorum quos adipisci molestiae quibusdam tempora sed, aperiam illum odio excepturi. Voluptate
nostrum natus, fugit perspiciatis tempora cupiditate officia alias eos, ducimus ad dolore autem excepturi laborum! Distinctio ad aliquid quibusdam odio nemo, itaque, totam inventore velit corporis illo, facere maxime consectetur fugit consequuntur
necessitatibus quia. Debitis adipisci recusandae dicta illo quisquam, tempora voluptas id odit et commodi ab, excepturi iure velit explicabo libero aliquid asperiores officiis vitae aperiam eius? Accusantium sint a labore, pariatur dolores,
veniam ipsa quae ab blanditiis consequuntur tempore optio vel aperiam sunt! Dolorem eius adipisci magni ab corrupti, dolor modi recusandae qui ut nam quasi minima ea voluptas ullam corporis blanditiis commodi iure voluptates obcaecati, ducimus
velit explicabo? Laborum sit temporibus magni illum qui assumenda porro inventore totam suscipit vero esse perferendis tenetur voluptates eligendi ratione, tempora maiores ex alias sequi impedit amet error. Voluptate, nobis labore, maxime eius
repudiandae iusto culpa quidem nisi quo, dicta consectetur sint! Et officiis itaque deleniti qui delectus molestiae, doloribus, cumque dolores fugiat inventore quisquam mollitia similique consequuntur sapiente. Nihil vero quod, fugit rerum consequuntur
ipsam magnam quibusdam blanditiis amet aut iusto corporis qui repellendus odit reiciendis maxime et sit dolore nam. Eligendi repellendus, at modi deserunt accusamus voluptate expedita eos culpa adipisci, voluptatum sed veniam quaerat quod quibusdam
distinctio natus animi odio maxime facere repudiandae! Minus dolore eum illum numquam! Labore velit enim amet at doloribus esse magnam natus eaque provident mollitia!
</p>
</div>
</div>
<div class="modal-footer">
<p class="instructions">Please read through to the end of the Agreement to enable the AGREE button.</p>
<button type="button" id="agreeBtn" class="agree-Btn" data-dismiss="modal" aria-hidden="true">AGREE</button>
</div>
</div>
</div>
It's not currently working. Any help is appreciated!

How to not highlight every single link when navigating to a link after scrolling?

I have these links that work just fine when scrolling. My issue is that if I click on a single link (Example: Blog) just want to go straight to that link without having to travel to each link in order to make it to "Blog" link. Can someone point me in the right direction or tell me what I'm missing? Thanks a lot in advance!
Here is LIVE DEMO
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
NOTE: I still want to keep the smooth scrolling functionality.

You can manually disable scroll spy on click by link and then enable it by timeout.
let disableScrollControl = false;
let oldTimeoutId;
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
disableScrollControl = true;
document.querySelectorAll('nav ul li a').forEach(otherLink => {
otherLink.classList.remove('active');
});
link.classList.add('active');
if (oldTimeoutId) {
clearTimeout(oldTimeoutId);
}
oldTimeoutId = setTimeout(() => {
disableScrollControl = false;
oldTimeoutId = undefined;
}, 1000);
});
});
//Active navigation on scroll
window.addEventListener('scroll', event => {
if (disableScrollControl) {
return;
}
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#services">Services</a></li>
<li><a class="nav-link" href="#about-us">About Us</a></li>
<li><a class="nav-link" href="#blog">Blog</a></li>
<li><a class="nav-link" href="#contact-us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

We can set some sort of marker when a link is clicked and change the behaviour on scroll slightly so that if that marker is set the intermediary links don't get highlighted.
Change the li elements so they do something on the link being clicked as well, so the list becomes:
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
The changed JavaScript is:
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
You can see it working by running the snippet (use Full Page mode)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
</style>
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
<script>
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
</script>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

Firstly, I think there are some problems with the current approach.
To illustrate that, if you place a console.log statement inside the window's scroll event handler:
/* ... */
let fromTop = window.scrollY;
console.log('scroll event');
navigationLinks.forEach(link => { /* ... */ })
/* ... */
and click on Blog link, the console would print the message at least 20 times. Considering that the navigationLinks.forEach loop will run for each invocation of the handler, I'd say this is not the most efficient approach. There is also the fact that you query the DOM on each invocation as well, which it is not recommended.
With that in mind, here would be my approach:
const linksContainer = document.querySelector(".tab-content");
let prevActiveLink = document.querySelector(".tab-content .active");
// attaching the listener only on the container
// with the help of event bubbling, this handler will be called
// `ev.target` - the element that started the event
// `ev.currentTarget` - the element to which the handler attached
linksContainer.addEventListener('click', ev => {
// if we clicked on the container, no need to go further
if (ev.target === ev.currentTarget) {
return
}
console.log(ev)
const currentLink = ev.target;
if (currentLink === prevActiveLink) {
return;
}
prevActiveLink && prevActiveLink.classList.remove('active');
currentLink.classList.add('active')
prevActiveLink = currentLink;
})
Demo.
EDIT - using debounce
const handler = event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
console.log('scroll event')
navigationLinks.forEach(link => {
/* ... */
});
}
const debounce = (fn, time) => {
let id;
return ev => {
id && clearTimeout(id);
id = setTimeout(fn, time, ev)
}
}
window.addEventListener('scroll', debounce(handler, 100));
Demo

The only thing that you need to do is to add a debounce function so that your scroll event handler is 'deferred' to the future. For example:
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
//Active navigation on scroll
window.addEventListener('scroll', debounce(() => {
// ... your existing logic for scroll event
}, 50));
P.S. debounce function implementation is taken from here.
Updated pen is here

JS keeps redirecting me to a null page

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>

How can I make my header smaller if i will scroll down the webpage [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have got my header position: fixed; and height: 200px; and green color in the main position up in the website. How can I reduce the height to 100px; if when I scroll down the web page?
I has made some small JSFIDDLE so you can see it. http://fiddle.jshell.net/#&js=ybR4h7OViQ
The header is set up with 200px height. I just want to know what JS/Jquery code do I need to add here so it can go.

Are you looking for something like this?
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 5)
$("header").addClass("small");
else
$("header").removeClass("small");
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding-top: 100px;}
p {margin: 0 0 10px;}
header {height: 100px; line-height: 100px; text-align: center; background-color: #ccf; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s ease;}
header.small {height: 50px; line-height: 50px;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<header>
<h1>Hello</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aliquam fugiat corporis ratione. Eius maiores qui unde aperiam officia, dolorum quo, hic animi harum natus optio adipisci ipsa ratione totam.</p>
<p>Pariatur repellendus repellat, dolores odio reprehenderit provident culpa nostrum molestias optio officia magni impedit iusto? Repellendus fugit est, dicta, non voluptatum similique perspiciatis facilis voluptates magnam. Veritatis iste quis corporis?</p>
<p>Repellat totam deleniti officia sunt amet nisi libero ad, sint quidem, inventore sequi dolorum quae cum suscipit, molestias eum velit quod cupiditate. Soluta doloremque quis laboriosam unde ad laudantium praesentium.</p>
<p>Laborum ab asperiores sequi, placeat expedita. Optio nostrum soluta temporibus numquam repellendus expedita, impedit ducimus reiciendis laudantium minima nobis harum adipisci labore vitae earum magni quo animi facere. Quas, fugit!</p>
<p>At excepturi eius architecto dolorum aliquid. Ex ullam repellendus non id nulla modi quasi numquam, consectetur nam! Cum tempora quisquam, officiis. Atque ipsa culpa saepe, officiis modi error tempora sint!</p>
<p>Ab minus, tempore! Modi nemo praesentium voluptatibus accusamus sit doloremque dignissimos facere illo dolor! Dicta hic consequatur sint voluptatum necessitatibus similique fugit culpa modi eius ab, maiores quam ipsa officia.</p>
<p>In vero minus, dolorum deserunt voluptatibus accusamus, mollitia quasi, sapiente dicta distinctio explicabo cupiditate autem nisi placeat dolores odit harum molestiae aspernatur! Porro, optio vero dolorum architecto cumque incidunt quasi!</p>
<p>Pariatur blanditiis et quod officiis illo iste numquam, temporibus, in neque doloremque. Facere dignissimos exercitationem nisi veritatis possimus vitae debitis quas animi natus excepturi fugit repellat, porro, voluptatum aliquid reiciendis.</p>
<p>Facere, laudantium. Eaque reprehenderit laudantium distinctio quos, in obcaecati fuga. Quia provident, temporibus voluptates, totam delectus nesciunt corrupti optio et voluptatem possimus facere tempore ad quod vel soluta velit itaque?</p>
<p>Quisquam, itaque tenetur accusantium nemo temporibus odit, id qui atque ab magnam sunt voluptas soluta deserunt impedit neque amet nesciunt eaque unde dignissimos. Sequi eligendi, quos consectetur, laborum commodi maxime.</p>
<p>Temporibus et facilis, ipsum aspernatur omnis provident aliquam illum neque laboriosam libero voluptatum voluptates dicta labore ut saepe harum consequuntur eligendi facere quibusdam dolores, ex reiciendis enim aut, impedit! Tempora.</p>
<p>Beatae, ullam, odit. Animi, maiores facere fuga et. Laborum quae sequi veritatis, incidunt dignissimos dolorem, labore, error maxime quam ullam modi fugit accusantium possimus architecto id blanditiis pariatur aperiam ducimus?</p>
<p>Illum magni porro consequatur veritatis earum. Illum delectus, earum quidem error facilis animi ad aperiam temporibus, nesciunt cum nemo fuga quod, assumenda alias ipsum atque. Animi beatae aliquid, voluptatum ratione!</p>
<p>Tempore architecto enim quibusdam, aperiam reprehenderit. Culpa laboriosam commodi ipsum cumque, suscipit cupiditate! Earum repellat totam quo eaque vitae, numquam natus laborum reprehenderit hic, rerum illo, nostrum nobis id. Odio?</p>
<p>In accusamus voluptatum alias doloremque repellat, minima at fugiat commodi praesentium perspiciatis similique quaerat, iste quibusdam, a consectetur ullam modi quod maiores nihil quam velit maxime ad. Ipsum, aut, architecto.</p>

Just do it like this:
var heightFromTop = 50, //Height from top where header will shrink
headerHeight = 100, //height that header will shrink to.
header = document.querySelector(".header"), //Selects .header element
defaultHeight = getComputedStyle(header).height; //Gets the default height of the element
window.onscroll = function() { //Runs function when you scroll window
if (document.documentElement.scrollTop > heightFromTop) header.style.height = headerHeight + "px"; //Checks if the body is scroll down more then heightFromTop
else header.style.height = defaultHeight + "px"; //Otherwise, set it to the default height
}
JSFiddle Demo

css multiple columns list with list-items of varying heights

I have a list of elements each contained in a box that I want to split into two columns. Something like this:
HTML
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quos, unde, tenetur labore consequuntur repudiandae tempore totam soluta praesentium non cumque assumenda incidunt itaque pariatur animi eaque nam aliquid repellendus! Sed, eius laudantium deserunt pariatur rerum possimus enim iste corporis doloribus dolor ea ducimus facere similique qui nostrum excepturi quis ut aliquam animi nam eos doloremque et rem repellat libero neque at quas nesciunt explicabo fugiat.</li>
<li>Modi, eos, veritatis, laboriosam, cumque neque similique ea harum quas</li>
<li>totam cupiditate maiores impedit molestias non maxime nam quis animi laborum nesciunt ut provident sed dolorem dolorum veniam asperiores eligendi ad ratione sunt perferendis facilis</li>
<li>in earum itaque odio fugit mollitia exercitationem tempora necessitatibus voluptates accusamus dolore architecto eum natus. At, nulla, natus magnam quia provident consectetur nobis commodi quis repellendus dicta. Quo, placeat, excepturi iusto ipsam ullam cumque amet molestiae quaerat pariatur laboriosam voluptate</li>
<li>nostrum explicabo esse iure debitis mollitia minima doloribus architecto velit dolorum autem voluptatem aperiam quidem odit dolore itaque quasi.</li>
<li>Illum, doloribus, assumenda odit incidunt accusamus perferendis libero quas temporibus sit rerum tempora ipsum inventore aliquid accusantium sequi eveniet mollitia dolorem</li>
<li>quibusdam omnis architecto officiis ullam earum error. Quia, velit, odio, pariatur, officia maiores accusantium quibusdam aliquam nisi asperiores ipsam odit saepe molestiae cumque adipisci vel quis sapiente cum consectetur repellat deserunt. Dolore, neque harum recusandae praesentium quos officiis</li>
<li>dolores! Aliquid, aut nesciunt officiis. Beatae, maiores,</li>
</ul>
CSS
ul {
list-style-type: none;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
li{
padding: 30px;
background: chartreuse;
margin-bottom: 20px;
}
My problem is that the columns are cut based on the text rather than the <li>'s as you can see here : http://jsfiddle.net/hZSCm/
Is there a way to get my columns to behave properly using css or could I only do this is javascript? If so would I have to use something like columnizer or is there a simpler approach.

Try this:
li{
padding: 10px;
background: grey;
margin-bottom: 20px;
display: inline-block; /* Add inline-block */
}
SEE DEMO

Categories

Resources