2017 © Pedro Peláez
 

component jquery-breakpoint-check

Check the current visibility of bootstrap 3 breakpoints

image

cakebake/jquery-breakpoint-check

Check the current visibility of bootstrap 3 breakpoints

  • Thursday, December 17, 2015
  • by cakebake
  • Repository
  • 2 Watchers
  • 9 Stars
  • 24 Installations
  • HTML
  • 0 Dependents
  • 0 Suggesters
  • 4 Forks
  • 1 Open issues
  • 3 Versions
  • 9 % Grown

The README.md

jQuery Bootstrap 3 Breakpoint Check

Check the current visibility of bootstrap 3 breakpoints., (*1)

Why another breakpoint check for bootstrap 3?

The plugin I have created for simple reasons:, (*2)

  • I needed something that works and is easy to integrate into existing projects (in my daily work)
  • I did not want to create a new code in each project. A plugin repository is mostly stable
  • Bootstrap did not provide its own Javascript API for this
  • I had fun doing it^^

Installation

You can download the plugin manually or install by composer. ... and the plugin requires jQuery. ;) jQuery must be properly integrated into the page., (*3)

If you do not have Composer, you may install it by following the instructions at getcomposer.org., (*4)

You can then install the package using the following command:, (*5)

php composer.phar require --prefer-dist cakebake/jquery-breakpoint-check "*"

or add, (*6)

"cakebake/jquery-breakpoint-check": "*"

to the require section of your composer.json file and run php composer.phar update., (*7)

Manual Installation

Download:

Include one of the two javascript files from the folder js after jQuery include. For productive projects, you can use the jquery-breakpoint-check.min.js version. For more details see file test.html., (*8)

Example:, (*9)

<script src="js/jquery-breakpoint-check.min.js"></script>

Usage

Is the current screen resolution xs breakpoint?, (*10)

if ($.isXs()) {
    alert('Is xs breakpoint :)');
}

Is the current screen resolution sm breakpoint?, (*11)

if ($.isSm()) {
    alert('Is sm breakpoint :)');
}

Is the current screen resolution md breakpoint?, (*12)

if ($.isMd()) {
    alert('Is md :)');
}

Is the current screen resolution lg breakpoint?, (*13)

if ($.isLg()) {
    alert('Is lg breakpoint :)');
}

Is the current screen resolution custom breakpoint?, (*14)

Create a CSS-Class with visibility for your custom breakpoint. For example:, (*15)

.visible-grid-float-breakpoint {
    @media (min-width: @grid-float-breakpoint-max) {
        display: none;
        visibility: hidden;
    }
}

if ($.isBreakpoint('grid-float-breakpoint')) {
    alert('It is my custom breakpoint :)');
}

Check the current breakpoint on screen resize., (*16)

$(window).resize(function () {
    if ($.isXs()) {
        alert('Is xs breakpoint :)');
    } else if ($.isSm()) {
        alert('Is sm breakpoint :)');
    } else if ($.isMd()) {
        alert('Is md :)');
    } else if ($.isLg()) {
        alert('Is lg breakpoint :)');
    }
}).resize();

Hide a div on xs and lg breakpoint., (*17)

$(window).resize(function () {
    var selector = $("div.selector");
    if ($.isXs() || $.isLg()) {
        selector.hide();
    } else {
        selector.hide();
    }
}).resize();

Copyright (C) Jens A. (cakebake), (*18)

Released under the MIT license, (*19)

The Versions

17/12 2015

dev-master

9999999-dev

Check the current visibility of bootstrap 3 breakpoints

  Sources   Download

MIT

The Requires

 

by Jens A. (cakebake)

jquery bootstrap javascript responsive breakpoint

17/12 2015

1.0.1

1.0.1.0

Check the current visibility of bootstrap 3 breakpoints

  Sources   Download

MIT

The Requires

 

by Jens A. (cakebake)

jquery bootstrap javascript responsive breakpoint

06/05 2015

1.0.0

1.0.0.0

Check the current visibility of bootstrap 3 breakpoints

  Sources   Download

MIT

by Jens A. (cakebake)

jquery bootstrap javascript responsive breakpoint