From 1ffea033384a934b4c2bf86acbee247b26191241 Mon Sep 17 00:00:00 2001 From: Stefan Seiz Date: Thu, 16 Nov 2017 10:54:59 +0100 Subject: [PATCH] initial commit 1.0 --- LICENSE | 21 +++++++++ README.md | 27 +++++++++++ _config.yml | 1 + demo.html | 106 ++++++++++++++++++++++++++++++++++++++++++++ jquery.overflown.js | 58 ++++++++++++++++++++++++ 5 files changed, 213 insertions(+) create mode 100644 LICENSE create mode 100644 README.md create mode 100644 _config.yml create mode 100644 demo.html create mode 100644 jquery.overflown.js diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..ee461ab --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 Zeta Software GmbH + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..76d3bc8 --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ +# jquery.overflown.js + +With `.overflown()` you can query a dom element and find out if it is being overflown, meaning if any of its children is overflowing the parent. + +This might for instance be useful for navigation-menues where you'd like to display a hamburger-button or alike if all navigation-entries wouldn't fit in the container (and you don't want to linewrap your navigation-menue). + + +### Usage + + if ( $(".nav").overflown(direction) ){ + $(".nav").addClass("overflown"); + } + +Where `direction` is optional and can either be left out or be `"x"` or `"y"` to limit to the x- or y-axis. So if you'd like to specifically find out if an element is being overflown vertically, you'd use `.overflown("y")`, otherwise just use `.overflown()` + +To use jquery.overflown, jQuery 1.7 or newer ist required and you'd include it in your document, something like this: + + // load jQuery first + + // then load the .overflown() plugin + + +### [See the jquery.overflown.js demo](https://zetasoftware.github.io/jquery-overflown-plugin/demo.html) + +### License +jquery.overflown.js was written by Zeta Software GmbH for use in Zeta Producer and is licensed under the MIT License (MIT) . This license is also supplied with the release and source code. +As stated in the license, absolutely no warranty is provided. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c741881 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-slate \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..ba4200e --- /dev/null +++ b/demo.html @@ -0,0 +1,106 @@ + + + + + jquery.overflown demo + + + + + + + + +

+ jquery.overflown demo +

+

+ Change the width of your browser-window to see how the below list reacts when one of its children is overflowing. +

+ +

+ Is the List overflown? No. +

+

+ Usage and download +

+ + + + diff --git a/jquery.overflown.js b/jquery.overflown.js new file mode 100644 index 0000000..0d64407 --- /dev/null +++ b/jquery.overflown.js @@ -0,0 +1,58 @@ +/*! + * jquery.overflown.js + * @version: 1.0 + * @author: Zeta Software GmbH + * + * https://github.com/ZetaSoftware/jquery-overflown-plugin + * License: MIT + */ + +// UMD https://github.com/umdjs/umd/blob/master/templates/jqueryPlugin.js +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof module === 'object' && module.exports) { + // Node/CommonJS + module.exports = function( root, jQuery ) { + if ( jQuery === undefined ) { + // require('jQuery') returns a factory that requires window to + // build a jQuery instance, we normalize how we use modules + // that require this pattern but the window provided is a noop + // if it's defined (how jquery works) + if ( typeof window !== 'undefined' ) { + jQuery = require('jquery'); + } + else { + jQuery = require('jquery')(root); + } + } + factory(jQuery); + return jQuery; + }; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + $.fn.overflown = function (direction) { + if (typeof(direction)==='undefined') direction = "any"; + var e=this[0]; + var buffer = 4; // safety-buffer to compensate browser rounding errors and such + if ( typeof e !== "undefined" ){ + switch(direction) { + case "x": + return e.scrollWidth>(e.clientWidth+buffer); + break; + case "y": + return e.scrollHeight>(e.clientHeight+buffer); + break; + default: + return e.scrollHeight>(e.clientHeight+buffer)||e.scrollWidth>(e.clientWidth+buffer); + } + } + else{ + return false; + } + }; +})); \ No newline at end of file