Why doesn't my nav bar hide when scrolling down and appear when scrolling up? - javascript

So I've tried adapting this http://jsfiddle.net/mariusc23/s6mLJ/31/ code to my webpage so that my nav bar hides when scrolling down and appears when scrolling back up, however it doesn't seem to work and I just can't see the problem, I've included my code below, thanks for the help!
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
</script>
<style type="text/css">
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</li> <!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
I'm currently trying to make a movie review blog post and really want to make everything just stand out, but I'm only relatively new to Css,html and javascript therefore I really can't identify any problems I might have and how to fix them. Again thank you for y'alls help :)


its because you have additional closing tag on line no 15 and 98 in your html, I have fixed that see below demo
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>

Related

JQuery collapse div on img click

I have a two part question concerning CSS styling and JQuery functionality.
(most important): In my code below, when the user clicks the round profile image, hypothetically the "profiledrop" div should appear. If I replace the tag with plain text, the code works just fine. However, with an image instead of text as the link, the code no longer works.
(less important): What is causing the "notification-tab" div to be so large? It ends up coming out to almost 100px for each div, which is massive! I want to at least half this size. What part of the CSS code do I need to modify to accomplish this?
I've been typing this code for the last 10 hours, so I'm basically braindead at this point. I'm sure both answers are simple, but I'm just not seeing the solution. Thank you in advance for your help!
Codepin: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>
CSS:
/* Notification Infastructure */
.profiledrop {
position: absolute;
right: 15px; top: 65px;
display: none;
width: 350px; height: auto;
max-height: 600px;
padding: 0; margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;}
.notification-list{
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;}
.notification-list-item{
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even) {background-color: #E3E3E3}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px; height: 60px;
object-fit: cover}
/* Misc Settings */
.message::not(.nopic) {margin-top: 0px; margin-left: 80px} /* Style for notification groups without image */
/* Notification text styling */
.label{
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.message {margin-top: 0px}
.date {float: right; color: darkgray}
/* Active Section */
.active .notification-list {height: 250px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
/* Responsive design */
#media only screen and (max-width : 514px) {
body {margin: 0px}
.profiledrop{
width: 100%;
margin: 0px;
left: 0;}
}
.profile{
position: absolute;
top: 0%; right: 15px;
width: 40px;
clip-path: circle();}
.profile img{float:right; max-width: 100%; max-height: 100%; display: block;}
JQUERY:
// Tab collapser //
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
} else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});

'launch' should be on the img element, such as:
<div class="profile">
<a href="#">
<img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
</a>
</div>

I'll answer your second question first. The reason the notification tab is so large is that the .profiledrop class has a fixed width of 300px. Each notification group is inheriting the width of the parent, so those are also 300px. Each notification tab has a width of 100%, so its width becomes 100% of the nearest parent, which is the notification group, which is 300px, so that also becomes 300px.
To summarize this point, either change the width: 100% on the notification tab, or change the width: 300px on the profiledrop. I can't recommend which to do because I don't know what you want it to look like.
The simplest solution to your first question is to employ display: none. Take a look at the code snippet I've provided below and let me know if this is the behavior you're looking for.
const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");
// I attach an event listener to the image to wait for a click event
image.addEventListener("click", function() {
if (paragraph.style.display === 'none') {
// If the paragraph is currently hidden, I show it
paragraph.style.display = 'block';
} else {
// If the paragraph is currently shown, I hide it
paragraph.style.display = 'none';
}
})
<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the
image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click
on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. </p>

Centering alt text in JS gallery

I have an image gallery that opens each image, below the image grid, as an enlargement with descriptive text. I can't seem to get the text to center and stay on the image. I have tried changing the CSS with overflow, width, etc., but I think it's in the JS code. I do not know JS, I found the code on a codepen and made changes as needed (and with some stack overflow help!). In addition, I would like the enlarged image to close and revert back to the gallery after a period of time. Is that possible?
The link to my codepen is https://codepen.io/Ovimel/pen/YgzVeg The first image shows the issue I am having.
I'm a coding novice, and I'm not sure that I posted the code here correctly. Actually, I know it's not correct as the images are not aligned and standard sizes and the enlargements don't load, but do I need to post everything? The codepen is where you'll see it actually work/not work. Thanks in advance for your help!
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 35px;
color: red;
font-size: 20px;
text-align: center;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</p>
</footer>
</div>

I'd personally start the whole thing again, but adding this to your CSS should help
#imgtext {
width: 70%;
display: block;
margin: auto;
position: relative;
bottom: 100px;
}
I just tested in the code pen and it requires the !important tag
#imgtext {
width: 70%!important;
display: block!important;
margin: auto!important;
position: relative!important;
bottom: 100px!important;
}

A small tweak of your css can give the desired result. Set a max-width (narrower than the full width) and a margin that will set it appropriately (in this case I gave it a max width of 75% and a margin left and right of 10% [an approximation, taking into account browser-added margins/padding], and set it to display:block with position:absolute, 20% from the top. Any of these values can be tweaked as you wish, but you get the picture. I would recommend using a smaller font size for benefit of smaller screens, by the by
Hope this helps
//Make older browsers aware of new HTML5 layout tags
'header nav aside article footer section'.replace(/\w+/g, function(n) {
document.createElement(n)
})
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
display: block;
max-width:75%;
position: absolute;
top:20%;
text-align:center;
margin:0 10%;
color: red;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<body>
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</footer>
</body>

Display none mobile and desktop issue

What I am trying to figure out is how to have two things that are shown in desktop disappear in mobile. What is happening right now is that I have two aspects of my code the classes with images and the class titles in desktop and what is hidden (what the user has to click to get to) is the description of the project. My desktop version is perfect and how I want it, but the only issue I am having is that in mobile I ONLY want to show the descriptions of the projects and not the two clickable steps before. I know that this has something to do with display:none; or a combination of display properties but what I have been trying does not seem to work.
I was not sure how to put this in a snippet or in a fiddle because there are multiple html pages as well as a JSON file. So in that case I will link a url to it so that it is accessible.
If this does not make any sense or you need me to clarify I would be more than happy to! I could really use some help with this so if anyone out there has an idea on how to fix this it would be greatly appreciated! Thanks.
http://sws.mnstate.edu/ry6750sm/data-proj/education2.html
Here is the education.html:
<body>
<hr class="hr2">
<section id="content">
<div id="container">
<h2 >Class Projects</h2>
<div id="movecontainer">
<div id="move">
<div class="third ">
<div id="classes"><!--was event -->
<a id="GDES203" href="GDES203.html" ><img src="img/circlecircle.png" alt="GDES203" />GDES203</a>
<a id="gcom355" href="gcom355.html" ><img src="img/circlecircle.png" alt="GCOM355" />GCOM355</a>
<a id="COM230" href="COM230.html" ><img src="img/circlecircle.png" alt="COM230" />COM230</a>
</div>
</div>
<div class="third ">
<div id="projects"><!--was sessions -->
<p>Select a class</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div>
</div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/gcomclasses.js"></script>
</body>
Here is the description html:
<body>
<header>
</header>
<div id="Fender-Guitar" class="flex-item">
<h3>Fender Stratocaster Electric Guitar</h3>
<img alt="company logo" src="three-projects/int-com-graph/guitar2.png" height="150"/>
<p>The guitar is a Fender Stratocaster Electric Guitar that I replicated in Adobe Illustrator. I used shadows and highlights to create depth for the piece as well as added gradient detail. </p>
</div>
<div id="Fancy-Fishes" class="flex-item">
<h3>Fancy Fishes</h3>
<a href="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" ><img alt="company logo" src="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" height="150"/></a>
<p>Fancy Fishes is a clothing line that features the underwater style and I created this piece by using many gradient meshes, a scaling pattern for the fish, and layered meshes for the realistic pearl effect. </p>
</div>
<div id="Dragon-Tracks" class="flex-item">
<h3>Dragon Tracks</h3>
<img alt="company logo" src="three-projects/int-com-graph/covercover.jpg" height="150"/>
<p>This CD cover was inspired by icycles. The way I captured this look was by using photos of melted crayon wax and putting it into Adobe Photoshop and changing the hue to get the desired color. The smoke was created in Adobe Illustrator as a brush to try and create a unique smoked icycle style. </p>
</div>
<div id="Gelato-Company" class="flex-item">
<h3>L'Airone Gelato</h3>
<img alt="company logo" src="three-projects/graphic-design/gelato.jpg" height="150"/>
<p>This design was for a gelato company that served all its ice cream as coffee flavors. Thus, I tried to create a coffee-oriented design with a logo centered around coffee in an ice cream cone. </p>
</div>
<div id="Company-Logo" class="flex-item">
<h3>Company Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abstract.jpg" height="150"/>
<p>This piece was inspired by the idea of creating a logo for a company with an abstract panda logo. This company's logo is made up of pieces that unify the panda and thus the company. </p>
</div>
<div id="Band-Logo" class="flex-item">
<h3>Band Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abpanC.jpg" height="150"/>
<p>This logo was inspired by the band KISS. If KISS was to have a panda as their mascot then this is the type of logo that they would have. This was made with the crystallize tool in Adobe Illustrator to get the spiky feel. </p>
</div>
<div id="Photo-1" class="flex-item">
<h3>Flower</h3>
<img alt="company logo" src="three-projects/Photography_pics/flower.jpg" height="150"/>
<p>This photo was created with a painting with light technique where the camera captures a light pattern through long exposure. The more the light is moved in the shot and the longer the exposure, the lighter and movement of light is captured. This photo was captured with a thirty second exposure and edited in Adobe Photoshop. </p>
</div>
<div id="Photo-2" class="flex-item">
<h3>Graffiti</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0441.jpg" height="150"/>
<p>This photo was captured in the heart of downtown Fargo. The graffiti was on a random building from an anonymous artist. So the origins of the art is unknown, however the piece is beautifully painted and was edited in Adobe Photoshop. </p>
</div>
<div id="Photo-3" class="flex-item">
<h3>Grains of Sand</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0505.jpg" height="150"/>
<p>This photo was captured of a building’s wall in downtown Fargo that was eroding. The intent of the photo was to try and capture the details of the wall so that the viewer could see the grains of sand. </p>
</div>
</body>
Here is the Javascript:
// NOTE: This example will not work locally in all browsers.
// Please try it out on the website for the book http://javascriptbook.com/code/c08/
// or run it on your own server.
$(function() { // When the DOM is ready
var projectList; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadClassProjects() { // Declare function
$.getJSON('data/projects.json') // Try to collect JSON data
.done( function(data){ // If successful
projectList = data; // Store it in a variable
}).fail( function() { // If a problem: show message
$('#classes').html('Sorry! We could not load the Class Projects at the moment');
});
}
loadClassProjects(); // Call the function
// CLICK ON THE EVENT TO LOAD A ClassProjects
$('#content').on('click', '#classes a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up ClassProjects by
for (var i = 0; i < projectList[loc].length; i++) { // looping through events
newContent += '<li><span class="software">' + projectList[loc][i].software + '</span>';
newContent += '<a href="descriptions.html#';
newContent += projectList[loc][i].title.replace(/ /g, '-') + '">';
newContent += projectList[loc][i].title + '</a></li>';
}
$('#projects').html('<ul>' + newContent + '</ul>'); // Display projectList on page
$('#classes a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#projects li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#projects a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
});
Here is the JSON:
{
"GDES203": [
{
"software": "Illustrator",
"title": "Gelato Company"
},
{
"software": "Illustrator",
"title": "Company Logo"
},
{
"software": "Illustrator",
"title": "Band Logo"
}
],
"GCOM355": [
{
"software": "Illustrator",
"title": "Fender Guitar"
},
{
"software": "Illustrator",
"title": "Fancy Fishes"
},
{
"software": "Indesign Illustrator Photoshop",
"title": "Dragon Tracks"
}
],
"COM230": [
{
"software": "Photoshop",
"title": "Photo 1"
},
{
"software": "Photoshop",
"title": "Photo 2"
},
{
"software": "Photoshop",
"title": "Photo 3"
}
]
}
Here is the CSS:
#attended{
margin-left: 20px;
margin-right:20px;
font-size:25px;
margin-top:80px;
}
body {
background-color: #fff;
height:100%;
font-family: 'Open Sans', arial, sans-serif;
width: 960px;
margin: 0 auto 0 auto;
color: white;
}
.all{
margin-left: auto;
margin-right: auto;
display:block;
}
h1 {
font-weight: normal;
margin: 28px 0 0 0;
float: left;
width: 225px;
height: 90px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
h2 {
font-size: 40px;
text-align: center;
padding: 0;
color: white;
line-height: 1em;
letter-spacing: -.06em;}
h3 {
margin: 0;
font-size: 1.4em;
color: #29BCCA;
font-family: 'Philosopher', sans-serif;
padding-bottom: 15px;
}
a {text-decoration: none; color: white;}
.third, .classes {
width: 320px;
float: left;
text-align: center;
}
.hr2{
border: none;
border-bottom: 1px solid #999;
width: 70%;
color:#485A5F;
height: 2px;
}
.classes p {border-right: 1px solid #999 ;
}
#content .classes:last-child p {border-right: none;}
.third p {
padding: 0 20px 0 20px;
margin: 40px 0 20px 0;
text-align: left;
line-height: 1.4em;}
/* Projects */
#classes a {
font-family: 'Philosopher', sans-serif;
font-size: 120%;
text-transform: uppercase;
text-align: left;
line-height: 2.5em;
display: block;
height: 120px; width: 100%;}
#classes img {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
padding: 10px;
}
#classes a:hover, #projects a:hover {color: #1DA0A3;}
#projects a {
font-family: 'Sahitya', serif;
font-size: 120%;}
#projects p {
margin-top: 2em;}
#projects ul {
border-left: 1px solid #999;
border-right: 1px solid #999;
height: 350px;
padding: 0 20px 0 20px;
margin: 0 0 40px 0;}
#projects li {
list-style-type: none;
padding: 40px 0px 40px 0px;
border-top: 1px solid #d6d6d6;
text-align: left;
}
#projects li:first-child {
border-top: none;
padding-top: 1.8em;}
#projects li .software {
display: inline-block;
width: 110px;
}
#details div {
padding: 1.8em 0 0em 1;}
#details p {
padding: 10px;
margin: 0.8em 0 0 2em;}

/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.third:nth-child(1) a img, .third:nth-child(2) p {
display: none;
}
}

Dropdown menu bug Close and Open Depending on Click area

i have no idea why this is happening.
I replicated a accordion with html, css and jquery, i followed this guide and i adapted it to my website
"http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/"
My jquery is the same, my html and css is a bit different because i customized it, but its basicly the same.
HTML:
<div class="plan-container" style="flex: 0 0 25%;">
<div class="plan-header-mec">
<h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2>
</div>
<div class="plan-details">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-1" class="accordion-section-content">
<p>Information.</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-2" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-3" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-4">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-4" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-5">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-5" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
</div>
<!--end .accordion-->
<p>Conclusion</p>
</div>
</div>
CSS:
#media handheld (min-width: 480px) {
.plan-container {
display: inline-block;
}
}
#media (min-width: 992px) {
.plan-container {
display: table-cell;
}
}
#media (min-width: 1200px) {
.plan-container {
display: table-cell;
}
}
.plan-container {
width: 50%;
overflow: hidden;
border-radius: 5px;
background-color: #fff;
position: relative;
top: 0;
-webkit-transition: all 1s;
transition: all 1s;
}
.plan-container .plan-header-mec {
padding: 50px 0;
border-radius: 5px 5px 0 0;
background-image: url(../img/mv-ber-vantagens-mecanico.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}
.plan-container .plan-header p {
margin: 0;
color: #447F71;
}
.plan-container .plan-details {
margin: 0 auto;
padding: 60px;
background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat;
}
.plan-container .plan-details ul {
padding-left: 0;
list-style: none;
}
.plan-container .plan-details ul li span {
font-weight: lighter;
/*color: #777777;*/
}
.plan-container .plan-details p {
background-color: #f4f4f4;
margin: 2em 0;
padding: 1.25em;
font-size: 0.75em;
line-height: 1.8;
color: #777777;
}
/* Test accordion */
.accordion,
.accordion * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.accordion {
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background: #f7f7f7;
background-image: url(../img/fibra-carbono.jpg);
}
/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
border-bottom: 2px solid #333333;
/*Carbon Fiber Background*/
/*Carbon Fiber Background*/
transition: all linear 0.15s;
/* Type */
font-size: 20px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 0px #1a1a1a;
color: #fff;
}
/*.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
}*/
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding: 15px;
display: none;
}
/* Test accordion */
/* Check Mark Color*/
.fa ul {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fa-check {
display: block;
}
.fa-check::before {
color: #66ff33;
}
/* Check Mark Color*/
And finally my jQuery
/*Accordion*/
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Ok now, my problem is. What i want is:
When i click Title 1, Information 1 dropdown. (works)
If i click Title 2. while information 1 is showing, information 1 closes and opens information 2 (works)
Now my problem is, if Information 2 is open and i want to close it, when i click on the Title, on the letters of the tittle the dropdown closes and opens again... If i click outside the letters it works properly.
In the jquery
if($(e.target).is('.active')) {
I changed the e.target to .accordion-section-title and what happends is, it opens and closes when i click anywhere, letters or outside the letters, but if a information box is openned and i click on another one, the other one doesn't open, but the opened one closes.
I have no idea what else to do, if you can help, i would apreciate it

Probably your e.target sometimes is the wrong element, infact it depends on where you actually click on.
For instance, if you click on a child element (like the <li> element in your case) the condition $(e.target).is('.active') will fail
Try with this code instead:
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var target = $(e.target).closest(".accordion-section-title");
var currentAttrValue = $(target).attr('href');
if($(target).is('.active')) {

Not exactly an answer (not yet 50 reputation so I can't comment, sorry), but is there any (good ?) reason to not using JQueryUI accordion ?
If you don't want to use all the jQueryUI (and I can understand) you can "isolate" just the accordion pluggin on the custom download section.
I may be simplest than what you're trying to write imho.

jquery show() breaks css position properties while acting

my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}

The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.

Categories

Resources