initial commit 1.0

ZetaSoftware · Nov 16, 2017 · 1ffea03 · 1ffea03
commit 1ffea03
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 0 deletions.
diff --git a/LICENSE 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
@@ -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
+	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+	// then load the .overflown() plugin
+	<script src="jquery.overflown.js"></script>
+
+### [See the jquery.overflown.js demo](https://zetasoftware.github.io/jquery-overflown-plugin/demo.html)
+
+### License
+jquery.overflown.js was written by <a href="https://www.zeta-software.de/">Zeta Software GmbH</a> for use in <a href="https://www.zeta-producer.com/">Zeta Producer</a> and is licensed under the <a href="https://opensource.org/licenses/MIT">MIT License (MIT) </a>. 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
@@ -0,0 +1 @@
+theme: jekyll-theme-slate
diff --git a/demo.html b/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="utf-8" />
+	<title>jquery.overflown demo</title>
+
+	<style>
+		html {
+		  box-sizing: border-box;
+		  font-family: sans-serif;
+		}
+		*, *:before, *:after {
+		  box-sizing: inherit;
+		}
+		body{padding: 20px;}
+
+		ul#nav{
+			border: 1px solid black;
+			max-height: 48px;
+			overflow: hidden;
+			margin: 0;
+			padding: 0;
+			position: relative;
+		}
+		ul#nav.overflown{
+			border: 1px solid red;
+		}
+		ul#nav li{
+			height: 48px;
+			line-height: 28px;
+			list-style-type: none;
+			float: left;
+			margin-right: .4em;
+			background-color: #f9f9f9;
+			padding: 10px;
+		}
+		ul#nav li:last-child{
+			margin-right: 0;
+		}
+		ul#nav .mobilemenu{
+			display: none;
+			border-left: .4em solid white;
+			font-size: 28px;
+			line-height: 22px;
+		}
+		ul#nav.overflown .mobilemenu{
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+	</style>
+	<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
+	<script src="jquery.overflown.js"></script>
+</head>
+
+
+<body>
+	<h1>
+	jquery.overflown demo
+	</h1>
+	<p>
+		Change the width of your browser-window to see how the below list reacts when one of its children is overflowing.
+	</p>
+	<ul id="nav">
+		<li>Menu 1</li>
+		<li>Menu 2</li>
+		<li>Menu 3</li>
+		<li>Menu 4</li>
+		<li>Menu 5</li>
+		<li>Menu 6</li>
+		<li>Menu 7</li>
+		<li>Menu 8</li>
+		<li>Menu 9</li>
+		<li>Menu 10</li>
+		<li class="mobilemenu">≡</li>
+	</ul>
+	<p>
+	Is the List overflown? <span class="console">No</span>.
+	</p>
+	<p style="margin-top: 2em;">
+	 <a href="https://github.com/ZetaSoftware/jquery-overflown-plugin/tree/master">Usage and download</a>
+	</p>
+
+	<script>
+		function setoverflown(){
+			$("span.console").html( $("#nav").overflown() ? "Yes" : "No" );
+
+			if ( $("#nav").overflown() ){
+				$("#nav").addClass("overflown");
+			}
+			else{
+				$("#nav").removeClass("overflown");
+			}
+		}
+
+		$(window).resize(function() {
+			setoverflown();
+		});	
+		$(document).ready(function() {
+			setoverflown();
+		});
+	</script>	
+</body>
+</html>
diff --git a/jquery.overflown.js 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;
+		}
+    };
+}));