I have a html5 Canvas animation that I am doing on Adobe Animate and tweaking with some code.
I have a portion on the animation that will be like a combobox with all the links to navigate through the different frames. The thing is, I don't want to be creating a bunch of EventListener to many buttons because from experience I know that doesn't work so well. So I am trying to think of a more creative solution. This is my idea.
Create an array that will contain all the buttons.
Assing a variable for each target frame.
Create a for loop with a function inside that assigns the listener to the selected button and then points it to the desired frame (variable)
This is what I have got so far, (not much)
var combobox = [this.btncasco , this.btnbanyera , this.btnLumbrera , this.btnproapopa, this.btnestriborbabor ];
for (var i=0; i<combobox.length; i++) {
var clipcasco = gotoAndStop(0);
var clipbanyera = gotoAndStop(2);
var cliplumbera = gotoAndStop(4);
var clipproapoa = gotoAndStop(6);
var clipestriborbabor = gotoAndStop(8);
}
Would that be feasible ?
In your example, you are just assigning the result of gotoAndStop (with no scope, so likely you're getting an error in the console)
I think you are looking for something like this:
for (var i=0; i<combobox.length; i++) {
// This is kind of complex, but if you just reference "i" in your callback
// It will always be combobox.length, since it references the value of i
// after the for loop completes variable.
// So just store a new reference on your button to make it easy
combobox[i].index = i*2; // x2 lines up with your code 0,2,4,etc.
// Add a listener to the button
combobox[i].on("click", function(event) {
// Use event.target instead of combobox[i] for the same reason as above.
event.target.gotoAndStop(event.target.index);
}
}
You might have the same problem as your other StackOverflow post where the button is undefined (check the console). There is actually a bug in Animate export right now where children of a clip are not immediately available. To get around this, you can call this.gotoAndStop(0); at the start to force it to update the children.
Related
I'm having a bit a trouble with creating a category filter for my custom post type taxonomy, I've tried allot of different things in jQuery and I think this should be the best way to get what I want.
Code:
var divs;
$('.category').on('click', function() {
if(divs == 1) {
alert('ayylmao?');
$('section#showcase').append(detached);
divs = 0;
} else {
divs = 1;
var lolxd = $(this).find('a').attr('id');
alert(lolxd);
var detached = $('section#showcase').contents().not("." + lolxd).detach();
}
});
It has been a while ago that I used jQuery but for some reason the var 'detached' wont append to the section showcase.
Would like to hear what I am doing wrong ;_;
detached is declared within your click handler function. That means it's re-created every time the function runs.
Contrast that to your use of divs which is declared outside the function and thus persists across function calls.
There are many ways to solve this, but the simplest would be to follow the same pattern that you have for divs and have code that looks like this:
var divs;
var detached;
$('.category').on('click', function() {
if(divs == 1) {
alert('ayylmao?');
$('section#showcase').append(detached);
divs = 0;
} else {
divs = 1;
var lolxd = $(this).find('a').attr('id');
alert(lolxd);
detached = $('section#showcase').contents().not("." + lolxd).detach();
}
});
Speaking more generally, it sounds like when you detach a showcase, you want to keep it around so you can add it back later. Depending on the makeup of your program, it might be more useful to just change the display of that item to none. However, this does change the semantics if you had multiple things you could append to your showcase.
I'm trying to access the live content from each instance of CKEditor so I can setup a total word count. Before using CKEditor I would get the textarea's content with .getElementById(), and then I would get the live word count by passing the textarea element into my Countable() function which appends an event listener to the area. Is there a way to grab the live content of a CKEditor instance? I know it's an iframe so I'm not sure if it's possible to grab the live content.
Code I used to use with simple textarea:
var area1 = document.getElementById('textarea1');
Countable.live(area1, function(counter1) {
jQuery("#word_count1").text(counter1.words);
a1_count = counter1.words;
total_count();
});
This depends a lot on your Countable function and it's requirements - it would have helped to seen it and to know it's requirements. You can get the contents of each CKEditor instance in a few different methods, this is one
var contentArray = [];
var i = 0;
for (var instance in CKEDITOR.instances) {
var tmpEditor = CKEDITOR.instances[instance];
contentArray[i] = tmpEditor.getData();
i++;
}
Now the contents are in the contentArray. But form your code it looks like Countable needs an element. I'm unsure as to what kind of element reference it can use, but something like this might get you further:
var editor = CKEDITOR.instances.editor1; // change "editor1" to suit your editor
var element = editor.editable().$; // Get a reference to the body of the instance
Countable.live(element, function(counter1) {
jQuery("#word_count1").text(counter1.words);
a1_count = counter1.words;
total_count();
});
Now of course this only supports one editor instance, but the two examples combined might do the trick. Hopefully you don't use inline instances (it needs some additional work but is doable). Also note that naturally these return the source, not the text.
Also not that you do not want to loop this very quickly, it is very cpu intensive. I recommend a slow loop combined with the the CKEditor change event and maybe some other events that trigger the update. Do not trigger on every change, rather set a timeout to buffer the update trigger (you don't want to do the update when the user is typing).
I've been programming in javascript (with a support from jquery) and I've run into some weird variable behaviour, which in I think is truly unexpected (or maybe I don't know something).
Basically, what I wanna do is to have one variable (zodziai) (array) be "stuffed" with arrays in one part of code and later on have those arrays removed by a click of buttons (one by one).
Also I still want to have those arrays saved in the end of the game even if the first variable is empty because of the button clicks.Easy, I thought to myself, so I've created another array variable (zodziai2) and equated those both in the beginning of the game (when the first one is full of arrays, ready to have them removed one by one.
Everything seems to fine until I check the value of zodziai2, second variable, in the end of the game. Even if it hasn't been touched throughout the process of removing elements from zodziai (first variable), somehow it turns out to be empty too in the end of the game.
Code: I declared both variable inside document.ready as = [];
$("#begin").click(function() {
//#begin is a button which starts the game
$("#enterwords").html("It's showtime!");
zodziai2 = zodziai; //zodziai is full of stuff, making zodziai2 the same
alert(window.zodziai2); //checking, zodziai2 seems to be equal to zodziai
taskai = 0;
maxtaskai = zodziai.length;
...
if (zodziai.length > 0) {
... stuff, just DOM.
...
}
});
And there goes the next button, which is responsible for removing one item from zodziai array. Somehow it gets removed from zodziai2 too.
$("#next").click(function() {
enword = $("#angliskas_zodis").val();
ltword = $("#lietuviskas_zodis").val();
//enword = enword.split("");
//atitinkamas = atitinkamas.split("");
if (enword == atitinkamas) {
...
zodziai.remove(random_skaicius); // removing one item from zodziai (no worries, it's a self written function, working as a bee
...
...
});
Later on, I define the third button, restart, in which zodziai2 is now empty as is zodziai. How can zodziai2 be empty if the code is only "playing" with zodziai? What am I missing??
$("#restart").click(function() {
zodziai = zodziai2; //should be full of stuff, but is certainly not :(
random_skaicius = 0;
ilgis = 0;
zodis = "";
atitinkamas = "";
tempzodislt = "";
taskai = 0;
maxtaskai = 0;
klaidingi = [];
$("#angliskas_zodis").val("");
$("#lietuviskas_zodis").val("");
surasymas(window.zodziai2);
alertify.alert("Drop us a line if you think this function would be useful :)");
});
Just a pointer. I see you write a statement zodziai2 = zodziai. What it means that both variables point to the same memory location of the array. If you remove an element from zodziai, it'll be removed from zodziai2 too. Does this helps?
I'm building a simple puzzle app for and iPad using a JavaScript library for dragging and dropping the pieces. I can't figure out how to check if all the pieces are in the right place however.
What I've got so far is
// create the draggable puzzle piece
var p1=document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';
// create an array to count the pieces placed correctly
var countArray = new Array();
// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1',{accept : ['ps1'], onDrop : function(){countArray.push("a");webkit_drop.remove('droppiece1')}});
// piece has been placed correctly.
if(countArray.length = 1){
alert('Piece placed correctly');
};
The problem I'm having is that the alert from the counting function fires immediately.
How can I fix this?
Change your last three lines to:
// piece has been placed correctly.
if(countArray.length == 1){
alert('Piece placed correctly');
};
You were trying to assign, instead of checking for equality.
Edit: So, it's still not working for you? It seems to me you are setting up a listener on onDrop but then directly after you have done that (presumably before the onDrop event ever gets triggered) you are checking if anything has been "dropped". See how that won't work?
If you just want to see that the event is actually getting triggered, and that the "a" is in fact pushed onto your array you could move the last three lines inside your callback. Like so:
// create the draggable puzzle piece
var p1 = document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';
// create an array to count the pieces placed correctly
var countArray = new Array();
// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1', {accept: ['ps1'], onDrop: function() {
countArray.push("a");
webkit_drop.remove('droppiece1');
// piece has been placed correctly.
if (countArray.length == 1) {
alert('Piece placed correctly');
}
}});
I haven't really tested that, but here is a version with all the webkit stuff taken out and the drop replaced with a simple click: http://jsfiddle.net/kajic/snJMr/1/
If you click the red box, is that what you expected to happen on your ipad app when you drop the piece?
You should change this
if(countArray.length = 1){
to
if(countArray.length == 1){
// ^^ use comparison, not assignment
The first line assigns 1 to countArray.length, which resolves to 1, which is truthy.
I'm working on a website with Jquery tabs dynamically generated. Each tab has an ID.
For the purpose of my script I need to know how many times the user has clicked in a tab.
To record the number of clicks I was thinking of doing an array like this:
var i = new Array(my_tab_id);
(...)
i[my_tab_id] = 0;
Where my_tab_id dynamically changes depending on the tab we're in. Sadly, it doesn't seem like the value of my_tab_id is translated into the array. I don't have i[5] = 0, i[6] = 0, etc. but rather i[my_tab_id], which doesn't help more than a simple var.
Any advice? Thanks!
In that case you shouldn't use an array, you should use an object, which you can treat like a hash.
var o = {};
var id = 'x';
o[id] = 1;
alert(o[id]);
This should allow you to store the click count onto each tab using the .data() function in jQuery each time a tab is clicked.
$('#example').bind('tabsselect', function(event, ui) {
var count = parseInt(ui.tab.data("clickCount"));
if (isNaN(count)) count = 0;
count++;
ui.tab.data("clickCount", count);
});
I think I understand your problem.
You are saying that the var i only has one element. This happens because the var i is newly instantiated every time you open a new tab. I'm guessing every tab is a new page or at least is a new context for var i.
If you want to keep an instance of an object (like an array) in between different pages, take a look at jStorage, it allows you to keep data locally on the browser and it makes it easier to maintain context between page loads.
If all tabs are on the same page then the solution is easier, you need to keep the array in a global variable for the page.
Are you sure my_tab_id is an integer when i[my_tab_id] = 0; is called?