Develop Reference

CSS overflow and position

I wish that when I'm with the mouse over the link, that blur will disappear and work properly if I don't add the line class.
When I add the line class, everything breaks down, the links change position on the x-axis and only the Contact link is visible.
How can I add that line for all 3 links without affecting the position and disappearance of the link blur?
And why does that navbar overflow-x occur?
its width in css is 100 vw.
I think it's from the mouseover event, but how can I prevent that overflow-x? Why does the navbar have that width?
const cursor = document.querySelector('.cursor');
const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav') ;
navLinks.forEach(link =>{
nav.style.overflow='hidden' ;
link.addEventListener('mouseover',e=>{
e.target.classList.add('line');
e.target.classList.remove('blur') ;
})}) ;
navLinks.forEach(link =>{
link.addEventListener('mouseleave',e=>{
e.target.classList.add('blur') ;
})}) ;
nav.addEventListener('mousemove' , function(mouse){
const x = mouse.pageX +'px';
const y = mouse.pageY +'px';
cursor.style.left = x ;
cursor.style.top = y ;
}) ;
nav {
height:10vh;
width:100vw;
box-shadow:5px 0px 10px rgba(0,0,0,1);
display:flex;
align-items:center;
background:gray;
overflow:hidden;
cursor:none;
}
.cursor{
width:3vw;
height:3vw;
background:brown;
border-radius:50%;
position:absolute;
pointer-events:none;
transform:translate(-50%,-50%) ;
}
.logo{
position:relative;
width:10vw;
height:100%;
}
.logo h2{
position:absolute;
top:50%;
font-size:1rem;
}
nav ul {
display:flex;
height:100%;
width:90vw;
position:relative;
}
nav ul li {
list-style:none;
padding-left:15vw;
position:relative;
top:50%;
}
nav ul li a{
text-decoration:none;
font-size:1rem;
position:relative;
cursor:none;
}
.blur{
filter:blur(3px);
}
.section{
position:relative;
top:3vh;
width:100%;
height:100vh;
}
.section1{
background:red;
}
.section2{
background:blue;
}
.section3{
background:purple;
}
.line{
width:1px;
height:100%;
position:absolute;
background:black;
animation:anime 1.5s linear infinite;
}
#keyframes anime {
0%{
transform:translateX(0);
}
100%{
transform:translateX(100%);
}
}
<nav>
<div class ="logo">
<h2 class ='logo'>logo</h2>
</div>
<div class ='cursor'></div>
<ul>
<li><a class="blur " href ="#">Home</a></a></li>
<li><a class="blur " href ="#">About</a></a></li>
<li><a class="blur " href ="#">Contact</a></a></li>
</ul>
</nav>
<div class ="section section1" >
</div>
<div class ="section section2" >
</div>
<div class ="section section3" >
</div>
</div>

I formatted your code a bit.
The problem was, that your anchor was just 1px wide, that was too small for the event listeners to react.
I changed the line to a pseudo element ::before.
The rest of your code I left untouched.
const cursor = document.querySelector('.cursor');
const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav');
navLinks.forEach(link => {
nav.style.overflow = 'hidden';
link.addEventListener('mouseover', e => {
e.target.classList.remove('blur');
})
link.addEventListener('mouseleave', e => {
e.target.classList.add('blur');
});
});
nav.addEventListener('mousemove', function(mouse) {
const x = mouse.pageX + 'px';
const y = mouse.pageY + 'px';
cursor.style.left = x;
cursor.style.top = y;
});
nav {
height: 10vh;
width: 100vw;
box-shadow: 5px 0px 10px rgba(0, 0, 0, 1);
display: flex;
align-items: center;
background: gray;
overflow: hidden;
cursor: none;
}
.cursor {
width: 3vw;
height: 3vw;
background: brown;
border-radius: 50%;
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
}
.logo {
position: relative;
width: 10vw;
height: 100%;
}
.logo h2 {
position: absolute;
top: 50%;
font-size: 1rem;
}
nav ul {
display: flex;
height: 100%;
width: 90vw;
position: relative;
}
nav ul li {
list-style: none;
padding-left: 15vw;
position: relative;
top: 50%;
}
nav ul li a {
text-decoration: none;
font-size: 1rem;
position: relative;
cursor: none;
height: 100%;
display: block;
}
.blur {
filter: blur(3px);
}
.section {
position: relative;
top: 3vh;
width: 100%;
height: 100vh;
}
.section1 {
background: red;
}
.section2 {
background: blue;
}
.section3 {
background: purple;
}
nav a::before {
content: " ";
width: 1px;
height: 100%;
position: absolute;
background: black;
animation: anime 1.5s linear infinite;
}
#keyframes anime {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
<nav>
<div class="logo">
<h2 class="logo">logo</h2>
</div>
<div class='cursor'></div>
<ul>
<li><a class="blur" href="#">Home</a>
</li>
<li><a class="blur" href="#">About</a>
</li>
<li><a class="blur" href="#">Contact</a>
</li>
</ul>
</nav>
<div class="section section1">
</div>
<div class="section section2">
</div>
<div class="section section3">
</div>

disable selected and other objects in javascript

I have this door open/close script made from HTML, CSS, and JavaScript which I got from here.
My question is how can I disable/prevent from clicking/closing again the same selected door?
For example, I will click the first door it will disable what I clicked and will also disable the remaining doors. I want this because I need to trigger an ajax request after I've clicked on one of the doors.
My javascript code:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});
Demo from codepen:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
/*
// move the overlay
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
*/
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
}
.door img {
width:100%;
height:100%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.swing {
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.swing figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
background-color: brown;
width:80px;
height:130px;
}
.swing .back {
transform: rotateY( 180deg);
}
.swing:hover {
outline:3px solid white;
}
.swing.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
.popover {
position:absolute;
border:1px solid red;
width:200px;
height:200px;
background-color:#fff;
transition: transform .5s;
transition: box-shadow .5s;
transform:scale3d(0,0,0);
}
.popover.open {
transform:scale3d(1,1,1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
<figure class="back"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
</div>
</div>
</section>
<div class="popover">Surprise!</div>

Updated and fixed :
In JQuery you can just use the .off() method on the main to remove the click event.
Ex: $('section.container').off("click");
In pure javascript (vanilla) you can just use the removeEventListener() method.
Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);
You can take a look at my fixed CodePen.
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('section.container').on('click', '.doorFrame', (event) => {
$('section.container').off("click");
let doorFrame = $(event.currentTarget);
doorFrame.find('.swing').toggleClass('flipped');
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.container:after {
content: "";
display: table;
clear: both;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.door:hover {
outline:3px solid white;
}
.door figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
transform: rotateY( 180deg);
}
.door img {
width:100%;
height:100%;
}
.door.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
<figure class="back">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
</div>
</div>
</section>

The simple solution is to just use one
-- edit --
Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications
//edit - using on instead of one
$('.doorFrame').on('click',function(event){
console.log('click');
//edit - removing listener for all doorFrames
$('.doorFrame').off('click', this);
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});

Move Triangle Arrow Sideways

I have a main menu on the header with links, and i have a triangle that moves as the user hovers from one page to another. I want to keep it moving, but i would like to see the transition showing like on this website: harris-active.co.uk
CSS Code:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}
#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}
#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}
#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}
this is how it is currently showing on my live site: tradey-lb.com

With an html as this:
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
You could use absolute position to place the triangle whatever position like:
.arrow {
position:absolute;
bottom:0px;
left:85px;
}
Then add some classes for each different hover like:
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
And with a easy function, when you hover on your menu you remove any class already there on "Arrow" and then add the position class needed... like:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
Full example:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
$(".m3").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position3");
});
$(".m4").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position4");
});
ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
padding:0;
position:absolute;
bottom:0px;
left:85px;
transition: left 0.3s ease-in-out;
}
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
.position4 {
left:410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
I was tempted to delete my answer once I saw your rude comment to another user but this may help someone else around so I'll keep it for now. But try ro learn some manners.

Overlapping Menu Items in Fly Out Vertical Menu (Z-Index not helping!)

Can any CSS expert help me figure out why the Fly Out Vertical Menu items are overlapping as shown in the screenshots. I tried using higher z-index for ul, li, menu wrapper, etc. but to no avail.
I'm using Safari.
You can view the website here: http://www.octavehotels.com
Any help would be greatly appreciated and may be considered for freelance jobs.
Thanks & regards
BK Suru
The Codes:
Fly Out Vertical Menu CSS code:
/* Define the body style */
body {
}
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
list-style:none;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
font-family: 'museosans500', Arial, sans-serif;
font-size: 14px;
text-align: left;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
width:143px;
padding-left: 7px;
margin-bottom: 6px;
height:28px;
line-height: 27px;
cursor:pointer;
background-image:url(../images/hotel-btn-bg.png);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border:#888 1px solid;
box-shadow: 1px 2px 6px 0px #222;
-webkit-box-shadow: 1px 2px 6px 0px #222;
-moz-box-shadow: 1px 2px 6px 0px #222;
}
/* We apply the background hover color when user hover the mouse over of the li component */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover{
font-family: 'museosans700', Arial, sans-serif;
font-size: 14px;
background-color: #ffffff;
background-image:none;
position:relative;
}
#dark-1:hover, #dark-2:hover, #dark-3:hover, #dark-4:hover {
-moz-transition: box-shadow 300ms;
-webkit-transition: box-shadow 300ms;
transition: box-shadow 300ms;
}
/* We apply the link style */
#menuwrapper ul li a {
color:#ffffff;
display:block;
text-decoration:none;
}
#menuwrapper ul li a:hover {
color:#111111;
display:block;
text-decoration:none;
}
#menuwrapper ul li:hover > a {
color:#111111 !important;
}
.dimbackground-curtain {
}
#menuwrapper ul .callout {
position:absolute !important;
bottom:31px;
margin-left:-30px;
font-size:28px;
text-shadow: -7px 4px 10px #333;
z-index: 1 !important;
display:block;
padding-left:10px;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul {
position:absolute;
z-index: 1000;
margin-top: -346px;
margin-left: 162px;
visibility: hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul{
position:absolute;
z-index: 1000;
visibility: visible;
opacity:1;
filter:alpha(opacity=100);
}
/* we apply different background color to 2nd level menu items */
#menuwrapper ul li ul li{
background-color: #ffffff !important;
background-image: none;
width: 485px;
height: 382px;
padding: 5px;
border:#999 1px solid;
-webkit-box-shadow: 0px 8px 50px 2px #000;
box-shadow: 0px 8px 50px 2px #000;
-moz-box-shadow: 0px 8px 50px 2px #000;
}
/* We change the background color for the level 2 submenu when hovering the menu */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover{
}
/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
}
/* Clear float */
.clear{
clear:both;
}
/* Arrow 1 */
#menuwrapper ul li .arrow1 {
display: block;
font-size:7px;
line-height:30px;
float:right;
padding-right:7px;
vertical-align:middle;
}
/* Arrow 2 */
#menuwrapper ul li .arrow2 {
color: #333;
font-size:9px;
line-height:30px;
float:right;
padding-right:7px;
vertical-align:middle;
}
/* Arrow 3 */
#menuwrapper ul li .arrow3 {
font-size:11px;
float:right;
padding-right:5px;
padding-top:2px;
vertical-align:middle;
}
.slideshow-wrap {
display: table;
width: 473px;
height: 380px;
}
.hotel-img2{
background-image:url(../images/octave-sarjapura.jpg) !important;
background-repeat: no-repeat;
display: table;
width: 473px;
height: 369px;
}
.hotel-img3{
background-image:url(../images/octave-marathahalli.jpg) !important;
background-repeat: no-repeat;
display: table;
width: 473px;
height: 369px;
}
.hotel-img4{
background-repeat: no-repeat;
display: table;
width: 473px;
height: 380px;
}
.hotel-place {
font-family: 'museosans700', Arial, sans-serif;
text-shadow: 1px 1px 2px #000000;
color: #ffffff;
font-size: 14px;
display: block;
margin-top: -10px;
margin-bottom: 10px;
letter-spacing: 0.03em;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.hotel-title-space {
position:absolute;
display:table-cell;
vertical-align: bottom;
width:76.75%;
margin-top:-35px;
z-index:10002;
}
#menuwrapper ul li ul:hover .hotel-title-space {
width:77%; !important;
}
.hotel-title {
position:absolute;
display:table-row;
font-family: 'museosans500', Arial, sans-serif;
color:#fff;
font-size: 18px;
line-height: 36px;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
padding-left:11px;
float: left;
width:100%;
height:35px;
background-image:url(../images/hotel-title-bg.png);
}
.hotel-link-space {
position:absolute;
display:table-cell;
vertical-align: bottom;
width:21.15%;
margin-top:-35px;
z-index:10002;
right:5px;
}
#menuwrapper ul li ul:hover .hotel-link-space {
right: 4.005px; !important;
}
.hotel-link {
position:absolute;
display:table-row;
font-family: 'museosans700', Arial, sans-serif;
color:#222222;
font-size: 18px;
line-height: 36px;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
float: left;
text-align: right;
padding-right:5px;
width:100%;
height:35px;
background-image:url(../images/hotel-link-bg.png);
}
.hotel-link:hover {
font-family: 'museosans700', Arial, sans-serif;
color:#222222;
background-color: #ffffff;
}
JQuery Dim Background JS code:
/**
* Usage: $("<selector>").dimBackground([options] [, callback]);
*
* #author Andy Wermke <andy#dev.next-step-software.com>
*
*/
(function ($) {
'use strict';
var dimmedNodes = []; /// [ {$curtain: ?, $nodes: jQueryArray} ]
/**
* Dim the whole page except for the selected elements.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when dimming animation has completed.
*/
$.fn.dimBackground = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
// Initialize curtain
var $curtain = $('<div class="dimbackground-curtain"></div>');
$curtain.css({
position: 'fixed',
left: 0,
top: 0,
width: '100%',
height: '100%',
background: 'black',
opacity: 0,
zIndex: options.curtainZIndex
});
$('body').append($curtain);
// Top elements z-indexing
this.each(function (){
var $this = $(this);
var opts = $.meta ? $.extend( {}, options, $this.data() ) : options;
this._$curtain = $curtain;
this._originalPosition = $this.css('position').toLowerCase();
if (this._originalPosition != "absolute" && this._originalPosition != "fixed") {
$this.css('position', 'relative');
}
this._originalZIndex = $this.css('z-index');
if (this._originalZIndex == "auto" || this._originalZIndex <= opts.curtainZIndex) {
$this.css('z-index', opts.curtainZIndex+1);
}
});
$curtain.stop().animate({opacity: options.darkness}, options.fadeInDuration, callback);
dimmedNodes.push( {$curtain: $curtain, $nodes: this} );
return this;
};
/**
* Undo the dimming.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when "undimming" animation has completed.
*/
$.fn.undim = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
var $curtain;
var nodeZIndexMap = []; /// [ [node, originalPosition, originalZIndex], ... ]
this.each(function () {
var $this = $(this);
var opts = $.meta ? $.extend( {}, options, $this.data() ) : options;
if (this._$curtain) {
if (!$curtain) {
$curtain = this._$curtain;
}
if (typeof this._originalPosition != "undefined") {
nodeZIndexMap.push( [this, this._originalPosition, this._originalZIndex] );
}
this._$curtain = undefined;
this._originalPosition = undefined;
this._originalZIndex = undefined;
}
});
if ($curtain) {
$curtain.animate({opacity: 0}, options.fadeOutDuration, function () {
for (var i=0; i<nodeZIndexMap.length; i++) {
var node = nodeZIndexMap[i][0],
position = nodeZIndexMap[i][1],
zIndex = nodeZIndexMap[i][2];
$(node).css({
position: position,
zIndex: zIndex
});
}
$curtain.remove();
callback();
});
var match;
for (var i=0; i<dimmedNodes.length; i++) {
var entry = dimmedNodes[i];
if (entry.$curtain == $curtain) {
match = i;
break;
}
}
if (match) {
dimmedNodes = dimmedNodes.slice(0, i).concat( dimmedNodes.slice(i+1) );
}
}
return this;
};
/**
* Undim all dimmed elements.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when all animations have completed.
*/
$.undim = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
var _dimmedNodes = dimmedNodes.slice();
var completed = 0, total = _dimmedNodes.length;
for (var i=0; i<dimmedNodes.length; i++) {
_dimmedNodes[i].$nodes.undim(options,done);
}
if (total === 0) {
callback();
}
function done () {
completed++;
if (completed == total) {
callback();
}
}
};
// Plugin default options
$.fn.dimBackground.defaults = {
darkness : 0.75, // 0 means no dimming, 1 means completely dark
fadeInDuration : 310, // in ms
fadeOutDuration : 300, // in ms
curtainZIndex : 999
};
/// #return {options:object, callback:function}
function parseParams (options, callback) {
if (typeof options == "function") {
callback = options;
options = {};
}
if (typeof options != "object") {
options = {};
}
if (typeof callback != "function") {
callback = function () {};
}
return {
options : options,
callback : callback
};
}
}( jQuery ));
WOW Slider code:
/*
* generated by WOW Slider 2.5
* template Elemental
*/
.wowslider-container1 {
zoom: 1;
position: relative;
max-width:485px;
margin:0 auto;
z-index:100 !important;
border:none;
text-align:left; /* reset align=center */
}
#menuwrapper ul li .slideshow-wrap {
display:none;
}
#menuwrapper ul li:hover ul .slideshow-wrap {
display:block;
}
* html .wowslider-container1{ width:485px }
.wowslider-container1 ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
margin-top: 0px !important;
margin-left: 0px !important;
/*table-layout:fixed;*/
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
border:none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
}
.wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
.wowslider-container1 img{
max-width: none !important;
}
.wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
.wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
.wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
.wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
.wowslider-container1 a.wsl{
display:none;
}
.wowslider-container1 .ws_bullets {
padding: 9px;
}
.wowslider-container1 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
.wowslider-container1 .ws_bullets a:hover{
background-position: 0 50%;
}
.wowslider-container1 .ws_bullets a.ws_selbull{
background-position: 0 100%;
}
.wowslider-container1 a.ws_next, .wowslider-container1 a.ws_prev {
position:absolute;
display:block;
bottom:10.5%;
margin-top:0;
z-index:1001;
height: 48px;
width: 45px;
background-image: url(./arrows.png);
background-repeat:no-repeat;
opacity: 0.7;
}
.wowslider-container1 a.ws_next{
background-position: 100% 10%;
right:0.75%;
}
.wowslider-container1 a.ws_prev {
left:80%;
background-position: 0 80%;
}
.wowslider-container1 a.ws_next:hover{
opacity: 1;
}
.wowslider-container1 a.ws_prev:hover {
opacity: 1;
}
/* bottom center */
.wowslider-container1 .ws_bullets {
top: 6px;
right: 6px;
}
.wowslider-container1 .ws-title{
position:absolute;
display:block;
bottom: 17px;
left: 0px;
margin: 9px;
margin-left: 0px;
margin-right: 9px;
padding:8px;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans',Arial,Helvetica,sans-serif;
font-size: 18px;
border-radius:5px;
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 2px #5D5D5D;
box-shadow: 0 0 2px #5D5D5D;
}
.wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 14px;
}
.wowslider-container1 .ws_logo{
position: absolute;
left:0;
top:0;
height: 100%;
width: 100%;
z-index: 9;
background: url(./loading.gif) 50% 50% no-repeat;
}
.wowslider-container1 .ws_bulframe img.loading{
margin:39px 35px;
}.wowslider-container1 .ws_images {
border-radius: 4px;
}
.wowslider-container1 .ws_effect img{
border-radius: 4px;
}
.wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:20px;
left:-57px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
max-width:none;
}
.wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
.wowslider-container1 .ws_bulframe div div{
height:90px;
overflow:visible;
position:relative;
}
.wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:114px;
background-color:#FFF;
}
.wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:18px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
}
.wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-10px;
margin-left:-6px;
left:57px;
background:url(./triangle.png);
width:15px;
height:6px;
}
Screenshot 1
2]3

yes z-index helping us to avoid the overlapping the elements...
use the z-index maximum for sliding and use the z-index minimum for the list item.

You are on the right track I believe, just doing the z-index the opposite way. Put a higher z-index on the wowslider and a lower z-index on the list.
Right now you have a z-index of 0 on the wowslider and a z-index of 1 on the ul so the ul would appear above the wowslider.
Try that out first

Need to reset original style after doing animation with Jquery?

I been working on a simple JQuery Slider and I am having difficulty trying to get the navbar animation and the image slider animation to stay in-sync. Here is the code.
Html
<div id="slider">
<ul>
<li ><img src="images/nationals.JPG" class="slider_img" class='active'/></li>
<li><img src="images/competitionstart.JPG" class="slider_img" /></li>
<li><img src="images/tsa.JPG" class="slider_img"/></li>
</ul>
</div>
<div id="toolbar">
<ul>
<li><a href="our_chapter.html"class='active'>Discover<p>Find out what TSA is</p></a></li>
<li>Learn<p>Learn about STEM class at Harriton</p></li>
<li><a href="http://webmaster.tsaprotectandserve.com">Explore<p>Jump into the world of Web Design</p></li>
</ul>
</div>
CSS
#slider {
position:relative;
display:block;
height : 338px;
width: 600px;
clear: both;
left:20%;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#slider ul {
list-style:none;
margin: 0px 0px 0px 0px;
overflow:hidden;
}
#slider ul li{
position:absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0
}
#slider ul li img {
width:600px;
height: 338px;
margin: 0px 0px 0px 0px;
}
#slider ul li.active {
z-index: 10;
}
#slider ul li.last-active {
z-index: 9;
}
#toolbar {
position:relative;
display: block;
width: 600px;
left: 20%;
}
#toolbar ul {
position: absolute;
list-style:none;
padding: 10px;
display:block;
left: 0px;
top: 0px;
overflow: hidden;
width:600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#toolbar ul li{
float:left;
z-index:8;
background: rgb(31,29,30);
}
#toolbar ul li.active{
z-index:10;
background: rgb(105,100,100);
}
#toolbar ul li.lastactive{
z-index:9;
}
#toolbar ul li a {
display: block;
width: 190px;
height:80px;
color: #fff;
text-decoration:none;
font-size: 24px;
font-style: bold;
padding: 5px;
z-index:8;
}
#toolbar ul li a p {
padding: 0px;
margin:0px;
font-size:14px;
}
Javascript
//Fade in and outs
function slideSwitch() {
//Image slider
var $active= $('#slider ul li.active');
if ($active.length == 0) $active = $('slider ul li:last')
var $next = $active.next().length ? $active.next()
: $('#slider ul li:first');
$active.addClass('last-active');
$next.addClass('active');
$active.removeClass('active');
//Fade animation
$next.css({opacity: 0.05})
.addClass('active')
.animate({opacity: 1.00}, 1000, function() {
$active.removeClass('active last-active');
})
}
function toolbarSwitch() {
//toolbar slider
var $active= $('#toolbar ul li.active');
if ($active.length == 0) $active = $('slider ul li:last')
var $next = $active.next().length ? $active.next()
: $('#toolbar ul li:first');
$active.addClass('last-active');
$next.addClass('active');
$active.removeClass('active');
//Fade animation
$next.css({background: rgb(31,29,30)})
.addClass('active')
.animate({background: rgb(100,100,100)}, 1000, function() {
$active.removeClass('active last-active');
})
}
//Interval between slides
$(function() {
setInterval("slideSwitch()", 5000);
setInterval("toolbarSwitch()", 5000);
});
For reference, I have embeded Jquery, a Jquery color plugin to animate colors. Thanks for any help in advance.

Its a sync problem's?
In past I had a problem like this and I use stop method in jquery
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle( 1000 );
});
Its just an example but will help u to get the sync animations
Example here