jquery problem:on click function is not showing the h3 title? - javascript

i have this jquery script that clicks on link add info then hides it and brings up a form. and when you press cancel it needs to show the h3 again, but it deosnt show it, i dont know why:
heres my working code: http://jsfiddle.net/GLqcx/2/

$("h3").show();
should be
$("h3 a").show();

In your .addInfo click handler, you are hiding the <a> with this line:
$(this).hide();
However, in your .cancelInfo click handler, you are showing the <h3>:
$("h3").show();
You'll need to change one or the other, so that you are hiding/showing either the <h3> or the <a>.
I've taken the liberty of fixing your problem and optimizing your code a bit. Here's what I came up with:
$(".cancelInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().next().show();
});
$(".addInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().prev().show();
});
Here's a demo showing that code in action ->
Instead of using broad selectors, we are now using our knowledge of the document structure to traverse to and manipulate the correct elements. In addition, we are only doing one selection, thus saving some time and work.

Or alternatively,
$("h3").hide();
instead of $(this).hide()
As you are hiding the a link not the h3 in your code. So when you tried to show the h3, the a link was still hidden.

Related

jQuery toggle on click out

I have a series of spans (togglers) and a series of divs (toggled). I created a make_toggle function that receives the toggler and its corresponding toggled as arguments.
Everything seems to work kind of ok up to the point where I try to implement a "toggle on click out". What I've tried is to attach to the html click event a function that checks whether the target of the click is contained within the toggled element. On toggle "back", I would then detach the handler so I am only checking when I need.
var check_if_clickingout = function(e) {
if (!toggled[0].contains(e.target)) {
toggle();
}
};
See fiddle: https://jsfiddle.net/andinse/65o211nc/11/
It doesn't even seem to work anymore but when it used to, it was triggering many more times than necessary (which was the reason for me to come here ask for help).
What am I doing wrong? What is the most effective way to go about this kind of situation where I am giving functionality to a series of independent DOM elements?
Just putting this out here that this seems to do the same thing.
$("span").click(function() {
$(this).siblings("div").toggleClass("blue");
});
Maybe I am missing something more that I am not seeing in your example.
See more: http://api.jquery.com/toggleclass/

mobile version of a website click and hide

I have a problem with some JavaScript: for the computer version of a website, when I hover over a button, some text appears, and when I click anywhere else on the site, the text hides.
I don't know how to construct a page for the mobile version of the same website, on which when I click on a button, text shall appear and when I click anywhere else I want the text to hide.
I've tried:
if(jQuery.browser.mobile) {
$(".button").on("click", function() {
$(".text").show();
});
//this section doesn't work
$("body").on("click", function() {
$(".text").hide();
});
}
else {
//desktop code here, irrelevant
}
There is a conflict in your code because class is part of body. So when you click class both events are called.
The information in this post will help you solve your problem:
How do I detect a click outside an element?
By using event.stopPropagation(); in your class event, you should be able to differentiate both event.
Note that this solution may raise other problems if your class element or any element contained by it handle other events. In this case, you might want to try other solution from the post I quoted.
I don't think that the fact that that your working on a mobile version is relevant.

jQuery hide function works with "button" and "span" but not with "a" element

I am working on a website for an academic project and I just encountered a pretty weird problem. I have searched but was unable to find anything similar.
I have a form that I hide/show (jQuery functions) using some buttons. And it works perfectly. But i also want to display this form when the user clicks on a link (html a element). The problem is that when I click on the link the form appears and disappears very quickly. It works perfectly if I replace the a element with a button or a span.
For information I use jade as a templating engine to create my HTML.
Here is an example of the jade:
a#edit(href="") #{event.name} // it is the link the create the problem
button#edit(href="") #{event.name} // but like that it work very well
And here is how I hide my form with JavaScript
$('#edit').on('click', function(){
$('#addForm').show();
});
edit: the solution
$('#edit').on('click', function(e){
e.preventDefault();
$('#addForm').show();
});
I think you need to add (if not present) the code to block the default behavior of the a tag
event.preventDefault();
//code
return false;

How to make independent a function on different target jQuery?

I don't realy know if this is where the problem come from but it seems to be that the event of stopPropagation()is applying to both div at a time.
A bit of explanation : So I have a div ".customSelect" that display herself only if you click on a link ".custom-select".
The main problem is that when I told it to close it self if I click on the body, it open an other div (which has the same class but still shouldn't).
What is the best way to make them be independent ?
This is the code and here is a link to the Fiddle.
$('.custom-select').click(function(e){
e.stopPropagation();
$(this).next($('.customSelect')).toggle(350);
});
$('body').click(function(e){
$('.customSelect').toggle(350);
});
What am I doing wrong?
Use this to hide only the visible ones when you click away.
$('body').click(function(e){
$('.customSelect:visible').toggle(350);
});

Jquery SlideToggle, prevent toggle in particular circumstance

So I have an H3 that has a grey background rectangle. When you click anywhere in that grey background, a particular div performs a slideToggle(). This works fine.
Now, Inside that H3 I also have a link that calls a jquery function that does something. That works fine too.
But my issue is this, since the link is inside the H3, after its functions executes, it also executes the slideToggle() because I clicked somewhere inside the H3.
So the question becomes, How do I prevent the slideToggle() from happening when I click on the link. I imagine I can use a flag but I'm hoping there is a more elegant way.
Any help would be appreciated.
The HTML code
<h3 id="data_id">
<a href="#" id="random_id" >Random</a>
</h3>
<div id="data_div_id">
// The data here is irrelevant to the issue at hand
</div>
The Jquery Code
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
// it does something irrelevant to the issue at hand
});
You can use event.stopPropagation() to stop the event from bubbling.
jsFiddle here.
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
event.stopPropagation();
});
Try skipping the element you don't want the event for:
$('#data_id').click(function(event) {
if (event.target !== this)
return;
$('#data_div_id').slideToggle('slow');
});
Like this only #data_id will trigger the toggle and since your h3's are in that div it gets executed when you click on them too, but only once from actually clicking the container

Categories