I have three divs in a line going down a page with classes e.g. .class1, .class2, .class3.
when a users mouse enters either of the divs i want to show other divs (divA & divB), question is can i have multiple divs in the function?
this is what I have so far, for one div which works great:
$(document).ready(function(){
$("body").on("mouseenter", ".class1", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});
$("body").on("mouseleave", ".class1", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});
I want the effect to happen though if a use enters either .class1, .class2 or .class3
Without a similar function three times
I've tried .class1 && .class2 etc but no joy, also .class1 || .class2 etc but also no joy
Is this possible?
In jQuery you can separate selectors with , so in your case something like ".class1, .class2" and so forth.
jQuery will then look for elements that match one or multiple of those selectors.
Update:
You can shorten the code a bit by binding both the events to the same callback, and use slideToggle() instead:
$(function() {
$("body").on("mouseenter mouseleave", ".class1, .class2, .class3", function ()
{
$(this).children(".divA, .divB").slideToggle();
});
});
Haven't tried it, but this should be equivalent to your code in terms of functionality. Just a bit shorter.
You can simply do
$(document).ready(function(){
$("body").on("mouseenter", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});
$("body").on("mouseleave", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});
Related
With $('#sidebar').toggleClass('small'); Im adding adding/removing specified class from #sidebar.
When #sidebar has class small I should be able to perform additional actions when user hover over #sidebar.small.
I have tried to accomplish that with code bellow:
$("#sidebar.small").on({
mouseenter: function () {
alert(1); //doesn't work
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
But that doesn't work.
How should I perform hover function on changed DOM element?
You should be able to use the jquery hover method to do this: https://api.jquery.com/hover/
Update:
Sorry noticed one other thing... when you originally set your event handler, does #sidebar have the css tag or not? The way your code is written, if it doesn't, it will try to attach to the element $("#sidebar.small"), so if the css tag is not there it won't attach to anything.
I think you want more like this:
$("#sidebar").on({
mouseenter: function() {
if($('#sidebar').hasClass('small')) {
alert(1);
}
}
});
Update again for a typo, sorry...
Jquery only binds the handlers for the found elements at the time of binding.
The solution is to rebind the appropriate handlers when you add the class.
jsfiddle
code from the fiddle:
$('#foo').click(function(){
$('<span></span>')
.text('A Span')
.appendTo('#container');
});
$('#bar').click(function(){
$('span').first().toggleClass('small');
bindHover();
})
function bindHover(){
$('span.small').unbind('hover'); // Avoid re-binding something
$('span.small').hover(function(){
alert('a')
});
}
bindHover();
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.
Everything works fine except one thing, I'd like it so when you have the .show class already visible, it will fade again when you click on another of the #c- divs.
http://jsfiddle.net/7KdR6/1/
$('[id^="c-"]').each(function(i){
$this = $(this);
$(this).text(i);
$(this).on('click',function(){
$('.show').fadeIn().text(i);
event.stopPropagation();
});
})
$(document).on('click', function(){
$('.show').fadeOut();
});
One of your problems is that you are not stopping the propagation because event is not being defined. You'll have to use the parameter for the click handler. Edit: Actually, it looks like event is automatically passed - I did not realize this before now. However, I still think it best to put the event object as the parameter if you are going to use it - jQuery does this in their examples and it makes it more obvious.
I also notice you are caching this but then not using that cached var. This means that every time you write $(this), it will have to rewrap that jquery object.
Then you can have a fadeOut and use the fadeIn as a callback for the fadeOut. This way if the .show element is already shown, it will fadeOut first. I'd write it like this:
$('[id^="c-"]').each(function (i) {
$this = $(this);
$this.text(i);
$this.on('click', function (event) {
event.stopPropagation();
$show = $(".show");
$show.fadeOut(function () {
$show.fadeIn().text(i);
});
});
})
Fiddle
You need to hide the element before using fadeIn on a visible element
$('[id^="c-"]').each(function (i) {
var $this = $(this);
$this.text(i);
$this.on('click', function () {
$('.show').hide().fadeIn().text(i);
event.stopPropagation();
});
})
Demo: Fiddle
Try calling .hide() before calling .fadeIn().
DEMO FIDDLE
I am using blueprint CSS framework. I have an article spanning 24 cols but I trying to use jQuery toggleclass (onclick) to reduce it to 20 cols and show the buttons for actions in the remaining 4 cols.
$("div").each(function() {
$(this).click(function() {
$(this).toggleClass("span-24");
$(this).toggleClass("span-20");
});
});
I have more than one div so I use each, but it does not work.
I appreciate any help.
This code should do what you're after:
$("div").toggle(function() {
$(this).attr("class", "span-24");
}, function() {
$(this).attr("class", "span-20");
});
You can bind the click event to all divs without the each loop. Also, you can use the :gt() greater-than selector and then toggle() the visibility of those spans
$("div").click(function() {
$(this).find("span:gt(19)").toggle();
});
you don't want to toggle classes on all divs you have, rather just the one with content
you can even simplify this code more:
$('#toggler').click(function(){
$('#content').toggleClass('span-20 span-24');
});
the #toggler.click() is just one of events that can run the toggleClass(), in your HTML it could be onload or whatever:
$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too)
example: http://jsfiddle.net/hhMFs/1/
You can also do this:
$("div").click(function() { $(this).toggleClass("span-20 span-24"); });
I previously got this (useful!) answer about using .next() for a DIV "blinds" toggling effect.
However, I can't seem to get this simple function to work for more than one DIV at the same time:
$(document).ready(function () {
$("#closeButton").click(function () {
$(this).next().toggle("fast");
});
});
Any ideas?
The selector you are using is only selecting one element. You would need to change is to it selected a collection of elements.
$(document).ready(function () {
$(".wider_div h3").click(function () {
$(this).next().toggle("fast");
});
});
This might work given the structure.
Is it about a specific type of button that occurs multiple times on a page? Try using jQuery's live():
$(document.ready(function() {
$('button.your_class').live('click', function (){
$(this).toggle('fast');
});
});
and attach the appropriate class to the buttons you want to 'be listened'.