Skip to content

Instantly share code, notes, and snippets.

@torounit

torounit/jQuery.semiMediaQuery.coffee

Last active December 22, 2015 15:38
Show Gist options
  • Save torounit/6493312 to your computer and use it in GitHub Desktop.
Save torounit/6493312 to your computer and use it in GitHub Desktop.
Download ZIP
ウィンドウサイズで、CSSを切り替えるのを実装するためのjQueryプラグイン。media queriesを使うほどでもない場合用。
Raw
jQuery.semiMediaQuery.coffee
do ($=jQuery) ->
$.fn.semiMediaQuery = (breakpoints) ->
@init = (breakpoints) =>
@breakpoints = breakpoints
@getElements()
@delegateEvents()
@setWidthClass()
@getElements = () =>
@$window = $(window)
@$document = $(document)
@delegateEvents = () =>
@$window.on "load", @setWidthClass.bind(@)
@$window.on "resize", @setWidthClass.bind(@)
@getWidth = () =>
@width();
@setWidthClass = () =>
width = @getWidth()
for i, point of @breakpoints
if point < width
@.addClass( "wid-gt-"+point )
@.removeClass( "wid-lte-"+point )
else
@.removeClass( "wid-gt-"+point )
@.addClass( "wid-lte-"+point )
@init(breakpoints);
Raw
jQuery.semiMediaQuery.how.to.use.coffee
do ($=jQuery) ->
$ ->
$("html").semiMediaQuery(Array( 960, 1024, 1200 ));
Raw
output.html
<html class="wid-lte-1200 wid-lte-960 wid-lte-1024"></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment