JQuery namespace/code acting funny - javascript

First off, here is my jsfiddle.
I have two click listeners. One on a Next button and one on a Back button. The listener on the Back button works great, but the one on the Nextbutton does not, despite them being in the same area of code.
The line of code in question is:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Strangely enough, if I run:
$('#wizard-pages span[class="selected"]').next().index();
I get the right index value. Also, if I run,
wizard.goTo(x);
(x being whatever number). I get the right page back.
It's only when they are combined that it does not work.
I've also tried making the parameter a variable and then passing it through but I get the same results. I also tried adding (+1) to the index, rather than calling .next() before it. Any ideas?

Here's an updated fiddle: http://jsfiddle.net/7v8Xx/1/
You werent going far enough ahead in this line:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Add 1 to the index!!
wizard.goTo($('#wizard-pages span[class="selected"]').next().index()+1);

Related

TweenJs - rotate rectangle on click runs only once

I am trying to create simple animation on "click" event in JavaScript library called TweenJs (part of CreateJs suite), but it seems that animation updates the display only the first time when I click on the rectangle. After animation is over for the first time, on every next click it seems that code is running, but the display stands still (or doesn't update). You can see in the console that it logs start and the end of animation.
Can someone please help me and explain what is the problem with my code, and also, in general is this the right approach to use stage.update() ?
Here is my code:
https://codepen.io/milan_d/pen/rNaJEKY?editors=1111
Thank you very much!
The issue is that once you rotate it, it is already rotated to the angle you specify in subsequent clicks.
An easy solution is to just add a zero-duration to() call when you click it that resets it.
createjs.Tween.get(square)
.to({rotation:0}) // This one has no duration, so it is immediate
.to({rotation:360},3000)
.call(squareRotationComplete);
Another option is to always rotate it based on the initial tween
createjs.Tween.get(square)
.to({rotation:square.rotation + 360},3000)
.call(squareRotationComplete);
Lastly, you could use the RelativePlugin. First install it, and then just use "+360" in your to() call.
createjs.RelativePlugin.install(); // Run once
createjs.Tween.get(square)
.to({rotation:"+360"},3000) // Note the value.
.call(squareRotationComplete);
Cheers!

JQuery requires 2 clicks instead of 1

I'm populating values in a div based on clicks to buttons on the page, but it's requiring 2 clicks for the value to change. The first part is populating the calloutAmt and calloutAmtdouble spans with the values that appear on page load, then the next part should change them based on the button clicked, but it takes two clicks to do so.
jQuery(document).ready(function($) {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
$("div.donation-level-container").on("click", function() {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="matchcallout">Your gift of $<span id="calloutAmt"></span> will be DOUBLED to do $<span id="calloutAmtdouble"></span> worth of good! </div>
Well, I can't comment, because I don't have the required reputation.
That being said, nothing in your code allows us to determine issue. You would have to post the full code to get that.
BUT it seems obvious that this is working as expected and that your issue is going to lie in the setting of the variable selectAmt, which is still undefined or '' or whatever first time you click button, then gets generated by ajax or whatever.
Thus, second time you click, the variable has already been populated by the first round and is ready to be inserted into the dom. One way to check if this is indeed issue is to change the value of selectAmt between clicks and see if the value always lags one click behind of expected value. In theory, what you would want to do is set the text in the span not on click of button, but after the calculation or however selectAmt gets populated.
Hope this helps.
--edit--
Add a console.log(selectAmt) inside of the on click function... in theory, this will be empty first click but not second, confirming my mentioned suspicions above.

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

jQuery/JavaScript program breaks after completion number is changed

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.

Manipulating jQuery draggables/droppables in script [UPD]

I want to append item to sortable list by script. Users can drag item to list directly, and can check some checkboxes and press "Send to list" button. First approach works, second is not.
The problem is if I pass $(ui.draggable) to function, it works. But if i point to draggable element by jQuery chain ($(this).parent().parent().find('div.drag')) and pass this, it won't work. It seems that these two objects are not equal (i tried cloning second object and reducing it to one with eq, and nothing works).
Okay, i got it :) Problem was in move_to_list function.

Categories

Resources