Develop Reference

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>

How do I make a content slider that shows the next slide when the user scrolls vertically or clicks one of the bottom nav tabs?

This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.

You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.

I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!

HTML visual not rendering properly

Please view the code here.. JS Fiddle. There is a peculiar problem that a blue colored underscore is appearing right after the first image. Why is this happening? Note that just removing the href makes it disappear. Very peculiar problem. What should be done?
HTML:
<body>
<div id="top-bar">
<a target="_blank" href="https://twitter.com/x">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank" href="https://www.facebook.com/x">
<img id="fb" src="images/fb.png"
onmouseover="this.src='images/fb-hover.png'"
onmouseout="this.src='images/fb.png'">
</a>
</div>
</body>
CSS:
#top-bar {
height: 50px;
min-height: 50px;
max-height: 50px;
background-color: #166330;
}
body {
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-size: 100%;
color: white;
}
.twitter {
margin-left: 30px;
margin-top: 10px;
margin-right: 10px;
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
#fb {
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}

There are two ways.
1] Remove all the white spaces between <a> <img/> and </a> tags.
2] Add text-decoration:none; to the <a> elements.

That's a blank inside your a tag.
If you write it without blanks like this, no "underscore" appears. E.g. something like:
<a target="_blank" href="https://twitter.com/x"><img class="twitter"
src="images/twitter.png"></a>
So the "underscore" is actually a link with a blank text and the browser displays links with an underscore, even if the text is just a white-space.

simple.. just use this
a{
text-decoration:none;
}

user style="text-decoration:none" in tag A
<a style="text-decoration:none" href=....

CSS behaving abnormally

So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?

Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.

You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>

Adding Elements To TinyCarousel

I'm trying to add a carousel to my site. I have looked around at the plugins available and come across TinyCarousel which is quite simple and light - what i'm after.
I have plugged in their code and followed their setup instructions and can successfully compile and run a carousel with some images.
A couple of issues im facing:
1) How can i modify their JS or CSS so that the size of the image is not so small? I have tried chaging the height and width in the #slider1 .viewport class, but no luck.
2) Once i can enlarge my images, i would like to add some kind of DIV that lays over the image, that contains a couple 'more info' hyperlinks to other pages on my site. The images in the carousel should still rotate, but the 'more info' DIV to stay put.
3) Is there any way i can place the NEXT and PREV buttons on top of the image? Like this - http://wowslider.com/slider-jquery-elegant-linear-demo.html When the user hovers over the carousel, the NEXT and PREV buttons fade in.
I have attempted it here, please see my jsFiddle below
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<section id="welcome">
<form method="post">
<div>
<section>
<fieldset>
<ul>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li>
<img src="http://www.freestanding-kitchens.com/data/usr_001_collections/tables___chairs.jpg" />
</li>
<li>
<img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-and-chairs1.jpg" />
</li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</ul>
</fieldset>
</section>
</div>
</form>
</section>
</body>
JS:
$(document).ready(function () {
$('#slider1').tinycarousel({
pager: true,
interval: true
});
});
Thanks
Update Following resolution of issues 1
New jsFiddle - http://jsfiddle.net/ginarann/JtfDd/15/

ok these are the changes you need to do if you are setting up 640 x 640 sizes images.
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height:640px;
border: 1px solid #dcdcdc;
width: 640px
}
#slider1 .viewport {
float: left;
width:640px;
height: 640px;
overflow: hidden;
position: relative;
}
2 .
go like this.
for CSS.
#slider1 .overview li span{
position: absolute;
background-color: rgba(0, 0, 0, 0.22);
left: 0px;
bottom: 0px;
right: 0px;
height: 50px;
}
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 400px;
border: 1px solid #dcdcdc;
width: 400px;
position :relative;
}
for HTML
<ul class="overview">
<li>
<img src="http://www.freestanding-kitchens.com/data/usr_001_collections/taes___chairs.jpg" />
<span>Image description here 12345</span>
</li>
<li>
<img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-d-chairs1.jpg" />
<span>Image description here 2</span>
</li>
</ul>
the html for buttons is already set up
you only need the css
#slider1 .buttons.prev{
background-color:#333;
}
#slider1 .buttons.next{
background-color:#333;
}
customize these styles accordingly..