diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..8515d63 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,15 @@ +{ + "extends": "airbnb/legacy", + "rules": { + // Override Airbnb's style guide defaults for ES5 + "camelcase": [2, {"properties": "always"}], + "indent": [2, 4, {"SwitchCase": 1}], + "max-len": [2, 256, 4], + "no-param-reassign": 0, + "no-shadow": 0, + "no-use-before-define": 0, + // "padded-blocks": 0, + // "spaced-comment": 0, + "vars-on-top": 0 + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/README.md b/README.md index 78124ac..5707f31 100644 --- a/README.md +++ b/README.md @@ -1,85 +1,183 @@ -# jquery-scrollspy +# NOTE: This is the latest version of ScrollSpy, which includes a ton of bug fixes and efficiency improvements. It's recommended that you use this version for now instead of the official (which hasn't been updated in a while). -An adaptation of the Mootools Scrollspy ( http://davidwalsh.name/mootools-scrollspy ) plugin for jQuery +# jQuery-ScrollSpy -(c) 2011 Samuel Alexander (sxalexander@gmail.com) +An adaptation of the Mootools Scrollspy (http://davidwalsh.name/mootools-scrollspy) plugin for jQuery + +(c) 2011 Samuel Alexander (https://github.com/sxalexander/jquery-scrollspy) + +(c) 2015 SoftwareSpot Released under The MIT License. ## Description: -scrollspy is a simple jQuery plugin for firing events based on where the user has scrolled to in a page. - +ScrollSpy is a simple jQuery plugin for firing events based on where the user has scrolled to in a page. ## Homepage: -http://github.com/sxalexander/jquery-scrollspy +https://github.com/softwarespot/jquery-scrollspy ## Source: Hosted at GitHub; browse at: - http://github.com/sxalexander/jquery-scrollspy/tree/master + https://github.com/softwarespot/jquery-scrollspy/tree/master Or clone from: - git://github.com/sxalexander/jquery-scrollspy.git + git://github.com/softwarespot/jquery-scrollspy.git ## Usage: -1. Insert the necessary elements in your document's `` section, e.g.: - - +1. Insert the necessary elements in to your document's `` section, e.g.: + +```html + + +``` + +2. Initialise ScrollSpy once the DOM has been loaded: - Remember to include jquery.scrollspy.js *after* including the main jQuery library. +```javascript + + $('#sticky-navigation').scrollspy({ + min: $nav.offset().top, + onEnter: function(element, position) { + $nav.addClass('fixed'); + }, + onLeave: function(element, position) { + $nav.removeClass('fixed'); + } + }); + + }); + +``` Check out the /examples for more info ! ## Documentation: -Options for ScrollSpy include: +ScrollSpy function signature: +```javascript + $('container').scrollspy(options, action) +``` + +Default options for ScrollSpy: +```javascript +// default options for ScrollSpy +var defaults = { + // the offset to be applied to the left and top positions of the container + buffer: 0, + + // the element to apply the 'scrolling' event to (default window) + container: window, + + // the maximum value of the X or Y coordinate, depending on mode the selected + max: 0, + + // the maximum value of the X or Y coordinate, depending on mode the selected + min: 0, - min: (defaults to 0) The minimum value of the X or Y coordinate, depending on mode. - max: (defaults to 0) The maximum value of the X or Y coordinate, depending on mode. - mode: (defaults to 'vertical') Defines whether to listen to X or Y scrolling. - container: (defaults to window) The element whose scrolling to listen to. + // whether to listen to the X (horizontal) or Y (vertical) scrolling + mode: 'vertical', -Events for ScrollSpy include: + // namespace to append to the 'scroll' event + namespace: 'scrollspy', - scrollTick: Fires on each scroll event within the min and max parameters. Receives as parameters: - + // call the following callback function every time the user enters the min / max zone + onEnter: null, + + // call the following callback function every time the user leaves the min / max zone + onLeave: null, + + // call the following callback function every time the user leaves the top zone + onLeaveTop: null, + + // call the following callback function every time the user leaves the bottom zone + onLeaveBottom: null, + + // call the following callback function on each scroll event within the min and max parameters + onTick: null, + + // call the following callback function on each scroll event when the element is inside the viewable view port + onView: null +}; +``` + +Events are triggered by ScrollSpy are: + + scrollTick: Fires on each scroll event within the min and max parameters: position: an object with the current X and Y position. inside: a Boolean value for whether or not the user is within the min and max parameters enters: the number of times the min / max has been entered. leaves: the number of times the min / max has been left. - - scrollEnter: Fires every time the user enters the min / max zone. + + scrollEnter: Fires every time the user enters the min / max zone: position: an object with the current X and Y position. enters: the number of times the min / max has been entered. - - scrollLeave: Fires every time the user leaves the min / max zone. + + scrollLeave: Fires every time the user leaves the min / max zone: position: an object with the current X and Y position. leaves: the number of times the min / max has been left. + scrollLeaveTop: Fires every time the user leaves the top zone: + position: an object with the current X and Y position. + leaves: the number of times the min / max has been left. + + scrollLeaveBottom: Fires every time the user leaves the bottom zone: + position: an object with the current X and Y position. + leaves: the number of times the min / max has been left. + + scrollView: Fires every time the element is inside the viewable view port: + position: an object with the current X and Y position. + leaves: the number of times the min / max has been left. + +### Tidy up -## A note on forking: +To destroy ScrollSpy for a particular container, simple pass 'destroy' as the action parameter. The only options that will be honoured are `container` and `namespace`. + +## A note about forking: By forking this project you hereby grant permission for any commits to your fork to be merged back into this repository and, with attribution, be released under the terms of -the MIT License. \ No newline at end of file +the MIT License. + +## Contribute + +To contribute to the project, you will first need to install [node](https://nodejs.org) globally on your system. Once installation has completed, change the working directory to the plugin's location and run the following command: + +```shell + npm install +``` + +After installation of the local modules, you're ready to start contributing to the project. Before you submit your PR, please don't forget to call `gulp`, which will run against [JSHint](http://jshint.com) for any errors, but will also minify the plugin. + +##### Watch +Call the following command to start 'watching' for any changes to the main JavaScript file(s). This will automatically invoke JSHint and Uglify. +```shell + gulp watch +``` + +##### JSHint +Call the following command to invoke JSHint and check that the changes meet the requirements set in .jshintrc. +```shell + gulp jshint +``` + +##### Uglify +Call the following command to invoke Uglify, which will minify the main JavaScript file(s) and output to a .min.js file respectively. +```shell + gulp uglify +``` + +##### Build +Call the following command to invoke both JSHint and Uglify. +```shell + gulp +``` diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..8257ebd --- /dev/null +++ b/bower.json @@ -0,0 +1,18 @@ +{ + "name": "jquery-scrollspy", + "homepage": "https://github.com/sxalexander/jquery-scrollspy/", + "description": "scrollspy is a simple jQuery plugin for firing events based on where the user has scrolled to in a page.", + "main": "jquery-scrollspy.min.js", + "keywords": [ + "scrolling", + "scroll" + ], + "license": "MIT", + "ignore": [ + ], + "dependencies": { + "jquery": ">=1.7.0" + }, + "devDependencies": { + } +} diff --git a/examples/bootstrap.css b/examples/bootstrap.css deleted file mode 100644 index fc0edcd..0000000 --- a/examples/bootstrap.css +++ /dev/null @@ -1,2363 +0,0 @@ -/*! - * Bootstrap v1.3.0 - * - * Copyright 2011 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Tue Oct 4 21:26:21 PDT 2011 - */ -/* Reset.less - * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). - * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ -html, body { - margin: 0; - padding: 0; -} -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -cite, -code, -del, -dfn, -em, -img, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -dd, -dl, -dt, -li, -ol, -ul, -fieldset, -form, -label, -legend, -button, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td { - margin: 0; - padding: 0; - border: 0; - font-weight: normal; - font-style: normal; - font-size: 100%; - line-height: 1; - font-family: inherit; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -ol, ul { - list-style: none; -} -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} -html { - overflow-y: scroll; - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -a:focus { - outline: thin dotted; -} -a:hover, a:active { - outline: 0; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} -audio:not([controls]) { - display: none; -} -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} -img { - border: 0; - -ms-interpolation-mode: bicubic; -} -button, -input, -select, -textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} -button, input { - line-height: normal; - *overflow: visible; -} -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; -} -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; -} -input[type="search"] { - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -textarea { - overflow: auto; - vertical-align: top; -} -/* Variables.less - * Variables to customize the look and feel of Bootstrap - * ----------------------------------------------------- */ -/* Mixins.less - * Snippets of reusable CSS to develop faster and keep code readable - * ----------------------------------------------------------------- */ -/* - * Scaffolding - * Basic and global styles for generating a grid system, structural layout, and page templates - * ------------------------------------------------------------------------------------------- */ -html, body { - background-color: #ffffff; -} -body { - margin: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: 18px; - color: #404040; -} -.container { - width: 940px; - margin-left: auto; - margin-right: auto; - zoom: 1; -} -.container:before, .container:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.container:after { - clear: both; -} -.container-fluid { - position: relative; - min-width: 940px; - padding-left: 20px; - padding-right: 20px; - zoom: 1; -} -.container-fluid:before, .container-fluid:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.container-fluid:after { - clear: both; -} -.container-fluid > .sidebar { - float: left; - width: 220px; -} -.container-fluid > .content { - margin-left: 240px; -} -a { - color: #0069d6; - text-decoration: none; - line-height: inherit; - font-weight: inherit; -} -a:hover { - color: #00438a; - text-decoration: underline; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.hide { - display: none; -} -.show { - display: block; -} -.row { - zoom: 1; - margin-left: -20px; -} -.row:before, .row:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.row:after { - clear: both; -} -[class*="span"] { - display: inline; - float: left; - margin-left: 20px; -} -.span1 { - width: 40px; -} -.span2 { - width: 100px; -} -.span3 { - width: 160px; -} -.span4 { - width: 220px; -} -.span5 { - width: 280px; -} -.span6 { - width: 340px; -} -.span7 { - width: 400px; -} -.span8 { - width: 460px; -} -.span9 { - width: 520px; -} -.span10 { - width: 580px; -} -.span11 { - width: 640px; -} -.span12 { - width: 700px; -} -.span13 { - width: 760px; -} -.span14 { - width: 820px; -} -.span15 { - width: 880px; -} -.span16 { - width: 940px; -} -.span17 { - width: 1000px; -} -.span18 { - width: 1060px; -} -.span19 { - width: 1120px; -} -.span20 { - width: 1180px; -} -.span21 { - width: 1240px; -} -.span22 { - width: 1300px; -} -.span23 { - width: 1360px; -} -.span24 { - width: 1420px; -} -.offset1 { - margin-left: 80px; -} -.offset2 { - margin-left: 140px; -} -.offset3 { - margin-left: 200px; -} -.offset4 { - margin-left: 260px; -} -.offset5 { - margin-left: 320px; -} -.offset6 { - margin-left: 380px; -} -.offset7 { - margin-left: 440px; -} -.offset8 { - margin-left: 500px; -} -.offset9 { - margin-left: 560px; -} -.offset10 { - margin-left: 620px; -} -.offset11 { - margin-left: 680px; -} -.offset12 { - margin-left: 740px; -} -.span-one-third { - width: 300px; -} -.span-two-thirds { - width: 620px; -} -.offset-one-third { - margin-left: 340px; -} -.offset-two-thirds { - margin-left: 660px; -} -/* Typography.less - * Headings, body text, lists, code, and more for a versatile and durable typography system - * ---------------------------------------------------------------------------------------- */ -p { - font-size: 13px; - font-weight: normal; - line-height: 18px; - margin-bottom: 9px; -} -p small { - font-size: 11px; - color: #bfbfbf; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: bold; - color: #404040; -} -h1 small, -h2 small, -h3 small, -h4 small, -h5 small, -h6 small { - color: #bfbfbf; -} -h1 { - margin-bottom: 18px; - font-size: 30px; - line-height: 36px; -} -h1 small { - font-size: 18px; -} -h2 { - font-size: 24px; - line-height: 36px; -} -h2 small { - font-size: 14px; -} -h3, -h4, -h5, -h6 { - line-height: 36px; -} -h3 { - font-size: 18px; -} -h3 small { - font-size: 14px; -} -h4 { - font-size: 16px; -} -h4 small { - font-size: 12px; -} -h5 { - font-size: 14px; -} -h6 { - font-size: 13px; - color: #bfbfbf; - text-transform: uppercase; -} -ul, ol { - margin: 0 0 18px 25px; -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} -ul { - list-style: disc; -} -ol { - list-style: decimal; -} -li { - line-height: 18px; - color: #808080; -} -ul.unstyled { - list-style: none; - margin-left: 0; -} -dl { - margin-bottom: 18px; -} -dl dt, dl dd { - line-height: 18px; -} -dl dt { - font-weight: bold; -} -dl dd { - margin-left: 9px; -} -hr { - margin: 20px 0 19px; - border: 0; - border-bottom: 1px solid #eee; -} -strong { - font-style: inherit; - font-weight: bold; -} -em { - font-style: italic; - font-weight: inherit; - line-height: inherit; -} -.muted { - color: #bfbfbf; -} -blockquote { - margin-bottom: 18px; - border-left: 5px solid #eee; - padding-left: 15px; -} -blockquote p { - font-size: 14px; - font-weight: 300; - line-height: 18px; - margin-bottom: 0; -} -blockquote small { - display: block; - font-size: 12px; - font-weight: 300; - line-height: 18px; - color: #bfbfbf; -} -blockquote small:before { - content: '\2014 \00A0'; -} -address { - display: block; - line-height: 18px; - margin-bottom: 18px; -} -code, pre { - padding: 0 3px 2px; - font-family: Monaco, Andale Mono, Courier New, monospace; - font-size: 12px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -code { - background-color: #fee9cc; - color: rgba(0, 0, 0, 0.75); - padding: 1px 3px; -} -pre { - background-color: #f5f5f5; - display: block; - padding: 8.5px; - margin: 0 0 18px; - line-height: 18px; - font-size: 12px; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} -/* Forms.less - * Base styles for various input types, form layouts, and states - * ------------------------------------------------------------- */ -form { - margin-bottom: 18px; -} -fieldset { - margin-bottom: 18px; - padding-top: 18px; -} -fieldset legend { - display: block; - padding-left: 150px; - font-size: 19.5px; - line-height: 1; - color: #404040; - *padding: 0 0 5px 145px; - /* IE6-7 */ - - *line-height: 1.5; - /* IE6-7 */ - -} -form .clearfix { - margin-bottom: 18px; - zoom: 1; -} -form .clearfix:before, form .clearfix:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -form .clearfix:after { - clear: both; -} -label, -input, -select, -textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: normal; -} -label { - padding-top: 6px; - font-size: 13px; - line-height: 18px; - float: left; - width: 130px; - text-align: right; - color: #404040; -} -form .input { - margin-left: 150px; -} -input[type=checkbox], input[type=radio] { - cursor: pointer; -} -input, -textarea, -select, -.uneditable-input { - display: inline-block; - width: 210px; - height: 18px; - padding: 4px; - font-size: 13px; - line-height: 18px; - color: #808080; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -/* mini reset for non-html5 file types */ -input[type=checkbox], input[type=radio] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; - /* IE6-7 */ - - line-height: normal; - border: none; -} -input[type=file] { - background-color: #ffffff; - padding: initial; - border: initial; - line-height: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -input[type=button], input[type=reset], input[type=submit] { - width: auto; - height: auto; -} -select, input[type=file] { - height: 27px; - line-height: 27px; - *margin-top: 4px; - /* For IE7, add top margin to align select with labels */ - -} -select[multiple] { - height: inherit; -} -textarea { - height: auto; -} -.uneditable-input { - background-color: #ffffff; - display: block; - border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - cursor: not-allowed; -} -:-moz-placeholder { - color: #bfbfbf; -} -::-webkit-input-placeholder { - color: #bfbfbf; -} -input, textarea { - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -} -input:focus, textarea:focus { - outline: 0; - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -} -input[type=file]:focus, input[type=checkbox]:focus, select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - outline: 1px dotted #666; -} -form div.clearfix.error { - background: #fae5e3; - padding: 10px 0; - margin: -10px 0 10px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block { - color: #9d261d; -} -form div.clearfix.error input, form div.clearfix.error textarea { - border-color: #c87872; - -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25); - -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25); - box-shadow: 0 0 3px rgba(171, 41, 32, 0.25); -} -form div.clearfix.error input:focus, form div.clearfix.error textarea:focus { - border-color: #b9554d; - -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); - -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); - box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); -} -form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on { - background: #f4c8c5; - border-color: #c87872; - color: #b9554d; -} -.input-mini, -input.mini, -textarea.mini, -select.mini { - width: 60px; -} -.input-small, -input.small, -textarea.small, -select.small { - width: 90px; -} -.input-medium, -input.medium, -textarea.medium, -select.medium { - width: 150px; -} -.input-large, -input.large, -textarea.large, -select.large { - width: 210px; -} -.input-xlarge, -input.xlarge, -textarea.xlarge, -select.xlarge { - width: 270px; -} -.input-xxlarge, -input.xxlarge, -textarea.xxlarge, -select.xxlarge { - width: 530px; -} -textarea.xxlarge { - overflow-y: auto; -} -input.span1, textarea.span1, select.span1 { - display: inline-block; - float: none; - width: 30px; - margin-left: 0; -} -input.span2, textarea.span2, select.span2 { - display: inline-block; - float: none; - width: 90px; - margin-left: 0; -} -input.span3, textarea.span3, select.span3 { - display: inline-block; - float: none; - width: 150px; - margin-left: 0; -} -input.span4, textarea.span4, select.span4 { - display: inline-block; - float: none; - width: 210px; - margin-left: 0; -} -input.span5, textarea.span5, select.span5 { - display: inline-block; - float: none; - width: 270px; - margin-left: 0; -} -input.span6, textarea.span6, select.span6 { - display: inline-block; - float: none; - width: 330px; - margin-left: 0; -} -input.span7, textarea.span7, select.span7 { - display: inline-block; - float: none; - width: 390px; - margin-left: 0; -} -input.span8, textarea.span8, select.span8 { - display: inline-block; - float: none; - width: 450px; - margin-left: 0; -} -input.span9, textarea.span9, select.span9 { - display: inline-block; - float: none; - width: 510px; - margin-left: 0; -} -input.span10, textarea.span10, select.span10 { - display: inline-block; - float: none; - width: 570px; - margin-left: 0; -} -input.span11, textarea.span11, select.span11 { - display: inline-block; - float: none; - width: 630px; - margin-left: 0; -} -input.span12, textarea.span12, select.span12 { - display: inline-block; - float: none; - width: 690px; - margin-left: 0; -} -input.span13, textarea.span13, select.span13 { - display: inline-block; - float: none; - width: 750px; - margin-left: 0; -} -input.span14, textarea.span14, select.span14 { - display: inline-block; - float: none; - width: 810px; - margin-left: 0; -} -input.span15, textarea.span15, select.span15 { - display: inline-block; - float: none; - width: 870px; - margin-left: 0; -} -input.span16, textarea.span16, select.span16 { - display: inline-block; - float: none; - width: 930px; - margin-left: 0; -} -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - background-color: #f5f5f5; - border-color: #ddd; - cursor: not-allowed; -} -.actions { - background: #f5f5f5; - margin-top: 18px; - margin-bottom: 18px; - padding: 17px 20px 18px 150px; - border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; -} -.actions .secondary-action { - float: right; -} -.actions .secondary-action a { - line-height: 30px; -} -.actions .secondary-action a:hover { - text-decoration: underline; -} -.help-inline, .help-block { - font-size: 11px; - line-height: 18px; - color: #bfbfbf; -} -.help-inline { - padding-left: 5px; - *position: relative; - /* IE6-7 */ - - *top: -5px; - /* IE6-7 */ - -} -.help-block { - display: block; - max-width: 600px; -} -.inline-inputs { - color: #808080; -} -.inline-inputs span, .inline-inputs input { - display: inline-block; -} -.inline-inputs input.mini { - width: 60px; -} -.inline-inputs input.small { - width: 90px; -} -.inline-inputs span { - padding: 0 2px 0 1px; -} -.input-prepend input, .input-append input { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; -} -.input-prepend .add-on, .input-append .add-on { - position: relative; - background: #f5f5f5; - border: 1px solid #ccc; - z-index: 2; - float: left; - display: block; - width: auto; - min-width: 16px; - height: 18px; - padding: 4px 4px 4px 5px; - margin-right: -1px; - font-weight: normal; - line-height: 18px; - color: #bfbfbf; - text-align: center; - text-shadow: 0 1px 0 #ffffff; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} -.input-prepend .active, .input-append .active { - background: #a9dba9; - border-color: #46a546; -} -.input-prepend .add-on { - *margin-top: 1px; - /* IE6-7 */ - -} -.input-append input { - float: left; - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} -.input-append .add-on { - -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; - margin-right: 0; - margin-left: -1px; -} -.inputs-list { - margin: 0 0 5px; - width: 100%; -} -.inputs-list li { - display: block; - padding: 0; - width: 100%; -} -.inputs-list label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: 18px; - text-align: left; - white-space: normal; -} -.inputs-list label strong { - color: #808080; -} -.inputs-list label small { - font-size: 11px; - font-weight: normal; -} -.inputs-list .inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; -} -.inputs-list:first-child { - padding-top: 6px; -} -.inputs-list li + li { - padding-top: 2px; -} -.inputs-list input[type=radio], .inputs-list input[type=checkbox] { - margin-bottom: 0; -} -.form-stacked { - padding-left: 20px; -} -.form-stacked fieldset { - padding-top: 9px; -} -.form-stacked legend { - padding-left: 0; -} -.form-stacked label { - display: block; - float: none; - width: auto; - font-weight: bold; - text-align: left; - line-height: 20px; - padding-top: 0; -} -.form-stacked .clearfix { - margin-bottom: 9px; -} -.form-stacked .clearfix div.input { - margin-left: 0; -} -.form-stacked .inputs-list { - margin-bottom: 0; -} -.form-stacked .inputs-list li { - padding-top: 0; -} -.form-stacked .inputs-list li label { - font-weight: normal; - padding-top: 0; -} -.form-stacked div.clearfix.error { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - margin-top: 0; - margin-left: -10px; -} -.form-stacked .actions { - margin-left: -20px; - padding-left: 20px; -} -/* - * Tables.less - * Tables for, you guessed it, tabular data - * ---------------------------------------- */ -table { - width: 100%; - margin-bottom: 18px; - padding: 0; - border-collapse: separate; - *border-collapse: collapse; - /* IE7, collapse table to remove spacing */ - - font-size: 13px; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -table th, table td { - padding: 10px 10px 9px; - line-height: 18px; - text-align: left; -} -table th { - padding-top: 9px; - font-weight: bold; - vertical-align: middle; - border-bottom: 1px solid #ddd; -} -table td { - vertical-align: top; -} -table th + th, table td + td { - border-left: 1px solid #ddd; -} -table tr + tr td { - border-top: 1px solid #ddd; -} -table tbody tr:first-child td:first-child { - -webkit-border-radius: 4px 0 0 0; - -moz-border-radius: 4px 0 0 0; - border-radius: 4px 0 0 0; -} -table tbody tr:first-child td:last-child { - -webkit-border-radius: 0 4px 0 0; - -moz-border-radius: 0 4px 0 0; - border-radius: 0 4px 0 0; -} -table tbody tr:last-child td:first-child { - -webkit-border-radius: 0 0 0 4px; - -moz-border-radius: 0 0 0 4px; - border-radius: 0 0 0 4px; -} -table tbody tr:last-child td:last-child { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; -} -.zebra-striped tbody tr:nth-child(odd) td { - background-color: #f9f9f9; -} -.zebra-striped tbody tr:hover td { - background-color: #f5f5f5; -} -table .header { - cursor: pointer; -} -table .header:after { - content: ""; - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: #000 transparent; - visibility: hidden; -} -table .headerSortUp, table .headerSortDown { - background-color: rgba(141, 192, 219, 0.25); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -} -table .header:hover:after { - visibility: visible; -} -table .headerSortDown:after, table .headerSortDown:hover:after { - visibility: visible; - filter: alpha(opacity=60); - -khtml-opacity: 0.6; - -moz-opacity: 0.6; - opacity: 0.6; -} -table .headerSortUp:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - visibility: visible; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - filter: alpha(opacity=60); - -khtml-opacity: 0.6; - -moz-opacity: 0.6; - opacity: 0.6; -} -table .blue { - color: #049cdb; - border-bottom-color: #049cdb; -} -table .headerSortUp.blue, table .headerSortDown.blue { - background-color: #ade6fe; -} -table .green { - color: #46a546; - border-bottom-color: #46a546; -} -table .headerSortUp.green, table .headerSortDown.green { - background-color: #cdeacd; -} -table .red { - color: #9d261d; - border-bottom-color: #9d261d; -} -table .headerSortUp.red, table .headerSortDown.red { - background-color: #f4c8c5; -} -table .yellow { - color: #ffc40d; - border-bottom-color: #ffc40d; -} -table .headerSortUp.yellow, table .headerSortDown.yellow { - background-color: #fff6d9; -} -table .orange { - color: #f89406; - border-bottom-color: #f89406; -} -table .headerSortUp.orange, table .headerSortDown.orange { - background-color: #fee9cc; -} -table .purple { - color: #7a43b6; - border-bottom-color: #7a43b6; -} -table .headerSortUp.purple, table .headerSortDown.purple { - background-color: #e2d5f0; -} -/* Patterns.less - * Repeatable UI elements outside the base styles provided from the scaffolding - * ---------------------------------------------------------------------------- */ -.topbar { - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; - overflow: visible; -} -.topbar a { - color: #bfbfbf; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} -.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a { - background-color: #333; - background-color: rgba(255, 255, 255, 0.05); - color: #ffffff; - text-decoration: none; -} -.topbar h3 { - position: relative; -} -.topbar h3 a, .topbar .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; - color: #ffffff; - font-size: 20px; - font-weight: 200; - line-height: 1; -} -.topbar p { - margin: 0; - line-height: 40px; -} -.topbar p a:hover { - background-color: transparent; - color: #ffffff; -} -.topbar form { - float: left; - margin: 5px 0 0 0; - position: relative; - filter: alpha(opacity=100); - -khtml-opacity: 1; - -moz-opacity: 1; - opacity: 1; -} -.topbar form.pull-right { - float: right; -} -.topbar input { - background-color: #444; - background-color: rgba(255, 255, 255, 0.3); - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: normal; - font-weight: 13px; - line-height: 1; - padding: 4px 9px; - color: #ffffff; - color: rgba(255, 255, 255, 0.75); - border: 1px solid #111; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} -.topbar input:-moz-placeholder { - color: #e6e6e6; -} -.topbar input::-webkit-input-placeholder { - color: #e6e6e6; -} -.topbar input:hover { - background-color: #bfbfbf; - background-color: rgba(255, 255, 255, 0.5); - color: #ffffff; -} -.topbar input:focus, .topbar input.focused { - outline: 0; - background-color: #ffffff; - color: #404040; - text-shadow: 0 1px 0 #ffffff; - border: 0; - padding: 5px 10px; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -} -.topbar-inner, .topbar .fill { - background-color: #222; - background-color: #222222; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222)); - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -} -.topbar div > ul, .nav { - display: block; - float: left; - margin: 0 10px 0 0; - position: relative; - left: 0; -} -.topbar div > ul > li, .nav > li { - display: block; - float: left; -} -.topbar div > ul a, .nav a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - text-decoration: none; -} -.topbar div > ul a:hover, .nav a:hover { - color: #ffffff; - text-decoration: none; -} -.topbar div > ul .active > a, .nav .active > a { - background-color: #222; - background-color: rgba(0, 0, 0, 0.5); -} -.topbar div > ul.secondary-nav, .nav.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; -} -.topbar div > ul.secondary-nav .menu-dropdown, -.nav.secondary-nav .menu-dropdown, -.topbar div > ul.secondary-nav .dropdown-menu, -.nav.secondary-nav .dropdown-menu { - right: 0; - border: 0; -} -.topbar div > ul a.menu:hover, -.nav a.menu:hover, -.topbar div > ul li.open .menu, -.nav li.open .menu, -.topbar div > ul .dropdown-toggle:hover, -.nav .dropdown-toggle:hover, -.topbar div > ul .dropdown.open .dropdown-toggle, -.nav .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255, 255, 255, 0.05); -} -.topbar div > ul .menu-dropdown, -.nav .menu-dropdown, -.topbar div > ul .dropdown-menu, -.nav .dropdown-menu { - background-color: #333; -} -.topbar div > ul .menu-dropdown a.menu, -.nav .menu-dropdown a.menu, -.topbar div > ul .dropdown-menu a.menu, -.nav .dropdown-menu a.menu, -.topbar div > ul .menu-dropdown .dropdown-toggle, -.nav .menu-dropdown .dropdown-toggle, -.topbar div > ul .dropdown-menu .dropdown-toggle, -.nav .dropdown-menu .dropdown-toggle { - color: #ffffff; -} -.topbar div > ul .menu-dropdown a.menu.open, -.nav .menu-dropdown a.menu.open, -.topbar div > ul .dropdown-menu a.menu.open, -.nav .dropdown-menu a.menu.open, -.topbar div > ul .menu-dropdown .dropdown-toggle.open, -.nav .menu-dropdown .dropdown-toggle.open, -.topbar div > ul .dropdown-menu .dropdown-toggle.open, -.nav .dropdown-menu .dropdown-toggle.open { - background: #444; - background: rgba(255, 255, 255, 0.05); -} -.topbar div > ul .menu-dropdown li a, -.nav .menu-dropdown li a, -.topbar div > ul .dropdown-menu li a, -.nav .dropdown-menu li a { - color: #999; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); -} -.topbar div > ul .menu-dropdown li a:hover, -.nav .menu-dropdown li a:hover, -.topbar div > ul .dropdown-menu li a:hover, -.nav .dropdown-menu li a:hover { - background-color: #191919; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919)); - background-image: -moz-linear-gradient(top, #292929, #191919); - background-image: -ms-linear-gradient(top, #292929, #191919); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919)); - background-image: -webkit-linear-gradient(top, #292929, #191919); - background-image: -o-linear-gradient(top, #292929, #191919); - background-image: linear-gradient(top, #292929, #191919); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); - color: #ffffff; -} -.topbar div > ul .menu-dropdown .active a, -.nav .menu-dropdown .active a, -.topbar div > ul .dropdown-menu .active a, -.nav .dropdown-menu .active a { - color: #ffffff; -} -.topbar div > ul .menu-dropdown .divider, -.nav .menu-dropdown .divider, -.topbar div > ul .dropdown-menu .divider, -.nav .dropdown-menu .divider { - background-color: #222; - border-color: #444; -} -.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a { - padding: 4px 15px; -} -li.menu, .dropdown { - position: relative; -} -a.menu:after, .dropdown-toggle:after { - width: 0; - height: 0; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; - margin-top: 8px; - margin-left: 4px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - filter: alpha(opacity=50); - -khtml-opacity: 0.5; - -moz-opacity: 0.5; - opacity: 0.5; -} -.menu-dropdown, .dropdown-menu { - background-color: #ffffff; - float: left; - display: none; - position: absolute; - top: 40px; - z-index: 900; - min-width: 160px; - max-width: 220px; - _width: 160px; - margin-left: 0; - margin-right: 0; - padding: 6px 0; - zoom: 1; - border-color: #999; - border-color: rgba(0, 0, 0, 0.2); - border-style: solid; - border-width: 0 1px 1px; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.menu-dropdown li, .dropdown-menu li { - float: none; - display: block; - background-color: none; -} -.menu-dropdown .divider, .dropdown-menu .divider { - height: 1px; - margin: 5px 0; - overflow: hidden; - background-color: #eee; - border-bottom: 1px solid #ffffff; -} -.topbar .dropdown-menu a, .dropdown-menu a { - display: block; - padding: 4px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: #808080; - text-shadow: 0 1px 0 #ffffff; -} -.topbar .dropdown-menu a:hover, .dropdown-menu a:hover { - background-color: #dddddd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); - background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); - background-image: -ms-linear-gradient(top, #eeeeee, #dddddd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)); - background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); - background-image: -o-linear-gradient(top, #eeeeee, #dddddd); - background-image: linear-gradient(top, #eeeeee, #dddddd); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - color: #404040; - text-decoration: none; - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); -} -.open .menu, -.dropdown.open .menu, -.open .dropdown-toggle, -.dropdown.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); -} -.open .menu-dropdown, -.dropdown.open .menu-dropdown, -.open .dropdown-menu, -.dropdown.open .dropdown-menu { - display: block; -} -.tabs, .pills { - margin: 0 0 20px; - padding: 0; - list-style: none; - zoom: 1; -} -.tabs:before, -.pills:before, -.tabs:after, -.pills:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.tabs:after, .pills:after { - clear: both; -} -.tabs > li, .pills > li { - float: left; -} -.tabs > li > a, .pills > li > a { - display: block; -} -.tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; -} -.tabs > li { - position: relative; - top: 1px; -} -.tabs > li > a { - padding: 0 15px; - margin-right: 2px; - line-height: 36px; - border: 1px solid transparent; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -.tabs > li > a:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; -} -.tabs > li.active > a { - color: #808080; - background-color: #ffffff; - border: 1px solid #ddd; - border-bottom-color: transparent; -} -.tabs .menu-dropdown, .tabs .dropdown-menu { - top: 35px; - border-width: 1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; -} -.tabs a.menu:after, .tabs .dropdown-toggle:after { - border-top-color: #999; - margin-top: 15px; - margin-left: 5px; -} -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { - border-color: #999; -} -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; -} -.tab-content { - clear: both; -} -.pills a { - margin: 5px 3px 5px 0; - padding: 0 15px; - text-shadow: 0 1px 1px #ffffff; - line-height: 30px; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pills a:hover { - background: #00438a; - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -} -.pills .active a { - background: #0069d6; - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -} -.tab-content > *, .pill-content > * { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} -.breadcrumb { - margin: 0 0 18px; - padding: 7px 14px; - background-color: #f5f5f5; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; -} -.breadcrumb li { - display: inline; - text-shadow: 0 1px 0 #ffffff; -} -.breadcrumb .divider { - padding: 0 5px; - color: #bfbfbf; -} -.breadcrumb .active a { - color: #404040; -} -.hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; - padding: 60px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.hero-unit h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; -} -.hero-unit p { - font-size: 18px; - font-weight: 200; - line-height: 27px; -} -footer { - margin-top: 17px; - padding-top: 17px; - border-top: 1px solid #eee; -} -.page-header { - margin-bottom: 17px; - border-bottom: 1px solid #ddd; - -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -} -.page-header h1 { - margin-bottom: 8px; -} -.btn.danger, -.alert-message.danger, -.btn.danger:hover, -.alert-message.danger:hover, -.btn.error, -.alert-message.error, -.btn.error:hover, -.alert-message.error:hover, -.btn.success, -.alert-message.success, -.btn.success:hover, -.alert-message.success:hover, -.btn.info, -.alert-message.info, -.btn.info:hover, -.alert-message.info:hover { - color: #ffffff; -} -.btn.danger, -.alert-message.danger, -.btn.error, -.alert-message.error { - background-color: #c43c35; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); - background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(top, #ee5f5b, #c43c35); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #c43c35 #c43c35 #882a25; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn.success, .alert-message.success { - background-color: #57a957; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #57a957 #57a957 #3d773d; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn.info, .alert-message.info { - background-color: #339bb9; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #339bb9 #339bb9 #22697d; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn { - cursor: pointer; - display: inline-block; - background-color: #e6e6e6; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; - font-size: 13px; - line-height: normal; - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - -ms-transition: 0.1s linear all; - -o-transition: 0.1s linear all; - transition: 0.1s linear all; -} -.btn:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; -} -.btn:focus { - outline: 1px dotted #666; -} -.btn.primary { - color: #ffffff; - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); -} -.btn.disabled { - cursor: default; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.btn[disabled] { - cursor: default; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.btn.large { - font-size: 15px; - line-height: normal; - padding: 9px 14px 9px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.btn.small { - padding: 7px 9px 7px; - font-size: 11px; -} -:root .alert-message, :root .btn { - border-radius: 0 \0; -} -button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { - padding: 0; - border: 0; -} -.close { - float: right; - color: #000000; - font-size: 20px; - font-weight: bold; - line-height: 13.5px; - text-shadow: 0 1px 0 #ffffff; - filter: alpha(opacity=20); - -khtml-opacity: 0.2; - -moz-opacity: 0.2; - opacity: 0.2; -} -.close:hover { - color: #000000; - text-decoration: none; - filter: alpha(opacity=40); - -khtml-opacity: 0.4; - -moz-opacity: 0.4; - opacity: 0.4; -} -.alert-message { - position: relative; - padding: 7px 15px; - margin-bottom: 18px; - color: #404040; - background-color: #eedc94; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); - background-image: -moz-linear-gradient(top, #fceec1, #eedc94); - background-image: -ms-linear-gradient(top, #fceec1, #eedc94); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); - background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); - background-image: -o-linear-gradient(top, #fceec1, #eedc94); - background-image: linear-gradient(top, #fceec1, #eedc94); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #eedc94 #eedc94 #e4c652; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - border-width: 1px; - border-style: solid; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -} -.alert-message .close { - *margin-top: 3px; - /* IE7 spacing */ - -} -.alert-message h5 { - line-height: 18px; -} -.alert-message p { - margin-bottom: 0; -} -.alert-message div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; -} -.alert-message .btn { - -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); -} -.alert-message.block-message { - background-image: none; - background-color: #fdf5d9; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - padding: 14px; - border-color: #fceec1; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.alert-message.block-message ul, .alert-message.block-message p { - margin-right: 30px; -} -.alert-message.block-message ul { - margin-bottom: 0; -} -.alert-message.block-message li { - color: #404040; -} -.alert-message.block-message .alert-actions { - margin-top: 5px; -} -.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { - color: #404040; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -} -.alert-message.block-message.error { - background-color: #fddfde; - border-color: #fbc7c6; -} -.alert-message.block-message.success { - background-color: #d1eed1; - border-color: #bfe7bf; -} -.alert-message.block-message.info { - background-color: #ddf4fb; - border-color: #c6edf9; -} -.pagination { - height: 36px; - margin: 18px 0; -} -.pagination ul { - float: left; - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} -.pagination li { - display: inline; -} -.pagination a { - float: left; - padding: 0 14px; - line-height: 34px; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0, 0, 0, 0.15); - *border-right-color: #ddd; - /* IE6-7 */ - - text-decoration: none; -} -.pagination a:hover, .pagination .active a { - background-color: #c7eefe; -} -.pagination .disabled a, .pagination .disabled a:hover { - background-color: transparent; - color: #bfbfbf; -} -.pagination .next a { - border: 0; -} -.well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; - min-height: 20px; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.well blockquote { - border-color: #ddd; - border-color: rgba(0, 0, 0, 0.15); -} -.modal-backdrop { - background-color: #000000; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10000; -} -.modal-backdrop.fade { - opacity: 0; -} -.modal-backdrop, .modal-backdrop.fade.in { - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - width: 560px; - margin: -250px 0 0 -250px; - background-color: #ffffff; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, 0.3); - *border: 1px solid #999; - /* IE6-7 */ - - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.modal .close { - margin-top: 7px; -} -.modal.fade { - -webkit-transition: opacity .3s linear, top .3s ease-out; - -moz-transition: opacity .3s linear, top .3s ease-out; - -ms-transition: opacity .3s linear, top .3s ease-out; - -o-transition: opacity .3s linear, top .3s ease-out; - transition: opacity .3s linear, top .3s ease-out; - top: -25%; -} -.modal.fade.in { - top: 50%; -} -.modal-header { - border-bottom: 1px solid #eee; - padding: 5px 15px; -} -.modal-body { - padding: 15px; -} -.modal-footer { - background-color: #f5f5f5; - padding: 14px 15px 15px; - border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; - zoom: 1; - margin-bottom: 0; -} -.modal-footer:before, .modal-footer:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.modal-footer:after { - clear: both; -} -.modal-footer .btn { - float: right; - margin-left: 5px; -} -.twipsy { - display: block; - position: absolute; - visibility: visible; - padding: 5px; - font-size: 11px; - z-index: 1000; - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.twipsy.fade.in { - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.twipsy.above .twipsy-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; -} -.twipsy.left .twipsy-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.twipsy.below .twipsy-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.twipsy.right .twipsy-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.twipsy-inner { - padding: 3px 8px; - background-color: #000000; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - padding: 5px; - display: none; -} -.popover.above .arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; -} -.popover.right .arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.popover.below .arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.popover.left .arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.popover .arrow { - position: absolute; - width: 0; - height: 0; -} -.popover .inner { - background-color: #000000; - background-color: rgba(0, 0, 0, 0.8); - padding: 3px; - overflow: hidden; - width: 280px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -} -.popover .title { - background-color: #f5f5f5; - padding: 9px 15px; - line-height: 1; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #eee; -} -.popover .content { - background-color: #ffffff; - padding: 14px; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.popover .content p, .popover .content ul, .popover .content ol { - margin-bottom: 0; -} -.fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.fade.in { - opacity: 1; -} -.label { - padding: 1px 3px 2px; - background-color: #bfbfbf; - font-size: 9.75px; - font-weight: bold; - color: #ffffff; - text-transform: uppercase; - white-space: nowrap; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label.important { - background-color: #c43c35; -} -.label.warning { - background-color: #f89406; -} -.label.success { - background-color: #46a546; -} -.label.notice { - background-color: #62cffc; -} -.media-grid { - margin-left: -20px; - margin-bottom: 0; - zoom: 1; -} -.media-grid:before, .media-grid:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.media-grid:after { - clear: both; -} -.media-grid li { - display: inline; -} -.media-grid a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -} -.media-grid a img { - display: block; -} -.media-grid a:hover { - border-color: #0069d6; - -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -} diff --git a/examples/colors.html b/examples/colors.html index f774f0f..05451ca 100644 --- a/examples/colors.html +++ b/examples/colors.html @@ -1,101 +1,94 @@ - - - JQuery Scrollspy demo - - + + + jQuery Scrollspy demo - - + + + - - - - - - + + + + + +
+
+
+

Scroll down to see the background color change

+
+

The White Team

+
+
+

The Red Team

+
+
+

The Blue Team

+
+
+

The Green Team

+
+
+

The Black Team

+
+
+
+
+
+
-
+ + + + -
- - + var position = $this.position(); - + window.console.log(position); + window.console.log('min: ' + position.top + ' / max: ' + window.parseInt(position.top + $this.height(), 10)); - + $this.scrollspy({ + min: position.top, + max: position.top + $this.height(), + onEnter: function onEnter(element/*, position*/) { + $('body').css('background-color', element.id); + window.console.log('Entering ' + element.id); + }, + onLeave: function onLeave(element/*, position*/) { + window.console.log('Leaving ' + element.id); + } + }); + }); + }); + + diff --git a/examples/fixednav.html b/examples/fixednav.html index 631fb39..3a1f3a4 100644 --- a/examples/fixednav.html +++ b/examples/fixednav.html @@ -1,182 +1,160 @@ - - - JQuery Scrollspy demo - - - - - - - - - - - - - - - - - -
- -
- - -
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil opus est exemplis hoc facere longius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Duo Reges: constructio interrete. Quid nunc honeste dicit? Age, inquies, ista parva sunt. Si id dicis, vicimus.

- -

Primum quid tu dicis breve? Nam ista vestra: Si gravis, brevis; Tollenda est atque extrahenda radicitus. Recte dicis; Est enim effectrix multarum et magnarum voluptatum. Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim. Qua tu etiam inprudens utebare non numquam. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.

- -
-              Nam neque virtute retinetur ille in vita, nec iis, qui sine
-              virtute sunt, mors est oppetenda.
-
-              Quid enim ab antiquis ex eo genere, quod ad disserendum
-              valet, praetermissum est?
+    
+        
+        JQuery Scrollspy demo
+        
+        
+        
+        
+    
+    
+        
+
+ + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil opus est exemplis hoc facere longius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Duo Reges: constructio interrete. Quid nunc honeste dicit? Age, inquies, ista parva sunt. Si id dicis, vicimus.

+

Primum quid tu dicis breve? Nam ista vestra: Si gravis, brevis; Tollenda est atque extrahenda radicitus. Recte dicis; Est enim effectrix multarum et magnarum voluptatum. Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim. Qua tu etiam inprudens utebare non numquam. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.

+
+                Nam neque virtute retinetur ille in vita, nec iis, qui sine
+                virtute sunt, mors est oppetenda.
+
+                Quid enim ab antiquis ex eo genere, quod ad disserendum
+                valet, praetermissum est?
+                        
+

Immo videri fortasse. Minime vero istorum quidem, inquit. Pugnant Stoici cum Peripateticis. Sed quot homines, tot sententiae;

+

Haeret in salebra. Estne, quaeso, inquam, sitienti in bibendo voluptas? Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. + Scrupulum, inquam, abeunti; De malis autem et bonis ab iis animalibus, quae nondum depravata sint, ait optime iudicari. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil opus est exemplis hoc facere longius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Duo Reges: constructio interrete. Quid nunc honeste dicit? Age, inquies, ista parva sunt. Si id dicis, vicimus.

+

Primum quid tu dicis breve? Nam ista vestra: Si gravis, brevis; Tollenda est atque extrahenda radicitus. Recte dicis; Est enim effectrix multarum et magnarum voluptatum. Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim. Qua tu etiam inprudens utebare non numquam. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.

+
+                Nam neque virtute retinetur ille in vita, nec iis, qui sine
+                virtute sunt, mors est oppetenda.
+
+                Quid enim ab antiquis ex eo genere, quod ad disserendum
+                valet, praetermissum est?
               
- - -

Immo videri fortasse. Minime vero istorum quidem, inquit. Pugnant Stoici cum Peripateticis. Sed quot homines, tot sententiae;

- -

Haeret in salebra. Estne, quaeso, inquam, sitienti in bibendo voluptas? Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Scrupulum, inquam, abeunti; De malis autem et bonis ab iis animalibus, quae nondum depravata sint, ait optime iudicari. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil opus est exemplis hoc facere longius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Duo Reges: constructio interrete. Quid nunc honeste dicit? Age, inquies, ista parva sunt. Si id dicis, vicimus.

- -

Primum quid tu dicis breve? Nam ista vestra: Si gravis, brevis; Tollenda est atque extrahenda radicitus. Recte dicis; Est enim effectrix multarum et magnarum voluptatum. Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim. Qua tu etiam inprudens utebare non numquam. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.

- -
-              Nam neque virtute retinetur ille in vita, nec iis, qui sine
-              virtute sunt, mors est oppetenda.
-
-              Quid enim ab antiquis ex eo genere, quod ad disserendum
-              valet, praetermissum est?
-              
- - -

Immo videri fortasse. Minime vero istorum quidem, inquit. Pugnant Stoici cum Peripateticis. Sed quot homines, tot sententiae;

- -

Haeret in salebra. Estne, quaeso, inquam, sitienti in bibendo voluptas? Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Scrupulum, inquam, abeunti; De malis autem et bonis ab iis animalibus, quae nondum depravata sint, ait optime iudicari. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.

- -

Tu enim ista lenius, hic Stoicorum more nos vexat.

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Sed residamus, inquit, si placet. Si quae forte-possumus. Quid censes in Latino fore? Duo Reges: constructio interrete. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. An tu me de L. Quae contraria sunt his, malane? An potest, inquit ille, quicquam esse suavius quam nihil dolere? Itaque in rebus minime obscuris non multus est apud eos disserendi labor.

- -
- Omne enim animal, simul et ortum est, se ipsum et omnes partes suas diligit duasque, quae maximae sunt, in primis amplectitur, animum et corpus, deinde utriusque partes. -
- - -

Bonum incolumis acies: misera caecitas. Ego vero volo in virtute vim esse quam maximam; Traditur, inquit, ab Epicuro ratio neglegendi doloris. Quid de Platone aut de Democrito loquar? Inde igitur, inquit, ordiendum est. Philosophi autem in suis lectulis plerumque moriuntur. Quantum Aristoxeni ingenium consumptum videmus in musicis? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere.

- -
    -
  • Sed quia studebat laudi et dignitati, multum in virtute processerat.
  • -
  • Quae similitudo in genere etiam humano apparet.
  • -
  • Beatus sibi videtur esse moriens.
  • -
  • Odium autem et invidiam facile vitabis.
  • -
  • Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus;
  • -
- - -

Quorum altera prosunt, nocent altera. At, si voluptas esset bonum, desideraret. Haec para/doca illi, nos admirabilia dicamus. Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis. Illa argumenta propria videamus, cur omnia sint paria peccata. Hanc ergo intuens debet institutum illud quasi signum absolvere.

- - - - -
+

Immo videri fortasse. Minime vero istorum quidem, inquit. Pugnant Stoici cum Peripateticis. Sed quot homines, tot sententiae;

+

Haeret in salebra. Estne, quaeso, inquam, sitienti in bibendo voluptas? Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. + Scrupulum, inquam, abeunti; De malis autem et bonis ab iis animalibus, quae nondum depravata sint, ait optime iudicari. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. +

+

Tu enim ista lenius, hic Stoicorum more nos vexat.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Sed residamus, inquit, si placet. Si quae forte-possumus. Quid censes in Latino fore? Duo Reges: constructio interrete. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. An tu me de L. Quae contraria sunt his, malane? An potest, inquit ille, quicquam esse suavius quam nihil dolere? Itaque in rebus minime obscuris non multus est apud eos disserendi labor.

+
+ Omne enim animal, simul et ortum est, se ipsum et omnes partes suas diligit duasque, quae maximae sunt, in primis amplectitur, animum et corpus, deinde utriusque partes. +
+

Bonum incolumis acies: misera caecitas. Ego vero volo in virtute vim esse quam maximam; Traditur, inquit, ab Epicuro ratio neglegendi doloris. Quid de Platone aut de Democrito loquar? Inde igitur, inquit, ordiendum est. Philosophi autem in suis lectulis plerumque moriuntur. Quantum Aristoxeni ingenium consumptum videmus in musicis? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere.

+
    +
  • Sed quia studebat laudi et dignitati, multum in virtute processerat.
  • +
  • Quae similitudo in genere etiam humano apparet.
  • +
  • Beatus sibi videtur esse moriens.
  • +
  • Odium autem et invidiam facile vitabis.
  • +
  • Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus;
  • +
+

Quorum altera prosunt, nocent altera. At, si voluptas esset bonum, desideraret. Haec para/doca illi, nos admirabilia dicamus. Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis. Illa argumenta propria videamus, cur omnia sint paria peccata. Hanc ergo intuens debet institutum illud quasi signum absolvere.

+
+
+
-
- -
- - + + + + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..4c7563c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,65 @@ +/* global require */ + +var gulp = require('gulp'); +var eslint = require('gulp-eslint'); +var gulpIf = require('gulp-if'); +var rename = require('gulp-rename'); +var uglify = require('gulp-uglify'); + +// Assets for the project +var Assets = { + main: './jquery-scrollspy.js', + minified: './jquery-scrollspy.min.js', + package: './package.json', + readme: './README.md', + source: './', +}; + +// See the uglify documentation for more details +var _uglifySettings = { + compress: { + comparisons: true, + conditionals: true, + /* jscs: disable */ + dead_code: true, + drop_console: true, + /* jscs: enable */ + unsafe: true, + unused: true, + }, +}; + +// Check the main js file(s) meets the following standards outlined in .eslintrc +gulp.task('eslint', function esLintTask() { + // Has ESLint fixed the file contents? + function isFixed(file) { + return file.eslint !== undefined && file.eslint !== null && file.eslint.fixed; + } + + return gulp.src(Assets.main) + .pipe(eslint({ + fix: true, + useEslintrc: '.eslintrc', + })) + .pipe(eslint.format()) + .pipe(gulpIf(isFixed, gulp.dest(Assets.source))); +}); + +// Uglify aka minify the main file +gulp.task('uglify', function uglifyTask() { + return gulp.src(Assets.main) + .pipe(uglify(_uglifySettings)) + .pipe(rename(Assets.minified)) + .pipe(gulp.dest(Assets.source)); +}); + +// Watch for changes to the main file +gulp.task('watch', function watchTask() { + gulp.watch(Assets.main, ['eslint', 'uglify']); +}); + +// Register the default task +gulp.task('default', ['eslint', 'uglify']); + +// 'gulp eslint' to check the syntax of the main js file(s) +// 'gulp uglify' to uglify the main file diff --git a/jquery-scrollspy.js b/jquery-scrollspy.js index 7345496..4fd4f53 100644 --- a/jquery-scrollspy.js +++ b/jquery-scrollspy.js @@ -1,97 +1,267 @@ -/*! - * jQuery Scrollspy Plugin - * Author: @sxalexander +/* + * jQuery ScrollSpy Plugin + * Author: @sxalexander, softwarespot * Licensed under the MIT license */ -;(function ( $, window, document, undefined ) { +(function jQueryScrollspy(window, $) { + // Plugin Logic $.fn.extend({ - scrollspy: function ( options ) { - - var defaults = { - min: 0, - max: 0, - mode: 'vertical', - namespace: 'scrollspy', - buffer: 0, - container: window, - onEnter: options.onEnter ? options.onEnter : [], - onLeave: options.onLeave ? options.onLeave : [], - onTick: options.onTick ? options.onTick : [] - } - - var options = $.extend( {}, defaults, options ); - - return this.each(function (i) { - - var element = this; - var o = options; - var $container = $(o.container); - var mode = o.mode; - var buffer = o.buffer; - var enters = leaves = 0; - var inside = false; - - /* add listener to container */ - $container.bind('scroll.' + o.namespace, function(e){ - var position = {top: $(this).scrollTop(), left: $(this).scrollLeft()}; - var xy = (mode == 'vertical') ? position.top + buffer : position.left + buffer; - var max = o.max; - var min = o.min; - - /* fix max */ - if($.isFunction(o.max)){ - max = o.max(); - } - - /* fix max */ - if($.isFunction(o.min)){ - min = o.min(); - } - - if(max == 0){ - max = (mode == 'vertical') ? $container.height() : $container.outerWidth() + $(element).outerWidth(); - } - - /* if we have reached the minimum bound but are below the max ... */ - if(xy >= min && xy <= max){ - /* trigger enter event */ - if(!inside){ - inside = true; - enters++; - - /* fire enter event */ - $(element).trigger('scrollEnter', {position: position}) - if($.isFunction(o.onEnter)){ - o.onEnter(element, position); - } - - } - - /* trigger tick event */ - $(element).trigger('scrollTick', {position: position, inside: inside, enters: enters, leaves: leaves}) - if($.isFunction(o.onTick)){ - o.onTick(element, position, inside, enters, leaves); - } - }else{ - - if(inside){ - inside = false; - leaves++; - /* trigger leave event */ - $(element).trigger('scrollLeave', {position: position, leaves:leaves}) - - if($.isFunction(o.onLeave)){ - o.onLeave(element, position); - } + scrollspy: function scrollspy(options, action) { + // If the options parameter is a string, then assume it's an 'action', therefore swap the parameters around + if (_isString(options)) { + var tempOptions = action; + + // Set the action as the option parameter + action = options; + + // Set to be the reference action pointed to + options = tempOptions; + } + + // override the default options with those passed to the plugin + options = $.extend({}, _defaults, options); + + // sanitize the following option with the default value if the predicate fails + _sanitizeOption(options, _defaults, 'container', _isObject); + + // cache the jQuery object + var $container = $(options.container); + + // check if it's a valid jQuery selector + if ($container.length === 0) { + return this; + } + + // sanitize the following option with the default value if the predicate fails + _sanitizeOption(options, _defaults, 'namespace', _isString); + + // check if the action is set to DESTROY/destroy + if (_isString(action) && action.toUpperCase() === 'DESTROY') { + $container.off('scroll.' + options.namespace); + return this; + } + + // sanitize the following options with the default values if the predicates fails + _sanitizeOption(options, _defaults, 'buffer', $.isNumeric); + _sanitizeOption(options, _defaults, 'max', $.isNumeric); + _sanitizeOption(options, _defaults, 'min', $.isNumeric); + + // callbacks + _sanitizeOption(options, _defaults, 'onEnter', $.isFunction); + _sanitizeOption(options, _defaults, 'onLeave', $.isFunction); + _sanitizeOption(options, _defaults, 'onLeaveTop', $.isFunction); + _sanitizeOption(options, _defaults, 'onLeaveBottom', $.isFunction); + _sanitizeOption(options, _defaults, 'onTick', $.isFunction); + + if ($.isFunction(options.max)) { + options.max = options.max(); + } + + if ($.isFunction(options.min)) { + options.min = options.min(); + } + + // check if the mode is set to VERTICAL/vertical + var isVertical = window.String(options.mode).toUpperCase() === 'VERTICAL'; + + return this.each(function each() { + // cache this + var _this = this; + + // cache the jQuery object + var $element = $(_this); + + // count the number of times a container is entered + var enters = 0; + + // determine if the scroll is with inside the container + var inside = false; + + // count the number of times a container is left + var leaves = 0; + + // create a scroll listener for the container + $container.on('scroll.' + options.namespace, function onScroll() { + // cache the jQuery object + var $this = $(this); + + // create a position object literal + var position = { + top: $this.scrollTop(), + left: $this.scrollLeft(), + }; + + var containerHeight = $container.height(); + + var max = options.max; + + var min = options.min; + + var xAndY = isVertical ? position.top + options.buffer : position.left + options.buffer; + + if (max === 0) { + // get the maximum value based on either the height or the outer width + max = isVertical ? containerHeight : $container.outerWidth() + $element.outerWidth(); } - } - }); - }); - } + // if we have reached the minimum bound, though are below the max + if (xAndY >= min && xAndY <= max) { + // trigger the 'scrollEnter' event + if (!inside) { + inside = true; + enters++; + + // trigger the 'scrollEnter' event + $element.trigger('scrollEnter', { + position: position, + }); + + // call the 'onEnter' function + if (options.onEnter !== null) { + options.onEnter(_this, position); + } + } + + // trigger the 'scrollTick' event + $element.trigger('scrollTick', { + position: position, + inside: inside, + enters: enters, + leaves: leaves, + }); + + // call the 'onTick' function + if (options.onTick !== null) { + options.onTick(_this, position, inside, enters, leaves); + } + } else { + if (inside) { + inside = false; + leaves++; + + // trigger the 'scrollLeave' event + $element.trigger('scrollLeave', { + position: position, + leaves: leaves, + }); + + // call the 'onLeave' function + if (options.onLeave !== null) { + options.onLeave(_this, position); + } + + if (xAndY <= min) { + // trigger the 'scrollLeaveTop' event + $element.trigger('scrollLeaveTop', { + position: position, + leaves: leaves, + }); + + // call the 'onLeaveTop' function + if (options.onLeaveTop !== null) { + options.onLeaveTop(_this, position); + } + } else if (xAndY >= max) { + // trigger the 'scrollLeaveBottom' event + $element.trigger('scrollLeaveBottom', { + position: position, + leaves: leaves, + }); + + // call the 'onLeaveBottom' function + if (options.onLeaveBottom !== null) { + options.onLeaveBottom(_this, position); + } + } + } else { + // Idea taken from: http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen + var containerScrollTop = $container.scrollTop(); + + // Get the element height + var elementHeight = $element.height(); + + // Get the element offset + var elementOffsetTop = $element.offset().top; + + if ((elementOffsetTop < (containerHeight + containerScrollTop)) && (elementOffsetTop > (containerScrollTop - elementHeight))) { + // trigger the 'scrollView' event + $element.trigger('scrollView', { + position: position, + }); + + // call the 'onView' function + if (options.onView !== null) { + options.onView(_this, position); + } + } + } + } + }); + }); + }, + }); + + // Fields (Private) + + // Defaults + + // default options + var _defaults = { + // the offset to be applied to the left and top positions of the container + buffer: 0, + + // the element to apply the 'scrolling' event to (default window) + container: window, + + // the maximum value of the X or Y coordinate, depending on mode the selected + max: 0, + + // the maximum value of the X or Y coordinate, depending on mode the selected + min: 0, + + // whether to listen to the X (horizontal) or Y (vertical) scrolling + mode: 'vertical', + + // namespace to append to the 'scroll' event + namespace: 'scrollspy', + + // call the following callback function every time the user enters the min / max zone + onEnter: null, + + // call the following callback function every time the user leaves the min / max zone + onLeave: null, + + // call the following callback function every time the user leaves the top zone + onLeaveTop: null, + + // call the following callback function every time the user leaves the bottom zone + onLeaveBottom: null, + + // call the following callback function on each scroll event within the min and max parameters + onTick: null, + + // call the following callback function on each scroll event when the element is inside the viewable view port + onView: null, + }; + + // Methods (Private) + + // check if a value is an object datatype + function _isObject(value) { + return $.type(value) === 'object'; + } - }) + // check if a value is a string datatype with a length greater than zero when whitespace is stripped + function _isString(value) { + return $.type(value) === 'string' && $.trim(value).length > 0; + } - -})( jQuery, window, document, undefined ); + // check if an option is correctly formatted using a predicate; otherwise, return the default value + function _sanitizeOption(options, defaults, property, predicate) { + // set the property to the default value if the predicate returned false + if (!predicate(options[property])) { + options[property] = defaults[property]; + } + } +}(window, window.jQuery)); diff --git a/jquery-scrollspy.min.js b/jquery-scrollspy.min.js new file mode 100644 index 0000000..2782536 --- /dev/null +++ b/jquery-scrollspy.min.js @@ -0,0 +1 @@ +!function(e,n){function o(e){return"object"===n.type(e)}function i(e){return"string"===n.type(e)&&n.trim(e).length>0}function t(e,n,o,i){i(e[o])||(e[o]=n[o])}n.fn.extend({scrollspy:function(l,s){if(i(l)){var a=s;s=l,l=a}l=n.extend({},r,l),t(l,r,"container",o);var c=n(l.container);if(0===c.length)return this;if(t(l,r,"namespace",i),i(s)&&"DESTROY"===s.toUpperCase())return c.off("scroll."+l.namespace),this;t(l,r,"buffer",n.isNumeric),t(l,r,"max",n.isNumeric),t(l,r,"min",n.isNumeric),t(l,r,"onEnter",n.isFunction),t(l,r,"onLeave",n.isFunction),t(l,r,"onLeaveTop",n.isFunction),t(l,r,"onLeaveBottom",n.isFunction),t(l,r,"onTick",n.isFunction),n.isFunction(l.max)&&(l.max=l.max()),n.isFunction(l.min)&&(l.min=l.min());var u="VERTICAL"===e.String(l.mode).toUpperCase();return this.each(function(){var e=this,o=n(e),i=0,t=!1,r=0;c.on("scroll."+l.namespace,function(){var s=n(this),a={top:s.scrollTop(),left:s.scrollLeft()},f=c.height(),p=l.max,m=l.min,v=u?a.top+l.buffer:a.left+l.buffer;if(0===p&&(p=u?f:c.outerWidth()+o.outerWidth()),v>=m&&p>=v)t||(t=!0,i++,o.trigger("scrollEnter",{position:a}),null!==l.onEnter&&l.onEnter(e,a)),o.trigger("scrollTick",{position:a,inside:t,enters:i,leaves:r}),null!==l.onTick&&l.onTick(e,a,t,i,r);else if(t)t=!1,r++,o.trigger("scrollLeave",{position:a,leaves:r}),null!==l.onLeave&&l.onLeave(e,a),m>=v?(o.trigger("scrollLeaveTop",{position:a,leaves:r}),null!==l.onLeaveTop&&l.onLeaveTop(e,a)):v>=p&&(o.trigger("scrollLeaveBottom",{position:a,leaves:r}),null!==l.onLeaveBottom&&l.onLeaveBottom(e,a));else{var g=c.scrollTop(),L=o.height(),h=o.offset().top;f+g>h&&h>g-L&&(o.trigger("scrollView",{position:a}),null!==l.onView&&l.onView(e,a))}})})}});var r={buffer:0,container:e,max:0,min:0,mode:"vertical",namespace:"scrollspy",onEnter:null,onLeave:null,onLeaveTop:null,onLeaveBottom:null,onTick:null,onView:null}}(window,window.jQuery); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..27ca196 --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "jquery-scrollspy", + "version": "1.0.0", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/softwarespot/jquery-scrollspy.git" + }, + "devDependencies": { + "del": "^2.1.0", + "eslint": "^2.5.1", + "eslint-config-airbnb": "^6.2.0", + "gulp": "^3.9.1", + "gulp-eslint": "^2.0.0", + "gulp-if": "^2.0.0", + "gulp-rename": "~1.2.2", + "gulp-replace": "^0.5.4", + "gulp-uglify": "^1.5.3", + "merge2": "^1.0.1" + } +} diff --git a/test/demo.html b/test/demo.html new file mode 100644 index 0000000..8a83975 --- /dev/null +++ b/test/demo.html @@ -0,0 +1,32 @@ + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/test/memory-leak.coffee b/test/memory-leak.coffee new file mode 100644 index 0000000..006b8bc --- /dev/null +++ b/test/memory-leak.coffee @@ -0,0 +1,22 @@ +drool = require('drool') +assert = require('assert') +path = require('path') + +driver = drool.start + chromeOptions: 'no-sandbox' + +webdriver = drool.webdriver + +drool.flow({ + repeatCount: 5 + setup: -> + driver.get('file://' + path.join(__dirname, '/demo.html')) + action: -> + driver.findElement(webdriver.By.css('#add')).click() + driver.findElement(webdriver.By.css('#remove')).click() + assert: (after, initial) -> + assert.equal(initial.nodes, after.nodes, 'node count should match') + +}, driver) + +driver.quit() \ No newline at end of file diff --git a/test/memory-leak.js b/test/memory-leak.js new file mode 100644 index 0000000..0919b60 --- /dev/null +++ b/test/memory-leak.js @@ -0,0 +1,30 @@ +// Generated by CoffeeScript 1.9.3 +var assert, driver, drool, path, webdriver; + +drool = require('drool'); + +assert = require('assert'); + +path = require('path'); + +driver = drool.start({ + chromeOptions: 'no-sandbox' +}); + +webdriver = drool.webdriver; + +drool.flow({ + repeatCount: 5, + setup: function() { + return driver.get('file://' + path.join(__dirname, '/demo.html')); + }, + action: function() { + driver.findElement(webdriver.By.css('#add')).click(); + return driver.findElement(webdriver.By.css('#remove')).click(); + }, + assert: function(after, initial) { + return assert.equal(initial.nodes, after.nodes, 'node count should match'); + } +}, driver); + +driver.quit();