We Keep Coding

When i changed position of functions why doesn't it work with javascript closure?

I'm a new javascript, let me direct to the point. I have heard that we have to avoid global variables as much as we can, so, i learn to use closure for make sure that variables can not access to each other.
I have slideShow function which is on the top and toggleMenu function on the bottom, these functions are work fine in my webpage.
My problems is when i changed position of functions, slideShow function to the bottom and toggleMenu function to the top, my webpage it looks not fine, doesn't work properly
May be there is something that i don't know? or i did something wrong? if any one would give me some advices i would appreciate that, thank you.
Here is original code
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#maintopics.show #subtopics {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.clicked {
background-color: #ff0000;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li id="maintopics">Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Then i changed position of functions
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();

The issue seems to be with this
return {
toggleMenu: toggleMenu()
};
inside the toggleMenu immediately invoking function . This IIFE does not have any toggleMenu function
Beside return like
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
is not appropriate ,replace it with the following
There is no reason tha slideShow has to IIFE
return {
reset: reset,
showImages: showImages,
arrowSlide: arrowSlide,
showBulletsImages: showBulletsImages,
autoSlide: autoSlide
};
Here is a working demo at stackblitz

How to add effect to drag and drop elements in java script

I have created a short exercise that involves 3 boxes that are attributed to certain shapes. I have it set now that if someone drags the shape to the correct box it is places in the box. However, currently if someone drags a shape to the wrong shape it only resets. I would like to add some effects such as, if the person drags to the wrong one it resets and a red flash appears on in the box, and if correct a green one appears. If possible it would be nice to be able to also have the red flash appear even if the person adds it to the correct box, but after the specified number such as a third triangle in the triangle box. How would this be done ? This is my current code
var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");
var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");
var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");
circ.ondragstart = function(evt) {
evt.dataTransfer.setData('key1', evt.target.id);
console.log("dragging circle");
}
tria.ondragstart = function(evt) {
evt.dataTransfer.setData('key2', evt.target.id);
console.log("dragging triangle");
}
squa.ondragstart = function(evt) {
evt.dataTransfer.setData('key3', evt.target.id);
console.log("dragging square");
}
/*circ2.ondragstart = function(){
evt.dataTransfer.setData('key4','c2');
console.log("yesh");
}
tria2.ondragstart=function(){
evt.dataTransfer.setData('key5','t2');
console.log("nani");
}
squa2.ondragstart=function(){
evt.dataTransfer.setData('key6','s1');
console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
evt.preventDefault();
console.log("over t");
}
dropc.ondragover = function(evt) {
evt.preventDefault();
console.log("over c");
}
drops.ondragover = function(evt) {
evt.preventDefault();
console.log("over s");
}
dropt.ondrop = function(evt) {
evt.preventDefault();
var icont = evt.dataTransfer.getData('key2');
console.log("drop t");
console.log(icont);
var current = document.getElementById(icont);
console.log(current);
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
dropt.appendChild(newcurrent);
}
dropc.ondrop = function(evt) {
evt.preventDefault();
var iconc = evt.dataTransfer.getData('key1');
console.log("drop c");
console.log(iconc);
var current = document.getElementById(iconc);
console.log(current);
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
dropc.appendChild(newcurrent);
}
drops.ondrop = function(evt) {
evt.preventDefault();
var icons = evt.dataTransfer.getData('key3');
console.log("drop s");
console.log(icons);
var current = document.getElementById(icons);
console.log(current);
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
drops.appendChild(newcurrent);
}
#body {
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.column {
flex: 1;
background: #ffffff;
border: 1px solid #ffffff;
box-sizing: border-box;
}
.column-one {
order: 3;
}
.column-two {
order: 1;
}
.column-three {
order: 4;
}
.column-four {
order: 2;
}
.column-five {
order: 5;
}
.drop-zone1 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.drop-zone2 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.drop-zone3 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.icon1 {
width: 50px;
height: 50px;
margin-left: 45px;
}
.icon2 {
width: 50px;
height: 50px;
margin-left: 56px;
align-content: center;
}
.icon3 {
width: 50px;
height: 50px;
margin-left: 58px;
}
.question {
text-align: center;
color: #535f6b;
font-family: sans-serif;
font-style: italic;
}
<p class="question"><b>Drag and drop the elements to their corresponding set to achieve: <br>a. 3 circles in the circle set<br>b. 2 triangles in the triangle set<br>c. 5 squares in the square set</b></p>
<div class="container">
<div class="column column-one"><img src="circle.png" id="c1" style="margin-left: 55px"></div>
<div class="column column-two"></div>
<div class="column column-three"><img src="square.png" id="s1" style="margin-left: 58px"></div>
<div class="column column-four"><img src="triang.png" id="t1" style="margin-left: 45px"></div>
<div class="column column-five"></div>
</div>
<br>
<div class="container">
<div class="column column-one">
<div class="drop-zone1" id="dzt"></div>
</div>
<div class="column column-two"></div>
<div class="column column-three">
<div class="drop-zone2" id="dzc"></div>
</div>
<div class="column column-four">
<div class="drop-zone3" id="dzs"></div>
</div>
<div class="column column-five"></div>
</div>
<div class="container">
<div class="column column-one">
<div class="icon1"><img src="triang.png"></div>
</div>
<div class="column column-two"></div>
<div class="column column-three">
<div class="icon2"><img src="circle.png"></div>
</div>
<div class="column column-four">
<div class="icon3"><img src="square.png"></div>
</div>
<div class="column column-five"></div>
</div>
This is what it looks like with the images
Thanks in advance and best regards

In the below snippet I've added some condition to check if the object was dragged in its area, if so , I added the class that has an animation background ( annimation created at bottom ) otherwise it will check if the drag area has child ( do not trigger error annimation , else trigger the error annimation )
you can set your own annimation and colors by changing the both css annimations and the css class .green and .red
see below snippet
var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");
var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");
var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");
tria.ondragstart = function(evt) {
evt.dataTransfer.setData('key2', evt.target.id);
console.log("dragging triangle");
}
circ.ondragstart = function(evt) {
evt.dataTransfer.setData('key1', evt.target.id);
console.log("dragging circle");
}
squa.ondragstart = function(evt) {
evt.dataTransfer.setData('key3', evt.target.id);
console.log("dragging square");
}
/*circ2.ondragstart = function(){
evt.dataTransfer.setData('key4','c2');
console.log("yesh");
}
tria2.ondragstart=function(){
evt.dataTransfer.setData('key5','t2');
console.log("nani");
}
squa2.ondragstart=function(){
evt.dataTransfer.setData('key6','s1');
console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
evt.preventDefault();
//console.log("over t");
}
dropc.ondragover = function(evt) {
evt.preventDefault();
//console.log("over c");
}
drops.ondragover = function(evt) {
evt.preventDefault();
//console.log("over s");
}
dropt.ondrop = function(evt) {
evt.preventDefault();
var icont = evt.dataTransfer.getData('key2');
console.log("drop t");
console.log(icont);
var current = document.getElementById(icont);
console.log(current);
if(current != null) {
if(this.hasChildNodes()) return;
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
this.appendChild(newcurrent);
setBackground("green",this);
}
else {
if(!this.hasChildNodes())
setBackground("red",this);
}
}
dropc.ondrop = function(evt) {
evt.preventDefault();
var iconc = evt.dataTransfer.getData('key1');
console.log("drop c");
console.log("dd",iconc);
var current = document.getElementById(iconc);
console.log(current);
if(current != null) {
if(this.hasChildNodes()) return;
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
this.appendChild(newcurrent);
setBackground("green",this);
}
else {
if(!this.hasChildNodes())
setBackground("red",this);
}
}
drops.ondrop = function(evt) {
evt.preventDefault();
var icons = evt.dataTransfer.getData('key3');
console.log("drop s");
console.log(icons);
var current = document.getElementById(icons);
console.log(current);
if(current != null) {
if(this.hasChildNodes()) return;
var newcurrent = document.createElement('img');
newcurrent.src = current.src;
this.appendChild(newcurrent);
setBackground("green",this);
}
else {
if(!this.hasChildNodes())
setBackground("red",this);
}
}
function setBackground (className,node) {
node.classList.remove("green");
node.classList.remove("red");
node.classList.add(className);
}
#body {
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.column {
flex: 1;
background: #ffffff;
border: 1px solid #ffffff;
box-sizing: border-box;
}
.column-one {
order: 3;
}
.column-two {
order: 1;
}
.column-three {
order: 4;
}
.column-four {
order: 2;
}
.column-five {
order: 5;
}
.drop-zone1 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.drop-zone2 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.drop-zone3 {
align-content: center;
<!--border-radius: 50%;
-->width: 150px;
height: 150px;
border: 2px;
border-style: solid;
border-color: #535f6b;
}
.icon1 {
width: 50px;
height: 50px;
margin-left: 45px;
}
.icon2 {
width: 50px;
height: 50px;
margin-left: 56px;
align-content: center;
}
.icon3 {
width: 50px;
height: 50px;
margin-left: 58px;
}
.question {
text-align: center;
color: #535f6b;
font-family: sans-serif;
font-style: italic;
}
.green {
animation-name: backgroundGreen;
animation-duration: 1.5s;
animation-iteration-count: 3;
background-color:#0f0;
}
.red {
animation-name: backgroundRed;
animation-duration: 1s;
animation-iteration-count: 3;
background-color:#f00;
}
/* The animation code */
#keyframes backgroundGreen {
0% {background-color:#fff;}
50% {background-color:#00ffbb;}
100% {background-color:#00ff00;}
}
#keyframes backgroundRed {
0% {background-color:#fff;}
50% {background-color:#ff0055;}
100% {background-color:#ff0000;}
}
<p class="question"><b>Drag and drop the elements to their corresponding set to achieve: <br>a. 3 circles in the circle set<br>b. 2 triangles in the triangle set<br>c. 5 squares in the square set</b></p>
<div class="container">
<div class="column column-one"><img src="https://cdn1.iconfinder.com/data/icons/material-core/20/check-circle-outline-blank-128.png" id="c1" style="margin-left: 55px"></div>
<div class="column column-two"></div>
<div class="column column-three"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/square-128.png" id="s1" style="margin-left: 58px"></div>
<div class="column column-four"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/triangle-128.png" id="t1" style="margin-left: 45px"></div>
<div class="column column-five"></div>
</div>
<br>
<div class="container">
<div class="column column-one">
<div class="drop-zone1" id="dzt"></div>
</div>
<div class="column column-two"></div>
<div class="column column-three">
<div class="drop-zone2" id="dzc"></div>
</div>
<div class="column column-four">
<div class="drop-zone3" id="dzs"></div>
</div>
<div class="column column-five"></div>
</div>
<div class="container">
<div class="column column-one">
<div class="icon1"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/triangle-64.png"></div>
</div>
<div class="column column-two"></div>
<div class="column column-three">
<div class="icon2"><img src="https://cdn1.iconfinder.com/data/icons/material-core/20/check-circle-outline-blank-64.png"></div>
</div>
<div class="column column-four">
<div class="icon3"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/square-64.png"></div>
</div>
<div class="column column-five"></div>
</div>

How to create a toggle button to switch between panels

In my application I have 2 toggle buttons and 3 panels. Button1 switches between panel 1 and 2. And button2 switches between panel 1 and 3. I could make it work some how by giving display: none; property to div panels. but once it only works once for each button and then it makes all sub divs to display: none;
Have a look at the sample please:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
div.mainSection > .panel3 > p{
margin-top:80px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">
<div>panel1</div>
<div>panel1</div>
</div>
<div class="panel2" style="display: none;">
<div>panel2</div>
</div>
<div class="panel3" style="display: none;">
<p>Panel3</p>
<div>panel3</div>
<div>panel3</div>
</div>
</div>
<div class="dashboard">
<button class="panel2">button1</button>
<button class="panel3">button2</button>
</div>
</div>
As you can see, each panel has some inner divs. the first time, it shows all inner divs. but once you switch between panels, it will not show inner divs inside. I tried to disappear the panels div only but it seems it does it for every div within that panel.
So any idea to keep make it work so switching between panels will not affect the inner divs?

You need to change your javascript in this way:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
The problem is in your selector $('.mainSection div:visible');. This select also the child div and when you try to show the correct panel the child div are hidden. If you use $('.mainSection > div:visible'); you get only the direct child divs.

onClick javascript function shows only first child of wrapper

I am learning javascript these days and I have a little problem with my code.
I have three elements on page wrapper1, wrapper2 and wrapper3 and every of these has its triggerand redbox element.
My goal is when the trigger is hit, it will show the redbox element corresponding to number.
Examples:
clicking trigger1 inside wrapper1 element shows up redbox1 element,
trigger2 inside wrapper2 element shows up redbox2 element etc.
The problem is, when I click on trigger3 for example it always shows redbox1 element. (as example shows).
What I am doing wrong? I am just a begginer.
function showTheRedBox() {
var theRedBox = document.getElementsByClassName('redbox');
theRedBox[0].style.display = 'block';
}
body {background: #222;}
.wrapper {
background: yellow;
width: 100px;
height: 100px;
}
.trigger {
background: blue;
width: 50px;
height: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
.redbox {
background: red;
width: 200px;
height: 100px;
margin-left: 100px;
position: absolute;
display: none;
}
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox();">trigger1</div>
<div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox();">trigger2</div>
<div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox();">trigger3</div>
<div class="redbox">hurrah3</div>
wrapper3</div>

You can use a for loop and a closure to access the .wrapper information for each onclick event. This method will work whether there are the same amount of children or not, and will always show the correct child.
Also, it is best to not use inline JavaScript attributes (e.g. onclick="showTheRedBox();") you should always assign your event handlers in your script for readability and maintainability.
var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');
for(i = wrappers.length - 1; i >= 0; --i) {
(function(wrapper){
wrapper.querySelector('.trigger').onclick = function() {
hideAll();
wrapper.querySelector('.redbox').style.display = 'block';
}
})(wrappers[i]);
}
function hideAll() {
for(i = redboxes.length - 1; i >= 0; --i) {
redboxes[i].style.display = 'none';
}
}
var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');
for(i = wrappers.length - 1; i >= 0; --i) {
(function(wrapper){
wrapper.querySelector('.trigger').onclick = function() {
hideAll();
wrapper.querySelector('.redbox').style.display = 'block';
}
})(wrappers[i]);
}
function hideAll() {
for(i = redboxes.length - 1; i >= 0; --i) {
redboxes[i].style.display = 'none';
}
}
body {background: #222;}
.wrapper {
background: yellow;
width: 100px;
height: 100px;
}
.trigger {
background: blue;
width: 50px;
height: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
.redbox {
background: red;
width: 200px;
height: 100px;
margin-left: 100px;
position: absolute;
display: none;
}
<div class="wrapper">
<div class="trigger">trigger1</div>
<div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
<div class="trigger">trigger2</div>
<div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
<div class="trigger">trigger3</div>
<div class="redbox">hurrah3</div>
wrapper3</div>
This method will also work, but it will use more memory as it queries the DOM once more than the above solution.
var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');
for(i = wrappers.length - 1; i >= 0; --i) {
wrappers[i].querySelector('.trigger').onclick = function() {
hideAll();
this.parentNode.querySelector('.redbox').style.display = 'block';
}
}
function hideAll() {
for(i = redboxes.length - 1; i >= 0; --i) {
redboxes[i].style.display = 'none';
}
}
var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');
for(i = wrappers.length - 1; i >= 0; --i) {
wrappers[i].querySelector('.trigger').onclick = function() {
hideAll();
this.parentNode.querySelector('.redbox').style.display = 'block';
}
}
function hideAll() {
for(i = redboxes.length - 1; i >= 0; --i) {
redboxes[i].style.display = 'none';
}
}
body {background: #222;}
.wrapper {
background: yellow;
width: 100px;
height: 100px;
}
.trigger {
background: blue;
width: 50px;
height: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
.redbox {
background: red;
width: 200px;
height: 100px;
margin-left: 100px;
position: absolute;
display: none;
}
<div class="wrapper">
<div class="trigger">trigger1</div>
<div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
<div class="trigger">trigger2</div>
<div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
<div class="trigger">trigger3</div>
<div class="redbox">hurrah3</div>
wrapper3</div>

The problem you have was that the method "getElementsByClassName", returns you an Array that contains all the elements of that class. So, when you where doing this:
theRedBox[0].style.display = 'block'
You were changing the display style of the First element of the Array, in this case "wrapper1".
Here's a modify version that functions whit the others wrappers:
<!DOCTYPE html>
<html lang = 'es'>
<head>
<title> MY TEST </title>
<style>
body {
background: #222;
}
.wrapper {
background: yellow;
width: 100px;
height: 100px;
}
.trigger {
background: blue;
width: 50px;
height: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
.redbox {
background: red;
width: 200px;
height: 100px;
margin-left: 100px;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox(0)">trigger1</div> <!-- When the onClick event is trigered the function "showTheRedBox receives a parameter , that parameter is the position of the element in the Array "theRedBox"-->
<div class="redbox">hurrah1</div>
wrapper1
</div>
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox(1)">trigger2</div>
<div class="redbox">hurrah2</div>
wrapper2
</div>
<div class="wrapper">
<div class="trigger" onclick="showTheRedBox(2)">trigger3</div>
<div class="redbox">hurrah3</div>
wrapper3</div>
<script>
function showTheRedBox(wrapperNumber) {
var theRedBox = document.getElementsByClassName('redbox');
theRedBox[wrapperNumber].style.display = 'block';
}
</script>
</body>
</html>

Create a simple jQuery content slider

Im trying to create a simple content slider with jQuery and css.
The slider has two columns :
the right one acts as a slider pager
the left one contains current content
I've managed to create html, css and jQuery function which changes active tab and related content. but I want function to repeat itslef and by hovering to pagers slider stop paging, then by mouseout slider continue.
HTML
<div id="slider">
<div id="rightcol">
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
<div id="leftcol">
<ul>
<li id="1" class="active">a</li>
<li id="2">b</li>
<li id="3">c</li>
</ul>
</div>
</div>
CSS
#slider
{
width: 600px;
height: 300px;
}
#leftcol
{
width: 300px;
height: 300px;
float: left;
}
#rightcol
{
width: 300px;
height: 300px;
float: right;
background-color: #F0F0F0;
}
#leftcol ul li
{
width: 300px;
height: 100px;
}
#leftcol ul li.active
{
background-color: #F0F0F0;
}
.content
{
width: 300px;
height: 300px;
display: none;
}
jQuery
$(document).ready(function () {
sd(3);
});
function sd(currentId) {
var currentcontent = "content";
s = "#" + String(currentcontent) + String(currentId);
$("#leftcol ul li").removeClass("active");
$(".content").hide();
$("#" + String(currentId)).addClass("active");
$(s).show();
}
What should be added to js?
jsfiddle demo

I have tried in simple jQuery content slider in the below way & its working even in responsive.
Demo link: jsfiddle.net/b54c38hj/1/
<div class="container">
<div class="slider">
<ul>
<li>Slider-1</li>
<li>Slider-2</li>
<li>Slider-3</li>
</ul>
</div>
<a class="prev" href="javascript:void(0)">Prev</a>
<a class="next" href="javascript:void(0)">Next</a>
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: 300px;
background: rgba(0,0,0,.45);
margin: 0 auto;
}
.container .slider{
overflow: hidden;
height: 300px;
}
.container .slider ul{
position: relative;
padding:0;
margin:0;
list-style-type: none;
height: 300px;
}
.container .slider ul li{
background: #efefef;
float: left;
color: #000;
font-size: 22px;
text-align: center;
height: 300px;
line-height: 300px;
}
.container a{
text-decoration: none;
position: absolute;
}
.container a.prev{
left: 0;
}
.container a.next{
right: 0;
}
var Slider = {};
Slider = {
_globalvar: function(){
var self = this;
self.Ele = $('.slider');
self.EleList = this.Ele.find('li');
self.Elelength = this.EleList.length;
self.Elewidth = this.Ele.outerWidth(true);
self.EleSetUl = this.Elelength * this.Elewidth;
self.current = 0;
},
_assignvar: function(){
Slider.Ele.find('ul').width(Slider.EleSetUl);
Slider.EleList.width(Slider.Elewidth);
Slider.Ele.find('li:first-child').addClass('active');
},
_prev: function(){
var prevlength = Slider.Ele.find('li.active').prev().length;
console.log(prevlength)
if(prevlength != 1){
Slider.current = null;
}
else{
Slider.Ele.find('li.active').removeClass('active').prev().addClass('active');
Slider.current = "+="+Slider.Elewidth;
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_next: function(){
var nextlength = Slider.Ele.find('li.active').next().length;
if(nextlength){
Slider.Ele.find('li.active').removeClass('active').next().addClass('active');
Slider.current = "-="+Slider.Elewidth;
}
else{
Slider.current = null;
Slider.Ele.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_bind: function(){
$('.prev').on('click', function(){
Slider._prev();
});
$('.next').on('click', function(){
Slider._next();
});
},
_init: function(){
var self = this;
self._globalvar();
self._assignvar();
self._bind();
}
};
$(document).ready(function(){
Slider._init();
});
https://jsfiddle.net/b54c38hj/1/

To make it to reapeat you can use the setTimeout() and to make it stop whenever your mouse goes over the content you can use the hover() jquery event! Here's a Demo