We Keep Coding

Set button state - Create.js/Easel.js

In Adobe Animate HTML5 Canvas (Create.js/Easel.js), I am trying to set the state of a button, but not working with various code:
this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));
/*function retinoscope(evt) {
var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
if (retinoscopeButtonState) {
alert(retinoscopeButtonState);
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
} else {
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
}
}*/
var retinoscopeButtonState = 'up';
function retinoscope(evt){
if (retinoscopeButtonState == 'up'){
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
retinoscopeButtonState = 'down';
} else if (retinoscopeButtonState == 'down'){
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
retinoscopeButtonState = 'up';
}
}

This works for me...
Note that this is using a MovieClip with three keyframes for the different 'states' in the button MC retinoscopeButton
var toggle;
if (!root.retinoscopeButton.hasEventListener("click")) {
toggle = false;
root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}
root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));
function retinoscopeButtonClickHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(2);
toggle = true;
} else if (toggle == true) {
root.retinoscopeButton.gotoAndStop(0);
toggle = false
}
}
function retinoscopeButtonRollOverHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(1);
}
}
function retinoscopeButtonRollOutHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(0);
}
}

jQuery code messing up rest of code

This jQuery code as part of jQuery Waypoints messes up all the jQuery code below it, what's wrong please? (By messing up I mean I don't believe code below fires.)
Very many thanks for your help, and please let me know if you would like any further details.
var waypoint = new Waypoint({
element: document.getElementsByClassName('social-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.social-bg-tennis-video').get(0).pause();
$('.social-bg-events-video').get(0).play();
}
if (direction === 'up') {
$('.social-bg-tennis-video').get(0).play();
$('.social-bg-events-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('home-section-5'),
handler: function(direction) {
if (direction === 'down') {
$('.home-bg-social-video').get(0).play();
}
if (direction === 'up') {
$('.home-bg-social-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('coaching-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('coaching-section-4'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-junior-video').get(0).pause();
$('.coaching-bg-mini-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-junior-video').get(0).play();
$('.coaching-bg-mini-video').get(0).pause();
}
}
});
UPDATE
I Have found that I can add as many…
var waypoint_coachingsection3 = new Waypoint({
element: document.getElementsByClassName('coaching-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
}
});
…as I like and the code the Waypoints code works, although any unrelated jQuery below or above this code fails.
I also found if I add other of these code blocks for elements on other pages, the Waypoint code blocks for the other pages below the top code fail!
Also, I found this as the only (related) console error:
Uncaught TypeError: Cannot read property ‘top’ of undefined – jquery.waypoints.min.js:7

I fixed this by using a different method of calling Waypoints which worked for my situation, eg.:
var waypoints = $('.coaching-section-3').waypoint({
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
},
offset: '30%'
})
Thanks for everyone's help.

select2 overwrites e.preventDefault()

I've wrote a script which uses a bunch of data and building a grid where you are able to move through with the arrowkeys and tab.
While testing it in a seperate file everything works fine. After adding it to my Website the script works pretty well in Chrome, Opera, Safari and IE. But in Firefox my focus jumps out of the grid and went to the adressbar. Using the same Data in my testfile, there is no error like this.
What could be a reason why it does not work in Firefox? I got no Errors in Firebug.
Its a file with more then 2500 lines...Here is the part where the navigation with Tab starts:
$(document).keydown(function (e) {
switch (e.keyCode) {
case 9:
if (editing == true) {
e.preventDefault();
var direction = "right";
if (e.shiftKey) {
direction = "left";
}
root.gridSave();
root.moveMark(direction);
var checker = true;
var c = 0;
while (checker) {
if (!clickTarget) {
if (newLine == true) {
root.markNewLineFirstCell();
root.scrollVert();
} else {
root.moveMark("right");
}
}
if (!clickTarget.hasClass("editable")) {
root.moveMark(direction);
if (c > root.captions.length) {
checker = false;
}
c++;
} else {
editMode = false;
root.edit(clickTarget);
root.setFocus(clickTarget);
checker = false;
}
}
} else {
e.preventDefault();
if (editMode == true) {
direction = "right";
if (e.shiftKey) {
direction = "left";
}
root.moveMark(direction);
root.scrollVert();
}
}
break;
}
});

Menu bar function not working javascript

I'm trying to write a menu bar on the left side of the screen which is already set as a div with the id blur. I set another image which has the id menuImage which is actually a gear icon which should open the menu bar, however it simply won't respond and I can't figure out why. Please help me I'm stuck with this. Here is the code:
var state = false;
var opacity = 0.0;
var menuImage = document.getElementById("menuImage");
var blur = document.getElementById("blur");
var blurAppearence = function(){
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
}
if(state == false){
var disappearence = function(){
if(opacity <= 0.4){
blur.style.opacity = opacity;
} else {
clearInterval(timer)
}
opacity += 0.1;
}
var timer = window.setInterval(appearence, 50);
} else {
if(state == true){
var appearence = function(){
if(opacity >= 0.0){
blur.style.opacity = opacity;
} else {
clearInterval(timer2);
}
opacity -= 0.1;
}
var timer2 = window.setInterval(appearence, 50);
}
}
menuImage.addEventListener("click", blurAppearence);

It looks like you close your blurAppearance function block too early.
The closing brace that is right above the line
if(state == false){
should actually go right before the line
menuImage.addEventListener("click", blurAppearence);
also your first window.setInterval should call the disappearance function.
see https://jsfiddle.net/orndorffgrant/cfrc5b55/
You can also replace your
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
block with:
state = !state;

JQuery .css() function doesn't change all properties

I'm creating a UI with sliding panels much in the fashion of this site: http://smithandhawken.catalogs.target.com/#/intro-cover
I have two ways to change the pages though, by column and by row. The user can use the keyboard as well as some visual elements to navigate the pages. The movement is handled by functions like this:
function moveDown()
{
unbindAll();
currentPage = 1;
$('div.section').each(function(index, element) {
if(index+1 == currentSec) {
console.log($(this));
$(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });
if($(this).next().size()) {
populate(currentSec+1, currentPage);
$(this).next().children('div.page').css('left', $(window).width());
$(this).next().children('div.page').eq(0).css('left', 0);
console.log(storyCount);
$(this).next().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() {
currentSec++;
bindAll();
});
}
else {
populate(1, currentPage);
$(this).parent().children().first().children('div.page').css('left', $(window).width());
$(this).parent().children().first().children('div.page').eq(0).css('left', 0);
$(this).parent().children().first().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() {
currentSec = 1;
bindAll();
});
}
}
else if(index != currentSec) {
$('#section'+(index+1)).css({ 'margin-top': 0, 'z-index': 100 });
}
});
}
THe line above that doesn't work the same way 100% of the time is - $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });
When the user uses the keyboard and the left/right visual elements, everything works fine. When they use the visual elements that translate between each row (up/down methods only), the function fires, but not all CSS properties are applied. Here is the function for the visual elements I'm talking about:
function mdlButton(btnHit)
{
btnLabel = btnHit.attr('id').substr(3);
console.log('enter first swtich '+currentSec);
switch(currentSec)
{
case 1:
console.log('enter second switch '+btnLabel);
if (btnLabel == 1) {
console.log('dont do anything');
}
else if (btnLabel == 2) {
console.log('move down one');
moveDown();
}
else if (btnLabel == 3) {
console.log('move down two');
moveDown();
moveDown();
}
break;
case 2:
console.log('enter second switch');
if (btnLabel == 1) {
console.log('move up');
moveUp();
}
else if (btnLabel == 2) {
console.log('dont do anything');
}
else if (btnLabel == 3) {
console.log('move down one');
moveDown();
}
break;
case 3:
console.log('enter second switch');
if (btnLabel == 1) {
console.log('move up two');
moveUp();
moveUp();
}
else if (btnLabel == 2) {
console.log('move up');
moveUp();
}
else if (btnLabel == 3) {
console.log('dont do anything');
}
break;
}
if(!btnHit.hasClass('mdlSelected')) {
$('div.mdlSec').removeClass('mdlSelected');
$('div.mdlSec').find('#selected').remove();
btnHit.addClass('mdlSelected');
btnHit.find('div.divider').after('<div id="selected"></div>');
reSize();
}
}
I can't figure out the reason why the z-index wouldn't change when called from the above function as opposed to just the keyboard or when left/right call the moveDown()/moveUp() methods. Just in case, here's what the left/right look like:
function moveLeft()
{
unbindAll();
$('#section'+currentSec+' div.page').each(function(index, element) {
if(index+1 == currentPage) {
if($(element).prev().size()) {
populate(currentSec, currentPage-1);
$(this).animate({'left': $(window).width()}, 500, function() {
currentPage--;
bindAll();
});
}
else {
moveUp();
}
}
});
}
Any help would be much appreciated! Thanks

The z-index was being reset back to another value by the reSize() function which was called to resize the footer buttons. I've separated the resize functions and the problem disappeared. No problems with the code itself, just the execution order.
Thanks for all the help!