Develop Reference

animate item while other has class JQuery

In this code snippet I was trying to make changes on absolute element for the menu item when it has active class, but the problem is when the class toggled and removed from current item the element still have the same effect and didn't enter the else statement.
As you see class active toggled between the menu items when click any of them and I use if this item has class active do this for the element. else back.
but else statement not working and keep the line under the menu item although it's not has active class anymore.
$(function () {
"use strict";
var $menuItem = $('.nav li a'),
$hr = $('hr');
$menuItem.on('click', function (event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('active')) {
$(this).next($hr).animate({width : "100%"}, 200);
} else {
$(this).next($hr).animate({width : "0"}, 200);
}
event.stopPropagation();
});
});
.nav {
background-color:#222;
padding:15px 10px;
position:fixed;
top:0;
left:0;
width:100%;
}
.nav ul li {
display:inline;
margin:0 20px;
position:relative;
}
.nav ul li a {
text-decoration:none;
color:#fff;
}
.nav ul li a .active {
color:red;
}
#home,#about,#services,#contact {
height:600px;
}
h1 {
text-align:center;
font-size:30px;
padding:100px 0;
}
hr {
position:absolute;
width: 0;
height:2px;
border:none;
color: #ff0075;
background-color:#ff0075;
top: 10px;
left: 0;
z-index:-5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home<hr></li>
<li>About<hr></li>
<li>Services<hr></li>
<li>Contact<hr></li>
</ul>
</div>

As you have added active class to current element, thus truthy section of if will execute.
You need to apply the animation on .filter()ed element.
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
$(function() {
"use strict";
var $menuItem = $('.nav li a');
$menuItem.on('click', function(event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
event.stopPropagation();
});
});
.nav {
background-color: #222;
padding: 15px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav ul li {
display: inline;
margin: 0 20px;
position: relative;
}
.nav ul li a {
text-decoration: none;
color: #fff;
}
.nav ul li a .active {
color: red;
}
#home,
#about,
#services,
#contact {
height: 600px;
}
h1 {
text-align: center;
font-size: 30px;
padding: 100px 0;
}
hr {
position: absolute;
width: 0;
height: 2px;
border: none;
color: #ff0075;
background-color: #ff0075;
top: 10px;
left: 0;
z-index: -5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home
<hr>
</li>
<li>About
<hr>
</li>
<li>Services
<hr>
</li>
<li>Contact
<hr>
</li>
</ul>
</div>

creating zoom in effect on clicking the thumbnail or link

This link has a carousel similar to what I'm trying to implement
I have a basic slider for images.
Something like this Example
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
html {
border-top: 5px solid #fff;
background: #8A8A8A;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 600px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 1200px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="slider">
>>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #fff;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #fff;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
I want the slider to open upon clicking on a button/link. I am new to jQuery, so I'm not sure if that's possible using onclick event. Can someone please tell me the basic idea that goes behind this implementation? Thank you!

Place a button in your HTML and use it to show your slides on click. Also wrap your complete Slider related HTML inside a div and hide the dive initially. Like below.
<button id="showSlider">Show me the slider</button>
<div id="sliderWrapper" style="display:none;">
<!--Your current HTML goes here-->
</div>
With this in place, Now put all the current logic in your scripts inside a function. Lets call this function when ever we click the button.
function SliderScripts() {
//all your current scripts goes here
}
Now modify your document ready function to below.
jQuery(document).ready(function($) {
$('#showSlider').on('click', function() { // button click event
SliderScripts(); // run the sliders scripts
$('#sliderWrapper').show(); / show the slider.
$(this).hide(); //hide the button
});
});
Here is a working snippet.
jQuery(document).ready(function($) {
$('#showSlider').on('click', function() {
SliderScripts();
$('#sliderWrapper').show();
$(this).hide();
});
});
function SliderScripts() {
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: slideWidth,
height: slideHeight
});
$('#slider ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
}
html {
border-top: 5px solid #fff;
background: #8A8A8A;
color: #2a2a2a;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 600px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 1200px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev,
a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover,
a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="showSlider">Show me the slider</button>
<div id="sliderWrapper" style="display:none;">
<div id="slider">
>>
<a href="#" class="control_prev">
</a>
<ul>
<li>SLIDE 1</li>
<li style="background: #fff;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #fff;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
</div>

Add class the slider on click and style the slide element with css something like
element.active {
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
z-index: 9999;
}
then the element will pop out from the slide and you can add anything you want to the active class of the element. and in your example click the slide element
$('#slider li').on('click', function () {
$(this).toggleClass('active');
});
the css for the active class
li.active {
position: fixed !important;
top: 50px;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
}
for simple overlay
li.active:after {
content: '';
position: fixed;
top: -50px;
bottom: -50px;
background: rgba(0,0,0,0.75);
left: -50%;
width: 200%;
height: 200%;
}

Javascript counter variable code throwing cannot read property exception

I've built a little website with a carousel image slider. The image slider has a next and previous button that when clicked, trigger the next or previous image with some corresponding text. When the page first loads, however, if the first button clicked is the previous button, the slider throws a cannot read property exception. The error is below. I've also put all of the html, css and js in a code block below. Any insight would be greatly appreciated.
Uncaught TypeError: Cannot read property 'Imagedes' of undefinedmoveLeft #
ShowcaseWebsiteTest.html:257(anonymous function) # ShowcaseWebsiteTest.html:277m.event.dispatch # jquery-latest.min.js:3m.event.add.r.handle # jquery-latest.min.js:3
<html>
<title>Showcase Website</title>
<meta charset="UTF-8">
<head>
<style>
header {
width:100%;
background-color:lightblue;
text-align:center;
padding:5px;
}
/*Use of the child selector Combinator*/
header > h1 {
color: black;
}
/*Use of Pseudo-Class*/
p::first-letter {
font-size: x-large;
}
/*Use of the Navigation Bar*/
nav {
line-height:30px;
background-color:#8f8f8f;
height:1500px;
width:100px;
float:left;
padding:5px;
position: relative;
}
/*Pseudo-Class*/
a:visited {
color: #00BDA0;
}
/*Using Box Model, Border, Outline, Margin, Padding, Dimension, Float*/
section {
height:350px;
width:100%;
padding:10px 0 30px 2px;
border: 3px solid gray;
margin: 0px 1px 5px 25px;
}
/*Using the "display: none" property to hide a previous title*/
h1.hidden{
display: none;
}
/*Using Positioning*/
article.art1 {
height:350px;
width:350px;
float:center;
padding-top:100px;
padding-left:50px;
position: relative;
top: 125px;
left: 85px;
}
/*Using Positioning*/
aside {
height:350px;
width:350px;
float:right;
padding-top:10px;
padding-right:150px;
position: relative;
top: 45px;
left: 45px;
right: 50px;
}
footer {
background-color:lightblue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 2% 2%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 10px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}
button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
button.control_prev {
border-radius: 0 2px 2px 0;
}
button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
.active{
color:red;
}
.imageDes{
color:red;
}
</style>
</head>
<body>
<main>
<header>
<h1>Text</h1>
</header>
<nav>
Home
<br>How To
<br>Additional
<br>
</nav>
<section class="section3">
<h1>Text</h1>
<p>
Text
</p>
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</section>
<div id="slider">
<button class="control_next">></button>
<button class="control_prev"><</button>
<ul>
<li class="active" data-des="Image 1">SLIDE 1</li>
<li data-des="Image 2" style="background: #aaa;">SLIDE 2</li>
<li data-des="Image 3">SLIDE 3</li>
<li data-des="Image 4" style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
<div class="imageDes"></div>
<footer>
Name Here
</footer>
</main>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var dataJson=[{"Imagedes":"Description for Image one which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
{"Imagedes":"Description for Image two which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
{"Imagedes":"Description for Image three which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
{"Imagedes":"Description for Image four which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"}]
var index=0;
$('.imageDes').text(dataJson[0].Imagedes);
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
if(index<=0)
index=slideCount;
else
index--
$('.imageDes').text(dataJson[index].Imagedes);
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
if(index+1>=slideCount)
index=0;
else
index++
$('.imageDes').text(dataJson[index].Imagedes);
};
$('button.control_prev').click(function () {
moveLeft();
});
$('button.control_next').click(function () {
moveRight();
});
});
</script>
</body>
</html>

You set the max too high.
index=slideCount
needs to be
index=slideCount-1

Creating slider and slide will not reset position upon sliding left

'use strict';
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
},pause);
}
function stopSlider(){
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function (){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
} );
$('#slidebttn .left').on('click', function (){
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
currentSlide--;
if (currentSlide === 0) {
currentSlide = $slides.length;
$slideContainer.css('margin-left', 720);
}
});
} );
});
Ok here is my code I am working with. Everything works fine until I try and slide my slider to the left. It will not repeat back to the right position. As of right now the slide right button works just fine with no problems but it refuses to slide left. Any reason I it might not be sliding left appropriately?

Lets get started!
For your html:
The common practice is to clone the first image after the last and the last before the first so that you can create the illusion of continuous sliding. You forgot to put your last image before your first! (You can use https://api.jquery.com/clone/ i didn't in the fiddle).
So, you need to start from the second slide that's why i added the margin-left:750px in the slides element.
Your CSS: everything its ok.
Your javascript: Please read the comments in the js code.The code could be better but i think its gonna be easier to do it now. If you have any questions don't hesitate to ask!
'use strict';
$(function () {
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider() {
interval = setInterval(function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
}, pause);
}
function stopSlider() {
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
});
$('#slidebttn .left').on('click', function () {
currentSlide--;
// Go to the prev slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed, function () {
// If you are at the first image5 then go to the last and current slide is slide 6 (slides-2)
if ($slideContainer.css('margin-left') == '0px') {
$slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px")
currentSlide = $slides.length - 2;
}
});
});
});
body {
margin:0px;
}
#font-face {
font-family: speculum;
src: url(font/speculum.tff);
}
.header {
background:#c1d4ff;
margin:15px auto;
text-align:center;
height:300px;
width:relative;
}
.selection {
margin:10px auto;
position:relative;
height:relative;
width:relative;
min-width: 800px;
}
.footer {
margin:25px auto;
text-align:center;
height:150px;
width: 80%;
background: #c1d4ff;
min-width: 400px;
}
.itemlink {
top:75px;
position:relative;
right:228px;
float:left;
}
.itemlink:before {
content:"Link: "
}
.itemprice {
top:95px;
position:relative;
right:340px;
float:left;
}
.itemprice:before {
content:"Price: "
}
.iteminfo {
top:15px;
position:relative;
right:20%;
float:right;
}
.iteminfo:before {
content:"Additional Info:";
text-decoration:underline;
}
.itemcode {
top:55px;
position:relative;
right:147px;
float:left;
}
.itemcode:before {
content:"Item Code: "
}
.itemname {
top:35px;
position:relative;
left:42px;
float:left;
}
.itemname:before {
content:"Name: "
}
#parts img {
border: 3px double #c1d4ff;
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#parts {
height:150px;
margin:0 auto;
width:80%;
background:#ffffff;
}
#parts ul {
list-style: none;
}
#parts ul li {
}
#parts ul li ul {
}
#parts ul li ul li {
}
#main img {
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#main {
padding-bottom:10px;
height:relative;
margin:0 auto;
width:80%;
background:#ffffff;
}
#main ul {
list-style: none;
}
#main .para {
color:#5358e5;
letter-spacing: -4px;
font-family:speculum;
text-align:justify;
padding-top:10px;
margin-right:100px;
position:relative;
left:20px;
}
#main .mainhead {
color:#007e32;
text-align:left;
font-family:speculum;
text-decoration:underline;
font-weight:bold;
font-size: 30px;
}
#sidebar {
border: 1px dashed #ffffff;
z-index:100;
position:fixed;
width:100%;
text-align:center;
background:#3366FF
}
#sidebar ul {
text-align: center;
display: inline;
margin: 0;
padding: 14px 4px 17px 0px;
list-style: none;
}
#sidebar ul li {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #3366FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li.active {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #5983FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul {
background: #3366FF;
padding: 0;
position: absolute;
top: 48px;
left: 0px;
width: 150px;
padding-right: 4px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li ul li {
background: #3366FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul li.active {
background: #5983FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#slider {
z-index:1;
float:none;
margin:0 auto;
position:relative;
width:720px;
height:400px;
overflow:hidden;
}
#slider img {
height:400px;
width:720px;
}
#slider .slides {
display:block;
height:400px;
width:6000px;
margin:0;
padding:0;
}
#slider .slide {
float:left;
list-style-type:none;
width:720px;
height:400px;
}
#slidebttn {
z-index:2;
transform:translateY(-400px);
width:800px;
position:relative;
margin:0 auto;
float:none;
height:400px;
}
#slidebttn .left {
position:relative;
margin:0 auto;
float:left;
height:400px;
width:40px;
}
#slidebttn .right {
background: transparent;
cursor:pointer;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
text-shadow: 4px 4px 5px #000000;
font-weight: bold;
line-height: 400px;
text-align: center;
position:relative;
margin:0 auto;
float:right;
height:400px;
width:40px;
}
#slidebttn .right:hover {
text-shadow: 1px 1px 5px #000000;
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
}
#slidebttn .right:active {
text-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body style="background-image:url(http://westquesttech.com/images/background.jpg)">
<div id="sidebar">
<ul>
<li class="active"><span>Home</span>
</li>
<li onclick="location.href='philosophy.html';"><span>Philosophy</span>
</li>
<li><span>Shop</span>
<ul>
<li onclick="location.href='shop.html';">Computers</li>
<li onclick="location.href='shop2.html';">Accessories</li>
<li onclick="location.href='shop3.html';">Parts</li>
</ul>
</li>
<li onclick="location.href='contact.html';"><span>Contact</span>
</li>
</ul>
</div>
</br>
</br>
<div class="header">
<img src="http://westquesttech.com/images/westquestlogo.png">
</div>
<div style="height:450px;" class="selection">
<div id="slider">
<ul class="slides" style='margin-left:-720px'>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image2.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image3.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image4.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
</ul>
</div>
<div id="slidebttn">
<button class="left">
<</button>
<button class="right">></button>
</div>
</div>
<div class="footer"></div>
</html>

Nav dropdown hover flicker problems when reloading page with cursor over the tab

I have a problem with my dropdown Navbar it doesn't do it all the time. But if I reload the page and keep the cursor over the tab it will sometimes start flickering and flashing and the hover seem to mess up.
I have made a JSfiddle DEMO, but the dropdown isn't working on it not sure why I will also provide the code and webpage link were the dropdown does work.
Webpage Link Here. with kinda working dropdown.
HTML
<div style="padding-top:15px;">
<a class="toggleMenu" href="#">Menu</a> <!-- Mobile Nav -->
<ul class="nav">
<li>
refresh and keep cursor here
<ul>
<li>
somthing
<ul>
<li>Nothing</li>
<li>Nothing</li>
<li>Nothing</li>
</ul>
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
</ul>
</li>
</ul>
</div> <!-- Container-Nav End -->
<div style="background:#333; width:100%; height:500px;"></div>
CSS
.nav-wrapper {
max-width:1300px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.container-nav {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-top:18px;
padding-left: 20px;
}
.toggleMenu {
display: none;
background-color: #455357;
width: 35%;
padding: 15px 40px;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
color: #fff;
float: right;
text-align: right;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
display: block;
text-transform: uppercase;
color: #788083;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.02em;
transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.nav a:hover {
color:#d54572;
text-decoration: none;
}
/* first sub hover colors */
.nav li a:hover {
background: none;
}
/* second sub hover colors */
.nav li li a:hover {
background: #999;
}
/* active tab colors */
#active {
color:#d54572;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
/* first sub menu */
.nav li li a {
width: 127px;
background: #666;
color:#fff;
position: relative;
z-index:500;
border: 1px inset #fff;
display: block;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-left:-40px;
}
/* second sub menu */
.nav li li li a {
background:#777;
z-index:500;
}
Javascript
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 801) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 801) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}