I am currenly in the process of learning javascript and one of my tasks is to loop through all divs with a particular class name and show/hide them one by one with a catch where the timing for every div is different and the correct value is stored in the data-attribute tag in every div with that particular class name.
window.onload = function(){
alpha();
}
function alpha(){
var dataAttribute = 1000;
$(".element").each($).wait(dataAttribute, function(){
$(this).show().delay(dataAttribute).queue(function(){
$(this).hide();
});
});
}
.element{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.js"></script>
<div class="element" data-attribute="1000">One</div>
<div class="element" data-attribute="2000">Two</div>
<div class="element" data-attribute="3000">Three</div>
<div class="element" data-attribute="4000">Four</div>
<div class="element" data-attribute="5000">Five</div>
My initial idea for solving this problem was to replace the dataAttribute variable with $(this).data("attribute"), but if I do that the .wait property stops working. However, this method works perfectly fine with the .delay property. I would be extremely grateful if someone could help me and explain what I am doing wrong. (Also, if I can get rid of the additional timing library that would be a major bonus, but without it I was not able to loop through the classes after some sort of delay.
You can use something like this:
function alpha(i = 0) {
var element = $(".element:eq(" + i + ")");
var time = parseInt(element.attr("data-attribute"));
element.show().wait(time, function() {
$(this).hide();
i++;
if (i < ($(".element").length))
alpha(i);
});
}
Related
I've written a function to add a predefined div as a notification to the "notification_place" and one to remove the notification. To make it look more friendly and not that abrupt I wanted the notification/div to fade out before I remove it completly.
The issue I'm having is whenever a new notification/div is added while another one is still there the previous one can't be removed. The second however gets removed even though the have a different html ID. I get this issue just when I use a type of timeout function such as setTimeout or fadeTo in jquery. If I just write newdiv.remove() everything works as expected but it doesn't look they way I wanted it to.
var notification_place = 'notification_setting_position';
var new_message = '<div class="notification is-success" id="notification_msg_position_set"><h3 class="has-text-white"> Holder Position set!</h3></div>';
var new_message_id = 'notification_msg_position_set';
function addNotification(message) {
let div = document.getElementById(notfification_place);
div.innerHTML += message;
}
function removeNotification(msg_id){
let newdiv = document.getElementById(msg_id);
//newdiv.remove();
$( "#"+msg_id ).fadeTo(500, 0, function(){newdiv.remove();});
}
or alternatively
function removeNotification(msg_id){
let newdiv = document.getElementById(msg_id);
newdiv.style.opacity='0';
newdiv.addEventListener('transitionend', newdiv.remove());
}
and the CSS looking as follows
#notification_msg_setting_position {
transition: opacity 0.5s;
}
the HTML part looks something like this
<body>
...
<div class="content">
<h2>Status Feedback</h2>
</div>
<div class="content is-small" id="notification_setting_position">
</div>
</body>
Thanks
I am creating a website where elements can be dragged and dropped from the main div with all the elements to an empty one. After you put two or more elements in the second (empty) div, you press a button which executes an if/else statement, but I want it so that the code does something if element10 and element12 are in the div, but something different if element4, element5, and element6 are in the div. Could someone help?
I would add some data to the DIVs and then use it inside of the function you just mentioned.. I think if you give enough data, you can make a dynamic call based on those data. ( or add call backs )
so for example you have this as html:
<div class="parent">
<div class="drag-able" data-name="element1" ></div>
<div class="drag-able" data-name="element2" ></div>
<div class="drag-able" data-name="element3" ></div>
<div class="drag-able" data-name="element4" ></div>
</div>
then you will have something like that in your function
//by "this" I assume you have your dragging function
switch(this.getAttribute('data-name')){
case 'element1':
// do your code
break;
case 'element2':
// do your code
break;
default : // do other code
break;
}
in fact is a little dirty but if you could provide more info and some code I could help you better. but I hope it gives you some idea about what I tried to explain.
You could track the elements using ids.
Something like this for your JavaScript, assuming that you aren't using jquery:
var if_else = function(){
var box = document.getElementById("dropIn");
var elements = box.getElementsByTagName('div');
var elm1 = elements[0];
var elm2 = elements[1];
if(elm1.id === "suchAndSuch" && elm2.id === "soAndSo"){
// do something
}
else{
//do something else
}
}
And for your HTML:
<div id="box"></div>
<div id="suchAndSuch"></div>
<div id="soAndSo"></div>
<div id="somethingElse"></div>
I've seen a few articles about this dotted around but I cant seem to get their solutions to work for me.
What I have are two buttons which control the show() and hide() states of different div's. On page load both of the div's are set to .hide() as the user doesn't need to see them until clicked.
So, I have two buttons a and b which currently work perfectly however you can show() both div's at the same time which I don't want to happen. The current code resembles
$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
$('#a-div).toggle(500);
});
$('#b').click(function(){
$('#b-div).toggle(500);
});
So how can I re-write this so that if #a-div is visible (already tried the .is(':visible') method) and #b is clicked nothing happens until #a-div is hidden again and vis versa?
Try this
$('#a-div').hide();
$('#b-div').hide();
$('#a').click(function(){
$('#a-div').toggle(500);
if($('#b-div').is(":visible"))
$('#b-div').hide();
});
$('#b').click(function(){
$('#b-div').toggle(500);
if($('#a-div').is(":visible"))
$('#a-div').hide();
});
probably you need to apply concept like this
$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
if ($('#b').isVisible)[you can check via css property as well]
{
$('#b-div).toggle(500); [or set css property visiblity:hidden]
$('#a-div).toggle(500);
}
else {$('#a-div).toggle(500);}
});
$('#b').click(function(){
if ($('#a').isVisible)[you can check via css property as well]
{
$('#a-div).toggle(500); [or set css property visiblity:hidden]
$('#b-div).toggle(500);
}
else {$('#b-div).toggle(500);}
});
What I ended up doing is this
$('#a-div').hide();
$('#b-div').hide();
$('#a').click(function(){
$('#a-div').toggle();
$('#b-div').hide();
});
$('#b').click(function(){
$('#b-div').toggle();
$('#a-div').hide();
});
For anyone who is interested. Prior to this I was making this much more complex than it needed to be.
Another solution is to create a universal function and pass the parameters of the shown and hidden objects. This way you can use the same method for future elements:
function toggleDivs($show, $hide) {
$show.toggle();
$hide.hide();
}
$("#b").on("click", function() { toggleDivs($("#b-div"), $("#a-div")); });
$("#a").on("click", function() { toggleDivs($("#a-div"), $("#b-div")); });
The only item missing is to initially hide the div objects, but I would add a css class to the objects to hide them.
HTML
<button id="a">Show A</button>
<button id="b">Show B</button>
<div id="a-div" class="hideDiv">A</div>
<div id="b-div" class="hideDiv">B</div>
CSS
.hideDiv { display:none; }
var $aDiv = $('#a-div');
var $bDiv = $('#b-div');
var $aBtn = $('#a');
var $bBtn = $('#b');
$aDiv.hide();
$bDiv.hide();
$aBtn.click(function(){
$aDiv.toggle(500, function(){
if($aDiv.is(":visible"))
$bBtn.prop("disabled",true);
else
$bBtn.prop("disabled",false);
});
});
$bBtn.click(function(){
$bDiv.toggle(500, function(){
if($bDiv.is(":visible"))
$aBtn.prop("disabled",true);
else
$aBtn.prop("disabled",false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a-div">div a</div>
<div id="b-div">div b</div>
<button id="a">btn a</button>
<button id="b">btn b</button>
I´m trying to loop this animation but I don´t know why it does not work ?
I have 4 divs with differences images and I want to loop this to replay again and again.
$(document).ready(function () {
setInterval("comeon()", 2000);
});
function comeon() {
var current = $(".current");
var next = current.next();
if (next.length == 0) {
next = $(".current:first");
}
current.removeClass('current').addClass('previous');
next.css("opacity", "0.0").addClass("current").animate({
opacity: 1.0
}, 500, function () {
current.removeClass("previous");
comeon();
});
What I have done wrong ?
**UPDATE**
<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>
</div><!-- End slider-->
Please have a look at http://jsfiddle.net/7kt9z/6/
next = $("cur:first");
This is attempting to select an element like <cur>. Oops!
You want:
next = $(".current:first");
or
next = cur.first();
Edit
I finally understand what you need:
next = current.siblings().first();
setInterval needs to be used in a certain way.
You need to assign setInterval to a variable, and this assignment should be attached to an event.
var setIt;
$(window).load(function() {
setIt = setInterval(comeOn, 1000);
});
Since you're using images, you can wait for all the images to load and then starting your slider (that's using the load event to assign setInterval to the variable setIt).
Also, do not wrap your function in qoutes in setInterval. Instead of:
setInterval("comeOn()", 1000)
Do this:
setInterval(comeOn, 1000)
I've got a working example here:
http://codepen.io/anon/pen/rHzpL
Suppose I have some divs which I want to allow users to switch between. I would write functions like this:
show_A = function () {$('.a').show(); $('.b').hide(); $('.c').hide();}
show_B = function () {$('.a').hide(); $('.b').show(); $('.c').hide();}
show_C = function () {$('.a').hide(); $('.b').hide(); $('.c').show();}
Then attach these functions to links or whatever. What's the best practice for abstracting out this sort of behavior? The total amount of code grows at N^2 with the number of divs, which is no good.
Give all those divs that you want to hide a common class name and then show one of those. like:
html:
<div class="a toggle">a div</div>
<div class="b toggle">b div</div>
<div class="c toggle">c div</div>
Now the js:
show_A = function () {$('.toggle').hide(); $('.a').show();}
show_B = function () {$('.toggle').hide(); $('.b').show();}
show_C = function () {$('.toggle').hide(); $('.c').show();}
The way I've handled this is before was just to hide them all then show the one (or ones) that you want visible.
Something like...
var showSingleDiv = function(klass) {
$('.container > div').hide();
$(klass).show();
};
Granted you don't want to hide every div so you'll need to setup whatever .container is with your own markup.
For each click, you could hide all the divs and then show only the one you need.
You could use a class to tag the divs involved...
<div id="a" class="collapse">...</div>
<div id="b" class="collapse">...</div>
<div id="c" class="collapse">...</div>
And use:
$(".collapse").hide();
You can do something like, by adding a common class to all those elements:
<div class="toggle">a</div>
<div class="toggle">b</div>
<div class="toggle">c</div>
$('.toggle').click(function(){
$('.toggle:visible').hide(); //Hide all visible 'toggle' div's
$(this).show(); //Show the clicked div
});
You can use the :not() selector.
show_A = function () {$('.a').show(); $('div:not(.a)').hide();}
Maybe I'm not understanding the question, but it seems like what he's wanting is something along these lines:
$('div').each().click( function(){
var cls = $(this).attr('class');
if( $("div[class*='"+cls+"']").is(':visible')){ $("div[class*='"+cls+"']").hide();}//
else{ $("div[class*='"+cls+"']").show(); }
}
);
//Disclaimer - I did not check to see if the concatenated selector works, but adapted it from a reputable blog.