Javascript transition on click after display block - javascript

im trying to make a simple transition from right to left when i click on a button.
I've done this to illustrate what i mean : https://jsfiddle.net/Waarx/9kjhnwLp/22/
var button1 = document.querySelector('#div1');
button1.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "none";
document.querySelector('#display1').style.display = "block";
});
var button2 = document.querySelector('#div2');
button2.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "block";
document.querySelector('#display1').style.display = "none";
});
.parent {
width: 800px;
}
.col {
float: left;
width: 20%;
}
.col2 {
width: 70%;
}
.none {
display: none
}
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="none" id="display1">
display 1
</div>
<div class="none" id="display2">
display 2
</div>
</div>
</div>
I hope that you could help me.


First off you can do the same thing with jQuery like this with less code:
$('#div1').click(function(event) {
$('#display2').hide();
$('#display1').show();
});
$('#div2').click(function(event) {
$('#display2').show();
$('#display1').hide();
});
Secondly: To animate an html element you have to set its opacity. display: none; will not animate at all. Also using only classes makes you lose less time on your CSS. So,
Test it here:
$( document ).ready(function() {
$('.div1').click(function(event) {
$('.display2').addClass('none');
$('.display1').removeClass('none');
});
$('.div2').click(function(event) {
$('.display2').removeClass('none');
$('.display1').addClass('none');
});
});
.display1, .display2 {
transform: translateX(0);
transition: all 1s ease-in-out;
}
.none {
transform: translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="display1 none">
display 1
</div>
<div class="display2 none">
display 2
</div>
</div>
</div>

Related

JavaScript Parent Node contains not working failed to execute 'contains' on 'Node'

I try to change the icon image on click.
I add a class active to make the bottom div appear then i check if the parentNode.contains("active") i should have an image else i should have another image
but this method it doesn't work and i recive this message
Failed to execute 'contains' on 'Node': parameter 1 is not of type
'Node'.
How can i fix this problem?
let drops = document.querySelectorAll('.drop');
let imgs = document.querySelectorAll('.drop .inner-right img');
drops.forEach((drop) => {
drop.addEventListener("click", function (e) {
drop.parentNode.classList.toggle("active");
imgs.forEach((img) => {
img.src = `../images/new icons/${e.currentTarget.dataset.img}`;
if(drop.parentNode.contains("active")){
}else{
img.src = `../images/${e.currentTarget.dataset.old}`;
}
});
});
});
.box.active .bottom {
opacity: 1;
visibility: visible;
}
.box .bottom {
opacity:0;
visibility: hidden;
}
<div class="box desc">
<div class="top drop" data-img="wasf al khotwa-01.svg" data-old="description.png">
<div class="inner-right">
<img src="images/description.png" alt="desc">
<p>Title</p>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="bottom">
<p>
Text
</p>
</div>
</div>

you perform contains method on a node and not on the classList of the element
If you want to check if node have a specific class you can use
drop.parentNode.classList.contains("active")
let drops = document.querySelectorAll('.drop');
let imgs = document.querySelectorAll('.drop .inner-right img');
drops.forEach((drop) => {
drop.addEventListener("click", function(e) {
drop.parentNode.classList.toggle("active");
imgs.forEach((img) => {
img.src = `../images/new icons/${e.currentTarget.dataset.img}`;
if (drop.parentNode.classList.contains("active")) {
console.log('win')
} else {
img.src = `../images/${e.currentTarget.dataset.old}`;
}
});
});
});
.box.active.bottom {
opacity: 1;
visibility: visible;
}
.box.bottom {
opacity: 0;
visibility: hidden;
}
<div class="box desc">
<div class="top drop" data-img="wasf al khotwa-01.svg" data-old="description.png">
<div class="inner-right">
<img src="images/description.png" alt="desc">
<p>Title</p>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="bottom">
<p>
Text
</p>
</div>
</div>

jQuery - Display text when hovered on through `for` loop

I am making a webpage and I am adding a feature; when you hover on a certain div another div will display a certain text. There are 5 elements I want to be able to hover and display text.
I added this feature but it did not work properly - only the last hoverable div displayed the text. I isolated the elements used and moved them to a sandbox to tweak them. No matter what I do (I got it to work by using a bunch of if statements, but I am trying to remove that so it looks neater), only the last div will display the text.
Here is a fiddle of the working version with the many if statements:
https://codepen.io/SynergyOfLife/pen/qBNJboR
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var isHovered1 = $(`.${dataArray[0]}`).is(":hover");
var isHovered2 = $(`.${dataArray[1]}`).is(":hover");
var isHovered3 = $(`.${dataArray[2]}`).is(":hover");
var isHovered4 = $(`.${dataArray[3]}`).is(":hover");
var isHovered5 = $(`.${dataArray[4]}`).is(":hover");
if (isHovered1) {
$('p').html("TEST")
} else if (isHovered2) {
$('p').html("TEST")
}else if (isHovered3) {
$('p').html("TEST")
} else if (isHovered4) {
$('p').html("TEST")
}else if (isHovered5) {
$('p').html("TEST")
} else {
$('p').html("")
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>
Here is the version I am trying to perfect:
https://codepen.io/SynergyOfLife/pen/VwjELME
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var i;
for (i = 0; i < dataArray.length; i++) {
var isHovered = $(`.${dataArray[i]}`).is(":hover");
if (isHovered) {
$('p').html("TEST")
} else {
$('p').html("")
}
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Only working div?</a>
</div>
<div class="viewer">
<p></p>
</div>
In summary, I am asking for help on how to shorten the number of if statements

Just use the hover() method which accepts two functions, one for mouseenter and one for mouseleave.
var dataArray = ["1", "2", "3", "4", "5"]
var selectors = '.' + dataArray.join(',.');
$(selectors).hover(function() {
// `this` is the element the event occurred on
$('p').html('TEST ' + this.className)
}, function() {
$('p').empty()
})
div {
height: 100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>

Menu slider with javascript/jquery

I'm trying to make a menu slider for a restaurant with two clickable menus, the lunch menu and the dinner menu. I don't want the menus opening in a new window, just a clean click and the wanted menu opens.
Here is the code I have so far, I know it needs a lot of work, I'm new to the javascript/jQuery world. Pure javascript would be cool but anything jQuery would work too.
If someone can help me and please explain what needs to be fixed so i can understand this more I would greatly appreciate it. Thank You. On codepen
let lunchContainer = document.querySelectorAll('div.lunchmenu');
dinnerContainer = document.querySelectorAll('div.dinnermenu');
function reset() {
for(let i = 0; i < lunchContainer.length; i++) {
lunchContainer[i].style.display = 'none';
dinnerContainer[i].style.display = 'none';
}
};
$('.lunch').click(function(event) {
reset();
$('.lunchmenu').addClass('active');
lunchContainer.style.display = 'block';
});
$('.dinner').click(function() {
reset();
$('.lunchmenu').removeClass('active');
});
$('.dinner').click(function(event) {
reset();
$('.dinnermenu').addClass('active');
// dinnerContainer.style.display = 'block';
});
$('.lunch').click(function() {
reset();
$('.dinnermenu').removeClass('active');
// dinnerContainer.style.display = 'block';
});
<div class="page">
<div class="header">
<div class="logoHeader">
<a href="index.html" >
<img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo">
</a>
<h1 id="titleHeader">
King Chef
</h1>
</div>
<nav class="menuHeader">
<a class="specMenu" href="about.html">about</a></li>
<a class="specMenu" href="team.html">team</a></li>
<a class="specMenu" href="menus/dinner.html">menu</a></li>
<a class="specMenu" href="#">news</a></li>
<a class="specMenu" href="#">hours</a></li>
<a class="lastMenu" href="#">reservations</a></li>
</nav>
</div>
<nav id="menuCategory">
<a class="menuStyles lunch" href="#lunch">lunch</a>
<a class="menuStyles dinner" href="#dinner">dinner</a>
</nav>
<div class="container">
<div class="lunchmenu">
<p>hehehfdsafhkalfj</p>
</div>
<div class="dinnermenu">
<p>hdhfsahf</p>
</div>
</div>
</div>
.lunchmenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
.dinnermenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}

Notice how much code I removed! You don't need to set display if you're going to use an 'active' class to do that job and you don't need to define the behavior of a click on your buttons twice.
Also, if each menu has a container, you don't need to iterate over all the items inside of them to set their display to none, setting the parent container to none will suffice.
Hope that helps!
let lunchContainer = document.querySelectorAll('.lunchmenu'), // notice ',' instead of ';'
dinnerContainer = document.querySelectorAll('.dinnermenu');
$('.lunch').click(function(event) {
$('.dinnermenu').removeClass('active');
$('.lunchmenu').addClass('active');
});
$('.dinner').click(function() {
$('.lunchmenu').removeClass('active');
$('.dinnermenu').addClass('active');
});
.lunchmenu, .dinnermenu {
display:none;
}
.active {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="lunch">lunch</button>
<button class="dinner">dinner</button>
<div class="lunchmenu">
<h5>lunch menu yayyy</h5>
<p>item lunch 1</p>
<p>item lunch 2</p>
</div>
<div class="dinnermenu">
<h5>Dinner menu yayyy</h5>
<p>itemdinner 1</p>
<p>item dinner 2</p>
</div>

Refactoring jQuery repeating pattern

I have painted my self into a corner in order to quickly prototype.
What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.
Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.
Thank you!
// TOGGLING LEFT NAVIGATION
$('#settingsClick').click(function() {
if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#settingsContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#settingsContainer').slideToggle(350);
}
});
$('#addClick').click(function() {
if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#addContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#addContainer').slideToggle(350);
}
});
$('#noteClick').click(function() {
if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#noteContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#noteContainer').slideToggle(350);
}
});
$('#logoClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#logoContainer').slideToggle(350);
}
});
$('#themeClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#themeContainer').slideDown(350);
} else {
$('#themeContainer').slideToggle(350);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>
<br><br>
<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>
<br><br>
<p> Etc... Etc....</p>

You should group using the common CSS class, i.e. header and content. Using the established relationship you can target the others content holder and content associated with the current clicked header element.
$('.container .header').on('click', function() {
//Get the current element
var $this = $(this);
//find the content
var $content = $this.closest('.container').find('.content'); //$this.next()
//get all contents
var content = $('.container .content');
//Slide up others
content.not($content).slideUp(350);
//Slide down
$content.slideToggle(350);
});
.content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header" id="settingsClick">Click Me</div>
<div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="addClick">Click Me</div>
<div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="noteClick">Click Me</div>
<div class="content" id="noteContainer">Content...</div>
</div>

the best bet would be to do it like so
$(document).on('click', ".trigger", function() {
var sibling_content = $(this).siblings(".content");
if (!sibling_content.hasClass('active')) {
$(".content").slideUp('slow').removeClass('active');
sibling_content.slideDown('slow').addClass('active');
} else {
sibling_content.slideUp('slow').removeClass('active');
}
})
.trigger {
background-color: red;
color: white;
font-size: 16px;
}
.content {
background-color: blue;
color: white;
font-size: 16px;
padding: 20px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>

How to hide elements one by one then show them one by one using jquery?

Trying to hide one div at a time (5 seconds intervals between each) and when the third one gets hidden the first one shows right away. And like that infinitely.
I tried this but it's not working well. Hides them successfully but doesn't show them.
setTimeout(function() {
$('#span3').hide();
}, 5000);
setTimeout(function() {
$('#span2').hide();
}, 10000);
setTimeout(function() {
$('#span1').hide();
}, 15000);
setTimeout(function() {
$('#span3').show();
}, 15000);
setTimeout(function() {
$('#span2').show();
}, 20000);
setTimeout(function() {
$('#span1').show();
}, 25000);
.appear-span div span {
display: block;
background-color: black;
padding: 5px 0;
color: white;
width: 200px;
text-align: center;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
<div id="span3">
<span>Selling food.</span>
</div>
<div id="span2">
<span>Selling drink.</span>
</div>
<div id="span1">
<span>Selling kidneys.</span>
</div>
</div>
Where do I add the timings if I want them to hide 5 seconds one after the other?
$("#span3").hide(function(){
$("#span2").hide(function(){
$("#span1").hide(function(){
});
});
});

Check if last div is visible, hide divs one by one and if last div is hidden, show divs one by one.
setInterval(function() {
if ($(".appear-span > div:last").is(":visible"))
$(".appear-span > div:visible").first().hide();
else
$(".appear-span > div:not(:visible)").first().show();
}, 5000);
setInterval(function() {
if ($(".appear-span > div:last").is(":visible"))
$(".appear-span > div:visible").first().hide();
else
$(".appear-span > div:not(:visible)").first().show();
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
<div id="span3">
<span>Selling food.</span>
</div>
<div id="span2">
<span>Selling drink.</span>
</div>
<div id="span1">
<span>Selling kidneys.</span>
</div>
</div>

You can try something like this.
Logic
Hide all divs and show div that is to be shown.
You can use .eq to find element at necessary position
var counter = -1;
function updateUIState(){
$('[id^="span"]').hide().eq(++counter % 3).show()
initTimeout();
}
function initTimeout(){
setTimeout(updateUIState, 1000)
}
initTimeout();
.appear-span div span {
display: block;
background-color: black;
padding: 5px 0;
color: white;
width: 200px;
text-align: center;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="appear-span">
<div id="span3">
<span>Selling food.</span>
</div>
<div id="span2">
<span>Selling drink.</span>
</div>
<div id="span1">
<span>Selling kidneys.</span>
</div>
</div>

Just nest the calls and then recall the same function, use jquery delay.
$(function() {
var delayInterval = 5000;
function hideAndPeek() {
$('#span3').delay(delayInterval).hide(function() {
$('#span2').delay(delayInterval).hide(function() {
$('#span1').delay(delayInterval).hide(function() {
$('#span3').delay(delayInterval).show(function() {
$('#span2').delay(delayInterval).show(function() {
$('#span1').delay(delayInterval).show(function() {
hideAndPeek();
});
});
});
});
});
});
}
setTimeout(hideAndPeek(), delayInterval);
});
p {
font-size: 150%;
cursor: pointer;
}
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
<div id="span3">
<span>Selling food.</span>
</div>
<div id="span2">
<span>Selling drink.</span>
</div>
<div id="span1">
<span>Selling kidneys.</span>
</div>
</div>
</body>

Categories

Resources