Is there any way to achieve a += operator within the css operator (assuming ui.value in the example has a numerical value)
Something like this(which doesn't work):
$("#resume_holder").contents().find('body').children().css('font-size', +=ui.value);
-
@MatthewBlancarte Not like that either.iambriansreed– iambriansreed2012-04-03 20:17:06 +00:00Commented Apr 3, 2012 at 20:17
Add a comment
|
5 Answers
Try:
$("#resume_holder")
.contents()
.find('body')
.children()
.css('font-size', '+=' + ui.value);
(if you're using jQuery >= 1.6)
according to the docs for css:
As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.
Example: http://jsfiddle.net/JMRPf/ (trivial I know, but proof that it works)
2 Comments
iambriansreed
Neat. I always thought you has to put in a unit when changing css values such as font size. But apparently it assumes the unit type already set. Is this documented anywhere?
jsuissa
Yea that did it -- pretty cool. I should have tried that I just assumed that it wouldn't work.
You could keep the actual value of font-size into a variable, add the ui.value, and asign it back:
var crtFontSize = parseInt($("#resume_holder").contents().find('body').children().css('font-size'));
crtFontSize += ui.value;
$("#resume_holder").contents().find('body').children().css('font-size', crtFontSize + 'px');
1 Comment
jsuissa
Thanks -- While .css() accepts +=, it does not accept *= -- so this was great.
You could use the animate method of jquery, but that would display the result gradually.. is that a problem?
$("#resume_holder").contents().find('body').children().animate('font-size', ui.value);
That would change the current font size, to what ui.value contains.
Comments
Short answer, no.
However this can be accomplished as follows (untested):
$("#resume_holder").contents().find('body').children().each(function() {
$(this).css('font-size', $(this).css('font-size') + ui.value);
});
Comments
Not sure about css but you can try to implement it using animate method.
$("#resume_holder").contents().find('body').children()
.animate({ fontSize: '+='+ui.value });
