LIAT Funbag Test
by iscrow
HTML
<div class="half right">
<h3 class="green">Rep Locator</h3>
<select class="states">
<option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="NIN">Indiana (North)</option><option value="SIN">Indiana (South)</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="NLA">Louisiana (North)</option><option value="SLA">Louisiana (South)</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJN">New Jersey (North)</option><option value="NJS">New Jersey (South)</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NYC">New York City</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="NOH">Ohio (North)</option><option value="SOH">Ohio (South)</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PAE">Pennsylvania (East)</option><option value="PAW">Pennsylvania (West)</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option...
CSS
.hide {
display: none;
}
.ifb-active {
color: red;
}
.SomeToggleClass, .SomeOtherToggleClass {
width: 50%;
float: left;
}
.SomeToggleClass {
background-color: green;
}
.SomeOtherToggleClass {
background-color: red;
}
.toggle3, .SomeInsideToggleClass {
background-color: blue;
}
.SomeScrollTarget {
background-color: pink;
}
.area-info {
display: none;
}
JavaScript
/*
* Ivan's Fun Bag (...as in a bag of fun)
*
* Authored by Ivan Ivanov
*
* Copyright 2014, Ivan Ivanov
* License: GNU General Public License, version 3 (GPL-3.0)
* http://www.opensource.org/licenses/gpl-3.0.html
*
* Revision: 2015-03-23
*/
;(function($) {
"use strict";
$.fn.ifbToggle = function (target, options) {
var settings = $.extend({
// These are the defaults.
toggleTarget: target, // The target element to scroll to
ToggleSpeed: "slow", // The speed with which to toggle the element (slow/fast/number in ms). slow=600ms, fast=200ms
ToggleType: "vertical", // Type of toggle. Vertical is open: Down, close: Up, Anything else is Open: Slide down and to the right, Close: Slide up and to the left
ToggleEasing: "swing", // Toggle easing. swing, linear or if jQueryUI/other jQuery easing library is included any of the easing function supported there.
OtherElementsToHide: $(''), // What other elements should we hide when closing this toggle?
OtherTogglesToMarkInactive: $(''), // What other elements' toggles to mark inactive when closing this toggle?
ElementsToHideBeforeShowingThis: $(''), // What elements to hide before opening this toggle?
AutoHideSpeed: "fast", // If we hide other elements on Open/Close what speed should we use?
ScrollToElement: $(''), // What element do we scroll to on open? Takes a $("some element").
ScrollToSpeed: "slow", // If we scroll, what speed should we use?
ScrollToDelay: "fast", // If we scroll, how long shold we wait before we do it? For example for other elements to rearrange on the page so we scroll to an acurate location.
ScrollToOffsetTop: 0, // If we scroll to an element, should...