I've been researching this and many of the answers involve toggle function. The problem is I want one elements to be shown at all time, which isn't possible if toggle is used (they may accidently click something and it disappears). So I was doing it this way:
$(document).ready(function(){
$("#goals").hide();
$("#History").addClass("selected");
$("#History").click(function(e){
e.preventDefault();
$("#history").show();
$("#goals").hide();
$("#History").addClass("selected");
$("#Goals").removeClass("selected");
});
$("#Goals").click(function(e){
e.preventDefault();
$("#goals").show();
$("#history").hide();
$("#Goals").addClass("selected");
$("#History").removeClass("selected");
});
});
Except it's prob too tedious and I'm sure there's a better way. I'm trying to find solutions that use hide and show only or if the requirement can be fulfilled. Any help is appreciated...I'm not advanced at jQuery yet so please provide explanation. Thank you
You can give them a class.. or just combine the them in one selector
$(document).ready(function(){
$("#goals").hide();
$("#History").addClass("selected");
var eles = $("#History,#Goals");
eles.click(function(e){
e.preventDefault();
$(this).show().addClass('selected'); // show and add class to current clicked
eles.not(this).hide().removeClass('selected'); // hide and remove class for the other one
});
});
EDIT: I didn't notice you actually had different id's
var hg = $("#history,#goals");
var HG = $("#History,#Goals");
HG.click(function(e){
e.preventDefault();
var el = $('#'+this.id.toLowerCase());
el.show();
hg.not(el).hide();
$(this).addClass("selected");
HG.not(this).removeClass("selected");
});
Related
I just want to click on the box, make him active and then on the second click do him inactive. I know that there is method with boolean but I'm not sure how to use it. Thank you for any help. Here's jsfiddle.
$(".box").click(function(){
var THIS = $(this);
$(".box").removeClass("active");
THIS.addClass("active");
});
Something like this should do the job. jQuery has a built in toggle function for things like this
$('.box').click(function(){
$(this).toggleClass('active');
});
I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do.
There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press.
Thanks!
var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");
function hideMenu(){
$cateringMenu.hide();
}
function showCateringMenu(){
if($cateringButton.click() ){
$cateringMenu.show();
}
}
hideMenu();
showCateringMenu();
Check out the documentation for the jQuery click method here: https://api.jquery.com/click/
This method will set up an event handler for the particular element. You can use it like this:
$cateringButton.click(function() {
$cateringMenu.show();
});
That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!
Try it this way:
$(document).ready(function(){
$("#cateringMenu").hide();
$("#cateringButton").click(function(){
$("#cateringMenu").show();
});
});
The toggle() jQuery method was designed for exactly this:
jQuery:
<script>
$(document).ready(function(){
$("h1").click(function(){
$("p").toggle();
});
});
</script>
HTML:
<h1>Desert menu</h1>
<p>lots of deserts</p>
The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.
In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?
You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});
I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.
A small problem... I think!
I have a menu of buttons. When one clicked, it moves (animates). When another one is clicked, I need the first one to move back again.
So far they only moves when clicked, but not back again.
The code:
$(document).ready(function(){
var vari = $(this).attr('name');
$('.nav_btn').click(function(){
$(this).animate({left:'50%'});
});
});
With jQuery, this seems easy to me. What you do is, that you give all buttons same className and you loop through all of them when one of them is clicked. Because you can get element collection this will look much like this:
$(document).ready(function(){
var vari = $(this).attr('name');
$('.nav_btn').click(function(){
var buttons = $('.nav_btn');
for(var i=0; i<buttons.length; i++) {
if(buttons[i]!=this) //Avoid animating clicked button twice! Think of performance
$(buttons[i].animate({left:'0%'});
}
$(this).animate({left:'50%'});
});
});
Try this use .siblings() here:
$(document).ready(function(){
var vari = $(this).attr('name');
$('.nav_btn').click(function(){
$(this).animate({left:'50%'});
$(this).siblings().animate({left: '0'});
});
});
Working demo
Although not required but you can provide a animation duration of animate.
I need to make a div so that when the cursor hovers over it then I can detect it (using javascript) but I want to make it so that you can click through the div to the elements underneath. Is there a way to do this?
Thanks
Edit
As far as I'm aware, and through my quick searches, I do not believe that you are able to do this, if you can it wouldn't be easy and or very practical I wouldn't think.
old
Using jQuery:
$(document).ready(function(){
$("body").on("hover", "div", function(){
//do whatever you want on hover
});
$("body").on("click", "div .child-class", function(){
//do whatever on click
});
});
If this doesn't answer your question and do what you want, let me know what more specifically why it doesn't.
There are multiple solutions for this depending on your problem.
I will start with some assumptions:
1. You are the owner of the page (you know what happens there);
2. You know what element is beneath the clicked element.
For this case check this code:
//function executed when you click on element with id: beneath
function clickOnBeneath() {
alert("beneath click");
}
//function executed when you click on element with id: above
function clickOnAbove() {
var beneathEl;
beneathEl = document.getElementById("beneath");
beneathEl.click();
}
//attach click event on element with id: above and beneath
function attachClickOnElements() {
var aboveEl,
beneathEl;
aboveEl = document.getElementById("above");
aboveEl.addEventListener("click", clickOnAbove, false);
beneathEl = document.getElementById("beneath");
beneathEl.addEventListener("click", clickOnBeneath, false);
}
attachClickOnElements();
and also working example: http://jsfiddle.net/darkyndy/xRupb/
If you don't know what element is beneath it then I will try to find some code as I wrote a couple of years back something like this, as start point you can check getClientRects() function that is available on HTML elements (documentation: https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects )