Skip to content

Instantly share code, notes, and snippets.

@qrush
Created October 2, 2011 16:08
Show Gist options
  • Save qrush/1257579 to your computer and use it in GitHub Desktop.
Save qrush/1257579 to your computer and use it in GitHub Desktop.
coffeescript vs javascript. rewriting http://www.spookandpuff.com/examples/dynamicTextSize.html
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.35,
scaleSource = $body.width(),
maxScale = 600,
minScale = 30;
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
# based on http://www.spookandpuff.com/examples/dynamicTextSize.html
class BodyScaler
scaleFactor: 0.35
maxScale: 400
minScale: 30
constructor: ->
@body = $("body")
scale: =>
scaleSource = @body.width()
fontSize = scaleSource * @scaleFactor
if (fontSize > @maxScale)
fontSize = @maxScale
if (fontSize < @minScale)
fontSize = @minScale
@body.css("font-size", "#{fontSize}%")
$ ->
scaler = new BodyScaler()
scaler.scale()
$(window).resize(scaler.scale)
@sikachu
Copy link

sikachu commented Oct 2, 2011

On line 15 to 18, can you write

    fontSize = @maxScale if (fontSize > @maxScale)
    fontSize = @minScale if (fontSize < @minScale)

?

@dasch
Copy link

dasch commented Oct 2, 2011

And perhaps lose the parentheses ;-)

@trptcolin
Copy link

Aw c'mon, make it a fair fight :) This one loses the ridiculous indentation & comments in the js: https://gist.github.com/1257594

@drnic
Copy link

drnic commented Oct 2, 2011

Yes, @trptcolin's version is a much fairer comparsion :)

@qrush
Copy link
Author

qrush commented Oct 2, 2011

Ok @trptcolin @drnic, indenting done!

@jrgarcia
Copy link

jrgarcia commented Oct 2, 2011

Also

$(function() {
...
});

is shorthand for

$(document).ready(function() {
...
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment