Giter VIP home page Giter VIP logo

mediaclass's Introduction

MediaClass

MediaClass adds and removes responsive classnames to the document or individual elements.

What queries does it support, exactly?

  • width / height / aspect-ratio / orientation
  • device-, this-, min-, max-, below-, and above-.
  • em, in, pt, px, and %.
MediaClass("mobile", "(max-width: 480px)");

So, how do I use it?

Then, when the page is at or below 480px in width.

<html class="mobile">

Additionally, selectors and a this syntax target elements and their measurements.

MediaClass("small", ".widget:media(this-max-width: 480px)");

Then, when the element is at or below 480px in width.

<div class="widget small"></div>

What else does it do?

The above or below syntax expands targeting. mobile-small triggers when the browser window is below 20em (320px) in width.

MediaClass("mobile-small", "(max-width: 20em)");

Assign the query to a variable.

var mq = MediaClass("mobile-small", "(max-width: 20em)");

Change it.

mq.media = "(below-width: 20em)");

Remove it.

mq.remove();

What's the license?

MIT

And you are?

MediaClass is a project by Jonathan Neal.

mediaclass's People

Contributors

jonathantneal avatar luchoooo avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jalalhejazi bertomartin robnunez nunezr mdarens sewdn avgp luchoooo traversal gitastrophe humancompanion alexandrethsilva

mediaclass's Issues

MediaClass updates can trigger incorrectly when elements are temporarily hidden

steps to reproduce:

  1. Invoke MediaClass with "this-max-width" predicate on an element with a fixed width, such that the predicate should not evalutate to true, e.g.
<script> var mc = new MediaClass("mobile", ".mobile-responsive:media(this-max-width: 100px)"); </script>

  1. observe that class "mobile" is not added to .mobile-responsive

  2. hide the div.mobile-responsive with "display: none;"

  3. blur the browser tab (click over to another browser tab)

  4. click back to the original tab

  5. show the div.mobile-responsive with "display: block;"

  6. observe that class "mobile" has been added to the div while it was hidden

suggestion:

  • Can you prevent the mediaLoop from being executed on elements with display: none?

jshint

Using MediaClass with the doc instructions

MediaClass("mobile", "(max-width: 480px)");

Gets an error in jshint
Missing 'new' prefix when invoking a constructor.

Any ideas ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.