jQuery/Javascript animation changing css value on interval - javascript

I have created several div-elements under class name "image-part" and am trying to animate them using this script:
$(document).ready(function() {
$('.image-part').each(function() {
var id = setInterval(frame, 3000);
function frame() {
if ($(this).css("visibility") === "hidden") {
$(this).css("visibility", "visible");
} else {
$(this).css("visibility", "hidden");
}
}
});
});
.image-part {
width: 33.33%;
height: 60px;
background-color: black;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>
Nothing is happening, is there anyone that can help?
Thanks!

The issue is because the scope of this within the setInterval() handler will not be a reference to any of the .image-part elements.
To fix this you can re-arrange the logic so that you execute the each() loop within the interval, like this:
$(document).ready(function() {
setInterval(function() {
$('.image-part').css('visibility', function(i, v) {
return v == 'visible' ? 'hidden' : 'visible';
});
}, 3000);
});
.image-part {
width: 33.33%;
height: 60px;
background-color: black;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>
Note that I changed the logic to be more succinct by using a single call to css() with a function provided. The outcome is identical to your original intention, though.

Related

how to stop a called function

I have 2 divs one is an object and one is the toggler,
in my function i need something like .toggle() but that isn't possible in my type of code where i use it for.
What i want is i want the div be dragable trough the function but after i toggle the button again the function needs to stop.
The structure i got needs to be like this it can't be changed.
$(document).ready(function() {
window.moveactive = 0;
$(".move").on("click", function() {
moveactive = 1 - moveactive;
if (moveactive == 1) {
$(this).css("background-color", "green");
activedraging();
console.log("drag on");
}if (moveactive == 0) {
$(this).css("background-color", "red");
console.log("drag off");
}
});
});
window.activedraging = function() {
$(".object").draggable();
}
.move{
width: 20px;
height: 20px;
background-color: red;
}
.object{
background-color: RGB(211,211,211);
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="move"></div>
<div class="object"></div>
is there any way i could toggle the function with this script or an alternative like timeouts?

Multiple DIVs with same class with each toggling independently between 2 DIVs

I have multiple divs with the same class (.item) and trying to figure out how to independently toggle between 2 divs (#open and #close).
For example, clicking on "A" or "B" toggles between "Open" and "Close" independently.
I've tried placing "(this)" before (.item), but it results in toggling not working at all.
$(this).on("click", function(event) {
$(event.target).closest(".item").toggleClass("highlight").toggleClass("marked unmarked");
if ($(".item").hasClass('unmarked')) {
$("#open").show();
$("#close").hide();
} else if ($(".item").hasClass('marked')) {
$("#close").show();
$("#open").hide();
} else {
$("#close").hide();
$("#open").hide();
}
});
.item {
text-align: center;
margin: 5px;
padding: 5px;
background: #EEEEEE;
}
.highlight {
background: orange;
}
#open,
#close {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item marked">A</div>
<div class="item marked">B</div>
<div class="item marked">C</div>
<div id="open">Open</div>
<div id="close">Close</div>
Are you maybe looking for this behaviour?..
$('.item').on('click', function() {
if ($(this).hasClass('highlight')) {
$(this).removeClass('highlight');
$('#open').hide();
$('#close').show();
} else {
$('.item.highlight').removeClass('highlight');
$(this).addClass('highlight');
$('#open').show();
$('#close').hide();
}
})
.item {text-align: center;margin: 5px;padding: 5px;background: #EEEEEE;}
.highlight {background: orange;}
#open, #close {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div id="open">Open</div>
<div id="close">Close</div>
fiddle
https://jsfiddle.net/Hastig/127newyj/
Assuming I'm understanding your question correctly
My recommendation for this scenario is not to rely on the "this" keyword. $(this).on('click'.... is ridiculously broad. It needs to be contained in other code that would allow for a 'this' to be relative.
Instead, get your element by
var my_elemens = getElementsByClassName('item')
and refer to them by
my_elemens[0] // A
my_elemens[1] // B
my_elemens[2] // C
And then for whatever you're wanting to click, use it, so possibly...
$(myelemens[0]).on('click'....

Why do these HMTL5 data attributes return a function instead of the assigned values?

I'm using jQuery to retrieve and set my data attribute. I've tried to set data value with attr() and data() as well:
$("#select2").attr("data-myval", "true");
$("#select2").data("myval", "true");
Neither is working, and it returns with a function if I console.log() it. What is the problem?
$(document).ready(function() {
var select1 = $("#select1").data("myval");
var select2 = $("#select2").data("myval");
console.log(select1);
console.log(select2);
$("#select1").click(function() {
$(this).children("p").css("display", "block");
$("#select2").data("myval", "true");
});
if (select2 == "true") {
$("#select2").click(function() {
$(this).children("p").css("display", "block");
});
} else {
}
});
#select1,
#select2 {
width: 100px;
height: 100px;
background-color: lightblue;
color: white;
margin: 20px;
display: inline-block;
}
div.ex p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex" id="select1" data-myval="true">
<p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
<p>Text2</p>
</div>
There is no events order here, there is only one event for the first box. The event for the second box will never be attached because the if (select2 == "true") is false when $(document).ready and it is Boolean not string anyway. You can move it to inside the event and change it to if ($(this).data("myval")):
$(document).ready(function() {
$("#select1").click(function() {
$(this).children("p").css("display", "block");
$("#select2").data("myval", "true");
});
$("#select2").click(function() {
if ($(this).data("myval")) {
$(this).children("p").css("display", "block");
} else {
}
});
});
#select1,
#select2 {
width: 100px;
height: 100px;
background-color: lightblue;
color: white;
margin: 20px;
display: inline-block;
}
div.ex p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex" id="select1" data-myval="true">
<p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
<p>Text2</p>
</div>
Alternatively, you can add the second even inside the first event, but to avoid adding it several times if you click on the first box several times, you must remove it with off("click") first then add it.

JQuery - Why event.target doesn't work in this situation?

just wondering why when i click inside the container the alert popups despite the if statement for it to not show on click.
Also how would I test for the children inside?
https://jsfiddle.net/w8fd3m67/
$(window).on("click", function(event) {
var container = $("#container");
if ((event.target) !== container) {
alert("clicked outside");
}
});
body {
height: 600px;
}
#container {
padding: 2rem;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
Cheers
You should use .is()
if($(event.target).is(container))
Compare the id. Here $("#container") is a jquery object
$(window).on("click", function(event) {
if ((event.target.id) !== 'container') {
alert("clicked outside");
}
});
body {
height: 600px;
}
#container {
padding: 2rem;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
Use the .is() function to compare the event target to your JQuery element :
$(window).on("click", function(event) {
var container = $("#container");
if ($(event.target).is(container)) {
alert("clicked outside");
}
});
body {
height: 600px;
}
#container {
padding: 2rem;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
You're comparing a DOM element to a jQuery object which will never match. Create a jQuery object out of the target and check if it is a descendant of #container. This also works if you have child elements under #container.
Updated fiddle
$(window).on("click", function(event) {
if ($(event.target).closest('#container').length == 0){
alert("clicked outside");
}
});
try this:
$(window).on("click", function(event) {
var container = $("#container");
if ((event.target) !== container[0]) {
alert("clicked outside");
}});

jQuery hide if either div is visible

I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}

Categories

Resources