jQuery function to change CSS - javascript

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" });
}

Related

CSS toggler using Javascript

I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.
You just need to change the if condition so it depends on the value of white-space property:
$(document).ready(function () {
$('tr').click(function () {
var $this = $(this);
if($this.css('white-space') === 'nowrap') {
$this.css('white-space', 'normal');
}
else {
$this.css('white-space', 'nowrap');
}
});
});
You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:
$(document).ready(function () {
$('tr').click(function () {
if($(this).css("white-space") == "nowrap") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
Hopefully this helps!

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/

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.

Change a CSS selectors child on hover in jQuery

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 });
});

jQuery .hover effect 'color' not working properly

I'm trying to get a simple jQuery color hover effect for a tags. You can in this jsFiddle that it's not working properly. Also, how would I get an easing effect on it? Thank you.
$(document).ready(function() {
var origColor = $("#links-top-contact").children('a').css("color");
$("links-top-contact").children('a').hover(function() {
$(this).css('color' , 'blue');
$("links-top-contact").children('a').hover(function() {
$(this).css(origColor);
});
});
});
$(document).ready(function() {
var origColor = $("#links-top-contact a").css("color");
$("#links-top-contact a").hover(function() {
$(this).css({color:'blue'});
},function() {
$(this).css({color:origColor});
});
});
Updated fiddle
http://jsfiddle.net/uHYVf/

Categories

Resources