jQuery show() and hide() aren't working - javascript

I'm working on sliding old questions to the left and new questions in from the right. You can see what I'm doing in this jsFiddle:
jsFiddle
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
But when I'm working outside of jsFiddle (mostly because it won't load the roundabout.js file from GitHub correctly) I can't seem to get the show() and hide() to work correctly. I have the exact same code (with a reference to roundabout.js uncommented), and it will completely ignore the first hide and show references, then skip the next hide command and show the next question.
Any ideas on why it wouldn't be firing the hide() and show() functions in the click event?
EDIT: Editted with most current jsFiddle. It works there, but not outside of that environment.

Bind the event inside the DOM ready event
If you inspect the source in jsFiddle, you see all your code enclosed in the DOM ready event . So it looks like it works here and not on your local version.
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});

This approach doesn't use jQuery UI and is also different than yours, but you'll still get the same end result. Note that the HTML/CSS are also different in this approach.
Working example: JSFiddle.
$(document).ready(function () {
var x = 1,
distance = $('.container').width(),
qNumber = $('.question').length;
$('.questionList').width(distance*qNumber);
$("input[type='radio']").change(function () {
alert( "Radio button selection changed. Selected: " + $(this).val() );
$('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);
});
});

Related

Click event prevents mouseout from triggering

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
EDIT: I found where the bug is coming from you can see an example here. When you click on lets say the About tab and hover over and out on contact the content should be hidden. But you go back to hover over About and out the content stays visible, which is not. How do I ensure the mouseout event is being triggered after clicked?
EDIT 2: So I noticed the unbind() method prevents that. When I remove it I can't seem to get the content area to stay active when clicked as the mouseout method overrides it.
I did some research on this but could not find a solution as to why on hover the removeclass does not work. I have encountered a bug with addClass() and removeClass() functions. The thing is I have those function firing on hover or mouseover/mouseout and on click so it gets a bit confusing. Here is a demo of what I'm working with: JSFiddle.
Full screen for better view.
My JavaScript can be kind of messy but ultimately the way this is suppose to work:
1. If you hover over a dot on the map the content on the left red box should reveal what's relevant to the location as well as a 'tooltip' of the location name. (this part works)
2. You mouse out it's suppose to go back to the list of locations and the tooltip disappears. Almost like a reset.
3. Now if you click on the dot, both the tooltip and the content on the left should remain active. Until you either click on the "Back to the list" link on the red box or hover over the other dots. (this also works)
The bug I encountered is if you click around the list panel and hover over a couple of the location dots after a certain while the hover state stays active when you hover over a couple of the locations (which is not suppose to happen). Everything is suppose to go back the list panel when you hover out of the location dot on the map.
$('a.location').click(function (event) {
var loc = this.id;
if ($('div.panel').hasClass('list')) {
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
$('.panel').removeClass('current');
$('.list').addClass('current');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.view').removeClass('view');
e.preventDefault();
}); //back button
$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');
}, function () {
var dot = this.id;
//hide location hover
$('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
var dot = this.id;
if (!$('div.location-title.' + dot).hasClass('hide')) {
$('div.location-title.' + dot).addClass('view');
} else {
$('div.location-title.' + dot).removeClass('view');
}
event.preventDefault();
});
$('.map__container > span').on({
mouseover: function () { //mouseover
var loc = $(this).attr('class');
$('.panel').siblings().removeClass('current'); //resets all classes that have current
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
$('div.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
var asb = $('.location-title').siblings();
$('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
click: function () {
$(this).off('mouseout');
var loc = $(this).attr('class');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});
Also if you have better suggestions to clean up my JavaScript I'm all ears. Thanks so much!
If i understand right, you might want to try with the event Mouseleave, and i would use to modularize the function toggleClass:
ToggleClass function Jquery
Mouseleave explanation:
mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
I hope this helps you. Salutations!
FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
My problem was in the code example above the $(this).off('mouseout'); was removing the mouseout when clicked. So if you were to hover back to that dot on the map and mouseout the 'tooltip' would stay active, it won't disappear when you mouseout, which it should disappear. I couldn't find a way to bind it again so the toggleClass() was much better. I been pulling my hair on this!
$('.map__container span').click(function(mapIcon){
mapIcon.preventDefault();
var icon = $(this).attr('class');
var panel = $(this).attr('class');
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//Show bubbles over dots on map
$('.map__container span').hover(function(){
var hoverdot = $(this).attr('class');
$('.location-title.' + hoverdot).toggleClass('selected');
});
//Show bubbles on hover over anchor links
$('a.location').hover(function(){
var hoverlink = this.id;
$('.location-title.' + hoverlink).toggleClass('selected');
});
//Anchor links show panels and bubbles
$('a.location').click(function(e){
e.preventDefault();
var panel = this.id;
var icon = this.id;
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//back button
$('.back-list').click(function(backButton) {
backButton.preventDefault();
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.list').addClass('clicked');
});

scroll till active tab

This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});
Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID

Prevent jquery fadeIn many times

Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.

How to trigger the '.click' event more than once?

$('document').ready(function() {
$('.button').click(function() {
$('img').animate({left: "+80px"}, 2000);
});
});
So, I'm a bit of a newbie to jQuery and stuff. All I want to do is make an image move to the right every time I click a button. When I run it, it works the first time, but when I click the button again, it just stays still.
I was wondering how I could trigger the .click event multiple times.
PS: If it's worth knowing, the button I mention here is actually a <div>. I couldn't get it to work with a <button>.
Try +=:
$('img').animate({left: "+=80px"}, 2000);
try the on event:
var doc = $(document);
doc.ready(function() {
doc.on('click', '.button', function() {
var imgElem = $('img');
var imgLeft = parseInt(imgElem.css('left'));
var distance = 80;
var newDistance = imgLeft + distance;
$('img').animate({left: newDistance+'px'}, 2000);
});
});
Edit: I changed the code after "remembering" how animate works
$(document).ready(function() {
$('.button').unbind('click').click(function() {
$('img').animate({left: "+80px"}, 2000);
return false;
});
});
I must works.

jquery did my first plugin - Issue with fadeIn/fadeOut when it goes too fast

I made my own little tooltip, but there seems to be an issue when I go too fast.
It's a simple tooltip, ie you mouseenter and it shows you a bubble that fadeIn on top with some text, mouseleave the bubble fadeOut.
The issue appears when go very fast mouseenter/mouseleave on several different elements ... first it starts to only fade to like 0.6 and then eventually it doesn't show.
I'm guessing it s something to do with queuing. So I tried stop() and clearqueue() but it still doesn't work.
Here is the plugin:
(function ($) {
$.fn.tooltip = function (options) {
var selector = $(this).selector;
var defaults = {
fadeInSpeed:350,
fadeOutSpeed:200,
delayIn: 350,
delayOut: 300,
popupId:'tooltip_popup',
verticalOffset: 30
};
var settings = $.extend({}, defaults, options);
$(document).delegate(selector, 'mouseenter', function (e) {
var $this = $(this);
var title = $this.attr('title');
$this.attr('title', '');
if (title !== '') {
if ($('#' + settings.popupId).text() === '') {
$('<div />').attr('id', settings.popupId)
.appendTo('body')
.css({
position:'absolute',
backgroudColor: 'black',
zIndex: 5
})
.addClass('tooltip_style')
.hide();
$('<div />').appendTo('#' + settings.popupId).addClass('tooltip_arrow');
$('<span />').appendTo('#' + settings.popupId);
} else {
$('#' + settings.popupId).hide().stop().clearQueue().hide();
}
var ele_x = $this.offset().left;
var ele_y = $this.offset().top;
$('#' + settings.popupId+' span').text(title);
$('#' + settings.popupId)
.css({
top : ele_y - settings.verticalOffset,
left: ele_x
})
.delay(settings.delayIn)
.fadeIn(settings.fadeInSpeed);
}
});
$(document).delegate(selector, 'mouseleave', function (e) {
var $this = $(this);
$('#' + settings.popupId)
.delay(settings.delayOut)
.fadeOut(settings.fadeOutSpeed);
$this.attr('title', $('#' + settings.popupId+' span').text() );
});
return this;
}
})(jQuery);
As you'll probably notice, I think this line is the one I need fixing:
$('#' + settings.popupId).hide().stop().clearQueue().hide();
(it s a bit messy cause I was trying everything...ha).
I don't think I quite understand this queueing thing.
Here is a fiddle: http://jsfiddle.net/denislexic/7YMcu/2/
Thanks for any help.
try using stop(true, true) instead of stop().
From the jQuery docs:
.stop( [clearQueue] [, jumpToEnd] )
clearQueue Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd Boolean indicating whether to complete the current animation immediately. Defaults to false.
With clearQueue set to true, you can also take out the clearQueue() call.
Explanation
The reason you're having issues is that when you stop an animation, you leave the element in a half-transitioned state, which the next animation considers to be the "normal" state. If you tell a half-visible element to fadeOut, it's going to save the 50% visible state for when it is told to fadeIn later. If you tell stop to jumpToEnd, it will always finish at 0% or 100% visibility.
As for clearQueue, I'm not confident that it needs to be true. jumpToEnd is the important thing here. You can play with the clearQueue value and see what works best in your case.

Categories

Resources