Animate CC - Call instance with var Strings - javascript

I'm trying to make a function that make play a symbol animation (hijo) when i click other one (padre). I want a function to use them many times so I'm trying to automatized.
Im getting the instance name of click button "padre" and try to add some sting after that in this case "hijo". I created some vars but when i use string value it doesn't work.
this.padre.addEventListener("click", nose.bind(this));
function nose(evt) {
var root = this
//In this case on evt.currentTarget.name i get 'padre'
var loprimero = evt.currentTarget.name;
var loquesigue = "hijo";
var todito = loprimero + loquesigue;
//This console fine the name of instance i want gotoAndPlay
console.log(todito);
//This is i want to make work
//This give me cannot read property 'gotoAndPlay' of undefined
root.todito.gotoAndPlay(1);
//And this work fine
this.padrehijo.gotoAndPlay(1);
}
When I define var loquesigue = this.padrehijo; without quotation marks it works fine. But remember I need to use this on some other parents symbols.

This is simply logging a string:
console.log(todito);
If you have an instance with that name, you can access it using brackets:
var inst = root[todito];
console.log(inst); // Does this work?
One other note, you don't need to use bind in EaselJS, you can just use on() and its a little cleaner (docs) :)
this.padre.on("click", nose, this);
Cheers,

Related

Turn a string into a variable name using window (JavaScript)

After scouring the forums, I've been trying to use window to turn a parameter entered as a string into a workable variable. Here we start with the target location in the p tag...
<p id="rent"></p>
Then I call the function using the parameter "rent" to obtain the variable rent.
var rent = 125;
function display(attribute) {
document.getElementById(attribute).innerHTML = window.attribute;
}
display("rent");
However it still returns "undefined" so I must be making a mistake in syntax. Any solutions?
Update: #Sidd has the right approach in changing it to window[attribute] but I still can't get it to work with object properties, for example if you call rent.amt.
You almost have it:
var rent = 125;
function display(attribute) {
document.getElementById(attribute).innerHTML = window[attribute];
}
display("rent");
window.attribute looks for a variable called attribute instead.

How to measure the length of a D3.JS node's attribute

I have several paths I've made in D3.JS and on mouseover I call this mouseover function to get the attributes of that path and store them in variables. Then I try to measure the length of the level attribute and console.log it, however Im getting an error:
I'd also like to use the .slice(-1,1) method to get the last figure in that value attribute but this doesn't work either.
I think the attribute needs to be read as a string in order to do these things. but when I call .toString() on circleLevel I'm still getting this error.
here is the mouseover function:
function mouseover(){
var circleName = d3.select(this).attr("name");
var circleSize = d3.select(this).attr("size");
var circleLevel = d3.select(this).attr("level");
var levelLength = circleLevel.length();
console.log(circleLevel.length());
}
here it is on JS fiddle: http://jsfiddle.net/RL_NewtoJS/ryyt6ruj/3/
In JavaScript, string length is a prop, not a method. So
circleLevel.length()
should be
circleLevel.length
The error is because it's trying to call the length, the Number, as a function: 5() // invalid
Regarding obtaining the last character, either use
circleLevel.charAt(circleLevel.length - 1)
or
circleLevel.substr(circleLevel.length - n) // to get last n characters

idangerous Swiper swipeto function not working when swiper object name passed as a string

<script>
var contentSwiperNumber = 'contentSwiper1';
var navSwiper = new Swiper('.swiper-nav',{
scrollContainer: true,
/*Thumbnails Clicks*/
onSlideClick: function(){
<!-- These work fine -->
contentSwiper1.swipeTo( navSwiper.clickedSlideIndex );
contentSwiper2.swipeTo( navSwiper.clickedSlideIndex );
<!-- !!!!Not Working???? contentSwiperNumber.swipeTo ????-->
contentSwiperNumber.swipeTo( navSwiper.clickedSlideIndex );
}
})
</script>
Is there a way to reference a swiper object name using a string passed to a variable?
Please see the code above where I pass the string:
var contentSwiperNumber = 'contentSwiper1';
in an attempt to reference the swiper object var contentSwiper1
Can you please elaborate on what are you trying to do exactly? From what I am seeing over here, You are putting a string value inside contentSwiperNumber and trying to call swipeTo from it. You are treating a string value as an object with a method in it.
I can say that contentSwiper1 as a variable (Not the string value) is an object itself like navSwiper in your code. When you call
contentSwiper1.swipeTo(index)
here contentSwiper1 is a slider object. But when you call
contentSwiperNumber.swipeTo(index)
You are calling the string. Imagine you are doing
'contentSwiper1'.swipeTo(index)
does that work? I do not think so.
So, either save the objects in a session like amplifyjs which will let you do something like this:
var contentSwiper1 = new Slider('.contentSwiper1', options);
amplify.store('contentSwiper1', contentSwiper1);
To retrieve the object you need, you can use:
var contentSwiperNumber = 'contentSwiper1';
var swiperObject = amplify.store(contentSwiperNumber);
swiperObject.swipeTo(index);
Also, you can use window object to save the swipers you create and then write some logic that does a switch case to return the object you need depending on the contentSwiperNumber
I hope this helps.

Trying to reduce repetition of javascript using a variable

I am trying to reduce the repetition in my code but not having any luck. I reduced the code down to its simplest functionality to try and get it to work.
The idea is to take the last two letters of an id name, as those letters are the same as a previously declared variable and use it to refer to the old variable.
I used the alert to test whether I was getting the right output and the alert window pops up saying "E1". So I am not really sure why it wont work when I try and use it.
E1 = new Audio('audio/E1.ogg');
$('#noteE1').click(function() {
var fileName = this.id.slice(4);
//alert(fileName); used to test output
fileName.play();
$('#note' + fileName).addClass('active');
});
The code block works when I use the original variable E1 instead of fileName. I want to use fileName because I am hoping to have this function work for multiple elements on click, instead of having it repeated for each element.
How can I make this work? What am I missing?
Thanks.
fileName is still a string. JavaScript does not know that you want to use the variable with the same name. You are calling the play() method on a string, which of course does not exist (hence you get an error).
Suggestion:
Store your objects in a table:
var files = {
E1: new Audio('audio/E1.ogg')
};
$('#noteE1').click(function() {
var fileName = this.id.slice(4);
//alert(fileName); used to test output
files[fileName].play();
$('#note' + fileName).addClass('active');
});
Another suggestion:
Instead of using the ID to hold information about the file, consider using HTML5 data attributes:
<div id="#note" data-filename="E1">Something</div>
Then you can get the name with:
var filename = $('#note').data('filename');
This makes your code more flexible. You are not dependent on giving the elements an ID in a specific format.

JavaScript/JQuery: use $(this) in a variable-name

I'm writing a jquery-plugin, that changes a css-value of certain elements on certain user-actions.
On other actions the css-value should be reseted to their initial value.
As I found no way to get the initial css-values back, I just created an array that stores all initial values in the beginning.
I did this with:
var initialCSSValue = new Array()
quite in the beginning of my plugin and later, in some kind of setup-loop where all my elements get accessed I used
initialCSSValue[$(this)] = parseInt($(this).css('<CSS-attribute>'));
This works very fine in Firefox.
However, I just found out, that IE (even v8) has problems with accessing the certain value again using
initialCSSValue[$(this)]
somewhere else in the code. I think this is due to the fact, that I use an object ($(this)) as a variable-name.
Is there a way arround this problem?
Thank you
Use $(this).data()
At first I was going to suggest using a combination of the ID and the attribute name, but every object might not have an ID. Instead, use the jQuery Data functions to attach the information directly to the element for easy, unique, access.
Do something like this (Where <CSS-attribute> is replaced with the css attribute name):
$(this).data('initial-<CSS-attribute>', parseInt( $(this).css('<CSS-attribute>') ) );
Then you can access it again like this:
$(this).data('initial-<CSS-attribute>');
Alternate way using data:
In your plugin, you could make a little helper function like this, if you wanted to avoid too much data usage:
var saveCSS = function (el, css_attribute ) {
var data = $(el).data('initial-css');
if(!data) data = {};
data[css_attribute] = $(el).css(css_attribute);
$(el).data('initial-css', data);
}
var readCSS = function (el, css_attribute) {
var data = $(el).data('initial-css');
if(data && data[css_attribute])
return data[css_attribute];
else
return "";
}
Indexing an array with a jQuery object seems fishy. I'd use the ID of the object to key the array.
initialCSSValue[$(this).attr("id")] = parseInt...
Oh please, don't do that... :)
Write some CSS and use the addClass and removeClass - it leaves the styles untouched afterwards.
if anybody wants to see the plugin in action, see it here:
http://www.sj-wien.at/leopoldstadt/zeug/marcel/slidlabel/jsproblem.html

Categories