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.
Related
I want #first to visibility:hidden normally and when mouse over it fades in and on mouse out it fades out.
EDIT
Fiddle : https://jsfiddle.net/vsdLk90s/1/
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css('opacity', '0', 'visibility', 'hidden');
}
});
When multiple properties are to be defined, you are supposed to set them using a map.
.css({
'opacity': '0',
'visibility': 'hidden'
});
A better approach would be is to have a class with visibility:hidden set to #first, and toggle class based on the conditions.. Something in these lines.
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").removeClass('hidden').css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css({
'opacity': '0'
}).addClass('hidden');
}
});
Check Fiddle
May or may not be your issue, but I believe you need to replace the following lines:
$("#first").css('opacity', '1');
and
$("#first").css('opacity', '0', 'visibility', 'hidden');
need to become:
$("#first").css({'opacity': '1'});
and
$("#first").css({'opacity': '0', 'visibility': 'hidden'});
You will likely also need to 'toggle back on' visibility upon hover over like so:
$("#first").css({'visibility': 'visible', 'opacity', '1'});
Reference for using '.css' in JQuery: https://api.jquery.com/css/
TL;DR: Rather than separating the property and the desired value with a comma, you need to use a colon (:) and you need to enclose the .css part in {}
EDIT:
If you want the div to not be displayed upon page load, then only be displayed upon hover over add the following code to your stylesheet:
#first {
visibility:hidden;
}
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" });
}
Some CSS styles need to be applied to an element on hover, and CSS styles have to be applied using javascript/jquery directly and not through stylesheets or $(this).addClass('someStyle') because I am injecting the DOM elements into another page.
We can apply the usual css styles using
$('#some-content').css({
marginTop: '60px',
display: 'inline-block'
});
How should we add the CSS styles for :hover events?
Do we have to resort to:
$('#some-content').hover(
function(){ $(this).css('display', 'block') },
function(){ $(this).css('display', 'none') }
)
I find using mouseenter and mouseleave to be better than hover. There's more control.
$("#somecontent").mouseenter(function() {
$(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
$(this).css("background", "00F").css("border-radius", "0px");
});
Try this:
$('#some-content').hover(function(){
$(this).css({ marginTop: '60px', display: 'inline-block' });
}, function(){
$(this).css({ //other stuff });
});
or using classes
$('#some-content').hover(function(){
$(this).toggleClass('newClass');
});
More info here .hover() and .toggleClass()
You should put them in a hover event:
var elem = $('#elem');
elem.hover(function () {
// ... :hover, set styles
}, function () {
// ... this function is called when the mouse leaves the item, set back the
// normal styles
});
However, I completely recommend to put your CSS in classes and use those classes in JS, you should split the languages as much as you can.
$("#someObj").hover(function(){
$(this).css(...);
}:);
http://api.jquery.com/hover/
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});
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 });
});