I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'
The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.
You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().
Related
Can you help me and tell me why this code doesn't work? On click '.push-button' it should open the '#push-menu' and that works but the other part of the doesn't work instead of showing the elements on the first click and then hiding the elements on the second click, it doesn't even show them when I open the menu it is empty, just white!
$(document).ready(function () {
$(".push-button").click(function () {
$("#push-menu").toggle(
function (){
$('.link-item-1').addClass('active-1');
$('.link-item-2').addClass('active-2');
$('.link-item-3').addClass('active-3');
$('.link-item-4').addClass('active-4');
$('.link-item-5').addClass('active-5');
}, function (){
$('.link-item-1').removeClass('active-1');
$('.link-item-2').removeClass('active-2');
$('.link-item-3').removeClass('active-3');
$('.link-item-4').removeClass('active-4');
$('.link-item-5').removeClass('active-5');
}
);
});
});
The problem is because the toggle() method no longer works in the manner you expect. It was changed several versions ago.
However, you can fix both the issue and massively simplify your code by using toggleClass() instead:
$(".push-button").click(function () {
$('.link-item-1').toggleClass('active-1');
$('.link-item-2').toggleClass('active-2');
$('.link-item-3').toggleClass('active-3');
$('.link-item-4').toggleClass('active-4');
$('.link-item-5').toggleClass('active-5');
});
I would also suggest you revisit the logic you're using with regard to the classes. They are supposed to group common elements, yet you have given each element its own unique class which is the complete opposite pattern.
To make that work you could then use the same class on all elements, eg. link-item, then identify them by index in either JS or CSS, whenever required.
$(".push-button").click(function () {
$('.link-item').toggleClass('active');
});
I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.
If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/
The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example
Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});
use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})
this is the code: code on jsfiddle. On the first run it doesn't show the "slideDown" animation but subsequent times it works fine.
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow').removeClass("hide");
});
Use the following.
$("#more-news").click(function() {
//changed the line below.
$(".news-hide").hide().removeClass('hide').slideDown('slow');
$("#less-news").fadeIn('slow').removeClass("hide");
$("#more-news").fadeOut().addClass("hide");
});
DEMO
Instead of using multiple elements and multiple events, you can use like this,
$("#more-news").click(function() {
var button = $(this)
$(".news-hide").slideToggle(function() {
$(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News")
});
});
Fiddle
The bootstrap hide class doesn't quite work the same way as the jQuery hide function, creating a confusing result.
To jQuerify your hidden things before sliding them around, you can do something a little like this:
$('.hide').hide().removeClass('hide');
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow');
});
Now you don't have to worry about that hide class every time you do something, but it keeps things hidden until the document is ready to javascript itself.
I'm trying to code a simple show/hide div using jQuery. Basically, when I click on .artist-ken, I want the artists-home div to disappear and .ken-gallery to replace it.
So far, I have this, but it's not doing anything except jumping to the top of the page:
$('.artist-ken').click(function(){
$('.artists-home').hide().show('ken-gallery');
});
Try this:
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
Function preventDefault() will stop from jumping in the page. You need separate show for displaying another div. Also . was missing in the ken-gallery.
jQuery.show() doesn't take a selector as a first parameter, try this instead:
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
I'm assuming that the element that you want to hide has the class ".ken-gallery" and that the element that you want to show has the class: ".artists-home"
$('.artist-ken').click(function(e){
e.preventDefault();
$(".artists-home").hide( 0, function() {
$('.ken-gallery').show();
});
});
Try this
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
What you did was not a real parameter for the show() function. Plus even if it were you didn't specify that it was a class. It can only take a function, duration, nothing, or object refer to the jQuery show reference page You can also create a one way listener to show or hide the other.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
e.preventDefault();
$(e.target).hide();
$('.ken-gallery').show();
}else if( e.target.classList.contains('ken-gallery') ){
e.preventDefault();
$(e.target).hide();
$('.artists-home').show();
}
});
Also what Chonger was saying, is if you wanted a fade which is the duration parameter for any of the show/hide and other animated properties of jQuery, then we would use a callback. So my single function listener would then become.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
$(e.target).hide(500,function(){
$('.ken-gallery').show();
});
}else if( e.target.classList.contains('ken-gallery') ){
$(e.target).hide(500,function(){
$('.artists-home').show();
});
}
});
EDIT
Reread your question, these must be links for the page to jump to top so I added to the functions.
Dude show() cant have parameter in () Brackets except Speed Or way of animation like show('slow') OR show('1000') is only valid .
Your syntax is wrong
The following is valid syntax.
It means , hide div with class ".artists-home" and show with class ".ken-gallery".
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
For more info show
I just did my first jQuery plugin which hides content that is too long.
You can view the fiddle at http://jsfiddle.net/denislexic/bT4dH/6/.
When you check it out and click on the "...", you ll notice that the first one toggles three times, the second toggles two times and the third one is correct (so just once).
I have no idea why it's doing that. I tried e.preventDefault(), stopPropagation(), etc. Nothing seems to work.
Here is the code that seems to be the problem:
$("." + opts.clickZoneClass).on("click", function (e) {
_debugger(1);
var element = $(this).parent('div').children('div.status');
// I know you can use is(':visible'), but it doesn't work in Internet Explorer 8 somehow...
if (element.hasClass('open')) {
_debugger(2);
element.animate({
height:element.attr('data-toggle')
}, 'fast');
//$(this).html();
element.removeClass('open');
} else {
_debugger(3);
element.animate({
height:element.attr('data-height')
}, 'fast');
element.addClass('open');
}
return false;
});
It's because you're executing the above code in a $.each loop. If you pull out your binding code and just run it once your plugin works great.
I just pulled it out and moved it to the document ready function to illustrate...
http://jsfiddle.net/bT4dH/10/
I guess the click event is binding more than once when you iterating the element. To overcome this problem just add the unbind method before click i.e.
$("." + opts.clickZoneClass).unbind().on("click", function (e) {
// existing stuff
});
This will fix your issue.