We Keep Coding

Jquery keydown only works once

EDIT: I solved it by changing = to ==, but that didnt fully solve it but then I added a change to $currentSlide and now it works! Yay!
$(document).keydown(function(e) {
if(e.keyCode == 39)
{
if($currentSlide == $slide1){
slideShow(slide2);
$currentSlide = $slide2;
}
else if($currentSlide == $slide2){
slideShow(slide3);
$currentSlide = $slide3;
}
else if($currentSlide == $slide3){
slideShow(slide1);
$currentSlide = $slide1;
}
}
})
I have searched for an answer but haven't found anything that suits my question. I am a noob on javascript so bear with me.
I have a function that works as a slideshow. (I use $ in front of my jquery variables, I have a lot of javascript variables too so I just use it to separate them.)
var $currentSlide = "#slide1";
var $slide1 = "#slide1";
var $slide2 = "#slide2";
var $slide3 = "#slide3";
function slideShow($slide) {
if ($slide != $currentSlide){
$($currentSlide).fadeOut(500);
$($slide).delay(500).fadeIn(500);
$currentSlide = $slide;
}
};
To call this function, I use a simple link with parameter depending on which slide is active.
onclick="slideShow(slide2)"
And then I want to change slide with keypress (to right). This is my code for the keypress:
$(document).keydown(function(e) {
if(e.keyCode == 39) {
if ($currentSlide = $slide1){
slideShow(slide2);
} else if($currentSlide = $slide2) {
slideShow(slide3);
} else if($currentSlide = $slide3) {
slideShow(slide1);
}
}
})
It works perfectly when using the links but when I press key it behaves very weird. First click works like a charm, but then it doesnt work any more. If I click to get the third slide, another click will put next slide on top of slide3 but slide3 never goes away.
I realise there is some huge mistake by me here but I'm too much of a beginner to fix it. Any ideas?

your if-else conditions will always be true, because you used '=' instead of '=='. since your first if condition will be true it always shows slide2 and it looks to you that it only worked once
$(document).keydown(function(e) {
if(e.keyCode == 39) {
if ($currentSlide == $slide1){
slideShow(slide2);
} else if($currentSlide == $slide2) {
slideShow(slide3);
} else if($currentSlide == $slide3) {
slideShow(slide1);
}
}
})
The second problem maybe caused by the clock on the slideshow, if you are using one. When you click the next/previous button you need to reset the clock of your slideshow.

There are two issues
You do an assignment in your if conditions, so they always are true. Instead use the comparator ===;
In the onclick attribute you specify an undefined variable, since the $ is missing from it
Beside correcting this, I would suggest to use a class for your slide elements, not individual IDs. So use class="slide" instead of id="slide1" in your HTML, and apply it to all slides -- they can share the same class.
Then store the sequence number of the current slide, counting from 0.
I would also remove all the onclick attributes on the slide elements and deal with click handlers from code, which can be done quite concisely with $('.slide').click( ... ):
var currentSlideNo = 0; // zero-indexed
function slideShow(slideNo) {
if(slideNo != currentSlideNo){
$('.slide').get(currentSlideNo).fadeOut(500);
currentSlideNo = slideNo;
$('.slide').get(currentSlideNo).delay(500).fadeIn(500);
}
};
$('.slide').click(function () {
slideShow((currentSlideNo + 1) % $('.slide').length);
});
$(document).keydown(function(e) {
if (e.keyCode == 39) {
slideShow((currentSlideNo + 1) % $('.slide').length);
}
});

IE click event span not triggered

I'm having this webpage
http://pocolocoadventures.be/reizen/
And it should filter (with isotope.js) the travelboxes on the page.It does in safari, chrome, firefox, opera, .. but in IE, the filter doesn't work. Even worse, JS doesn't react at all at a click event on te span.
This is the piece of js
// Travel Isotope
var container = $('#travel-wrap');
container.isotope({
animationEngine : 'best-available',
itemSelector: '.travel-box ',
animationOptions : {
duration : 200,
queue : false
},
});
$(".filters span").click(function(){
var elfilters = $(this).parents().eq(1);
if( (elfilters.attr("id") == "alleReizen") && elfilters.hasClass("non-active") )
{
$(".label").each(function(){
inActive( $(this) );
});
setActive(elfilters);
}
else{
//set label alleReizen inactive
inActive( $("#alleReizen") );
if( elfilters.hasClass("non-active") ){
setActive(elfilters);
}
else{
inActive(elfilters);
}
}
checkFilter();
var filters=[];
$(".search.filters").children().each(function(){
var filter = $(this).children().children().attr("data-filter");
if( $(this).hasClass("non-active") ){
filters = jQuery.grep(filters, function(value){
return value != filter;
});
}
else{
if(jQuery.inArray(filter,filters) == -1){
filters.push(filter);
}
}
});
filters = filters.join("");
filterItems(filters);
});
function filterItems(filters){
console.log("filter items with filters:" + filters);
container.isotope({
filter : filters,
}, function noResultsCheck(){
var numItems = $('.travel-box:not(.isotope-hidden)').length;
if (numItems == 0) {
$("#no-results").fadeIn();
$("#no-results").css("display", "block");
}
else{
$("#no-results").fadeOut();
$("#no-results").css("display", "none");
}
});
}
function setActive(el){
el.removeClass("non-active");
var span = el.find('i');
span.removeClass("fa-check-circle-o").addClass("fa-ban");
}
function inActive(el){
el.addClass("non-active");
var span = el.find('i');
span.removeClass("fa-ban").addClass("fa-check-circle-o")
}
function checkFilter(){
var filterdivs = $('.filters span').parent().parent();
if( filterdivs.not('.non-active').length == 0 ){
setActive( $("#alleReizen") );
}
var filterLabels = $(".filters .label");
if( filterLabels.not('.non-active').length == 0){
setActive( $("#alleReizen") );
}
}
function noResultsCheck() {
var numItems = $('.item:not(.isotope-hidden)').length;
if (numItems == 0) {
//do something here, like turn on a div, or insert a msg with jQuery's .html() function
alert("There are no results");
}
}
Probably something small and stupid; but I can't find it..
Thanks in advance!

On your website you've build the buttons like this:
<button>
<span>
</span>
</button>
Now the button element is designed to be a button. It differs from the input button. In the latter you'd set the caption using value. In the button element you set it as a text node. The button element can contain elements like a span. The spec isn't very clear about whether or not you should have event handlers on the children of the button element. It's a browser developers interpretation of allowing it or not.
This problem has been posted here before (a few times)
span inside button, is not clickable in ff
Missing click event for <span> inside <button> element on firefox
It seems that Firefox is allowing it, based upon your findings. IE isn't. So to be on the safe side: use the button the way it was intended.
Wrap the button inside a span (not really logical)
Put the click handler on the button.
$(".filters button").click(...);

played around in the console a bit, and this seemed to work well.
$(".filters").on('click', 'span', function(){
// foo here
console.log('foo');
});
Maybe the filters are manipulated by one of your js files after page load?
.on will allow you to select a container which listens on changes that happen inside it, passing the element you want the actual action to work on.
If it's ok for you, I'd suggest to use the <button> element, instead of the <span>.
Let me know if that works for you.

Modifying HTML elements using jquery

I am trying to use jquery to add and remove a class from <li> elements according to a variable's value ( i ).
Here is a jsfiddle of what I have done so far http://jsfiddle.net/LX8yM/
Clicking the "+" increments i by 1 ( I have checked this with chrome's javascript console ).
One should be able to click "+" and the class .active should be removed from and added to the <li> elements accordingly.
...I can get the first <li> element to accept the class, that's all...

No need for if statements:
$(document).ready(function (){
$('#add').click(function (){
$('.numbers .active').removeClass('active').next().addClass('active');
});
});
jsfiddle
Do note that I added an 'active' class to first list item. You could always do this via JS if you do not have control over the markup.

Your if..else.. is hanging in document.ready. Wrap the increment inside a function and call it respectively.
Like
$(document).ready(function (){
//variable
var i = 1;
//if statments
function incre(i){ // wrap into a function and process it
if(i == 1){
$('#one').addClass('active');
$('#two').removeClass('active');
$('#three').removeClass('active');
}else if(i == 2){
$('#one').removeClass('active');
$('#two').addClass('active');
$('#three').removeClass('active');
}else if(i == 3){
$('#one').removeClass('active');
$('#two').removeClass('active');
$('#three').addClass('active');
}
}
//change i
$('#add').click(function (){
incre(i++); // pass it as a parameter
});
});
Working JSFiddle

This would be easier:
$(document).ready(function(){
var i = 0; // set the first value
$('#something').click(function(){
i++; // every click this gets one higher.
// First remove class, wherever it is:
$('.classname').removeClass('classname');
// Now add where you need it
if( i==1){
$('#one').addClass('classname');
} else if( i==2){
$('#two').addClass('classname');
} else if( i==3){
$('#three').addClass('classname');
}
}):
});

See this code. Initially you have to add class to one.
$(document).ready(function (){
//variable
var i = 1;
$('#one').addClass('active');
//if statments
//change i
$('#add').click(function (){
i++;
if(i == 1){
$('#one').addClass('active');
$('#two').removeClass('active');
$('#three').removeClass('active');
}else if(i == 2){
$('#one').removeClass('active');
$('#two').addClass('active');
$('#three').removeClass('active');
}else if(i == 3){
$('#one').removeClass('active');
$('#two').removeClass('active');
$('#three').addClass('active');
}
});
});

It's being called only once, not in the click event function. This edit of your fiddle works: http://jsfiddle.net/LX8yM/2/
put it in the
'$('#add').click(function (){}'

Trouble using .change to verify answer

I'm having some trouble using a .change on a text input field. It's supposed to use a library (artisan), if said answer is right (in this case equal to 1), to draw text on a canvas but it's not doing so.
Here's the javascript
$('#atomnum').change(function(){
ans = $('#atomnum').val();
});
if(ans == 1){
artisan.drawText('canvas', 200, 300, 'Correto!', '#FFFFFF');
}else{
return false;
}
The input's id is atomnum. Any help?
Edit - Tried bot of those, still not working. Here's the whole function that gets called, maybe that çistener shouldn't be inside that function...

If the drawing action is supposed to happen inside the .change() event, put it inside:
$('#atomnum').change(function(){
ans = $('#atomnum').val();
if(ans == 1){
artisan.drawText('canvas', 200, 300, 'Correto!', '#FFFFFF');
}else{
return false;
}
});
Otherwise, you would have needed an additional function to check the new value of ans and act on it accordingly.
Note - removed an extra closing }

That code cannot work. You execute the checking code right after binding the event a single time instead of running it whenever the element changes.
Try this instead:
$('#atomnum').change(function(e) {
var ans = $('#atomnum').val();
if(ans == '1') {
artisan.drawText('canvas', 200, 300, 'Correto!', '#FFFFFF');
}
else {
e.preventDefault();
}
});

scrollTo div on hover

I asked this question and the answer works really well.
The only thing though is that now I need a version that scrolls directly to the respective div instead of scrolling through all of them (i.e. if you hover over the last link, it won't scroll through 6 former divs to get to it).
It still needs to return to the first div when you aren't hovering over the link.
Also, it would be most ideal if there was also a way to stay on that div if you hover over it as well as its link. As of now, the div is not intractable because when you hover over it and leave its link, it scrolls away.
Thanks.

Try that way:
DEMO fiddle
var flag = false,
goto = 0,
hre;
$('#nav li a').bind('mouseenter mouseleave', function(e) {
if (e.type === 'mouseenter') {
flag = true;
hre = $(this).attr('href');
goto = $(hre).position().top;
$('#sections').stop().animate({top : '-'+goto },800);
} else {
flag = false;
setTimeout(function() {
if( flag != true ){
$('#sections').stop().animate({top : '0' },800);
}
}, 1000);
}
});
$('#sections').mouseenter(function(){
flag = true;
});
After you hover an anchor, go fast into the 'wrapper' and it won't go back to the 1st slide.
BTW... why you just don't create something more... practique? :)
EXAMPLE fiddle

I'm pretty sure what you are asking is impossible for this reason:
First you want to have the animation return the top when the user is not hovering over the link BUT you also want to be able to stay on the div when the user LEAVES the link and hovers over the div it scrolled to.
Here is a jsfiddle which does the first part of your question though.
http://jsfiddle.net/YWnzc/8/
I just set the animation time to 0

Just move the elements around before animating: http://jsfiddle.net/YWnzc/12/.
I made use of $.doTimeout and $.scrollTo for convenience. Also I parsed the number out with a regexp. The timeout is to allow for movement into the div without scrolling back.
var current, prev;
jQuery( "#nav").delegate( "a", "mouseenter mouseleave", function(e){
var i, self = this, pos;
if( e.type == "mouseleave" ) {
i = 1;
} else {
i = $(this).attr("href").match(/(\d)$/)[1];
}
//stop the previous animation, otherwise it will be queued
if(e.type === "mouseleave") {
var elem = $("#section1").insertBefore(current);
elem = $("#section1");
$.doTimeout("test", 500, function() {
current = $("#section1");
jQuery("#wrapper").scrollTo(elem, 250);
});
} else {
var elem = $("#section" + i);
elem.insertAfter(current || "#section1");
current = elem;
$.doTimeout("test");
jQuery("#wrapper").scrollTo(elem, 250);
}
});
jQuery( "#wrapper").on("mouseover", function() {
jQuery( "#wrapper").stop();
});

Just remove the animation scroll and do a direct scrollTop() call
Fiddle Demo: http://jsfiddle.net/YWnzc/9/