I have been attempting to fix my navbar to the top of the screen when I scroll down but it isn't working. Why is this the case?
Take a look at the bootsnipp: http://bootsnipp.com/snippets/4nqgm
I am attempting to make it look like: http://bootsnipp.com/snippets/featured/navbar-fixed-on-scrolling-with-transition
HTML:
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<div id="second-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
<div id="third-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
CSS:
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
Javascript:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 300) {
$('nav navbar-nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('nav navbar-nav').removeClass('navbar-fixed');
}
});
});
The jQuery selector should be..
$('.nav.navbar-nav'). instead of $('nav navbar-nav').
However your example is very different than the other example. You'll also find other animated navbar examples on Bootply.
Or just try this one as JS Code
$(document).ready(function() {
$('#nav').affix({
offset: {
top: $('header').height()
}
});
});
You just need to fix the way you are trying to target the selector. You have:
$('nav navbar-nav')
Which would target <nav> and <navbar-nav> elements. Replace it with:
$('nav.navbar')
To target <nav> elements with the navbar class.
See this working example:
$(document).ready(function() {
$(window).scroll(function() {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 300) {
$('nav.navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('nav.navbar').removeClass('navbar-fixed');
}
});
});
.navbar-default {
background-color: #fbfbfb;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed !important;
width: 100%;
}
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav>li {
display: inline-block;
float: none;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<div id="second-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
<div id="third-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
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>
This a frequently asked question on StackOverFlow, but the answers I found here are not solving my problem completely. To get a idea of my problem, please browse this fiddle which I found here. My problem is, I am not able to apply this solution as my html structure is different as below:
My HTML section:
<div id="cms-menu" data-pagename="FAQS">
Header html
</div>
<section class="help-centre xs-pt-20 xs-pb-20">
<div class="container-fluid left-container-padding right-container-padding">
<div class="row">
<div class="col-xs-12 text-left">
<h2>Help Centre</h2>
<p>Search or browse our frequently asked questions below</p>
</div>
</div>
</div>
</section>
<section class="back-to-help-centre sm-pt-20 sm-pb-20 xs-pt-10 xs-pb-10">
<div class="container-fluid left-container-padding right-container-padding">
<div class="row">
<div class="col-xs-12 text-left cursor-hand">
<a href="/helpcentre">
<span class="glyphicon glyphicon-arrow-left"></span>
<h5>Back to Help Centre</h5>
</a>
</div>
</div>
</div>
</section>
<section class="myfaq">
<div class="container-fluid">
<div class="row nav-categories-row same-height-columns">
<div class="col-sm-3 left-container-padding white-col-background hidden-xs">
<div class="faq-categories">
<h3>Sidebar header</h3>
<nav id="nav-categories-scroll">
<ul class="nav nav-pills nav-stacked nav-categories fixed">
<li class="faq-item">sectionA link</li>
<li class="faq-item">sectionB link</li>
<li class="faq-item">sectionC link</li>
<li class="faq-item">sectionD link</li>
<li class="faq-item">sectionE link</li>
<li class="faq-item">sectionF link</li>
<li class="faq-item">sectionG link</li>
<li class="faq-item active">sectionH link</li>
<li class="faq-item">sectionI link</li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-9 right-container-padding grey-col-background col-xs-12 faq">
<div id="sectionA">content</div>
<div id="sectionB">content</div>
<div id="sectionC">content</div>
<div id="sectionD">content</div>
<div id="sectionE">content</div>
<div id="sectionF">content</div>
<div id="sectionG">content</div>
<div id="sectionH">content</div>
<div id="sectionI">content</div>
<div class="faq-disclaimer">
<span class="disclaimer-title">Disclaimer:</span><span class="disclaimer-text">disclaimer-text</span>
</div>
</div>
</div>
</div>
</section>
$(document).scroll(function (e) {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $(".nav-categories").height();
var startScrollPos = $("#nav-categories-scroll").offset().top;
var currentScroll = $(this).scrollTop();
var padding = 20; // tweak here or get from margins etc
var scrollTopThreshold = 348;
if (window_top + div_height > footer_top - padding) {
if (currentScroll <= scrollTopThreshold) {
$(".nav-categories").css({ top: -10 });
} else {
$(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
}
} else if (window_top > div_top) {
$(".nav-categories").addClass('fixed');
} else {
$(".nav-categories").css({ top: 0 });
$(".nav-categories").removeClass('fixed');
}
});
</div>
<footer class="md-pt-30 md-pb-30" id="footer">
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-3 col-xs-12">
<h4>INFORMATION</h4>
<ul class="list-unstyled">
<li>Contact Us</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
<li>FAQs</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<hr>
<div class="legal">All Rights Reserved.</div>
</div>
</div>
</div>
</footer>
</div>
My sticky sidebar disappears when the page scroll reaches the footer (which matches this fiddle from the above link). How can I make it scroll up with the page when the footer is reached? This is an existing solution using Umbraco so I can't change the page html structure and I am not an css expert to figure this out of my own. Below is the css:
When the sidebar is visible and sticky
.mycssclass .nav-categories.fixed {
position: fixed;
top: 0;
}
.mycssclass .nav-categories {
margin-top: 20px;
width: 100%;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
ol, ul {
margin-top: 0;
margin-bottom: 10px;
}
When the sidebar gets hidden after scrollbar reaches page footer
.mycssclass .nav-categories {
margin-top: 20px;
position: relative;
width: 100%;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
ol, ul {
margin-top: 0;
margin-bottom: 10px;
}
Note: The content sections (A to I) are dynamically generated and can increase in future.
SOLUTION
Below div is added before <nav id="nav-categories-scroll">
And then the javascript code was updated as below
$(document).scroll(function (e) {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $(".nav-categories").height();
var startScrollPos = $("#nav-categories-scroll").offset().top;
var currentScroll = $(this).scrollTop();
var padding = 20; // tweak here or get from margins etc
var scrollTopThreshold = 348;
if (window_top + div_height > footer_top - padding) {
if (currentScroll <= scrollTopThreshold) {
$(".nav-categories").css({ top: -10 });
} else {
$(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
}
} else if (window_top > div_top) {
$(".nav-categories").addClass('fixed');
} else {
$(".nav-categories").css({ top: 0 });
$(".nav-categories").removeClass('fixed');
}
});
Here is my solution: set #sticky to absolute when it reach footer
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) {
$('#sticky').removeClass('stick');
$('#sticky').addClass('absolute');
}
else if (window_top > div_top) {
$('#sticky').removeClass('absolute');
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
$('#sticky').removeClass('absolute');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky {
padding: 0.5ex;
width: 200px;
height:300px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float:left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
.content-holder {
margin-left:225px;
}
.absolute {
position: absolute;
bottom: 600px;
}
body {
margin: 1em;
position: relative
}
p {
margin: 1em auto;
}
#footer {
width:100%;
height:600px;
background:#ccc;
z-index:999999
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Made for my post: Stick div at top after scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="content-holder">
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
</div>
<div id="footer">
Footer here.
</div>
Below is the JS fiddle that contains 4 Tabs, If I click on tab the tab content get changed.
I need to swap the tabs using only css/style without clicking on the button or any event applied to "tabs-menu"
JS Fiddle
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
HTML Code
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
</div>
<div id="tab-2" class="tab-content">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
</div>
<div id="tab-3" class="tab-content">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
</div>
<div id="tab-4" class="tab-content">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
</div>
</div>
</div><br/>
<input type='submit' value='SET Tab 1 Active '/><br/><br/>
<input type='submit' value='SET Tab 2 Active '/><br/><br/>
<input type='submit' value='SET Tab 3 Active '/><br/><br/>
<input type='submit' value='SET Tab 4 Active '/><br/><br/>
How can I change tabs from external button.
JqueryUsed
var SimpleTabs = function (elem) {
//get tab objects and store as pane + tab
var activeTabObject;
var TabObject = function () {
var self = this;
this.tab; //element
this.pane; //element
this.setClick = function () {
$(self.tab).click(function () {
self.showThisTab();
});
};
this.showThisTab = function () {
if (self !== activeTabObject) {
//change the tab page and update the active tab
$(activeTabObject.pane).removeClass('active-page');
$(activeTabObject.tab).removeClass('active');
$(self.pane).addClass('active-page');
$(self.tab).addClass('active');
activeTabObject = self;
}
};
};
$.each(elem.children(), function (id,val){
var tab = new TabObject();
tab.tab = val;
var classString = $(val).attr('class');
var className = classString.split(' ')[0];
tab.pane = $('#' + className);
tab.setClick();
if (classString.indexOf('active') > -1) {
activeTabObject = tab;
}
});
};
Above is the jquery snippet handling the tab switch.
I've moved your code around a bit but it's to make it more readable.
$(document).ready(function() {
var $tabsMenu = $('.tabs-menu');
var tabsMenuLength = $tabsMenu.children().length;
$tabsMenu.find("a").click(function(event) {
event.preventDefault();
setCurrentTab(this);
});
$('#tab-switch').click(function(e) {
var nextTabId = ($tabsMenu.find('.current').index() + 1) % tabsMenuLength;
setCurrentTab($tabsMenu.children()[nextTabId].childNodes[0])
});
// set initial tab as tab 3
setCurrentTab($tabsMenu.children()[2].childNodes[0])
});
function setCurrentTab(tabEl) {
$(tabEl).parent().addClass("current");
$(tabEl).parent().siblings().removeClass("current");
var tab = $(tabEl).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
}
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;
}
.tabs-menu {
height: 30px;
float: left;
clear: both;
}
.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
margin-right: 10px;
background-color: #ccc;
border-top: 1px solid #d4d4d1;
border-right: 1px solid #d4d4d1;
border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
z-index: 5;
}
.tabs-menu li a {
padding: 10px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.tabs-menu .current a {
color: #2e7da3;
}
.tab {
border: 1px solid #d4d4d1;
background-color: #fff;
float: left;
margin-bottom: 20px;
width: auto;
}
.tab-content {
width: 660px;
padding: 20px;
display: none;
}
#tab-1 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est
at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum
mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies
arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
</div>
<div id="tab-2" class="tab-content">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies
fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper
eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
</div>
<div id="tab-3" class="tab-content">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum.
Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae
risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
</div>
<div id="tab-4" class="tab-content">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget
urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis.
Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra
cursus odio. </p>
</div>
</div>
</div>
<br/>
<button id="tab-switch">change tab</button>
$(function() {
$('.tabs-menu a').mouseover(function(){
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
I have a great little hamburger navigation menu almost working, but there is some weird behavior that happens only after I resize the window twice. The hamburger button does what it should if I load the page when the window is narrow (width < 800px), or if I load when wide (width >800px) and resize to narrow.
The problem occurs if:
I load when narrow (width < 800px),
then toggle the navigation menu,
then resize to wide (width > 800px),
then resize to narrow (width < 800px).
When I go through these steps, the hamburger button toggles the menu open (as it should), but then it also immediately toggles it close, which I do not want it to do.
I am pretty sure I am doing something wrong with the event listener and I believe my javascript is to blame. If you can help me fix it so that the hamburger button always toggles the menu open, I would appreciate it!
here is the codepen:http://codepen.io/ihatecoding/pen/OXmRAd
or if you prefer you can run the snippet.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(max-width: 800px)");
mq.addListener( function() {
WidthChange(mq);
});
WidthChange(mq);
};
// media query change /
function WidthChange(mq) {
if (mq.matches) {
$( "#hamburgerDiv" ).show();
$( ".hamburger" ).show();
$( ".cross" ).hide();
$(".nav" ).slideToggle("slow",function() {
// Animation complete.
});
hamburger();
}
else {
$( ".nav" ).show();
$( "#hamburgerDiv" ).hide();
};
};
function hamburger(){
$( ".hamburger" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
};
html,
body {
margin: 0;
height: 100%
}
#header {
position: fixed;
top: 0;
margin-bottom: -100px;
left: 0;
z-index: 999;
padding-left: .5%;
padding-right: .5%;
background-color: #909090!important;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
#areaTitle {
text-transform: uppercase;
box-sizing: border-box;
text-transform: uppercase;
text-decoration: none;
color: White;
vertical-align: middle;
flex: 0 1 15%;
padding: 0 !important;
margin: 0!important;
}
#areaTitle a {
text-transform: uppercase;
font-size: 30px;
text-decoration: none;
color: White;
vertical-align: middle !important;
padding: 0 !important;
margin: 0!important;
}
#nav {
flex: 1 1 90%;
padding: 0;
}
#menu {
padding-left: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 20px;
text-align: right;
vertical-align: top;
width: auto;
list-style: none;
-webkit-text-stroke: 1px;
letter-spacing: 2px;
}
#menu li {
text-transform: uppercase;
text-align: center;
vertical-align: middle;
color: #909090;
/*area color*/
display: inline;
}
a {
color: white;
text-decoration: none;
}
#fullpage{
margin:10%;}
span {
box-sizing:border-box;
text-align: center;
display: block;
width: 100%;
margin-top:60px;
margin-bottom:60px;
}
h2 {color:MediumVioletRed;}
.important {color: Blue;
display: inline;
width: 10%;}
#menu li a {
text-transform: uppercase !important;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
}
/* ----------------------hamburger code------------------------*/
.cross{color:white;
float:right;
font-size:90px;
line-height:2px;
/*margin-top: 15px;*/
padding:36px 5px 0px 5px;
outline:none;
margin-top: 5px;
}
.hamburger{color:white;
float:right;
font-size:40px;
line-height:40px;
margin-top: 5px;
padding:0 5px 0px 5px;
}
.hamburgerDiv{display:none;
padding-right: 10px;}
/* ----media query for changing navigation and hamburger----------*/
#media screen and (max-width:800px) {
#header {
justify-content: left;
flex-wrap: wrap;
padding: 0 ;
}
#areaTitle a{font-size:4vw;}
#menu {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
padding: 0;
margin-left: 1%;
margin-right: 1%;
}
#menu li a {
padding: 0;
margin: 0;
font-size: 100%;
}
#nav {
text-align: center;
flex:0 0 100%;
padding: 0 0 10px 0;
}
.hamburgerDiv{
display:inline;
flex: 1 1 auto;
}
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>my hmaburger</title>
</head>
<body>
<div id="header" class="header">
<div id="areaTitle" class="navText">
Hamburger problems
</div>
<div class="hamburgerDiv">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</div>
<nav id="nav">
<ul id="menu" class="navbar-nav nav pubMenuList >
<li id="first"></li>
<li id="first menuItem">section 1</li>
<li >section 2</li>
<li class="menuItem" >section 3</li>
<li class="menuItem">section 4</li>
<li class="menuItem">section 5</li>
<li class="menuItem"> section 6</li>
<li class="menuItem"> section 7</li>
<li class="menuItem"> section 8</li>
<li class="menuItem"> section 9</li>
</ul>
</div>
</div>
<div id="fullpage">
<section id="section1Anc" class="areaSection scrollto">
<h1><span>Section 1</span></h1>
<div id = "section1Div" class = "pubSub">
<p ><h2>On the surface it looks like my hamburger menu is working - but there is a problem.</p> <p> The problem occurs if you resize the window from a small view (width <800 px), to a larger one (width > 800px), then back to a small view (width <800 px). Once the screen is returned to a smaller version, and you click on the hamburger, the menu toggles back and forth, instead of simply revealing the navigation. Can you help me so it stops doing this? <span class="important">I think it might be happening because I don't know how to use event handlers properly.</span></p>
<p>IMPORTANT ELEMENTS:
<ul>
<li><span class="important">#nav</span> is the list of menu items that I only want visible during wide screen and after the hamburger is pressed at width < 800px</li>
<li><span class="important">#hamburgerDiv</span> is the container that contains both the hamburger/open-menu button (.hamburger) and the cross/close-menu button (.cross) </li>
<li><span class="important"> .hamburger </span>is the hamburger/open-menu button </li>
<li><span class="important">.cross</span> is the cross/close-menu button </li><ul></h2></p>
<img src="http://i.imgur.com/Q23PKdJ.gif" height="334" width="1045">
</div>
</section>
<section id="section2Anc" class="areaSection scrollto">
<h1><span>Section 2</span></h1>
<div id = "section2Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section3Anc" class="areaSection scrollto">
<h1><span>Section 3</span></h1>
<div id = "section3Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
</div>
</section>
<section id="section4Anc" class="areaSection scrollto">
<h1><span>Section 4</span></h1>
<div id = "section4Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section5Anc" class="areaSection scrollto">
<h1><span>Section 5</span></h1>
<div id = "section5Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section6Anc" class="areaSection scrollto">
<h1><span>Section 6</span></h1>
<div id = "section6Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section7Anc" class="areaSection scrollto">
<h1><span>Section 7</span></h1>
<div id = "section7Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section8Anc" class="areaSection scrollto">
<h1><span>Section 8</span></h1>
<div id = "section8Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section9Anc" class="areaSection scrollto">
<h1><span>Section 9</span></h1>
<div id = "proceedingsPubDiv" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
</div>
</body>
Simply move the hamburger(); out of the function WidthChange(mq) {}
The hamburger() function should only be called once. And now, it is inside the WidthChange(mq) function, so it will be called everytime there is a "match".
Try resizing the window more than twice, and you'll see that menu will pop up and down more than twice.
In your hamburger() function you continue to attach listeners for click event.
Maybe you should do this, just one shot at page load, as you don't need to attach the listeners every time you show an element like the hamburger and cross buttons.
Here how your function should look like:
// Called at the beginning one time only!
hamburger();
// media query change /
function WidthChange(mq) {
if (mq.matches) {
$( "#hamburgerDiv" ).show();
$( ".hamburger" ).show();
$( ".cross" ).hide();
$(".nav" ).slideToggle("slow",function() {
// Animation complete.
});
// you don't need it here
// hamburger();
} else {
$( ".nav" ).show();
$( "#hamburgerDiv" ).hide();
}
};
I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!
I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.
It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.
You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>