I was wondering if there is a way to swap the content of a html page with a nice fade in fade out effect using JS or jQuery.
In the HTML code I have below I cant to be able to swap out the section class="inner-wrapper" for some new content.
Would be great if you could help me out. :)
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Edit:
sorry for the bad post :P
This is what I would like to swap it for when i CLICK on one of the one-fourth divs
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
<article id="one-two">
<h2>Recept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
</article>
<aside id="tablet2">
<hr>
<img src="img/pannkakor.jpg" alt="">
</aside>
</section>
You can use fadeOut and fadein for this. fadeout/fadeIn also provide a callback function which will be fired once action is completed.
Read here
http://api.jquery.com/fadein/
and
http://api.jquery.com/fadeout/
$(".inner-wrapper").fadeOut( 3000, function() {
$(this).html("<div>Hello</div>");
$(".inner-wrapper").fadeIn(3000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Related
Well, what I need is so complex for me that I can't even explain what I want.
I have a main section, where I need this main section to scroll between the main sections.
Inside the first main section I have another section and I need it to scroll independently of the main section, i.e. only this section scrolls.
Can anyone help me with this?
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const allSection = document.getElementsByTagName("section");
const sections = [];
let count = 0;
for (let i = 0; i < allSection.length; i++) {
let sectionArr = document.getElementById(`section-${i + 1}`);
sections.push(sectionArr);
}
function next() {
prevBtn.classList.remove("disabled");
if (count < allSection.length - 1) {
sections[count].classList.add("d-none");
count++;
console.log(count);
sections[count].classList.remove("d-none");
}
if (count === allSection.length - 1) {
nextBtn.classList.add("disabled");
}
}
function prev() {
nextBtn.classList.remove("disabled");
if (count !== 0) {
sections[count].classList.add("d-none");
count--;
sections[count].classList.remove("d-none");
}
if (count === 0) {
prevBtn.classList.add("disabled");
}
}
#page-content {
width:100%;
display:flex;
justify-content:space-between;
}
#sect-one, #sect-two {
width:50%;
height: 500px;
background-color:red;
}
#media(max-width:768px) {
#page-content {
flex-direction: column;
}
#sect-one, #sect-two {
width:100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section, prev & next</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/7a83d58e46.js" crossorigin="anonymous"></script>
</head>
<body>
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<section id="section-1" class="container">
<main id='page-content'>
<section id='sect-one'>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</section>
<section id='sect-two'>
<section id="section-6" class="container">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</div>
</section>
<section id="section-7" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-8" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-9" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-10" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
</section>
</main>
</section>
<section id="section-2" class="container d-none">
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-3" class="container d-none">
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-4" class="container d-none">
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-5" class="container d-none">
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.
My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>
You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>
Problem
I have a dropdown menu that appears when the hamburger icon is clicked. The hamburger icon appears when the browser is less than 1300px in width. But due to position: fixed the dropdown menu does not appear to move together with the nav as one element when the user scrolls down the page. And as a result, there appears to be a gap between the two elements and you see the text between them.
My work-around has been on scroll to hide the dropdown navigation if its open. However, I don't know if this is the best method as this may cause issues on mobile. I feel a better approach might be changing the structure of the HTML in some way or by using position: relative
Objective
When I scroll down the page I want the nav and its dropdown menu to move up together
CodePen: https://codepen.io/onlyandrewn/pen/JNpdde
index.html
<nav id="top">
<div class="nav__title">
<h1>School Guide</h1>
</div>
<div class="nav__wrapper">
<div class="nav__list--wrapper">
<div class="nav__hamburger">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul class="test">
<li>About</li>
<li class="item-schools">Schools</li>
<ul class="inner-text inner-school">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li>
</ul>
<li>Districts</li>
<li>MAP Scores</li>
<ul class="inner-text">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li>
</ul>
</ul>
</div>
<ul class="nav__list">
<li class="nav__item item--about">About</li>
<li class="nav__item item--schools">Schools
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--schools">
<div class="triangle triangle-schools"></div>
<li>Elementary</li>
<li>Middle</li>
<li>High</li>
</ul>
</li>
<li class="nav__item item--districts">Districts</li>
<li class="nav__item item--map">MAP Scores
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--districts">
<div class="triangle triangle-map"></div>
<li>By school</li>
<li>By district</li>
</ul>
</li>
</ul>
</div>
<div class="nav__social">
<div class="nav__icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>
scripts.js
if ($(window).width() < 1300) {
$(".fa-bars").on("click", function(){
$(".test").slideToggle();
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
} else {
$(".test").addClass("is-open");
}
});
}
$(window).on("resize", function(){
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
$(".test").hide();
}
$(".fa-bars").unbind("click");
if ($(window).width() < 1300) {
$(".fa-bars").on("click", function(){
$(".test").slideToggle();
});
}
});
$(window).on("scroll", function(){
if ($(".test").hasClass("is-open")) {
$(".test").removeClass("is-open");
$(".test").hide();
}
});
Sorry I might be missing something but base on codepen adding
position: fixed;
top: 0;
to nav is really all you need. So adding that on the media query also should solve your need
I'm not sure if you're trying to prevent the menu from scrolling with the page, or get the navbar to remain fixed to the top, but both can be accomplished by using position.
To attach the navbar to the top of the page, use position: fixed and add some padding to the top of your main content area (enough to account for the height of the navbar).
To keep the mobile menu from scrolling with the page, change its position to relative or static, see what works from those.
if I understand correctly, whenever on the smaller screens you need to be able to scroll to see the content. Nav is going up so does the navigation from the hamburger.
just change your class test from position fixed to absolute.
The fix:
Change
position: fixed
to
position: absolute
Why:
Both will take the element out of flow, which will have the desired effect of having a size and placement relative to its nearest positioned ancestor rather than it's immediate non-positioned container. While absolute does just that, fixed will also keep the element in the exact same spot on the window, as if it was taped to your computer screen. This is why it was getting stuck.
I moved the unordered list with the class of test to outside of the nav
I removed the position: fixed on the dropdown menu
index.html
<nav id="top">
<div class="nav__title">
<h1>School Guide</h1>
</div>
<div class="nav__wrapper">
<div class="nav__list--wrapper">
<div class="nav__hamburger">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<ul class="nav__list">
<li class="nav__item item--about">About</li>
<li class="nav__item item--schools">Schools
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--schools">
<div class="triangle triangle-schools"></div>
<li>Elementary</li>
<li>Middle</li>
<li>High</li>
</ul>
</li>
<li class="nav__item item--districts">Districts</li>
<li class="nav__item item--map">MAP Scores
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="nav__dropdown dropdown--districts">
<div class="triangle triangle-map"></div>
<li>By school</li>
<li>By district</li>
</ul>
</li>
</ul>
</div>
<div class="nav__social">
<div class="nav__icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
<ul class="test">
<li>About</li>
<li class="item-schools">Schools</li>
<ul class="inner-text inner-school">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li>
</ul>
<li>Districts</li>
<li>MAP Scores</li>
<ul class="inner-text">
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li>
</ul>
</ul>
style.css
.test {
font-weight: 400;
width: 100%;
padding: 0;
background: #c62828;
z-index: 99;
box-shadow: 0 5px 5px #f4c6c6;
display: none;
margin: 0;
}
I wanted to achieve a behavior that my popover should moves along with my fixed button as I scroll the page.
I have following JS, CSS and HTML:
$(function () {
$("#btn-pop").popover('show');
});
h1{
color:Silver;
}
#btn-pop{
z-index: 1;
position: fixed;
top: 47%;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!--These are some contents-->
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<!--This is main thing-->
<button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature">
<span class="glyphicon glyphicon-cog"></span>
</button>
</div>
I hope the above code make some idea that what I actually wanted to achieve. Thanks in advance.
You can see the problem:
If you want to both move together when you scroll you have to change the position of your button to position: absolute
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
try this:
$(function () {
$("#btn-pop").popover('show');
});
h1 {
color:Silver;
}
#btn-pop {
z-index: 1;
position: absolute; /*changed to absolute*/
top: 47%;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!--These are some contents-->
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<!--This is main thing-->
<button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature"> <span class="glyphicon glyphicon-cog"></span>
</button>
</div>
If you want both stay in same place add position: fixed to the popup like this:
$(function () {
$("#btn-pop").popover('show');
});
h1 {
color:Silver;
}
#btn-pop {
z-index: 1;
position: fixed;
top: 47%;
left: 0;
}
.popover {
position: fixed !important; /* I use !important because in this snippet bootstrap's styles overwrite mines but in general it is not nedded*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<!--These are some contents-->
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>
</div>
<!--This is main thing-->
<button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature"> <span class="glyphicon glyphicon-cog"></span>
</button>
</div>