Hereis the code and online JsFiddle:
<div class="blocka"></div>
<div class="blockb"></div>
$(".blocka").mouseenter(function(){
$(".blockb").show();
});
$(".blocka").mouseleave(function(){
$(".blockb").hide();
});
My question is is it possible to have something like
if $(".blocka") or $(".blockb") mouseleave then hide $(".blockb")
I tried the following but it doesn't work :
$(".blocka" || ".blockb" ).mouseleave(function(){
$(".blockb").hide();
});
You can do multiple selections using a comma ,:
$(".blocka, .blockb").mouseenter(function(){
$(".blockb").show();
});
$(".blocka, .blockb").mouseleave(function(){
$(".blockb").hide();
});
Updated fiddle:
http://jsfiddle.net/jaUNY/3/
$(".blocka, .blockb" ).mouseleave(function(){
$(".blockb").hide();
});
multiple selectors will work.
http://api.jquery.com/multiple-selector/
You may want to keep blockb open when moving mouse from blocka to blockb, so the code would be:
$(".blocka, .blockb").hover(
function() { $(".blockb").show() },
function() { $(".blockb").hide() }
);
Related
In this, I try to do hide and show the div's.
It's working well but I want to reduce this code because it looks like same on click function
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".product_pro").hide();
$(".food-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".retail-pro").addClass('pro-active');
$(".product_food").hide();
$(".product_xclusive").hide();
});
$(".food-pro").click(function() {
$(".product_retail").hide();
$(".product_food").show();
$(".product_pro").hide();
$(".food-pro").addClass('pro-active');
$(".retail-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive").hide();
});
});
You can try this:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
hideOrDisplayElements(1);
});
$(".food-pro").click(function() {
hideOrDisplayElements(0);
});
});
function hideOrDisplayElements(blnIsRetailProClicked){
$(".product_retail, .product_food")[blnIsRetailProClicked ? 'show' : 'hide']();
$(".food-pro, .retail-pro")[blnIsRetailProClicked ? 'removeClass' : 'addClass']('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive .product_pro").hide();
}
The most obvious would be:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail, .product_food, .product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".food-pro, .xclusive-pro").removeClass('pro-active')
$(".retail-pro").addClass('pro-active');
$(".product_food, .product_xclusive, .product_pro").hide();
});
$(".food-pro").click(function() {
$(".product_retail, .product_pro, .product_xclusive").hide();
$(".product_food").show();
$(".food-pro").addClass('pro-active');
$(".retail-pro, .xclusive-pro").removeClass('pro-active');
});
});
But I'd recommend to put a common class in the elements you want hidden or visible in the different states, change the class of the container by state (not each element), and manage everything with css.
Much simpler and cleaner.
Is it possible to know if text to an input field was added by typing or by using paste?
$('document').on("keyup", ".tfs", function(e) {
alert("typed text");
})
$('.tfs').on('paste', function(e) {
alert("paste text!");
});
EDIT:
I'm looking for an solution which is not an inline code solution such as onpaste(). I'm need to do this using bind ( .on now ) as per my code above.
something may help
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('span').text('copy behaviour detected!');
},
paste : function(){
$('span').text('paste behaviour detected!');
},
cut : function(){
$('span').text('cut behaviour detected!');
}
});
});
DEMO HERE
There are 's around document. Remove them or use this code -
$('.tfs').on("keypress", function(e) {
alert("typed text");
})
$('.tfs').on('paste', function(e) {
alert("paste text!");
});
FIDDLE
The keypress event will allow to check for characters not arrows or backspace etc.
Check this question
I'm trying to create a script for changing text on image hover. This is the HTML in simple version:
<section id="#first">
<div class="img-1"></div>
<div class="img-2"></div>
</section>
<section id="#second">
<div class="text-1"></div>
<div class="text-2"></div>
</section>
Javascript
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('text-1-active') },
function(){ $('.img-1').addClass('img-1-active') },
function(){ $('.text-2').removeClass('text-2-active') },
function(){ $('.img-2').removeClass('img-2-active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('text-2-active') },
function(){ $('.img-2').addClass('img-2-active') },
function(){ $('.img-1').removeClass('img-1-active') },
function(){ $('.text-1').removeClass('text-1-active') }
)
});
Can't change the HTML structure. The classes do get added but don't get removed.
FIDDLE
:) actually this is all you need: DEMO
$("#first [class^=img-]").hover(function() {
$('#second .text-'+ this.className.replace(/\D/g,'')).toggle();
});
If you want to toggle classes? Nothing simpler: DEMO
$("#first [class^=img-]").hover(function() {
$(this).toggleClass("wow");
$('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow");
});
To explain the above, you just need to find out the number of the hovered element and reference-by number the needed .text-N element.
Also this <section id="#first">, that #first is not the way to set an ID to an HTML element.
Use simply <section id="first">
You are attempting to pass four separate callback functions, rather than a single callback that executes all the necessary code.
Here is what you want:
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
)
});
http://jsfiddle.net/w4mLtec8/5/
first, you use the .hover function wrongly, it should only accept 2 arguments which is for mouseenter and mouseleave. You should be using it like this
$("selector").hover(
function(){
// mouseenter function
},
function(){
// mouseleave function
}
});
and second you don't need to use too long class name to to decide it's active or not, hence you can use it to diferentiate it like this text-1 active and text-2 active, so you can write it like this in jQuery
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
});
and CSS
.text-1,
.text-2{
display:none;
}
.text-1.active,
.text-2.active{
display:block;
}
here's the Updated Fiddle with the optimized way to use it.
I'm making an assumption of what you're looking for...but try this jQuery code:
jQuery(document).ready(function ($) {
$('.img-1').mouseover(function () {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active')
}).mouseout(function () {
$('.text-1').removeClass('text-1-active');
$('.img-1').removeClass('img-1-active');
});
$('.img-2').mouseover(function () {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active')
}).mouseout(function () {
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
});
});
You are handing the hover event a list of functions. Just send it one that does eveything.
I.E.
jQuery(document).ready(function($) {
$('.img-1').hover(
function() {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
);
$('.img-2').hover(
function() {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
);
});
Try this
jQuery(document).ready(function($){
$('.img-1').hover(function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
});
$('.img-2').hover(function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
$('.img-1').toggleClass('img-1-active');
$('.text-1').toggleClass('text-1-active');
});
});
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
}
)
});
http://jsfiddle.net/w4mLtec8/10/
If I understand what's to be done, the approach itself used to solve the problem could be better. Basically, use CSS to your advantage. Here, I've reduced the number of times we call JQuery by taking a little time to set up the HTML and CSS.
Tag the corresponding text div with a number
Put the same number in a data attribute so the item to hover knows which text it's associated with
I believe the intent is to have one text hover active at a time, so we can simple remove all 'active'. Naturally, we'd one to restrict the selector here to only pull text hovers, but you get the idea.
//Javascript Code
$('.img').hover( function() {
var name = $(this).attr('data-name');
$('.text').removeClass('active');
$('.text[data-name="'+name+'"]').addClass('active');
});
http://jsfiddle.net/LkL9uo0k/1/
As far as I understand, you don't need classes to show and hide the text, use .show() and .hide() to take care of it, in the original js you're passing 4 functions to the hover event whereas only 2 are needed, one executes when the element is hovered and the second one when mouse exits the element causing hover event to stop.
Here's the modified js, take a look at the fiddle too -
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').show();
$('.text-2').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
$('.img-2').hover(
function(){
$('.text-2').show();
$('.text-1').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
});
FIDDLE
I'm basically hiding both texts on exit, if you want one text block to always stay visible you can hide the other one in hover 'exit' function. Here's the fiddle for that -
http://jsfiddle.net/w4mLtec8/9/
How could I make this ( HERE ) mega-menu usable?
I want the submenu-1,2 and 3 to stay visible while hovering over them too, and when mouseout of them, they will slideUp.
Code sample HERE.
$(".menu-1").hover(function(){
$(".submenu1").stop().slideToggle(700);
});
$(".menu-2").hover(function(){
$(".submenu2").stop().slideToggle(700);
});
$(".menu-3").hover(function(){
$(".submenu3").stop().slideToggle(700);
});
I appreciate your help!
Live demo working http://jsfiddle.net/LwYuz/3/
$(".menu-1").hover(function(){
$(".submenu1").stop().slideToggle(700);
});
$(".menu-2").hover(function(){
$(".submenu2").stop().slideToggle(700);
});
$(".menu-3").hover(function(){
$(".submenu3").stop().slideToggle(700);
});
$(".submenu1").hover(function(){
$(".submenu1").stop().slideToggle(700);
});
$(".submenu2").hover(function(){
$(".submenu2").stop().slideToggle(700);
});
$(".submenu3").hover(function(){
$(".submenu3").stop().slideToggle(700);
});
Anyways, enough of my raging in the comment section,
You can use the jquery multiple class selector.
$(".menu-1,.submenu1").hover(function(){
$(".submenu1").stop().slideToggle(700);
});
$(".menu-2,.submenu2").hover(function(){
$(".submenu2").stop().slideToggle(700);
});
$(".menu-3,.submenu3").hover(function(){
$(".submenu3").stop().slideToggle(700);
});
Here is your solution ... Fiddle updated
I've got code so that when you click on a word, it is replaced by another word.
<script>
$(document).ready(function() {
$('.note_text').click(function(){
$(this).remove();
$('#note_div').append('<span class="note_text">new</span>');
// re-applying behaviour code here
});
});
</script>
<div id="note_div">
<span class="note_text">preparing</span>
</div>
I need the appended word to have the same click behaviour. What is the best way to do this?
change
$('.note_text').click(function(){
to
$('.note_text').live('click',function(){
This will cause anything on your page that ever gets the class 'note_text' to have the behaviour set by .live
You should use a .live()help or .delegate()help binding for that purpose.
$(function() {
$('#note_div').delegate('.note_text', 'click', function(e) {
$(e.target).parent().append("<span class='note_text'>new</span>").end().remove();
});
});
Demo: http://www.jsfiddle.net/PkngP/2/
You could rebind the handler:
function handler(){
$(this).remove();
$('#note_div').append("<span class="note_text">new</span>");
$(".note_text").unbind("click");
$('.note_text').click(handler);
}
$(document).ready(function() {
$('.note_text').click(handler);
});