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

• jquery

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)

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

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.

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

Not sure about css but you can try to implement it using animate method.

$("#resume_holder").contents().find('body').children()
.animate({ fontSize: '+='+ui.value });