slider indicators: matching two div order

slider indicators: matching two div order - javascript

I am making a slider with control and indicators. I am stuck in how to make the indicators linking with the slider itself. I search a lot of keywords, but none of the answers can help me out :(
Trying to make it “Click on indicators > remove nearby active class > add active class to this > slider div match the order of the indicators div list)
$('.carousel-indicators > div').on('click', function(){
$(".carousel-indicators > div").something match the({
'order of the': ($(".slider-inner > div").slider list() + 'order')
});
$(".carousel-indicators > div").closest('div').removeClass('active');
$(this).addClass('active');
});
.slider-inner{
width:200px;
height:200px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
border:#666 solid 1px;
}
.slider-inner > div{
display:none;
width:200px;
height:200px;
}
.slider-inner .active{
display:inline-block;
cursor: pointer;
}
.carousel-indicators{
width: 500px;
float: left;
}
.carousel-indicators > div{
float: left;
width: 30px;
height: 8px;
background-color: #D8D8D8;
margin-right: 30px;
cursor: pointer;
}
.carousel-indicators .active{
background-color: #FF6600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-outer">
<div class="slider-inner">
<div id="item" class="active" ><p>#1 </p></div>
<div id="item" ><p>#2 </p></div>
<div id="item" ><p>#3 </p></div>
</div>
<div class="carousel-indicators">
<div class="active"></div>
<div></div>
<div></div>
</div>
</div>

You can add data attributes to the div elements and target in the JS
$('#slider-indicator > li').on('click', function() {
var slideNumber = $(this).data('slide');
var slides = $('#slider > div');
var indicators = $('#slider-indicator > li');
// look for slide with same data-slide as the clicked li
for (var i = 0; i < slides.length; i++) {
if (i === slideNumber) {
$(slides[i]).addClass('active');
$(indicators[i]).addClass('active');
} else {
$(slides[i]).removeClass('active');
$(indicators[i]).removeClass('active');
}
}
});
#slider {
margin: 0 0 15px;
padding: 0;
width: 100%;
height: 30vw;
position: relative;
overflow: hidden;
}
#slider div {
margin: 0;
width: 100%;
height: 30vw;
position: absolute;
top: 0;
left: 100%;
background: green;
transition: left 0.4s linear;
color: white;
text-align: center;
padding: 10vw 0;
font-size: 40px;
}
#slider div:nth-child(2n) {
background: blue;
}
#slider div.active {
left: 0;
}
ul {
margin: 0 auto;
padding: 0;
width: 100%;
list-style: none;
color: white;
text-align: center;
font-size: 12px;
}
ul li {
margin: 0 16px;
padding: 8px 12px;
text-align: center;
background: grey;
display: inline-block;
cursor: pointer;
border-radius: 100%;
}
ul li.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
<div class="active">Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<ul id="slider-indicator">
<li data-slide="0" class="active">1</li>
<li data-slide="1">2</li>
<li data-slide="2">3</li>
</ul>

Related

JQuery category filter breaks when a category is more than 2 words

I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!

Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');

why cannot read property 'top' of undefined?

I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error

You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.

JQuery - Add/Remove class on vertical scroll has no effect

I am trying to add and remove a class based on vertical scroll (to the navbar) but there seems to be no effect.
I want the navbar to change background color on scroll and I cant understand why it has not effect.
I have tried adding just css using $(element).css but that doesnt seem to be making a difference either
Link: https://jsfiddle.net/r4Lxvqps/
HTML:
<!DOCTYPE html>
<title>A</title>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt=""/>
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
</body>
CSS:
* {
padding: 0px;
margin:0 auto;
-webkit-transition: all .2s ease-in-out;
}
html, body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin:0px;
}
.container {
position:relative;
height: 100%;
}
nav {
padding: 5px 0px;
position:fixed;
width: 100%;
top:0;
z-index: 9999;
color:black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin:0 15px;
}
nav a {
text-decoration: none;
color:white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color:white;
color:black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color:black;
min-height: 100%;
position:relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float:left;
width: 100%;
color:white;
}
.about, .contact, .portfolio {
min-height: 100%;
}
section {
float:left;
width: 48%;
position:relative;
text-align: center;
}
aside {
float:right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
Checks if offset is > 50 and then should add css (color:black)
JQuery:
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop;
if (scroll_offset > 50) {
$(".nav").css("color", "black");
}
});
});

var scroll_offset = $(window).scrollTop();
$.fn.scrollTop is a function. You forgot to invoke it.

Also can try this:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$(".nav ul li a").css("color", "black");
} else {
$(".nav ul li a").css("color", "white");
}
});
JSFiddle

Invoke the scrollTop function (scrollTop())
Fix the selector: nav a instead of .nav
Add else statement to restore original color
jsFiddle demo
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop();
//alert(scroll_offset);
if (scroll_offset > 50) {
$("nav a").css("color", "black");
} else {
$("nav a").css("color", "white");
}
});
});
* {
padding: 0px;
margin: 0 auto;
-webkit-transition: all .2s ease-in-out;
}
html,
body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
height: 100%;
}
nav {
padding: 5px 0px;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
color: black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
nav a {
text-decoration: none;
color: white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color: white;
color: black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color: black;
min-height: 100%;
position: relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float: left;
width: 100%;
color: white;
}
.about,
.contact,
.portfolio {
min-height: 100%;
}
section {
float: left;
width: 48%;
position: relative;
text-align: center;
}
aside {
float: right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt="" />
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>

Editing html+css+js for a drop down nav bar

I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.

How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>

try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}

are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar

Why does the dropdown menu animation cut the height when you hover again?

I've recently implemented this HTML, CSS and jQuery code from MegaDrop. Like any dropdown menu, it's supposed to show all the links when you hover over it.
Please hover on Products to see the result.
The problem starts when you hover away and when you hover again before the animation is finished, it will cut the height and remembers that. It will also not respond after you hover on and off a couple of times. Which is odd.
I've set no height in the container. I just let it render natively since the links have padding.
The container has overlay: hidden as well.
To enable the jQuery animation I need to remove display: block from .nav > li:hover > div
My question is, how do I prevent this? Do I need to give more instructions to the jQuery itself in order to retain the height of the container and not to shorten it?
This is the site:
http://planet.nu/dev/test/index.html
Here are my HTML, CSS and Javascript:
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

Ah! Looks like animate leaves some residual values in your div when its interrupted (inspections using firebug clearly shows this). Clearing it up before you start the animation should fix it.
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

I don't know enough about JavaScript to explain the intricate details, but you have to pass parameters to the stop() method to make the previous animation complete.
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop(null, true).slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});

We Keep Coding

JavaScript is the programming language of the Web.

slider indicators: matching two div order - javascript

Related

JQuery category filter breaks when a category is more than 2 words

why cannot read property 'top' of undefined?

JQuery - Add/Remove class on vertical scroll has no effect

Editing html+css+js for a drop down nav bar

Why does the dropdown menu animation cut the height when you hover again?

Categories

Resources