Animate children of container - javascript

I want to tween elements inside a container. The elements will be added in a for loop. Once they have been added I know that they are on the stage I then want to animate the elements in individually with a delay so that the first element animates in first then the second etc etc.
addElements();
function addElements(){
var total = arr.length;
var _cont = new createjs.Container();
stage.addChild(_cont)
for(var i=0;i<total;i++){
//add children to _cont
}
animateIn();
}
function animateIn(){
//I now want to tween each element in _cont individually
}
Thx.

I have updated the animateIn function below.
function animateIn(obj){
Debugger.log("Animate In");
for(i=0;i<obj.getNumChildren();i++){
obj.getChildAt(i).alpha = 0;
createjs.Tween.get(obj.getChildAt(i)).wait(i*100).to({alpha:1}, 1000)
}
}
Thx.

You can try something like this:
for (var i = 0; i < childElementCount; i++)
{
setTimeout (<animate function in context of current child>, i*<duration of your animation>);
}

Related

Toggle is-visible Class to Div Next to Trigger Element (Plain JS)

This is supposed to be a very simple dropdown FAQ system, I know how to do this in jQuery but I want to learn plain JS.
I just want the individual clicked triggers to toggle the is-visible class to the content divs next to the clicked trigger. Like $(this).next addClass — just in JS.
I've really tried to search for this issue but 90% that shows up is how to do it in jQuery :-p
https://jsfiddle.net/48ea3ruz/
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
// access to individual triggers:
var trigger = allTriggers[i];
}
var allContent = document.querySelectorAll('.faq-content');
for (var i = 0; i < allContent.length; i++) {
// access to individual content divs:
var content = allContent[i];
}
// I don't know how to target the faq-content div next to the clicked faq-trigger
this.addEventListener('click', function() {
content.classList.toggle('is-visible');
});
Would really appreciate some advice! :-)
Use nextSibling, when you are iterating .faq-trigger
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextSibling.classList.toggle('is-visible');
});
}
nextSibling will also consider text-nodes, try nextElementSibling also
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextElementSibling.classList.toggle('is-visible');
});
}

Create element for each div with a particular class

I have a couple of divs with a "isVideo" class. I can successfully attach a click event with a for loop, but I also need to create a span within each div. This is what I have:
var videos = document.getElementsByClassName("isVideo");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', playVideo, false);
var playBtn = videos[i].createElement("span");
playBtn.appendChild(videos[i]);
}
codepen: http://codepen.io/garethj/pen/bpxVKX
You are appending div inside span. You need to append spanElement inside divElement
var videos = document.getElementsByClassName("isVideo");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', playVideo, false);
var playBtn = document.createElement("span");
videos[i].appendChild(playBtn);
}
Edit: Also change videos[i].createElement to document.createElement as videos[i] does not have method createElement
Codepen Demo
It should be done in the opposite way.
Replace
playBtn.appendChild(videos[i]);
with
videos[i].appendChild(playBtn);

Reset the html element using jquery

I am having a div with lot of elements inside the div. For some scenario i want to reset the value for the div's element to the initial status.
Is there any way to do this??
if($(window).width()<=960){
$('#desktopCart').html(/i want to reset this element/);
}
if($(window).width()>960){
$('#mobileCart').html("/i want to reset this element/");
}
try:
$( document ).ready(function() {
var initialValue =$('#mobileCart').html();
});
if($(window).width()<=960){
$('#desktopCart').html(initialValue);
}
if($(window).width()>960){
$('#mobileCart').html(initialValue);
}
use .empty() of jquery
$("#divId").empty();
It will remove all the child elements and text in that particular element.
If you want to restore the initial state of the div, you should save the initial innerHtml to a variable a document.ready().
Like,
var desktopCart;
var mobileCart;
$(document).ready(function(){
desktopCart=$('#desktopCart').html();
mobileCart=$('#mobileCart').html();
});
Then restore the html whenever you want,
if($(window).width()<=960){
$('#desktopCart').html(desktopCart);
}
if($(window).width()>960){
$('#mobileCart').html(mobileCart);
}
First clone the element instead of saving the content. Then use replaceWith to restore it.
$(document).ready(function() {
var divClone = $("#mobileCart").clone();
if($(window).width()<=960){
$('#desktopCart').html(/i want to reset this element/);
}
if($(window).width()>960){
$("#mobileCart").replaceWith(divClone);
}
});
For further reference, please see the below link.
How can I "reset" <div> to its original state after it has been modified by JavaScript?
What if I have multiple elements ? And want to save the elements' state at regular intervals ? And regularly reset them ? There might not be just one of them .... maybe I will have a and p and div and too many of them. But I want to reduce typing ? What do I do ?
I am glad you asked.
// Write Once: Use Anywhere functions
$.fn.reset = function () {
var list = $(this); // list of elements
for(var i = 0, len = list.length; i < len; i++){
list.eq(i).text(list.eq(i).data("initValue"));
}
};
$.fn.saveState = function () {
var list = $(this); // list of elements
for(var i = 0, len = list.length; i < len; i++){
list.eq(i).data("initValue", list.eq(i).text());
}
}
$("div").saveState(); // simple call to save state instantly !
// value change!
$("div:nth-child(2)").text("99999");
$(window).resize(function () {
if ($(window).width() <= 960) {
$("div").reset(); // simple call to reset state instantly !
}
});
DEMO Resize window

simple hover and hover out issue in javascript

I am trying to create hover and hover out via javascript.
I have
test.prototype.build = function(){
other codes...
link.href = '#';
link.innerHTML += 'test'
link.onmouseover = hover
link.onmouseout = hoverOut
other codes...
}
function hover(){
var div = document.createElement('div');
div.class='testDiv';
div.innerHTML = 'test';
$(this).prepend(div);
}
function hoverOut(){
var div = document.getElementsByClassName('testDiv');
div.style.display='none';
}
My task is to create a hover and hover out function. My problem is I am not sure how to hide the testDiv when the user hover out of the link.
getElementsByClassName doesn't seem to work in my case. Are there better way to do this in javascript? Thanks a lot!
document.getElementsByClassName('testDiv') returns an collection, not a single object, but you can probably just use this to refer to the current object. Since you showed some jQuery in your original code, I assume that is OK here.
function hoverOut(){
$(this).find(".testDiv").hide();
}
or, in plain javascript, it could be:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
}
Your hover and hoverOut code don't match though because you're creating a new div on hover every time in hover and then only hiding it in hoverOut so they will accumulate.
If you want to remove the div you added in hoverOut(), you can do that like this:
function hoverOut(){
$(this).find(".testDiv").remove();
}
or in plain javascript:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].parentNode.removeChild(elems[i]);
}
}

Append child element to all SVG nodes with the same class

I have the following code which generates some random images on an SVG canvas.
What I want to do is use the code under the //this bit// comment to append an animate node to all the elements with a specific class.
However, the code below does not work... and for the life of me I cant figure out why, could anyone point me in the right direction
function createBackground(){
var loopLimit = Math.floor((Math.random()*100)+1);
for(var i=0; i<100; i++)
{
var jpgSelecter = Math.floor((Math.random()*10)+1);
var thisItem = document.createElementNS( svgNS, "image" );
thisItem.setAttributeNS(null,"id","node_" + Math.round(new Date().getTime() / 1000));
thisItem.setAttributeNS(null,"class","node" + jpgSelecter);
thisItem.setAttributeNS(null,"x",(Math.random()*500)+1);
thisItem.setAttributeNS(null,"y",(Math.random()*500)+1);
thisItem.setAttributeNS(null,"width",(Math.random()*500)+1);
thisItem.setAttributeNS(null,"height",(Math.random()*500)+1);
thisItem.setAttributeNS(xlinkns,"xlink:href","images/blobs" + jpgselecter + ".png");
document.getElementById("SVGcanvas").appendChild(thisItem);
}
//This Bit//
var animate = document.createElementNS( svgNS, "animateTransform" );
ani.setAttributeNS(null,"name","transform");
ani.setAttributeNS(null,"begin","0");
ani.setAttributeNS(null,"type","rotate");
ani.setAttributeNS(null,"from", "0 180 50");
ani.setAttributeNS(null,"to","360 180 50");
ani.setAttributeNS(null,"dur","4");
ani.setAttributeNS(null,"repeatCount","indefinite");
var tenner = document.getElementsByClassName("node_10");
for(i=0; i<tenner.length; i++)
{
alert(tenner[i]);
tenner[i].appendChild(ani);
}
}
Update
I've edited my code, this doesn't throw up any errors however the animation node doesn't get appended.
I see two problems:
You create an animate element, but then attempt to set attributes on an ani object and append this object to all classed elements.
Even if you change animate to ani, you cannot append the same element to multiple children. Your loop will place the element on the first found class, and then move it to the second found class, and so on. Instead, you need to create a copy of it for each item. So, either do this:
for(var i=0; i<tenner.length; i++){
var ani = document.createElementNS(svgNS,'animateTransform');
// set all attributes
tenner[i].appendChild(ani);
}
…or do this:
var ani = document.createElementNS(svgNS,'animateTransform');
// set all attributes
for(i=0; i<tenner.length; i++){
tenner[i].appendChild(ani.cloneNode(true));
}

Categories