Skip to content

Instantly share code, notes, and snippets.

@pixind

pixind/width-tracker.js.coffee

Last active May 25, 2016 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pixind/50246c5478eae47c0355771f3d2c6ead to your computer and use it in GitHub Desktop.
Save pixind/50246c5478eae47c0355771f3d2c6ead to your computer and use it in GitHub Desktop.
Download ZIP
Raw
width-tracker.js.coffee
calculateSize = (value) ->
if value < 768
mode = 'XS - Mobile'
if value > 768 and value < 992
mode = 'SM - Tablet'
if value > 992 and value < 1200
mode = 'MD - Laptop'
if value > 1200
mode = 'LG - Monitor'
mode
updateInfo = (value) ->
$('#tracker-width').text $(this).width() + " Px."
$('#tracker-mode').text calculateSize($(this).width())
return
$(document).ready ->
$(document.body).prepend '<div class="container" style="margin-top:10px; position: fixed; z-index: 10000000;"><div class="row"><div style="width: 200px; padding-left: 10px;"><div class="alert alert-info" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Width: <span id="tracker-width"></span></strong><br /><strong>Mode: <span id="tracker-mode"></span></strong></div></div></div></div>'
updateInfo $(this).width()
return
$(window).resize ->
updateInfo $(this).width()
return
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment