Change a CSS selectors child on hover in jQuery - javascript

With this basic jQuery code below, how would I make the on mousout change the item back to display:none?
Also can this be improved?
Any help please
$(".image").hover(function() {
$(this).children(".image p").css({ display: 'inline' });
});
On the jQuery docs site I saw this: $(selector).hover(handlerIn, handlerOut) but I don't understand how to apply it here.

$(".image").hover(function() {
$(this).children(".image p").show();
}, function() {
$(this).children(".image p").hide();
});
But why not use pure CSS for it?
.image:hover .image p { display:inline; }

You don't need 2 functions if you test the event:
$(".image").hover(function(e) {
$(this).children("p").toggle(e.type === 'mouseenter');
});
Here's a demo: http://jsfiddle.net/U5QGU/
I also simplified the selector because you don't need:
.image p
Because you already know that its parent has .image
You could also do this instead of toggle:
$(".image").hover(function(e) {
$(this).children("p")[e.type === 'mouseenter' ? 'show' : 'hide']();
});
http://jsfiddle.net/U5QGU/1/

ThiefMaster is correct also but this is exactly as you asked for it:
$(".image").hover(function() {
$(this).children(".image p").css({display:'inline'});
}, function() {
$(this).children(".image p").css({display:'none'});
});

An alternative to using children is to provide selector context:
$(".image").hover(function() {
$("p", this).css({ display:'visible' });
}, function() {
$("p", this).css({ display:'none' });
});
To use a single function as suggested by shredder:
$(".image").hover(function(e) {
var d = (e.type === 'mouseenter') ? 'visible' : 'none';
$("p", this).css({ display: d });
});

Related

Toggle inline CSS in jQuery

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('active')) {
$(".change").css('padding-top', tagsHeight);
}
});
An a example here : https://jsfiddle.net/o1pbwfuo/
I really don't get why this is not working correctly ...
Thanks !
The issue with your code is due to the incorrect selector in not(). That being said, you can improve your logic by combining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:
var tagsHeight = $('span').outerHeight();
$('.button').click(function() {
var active = $(this).toggleClass('active').hasClass('active');
$(".change").css('padding-top', !active ? '0' : tagsHeight);
});
Working example
You made a mistake while using .is and .not.
You need to address the class itself inclusive the dot at beginning.
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('.active')) {
$(".change").css('padding-top', tagsHeight);
}
});
https://jsfiddle.net/06ek4fej/
By the way, the else-if request is nonsense.
If = true or if = false. Else If results the same as else.
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else {
$(".change").css('padding-top', tagsHeight);
}
});
On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});
You can use Has class method for the check is active class exist or not.
$(".button").click(function (){
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});

SlideToggle from botton/top to left/right

I have a little problem that I'd love to solve on my website.
Have a look at this JSFIDDLE — https://jsfiddle.net/sm25t089/
This is the javascript code:
$(document).ready(function () {
$(".bottoni").hide();
$(".reveal").click(function () {
$(this).toggleClass("active").next().slideToggle(200, "linear");
if ($.trim($(this).text()) === '(+)') {
$(this).text('(×)');
} else {
$(this).text('(+)');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});
I'd love the menu to move from out-of-the-screen to the left, to the right, instead the actual bottom to top.
Thanks for the help.
F.
here is one solution using css3
transition:0.3s;
https://jsfiddle.net/sm25t089/1/
if you prefer using only ccs2 then you can do the same with a jquery animate
You can use the jQuery method .animate()
(function($) {
$(document).off("click.slide").on("click.slide", ".reveal", function (e) {
var $self = $(this),
$menu = $(".bottoni"),
isActive;
e.preventDefault();
$self.toggleClass("active");
isActive = $self.hasClass("active");
$self.text(isActive ? "(x)" : "(+)");
$menu.animate({
"left": isActive ? "21px" : "-100px"
}, 200, "linear");
});
})(jQuery);
Here are a JSFiddle with the sample: https://jsfiddle.net/sm25t089/3/

Simplifying js for a dropdown

I have a pretty basic code html code for a dropdown, as can be seen here it works, but is there a way to simplify this js code?
$(document).ready(function() {
var n = ".dropdown-menu", no = 'drop';
$('.dropdown').click(function () {
if($(n).hasClass(no)) {
$(n).removeClass(no);
} else {
$(n).addClass(no);
}
}).mouseover(function() {
$(n).addClass(no);
}).mouseout(function() {
if($(n).mouseover()){
$(n).removeClass(no);
}
})
});
please note that I am aware that I can go css only by adding just one line.. so that isn't the question.
#navigation-top #navigation-holder li:hover > ul {
display: block;
}
We can use toggleClass instead of add/remove class.
In the below code we can remove the if check and directly call removeClass
if ($(n).mouseover()) {
$(n).removeClass(no);
}
So the final optimized code like this:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).mouseover(function () {
$(n).addClass(no);
}).mouseout(function () {
$(n).removeClass(no);
})
Fiddle Demo
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function() {
$(n).addClass(no);
}, function() {
$(n).removeClass(no);
}
);
Not tested, but that should do what you're looking for.
Refs:
https://api.jquery.com/toggleClass/
https://api.jquery.com/hover/
Off the top of my head, use toggleClass() to optimize the class switching
As well as the use of hover() to replace mouseover & mouseout events.
Therefore your code will turn out this way:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function () {
$(n).addClass(no);
}
,function () {
$(n).removeClass(no);
}
);
JS Fiddle Link: http://jsfiddle.net/g9zyd/4/
You can use toggleClass method from jQuery library, and some little trick to do your task!
function rp(el){
$(n).toggleClass(no, el.data);
}
var n = ".dropdown-menu",
no = 'drop';
$('.dropdown').click(rp).mouseover(true, rp).mouseout(false, rp);
Try demo

jQuery function to change CSS

I have the following function:
$(document).ready(function () {
$('.contents').hide();
$('.slide').click(function () {
var $this = $(this);
$(this).siblings('.contents').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'close' : 'open');
});
});
});
and would like to add a further function to the click function. I'm new to jQuery and tried to learn but still does not understand to read it. I thought I can create and append an if-clause but still struggle with that.
So I have something like that:
$this.css($('.year').is(':visible') ? 'color', 'red' : 'color', 'green');
if the click function takes place and the .contents is visible change the css setting of .year to red and if not use color green
It would be great if someone can help me out.
Thanks alot.
Is it what you are looking for?
http://jsfiddle.net/m6WrV/4/
$(document).ready(function () {
$('.content').hide();
$('.slide').click(function () {
var $this = $(this);
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
$(this).closest('.aai').find('.head').css('color', $(this).is(':visible') ? 'red' : 'green');
});
});
});
Probably you looking for something like
$this.css( 'color', $('.year').is(':visible') ? 'red' : 'green') );
You maybe also have to check if how is(':visible') works on the set of returned elements from $('.year'). Could be that is works different when some are visible and others aren't.
edit: as #adeneo points out, is(':visible') returns true if any element in the set is visible.
Perhaps this might work for you but the code is not as concise
as your snippet:
if ($(".year").is(":visible")) {
$this.css({ "color" : "red" });
} else {
$this.css({ "color" : "green" });
}

Remove styles set on specific event

I'm looking for a way to automatically remove styles set on specific event. Maybe I have ust overlooked it, but I have not seen such a feature in jQuery or vanilla js.
The idea:
$(element).hover(function() {
$(this).css({
backgroundColor : 'red',
color : 'white'
});
}, function() {
// remove styles set on handlerIn()
}).mousedown(function() {
$(this).css({
paddingTop : '+=1px',
paddingBottom : '-=1px'
});
}).mouseup(function() {
// remove styles set on mousedown
});
If I'm using $(this).removeAttr('style'); it will remove not only the styles set by specific event, but everything - where with mousedown / mouseup, that would remove the styles set by hover.
And yes, I know I can hardcode the values back to the defaults - doesn't fit!
What would be the best way to achieve such functionality?
You can do one thing for this. Declare classes for hover and unhover, something like:
.hover {padding: 5px;}
.unhover {padding: 0px;}
Then you can use .addClass('hover').removeClass('unhover') and the ilk. BTW, this is valid only if you have absolute properties.
You can declare multiple class on your css and add or remove them
$(element).hover(function() {
$(this).addClass("classHandlerIn");
}, function() {
$(this).removeClass("classHandlerIn").addClass("classHandlerOut")
}).mousedown(function() {
$(this).addClass("classMouseDown");
}).mouseup(function() {
$(this).removeClass("classMouseDown");
});
Hope this help.
EDITED
If you are feasible using arrays then see this solution.
var cssArray = [
{'background-color':'red','color':'white'},
{'background-color':'','color':''},
{'paddingTop':'+=10px','paddingBottom':'+=10px'},
{'paddingTop':'','paddingBottom':''}
]
$('div').hover(function() {
$(this).css(
cssArray[0]
);
}, function() {
$(this).css(
cssArray[1]
);
}).mousedown(function() {
$(this).css(
cssArray[2]
);
}).mouseup(function() {
$(this).css(
cssArray[3]
);
});​
SEE DEMO
First of all there is no $(element) selector.
You can create classes and gave them css properties and use with jQuery addClass() and removeClass() methods for removning specific event.
Note that bind() method is much more solid instead of hover(). Here is working jsFiddle:
$('#element').bind({
mouseenter :function() {
$(this).css({
'background-color': 'red',
'color': 'white'
});
},
mouseleave: function() {
$(this).css({
'background-color': 'white',
'color': 'black'
});
},
mousedown: function() {
$(this).css({
paddingTop : '+=10px'
});
},
mouseup: function() {
$(this).css({
paddingTop : '-=10px'
});
}
});​
And don't forgot to use CSS Pseudo-classes like :hover and :active selectors. Here link for all of them.

Categories

Resources