Related
I don't know why I'm not able to make the menu item to the corresponding active class highlighted. The active classes are working fine, they pop up and disappear as they should and in the appropriate places. But I don't know why it just won't show up on the menu bar. I would like it so that when I scroll to section 1 (and so forth), the corresponding section 1 link on the menu gets highlighted. I'm pretty sure the css is correct but I'm new to javascript, so please use vanilla js.
html
<!DOCTYPE >
<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>Manipulating the DOM</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet"> <!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<section id="section1" data-nav="Section 1">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css
.navbar__menu .menu__link.active {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
javascript
window.addEventListener("scroll", () => {
const sections = document.querySelectorAll("section");
sections.forEach(section => {
const length = section.getBoundingClientRect().top;
if (length >= 0 && length < 530) {
section.classList.add("active");
} else {
section.classList.remove("active");
}
});
});
You're adding the class to the section element, not its corresponding navbar link. But the styling CSS rule styles the navbar link.
Since the two are related by the section id value, you can find the navbar link by looking for the a element with href="#theid":
document.querySelector(`a[href="#${section.id}"]`).classList.add("active");
(And similar when removing from the links for other sections.)
Live Example (I made the page header sticky just for the example, since otherwise the links go off the top of the viewport and you can't see the style applied to them):
window.addEventListener("scroll", () => {
const sections = document.querySelectorAll("section");
sections.forEach(section => {
const length = section.getBoundingClientRect().top;
if (length >= 0 && length < 530) {
console.log(`Adding to ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.add("active");
} else {
console.log(`Removing from ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.remove("active");
}
});
});
.page__header {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
}
.navbar__menu .menu__link.active {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<section id="section1" data-nav="Section 1">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
Since it's possible for more than one section to be visible (try clicking "fullpage" on the above and scrolling), you might want to decide which one you want to highlight in that case. For example, if you only want the first matching section's link to be styled. For example (see *** comments):
window.addEventListener("scroll", () => {
const sections = document.querySelectorAll("section");
let found = false; // ***
sections.forEach(section => {
const length = section.getBoundingClientRect().top;
if (!found/* <== *** */ && length >= 0 && length < 530) {
found = true; // ***
console.log(`Adding to ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.add("active");
} else {
console.log(`Removing from ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.remove("active");
}
});
});
Live Example:
window.addEventListener("scroll", () => {
const sections = document.querySelectorAll("section");
let found = false;
sections.forEach(section => {
const length = section.getBoundingClientRect().top;
if (!found && length >= 0 && length < 530) {
found = true;
console.log(`Adding to ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.add("active");
} else {
console.log(`Removing from ${section.id}`);
document.querySelector(`a[href="#${section.id}"]`).classList.remove("active");
}
});
});
.page__header {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
}
.navbar__menu .menu__link.active {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<section id="section1" data-nav="Section 1">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
I got an layout using bootstrap with multiple floating divs.
I want to retrieve the space between the divs using JavaScript. Ive only no idea how i can do this. See below picture.
A picture says a 1000 words ;)
Ive created a fiddle with above layout, i will paste it here so you can play with it if you want.
.page-container {
background: #ededed;
padding: 40px 0;
}
.column {
padding: 15px;
background-color: white;
box-shadow: 1px 1px 3px #ccc;
}
[class^="col-"] {
margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #1
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #2
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #3
</h2>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
<p>
Fusce a velit et justo porttitor sollicitudin a a velit. Praesent ultrices arcu a sodales ultricies. Etiam cursus mattis dapibus. Fusce vulputate commodo pretium. Suspendisse a orci vitae ipsum interdum dapibus a quis velit. Proin euismod, lectus id euismod semper, tellus nunc luctus dui, consectetur venenatis erat mi eu dolor. Nunc eleifend semper lacus, at hendrerit massa. Praesent ac magna at lacus commodo faucibus eu sit amet magna. Donec pellentesque felis et leo interdum dignissim. Sed sit amet sapien ac quam auctor semper quis ut nibh. Vivamus consectetur, ipsum luctus semper viverra, sem arcu sagittis mauris, a interdum odio sapien in augue.
</p>
<p>
Nam ut bibendum urna, sed congue neque. Nunc a nunc venenatis, porttitor odio vitae, finibus est. Suspendisse quis purus a diam aliquam ullamcorper eu sed dolor. Etiam ac eros eget nisl pretium lobortis. Nulla convallis id nunc eget efficitur. Morbi vel elementum justo. Phasellus et egestas quam. Cras eu tristique urna. Cras ac justo efficitur, consectetur eros et, tincidunt nulla. Quisque et cursus ipsum. Ut tincidunt, purus et tempor fermentum, nulla diam suscipit ex, non sodales eros nunc vel ante. Duis quis justo quam. Sed imperdiet lorem et blandit pretium. Etiam elit dui, tristique et vehicula vitae, venenatis et augue.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
</div>
</div>
Im trying to get those pixel, and move the underlying div up using JavaScript. I know i can use something like masonry. But i can't get those working in my application.
Does anyone have an idea how i can do this? (oh, using jQuery is no problem)
Try one of:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight includes the height and vertical padding.
offsetHeight includes the height, vertical padding, and vertical borders.
scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
with JQuery
$('#someDiv').height();
$('#someDiv').width();
Get first element's x,y cordinates (e.g Retrieve the position (X,Y) of an HTML element)
Get first elements height and width (e.g. marco gomes answer)
Get fourth element's x,y cordinates
Calculate:
Fourth's x pos minus (First's x pos + height) = empty space's height
As it is same width as other's width, you have a width.
If you need dynamically find gaps, you can loop all divs and put them in column groups (with help of x pos). Then you do above for each group's current and next in order element (they should be in right order). If the vertical difference is above set rule, you can assume you have a gap.
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 a Bootstrap affixed navbar, but when i try to scroll to a div, the navbar overlays the div text, so i can't read it.
Actually i can not know of your scenario from very little code provided. Anyways i have come up with related demo here. Have a look, see if it helps you.
Here in following we would scroll Down to Header Level 3 content having class scrollStop.
My Approach:
1) Finding position of Header Level 3 from top using offset().top
2) Finding outerHeight() of < header > having class header.
3) Now Top Position - Header Height helps us to get actual position to scroll by removing header's height.
4) Finally animate scroll to that position.
Working : Demo
$(".scroll").click(function()
{
var scrollPos = $(".scrollStop").offset();
scrollPos = scrollPos.top;
var headerHeight = $(".header").outerHeight();
var actualPos = scrollPos - headerHeight;
$("body,html").animate({'scrollTop': actualPos});
});
body
{
margin:0px;
}
.header
{
margin:0px;
display:block;
left:0px;
top:0px;
position:fixed;
width:100%;
height:50px;
background:rgba(180,30,30,0.7);
}
.container
{
margin:55px auto 0px auto;
background:#ccc;
width:90%;
padding:10px;
border-radius:10px;
}
.title h1
{
text-align:center;
}
.container > div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px auto;
border-radius:10px;
}
.scroll
{
position:fixed;
color:#fff;
text-align:center;
background:#34D2E3;
padding:10px;
border-radius:5px;
right:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<span class="scroll">Scroll Down<br> Click</span>
<div class="container">
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3 class="scrollStop">Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
I found how to fix it using the ScrollTo plugin, I changed my code like so:
$("#a-politica-comercial").click(function() {
$('body').scrollTo($('#politica-comercial'), 800, {offset:-110});
});
I changed the offset to reduce some pixels in the final position, so now I have the div with the correct text!
Thanks anyways!
I have a series of divs that on click, toggle the state of a collapsible div (like an accordion widget). That is working fine, but I want to be able to scroll to the top of the trigger div (the div with class name 'panelTab') when the user clicks. The problem is that when the panels are hidden, they take up no space so jQuery doesn't automatically 'know' the size of the page, and isn't able to calculate to the top of the element automatically. So what happens is that on click it scrolls, but it 'overshoots' the top of the window and lands in the middle of the paragraph content. I'm stuck - anyone know a simple solution? Thanks in advance.
<div class="panelTab first holder">
<div class="text-block"> <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div> </div>
<div class="animatedPanel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM </h3><p class="sub- title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder"><div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
And the jQuery:
$('.animatedPanel').hide();
$('.panelTab').click(function() {
$('.panelTab').removeClass('active');
$(this).toggleClass('active');
var panel = $(this).next()
$('.animatedPanel').not(panel).slideUp();
panel.slideToggle({
direction: "up"
}, 100);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
});
http://jsfiddle.net/rmLo2n07/
try changing the style of the hidden element
position:absolute, display: block, visibility:hidden
then calculate it height and restore its old style
Followed a simple tutorial here, but I want the first in the list to display on page load -
Then vanish if another clicked. I also want an active class added to the button if its the one that is being viewed, how would I achieve this using jquery?
Here be the fiddle
HTML
<div id="wrap">
<ul id="divtoggle">
<li><a id="togglediv1" href="#">Web Design & Build</a>
</li>
<li><a id="togglediv2" href="#">SEM/SEO</a>
</li>
<li><a id="togglediv3" href="#">Graphic Design</a>
</li>
<li><a id="togglediv4" href="#">User Experience Design</a>
</li>
<li><a id="togglediv5" href="#">Brand Strategy</a>
</li>
<li><a id="togglediv6" href="#">Digital Prototyping</a>
</li>
<li><a id="togglediv7" href="#">Marketing</a>
</li>
<li><a id="togglediv8" href="#">Digital Marketing</a>
</li>
<li><a id="togglediv9" href="#">Digital Strategy</a>
</li>
<li><a id="togglediv10" href="#">Digital Consulting</a>
</li>
<li><a id="togglediv11" href="#">Email Marketing</a>
</li>
<li><a id="togglediv12" href="#">Pay Per Click</a>
</li>
<li><a id="togglediv13" href="#">Advertising</a>
</li>
<li><a id="togglediv14" href="#">Data Analysis</a>
</li>
</ul>
<div id="div1" class="content">
<h3>Web Design & Build</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div2" class="content">
<h3>SEM/SEO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div3" class="content">
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div4" class="content">
<h3>User Experience Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div5" class="content">
<h3>Brand Strategy</h3>
<p>Your brand has always been important but now, more than ever, it has to be strong enough to be successful across a variety of platforms and a huge range of audiences.</p>
<p>Our brand strategy consultation service covers everything you need to build and grow an effective and future-proof brand. We are experts in revamping older brands and we have extensive experience with creating ones from the ground up.</p>
<p>We take a holistic approach to development and work closely with you and your team to identify how to make your brand work for you.</p>
<p>What your customers want, as well as your market in a broader sense, are all critical factors and help us deliver a strategy which focuses on improving how people interact with your business to drive growth, trust and recognition. To see our branding work, click here.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div6" class="content">
<h3>Digital Prototyping</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div7" class="content">
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div8" class="content">
<h3>Digital Marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div9" class="content">
<h3>Digital Strategy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div10" class="content">
<h3>Digital Consulting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div11" class="content">
<h3>Email Marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div12" class="content">
<h3>Pay Per Click</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div13" class="content">
<h3>Advertising</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="div14" class="content">
<h3>Data Analysis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
<p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
<div class="dots"><span>...</span>
</div>
</div>
</div>
CSS
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11,
#div12, #div13, #div14 {
display: none;
}
.togglediv1 #div1, .togglediv1 #div2, .togglediv1 #div3, .togglediv1 #div4,
.togglediv1 #div5, .togglediv1 #div6, .togglediv1 #div7, .togglediv1 #div8,
.togglediv1 #div9, .togglediv1 #div10, .togglediv1 #div11, .togglediv1 #div12,
.togglediv1 #div13, .togglediv1 #div14 {
display: block;
}
Script
$("#divtoggle").delegate("a", "click", function (e) {
var toggled = ($(this).prop("id"));
$("div#wrap").prop("class", toggled);
});
I'd make a few slight changes to make life easier on yourself. For your buttons... change so that the correct ID in the href as an anchor.
E.g.:
<li><a id="togglediv1" href="#div1">Web Design & Build</a></li>
Then i'd simplify your jquery somewhat... how about this (untested):
$(document).ready(function() {
// On page load hide all divs except first...
$('.content:not(:first)').hide();
$('#divtoggle a').click(function(e) {
$('.content').hide(); // Hide all
$('.active').removeClass('active');
var toShow = $(this).attr('href');
$(toShow).show();
$(this).addClass('active');
e.preventDefault();
});
});
You can also avoid having all the display:none / display: blocks in the css by doing it all in Javascript.
This way if anyone has javascript disabled it should still work with all items shown, and anchoring down when buttons clicked.
My own suggestion is the following:
$("#divtoggle").delegate("a", "click", function (e) {
// don't use jQuery to get the id
var toggled = this.id;
$("div#wrap").prop("class", toggled);
// remove the 'active' class-name from the previously-active element:
$('.active').removeClass('active');
// add the active class to the clicked element:
$(this).addClass('active');
// then we find 'a' elements,
// select only the first,
// and trigger the click event on that element (invoking the above click-handling)
}).find('a').first().click();
JS Fiddle demo.
References:
addClass().
click().
find().
first().
removeClass().
Using the current coding, I would suggest doing something like this:
jsFiddle example
$("#divtoggle a").click(function(){
$("#wrap").attr("class", $(this).attr('id'));
$('.active').removeClass('active');
$(this).addClass('active');
});
Alternatively, here is another approach. It is much cleaner as the only CSS used is the styling for the .active class.
Using this approach, all div elements except the first one are hidden by default. An .active class is added to the clicked element, which is then used to determine which div is displayed.
jsFiddle example
$('#divtoggle li:first-child a').addClass('active');
$('.content').hide(); $('#div1').show();
$("#divtoggle a").click(function(){
var active = (this.id).replace( /^\D+/g, '');
$('.content').hide(); $('#div' + active).show();
$('.active').removeClass('active');
$(this).addClass('active');
});
Not sure if I'm interpreting your question correctly, but this code will make it so that if you click any list element, the first list element will be removed.
$('li').click(function() {
$(this).siblings().find('#togglediv1').hide();
});
If you want to remove whatever is first in the list, then you could use this:
$('li').click(function() {
$(this).siblings(':visible').first().hide();
});
Have a fiddle!
Also maybe consider using newer versions of jQuery if possible.