40 |
41 |
Documentation
42 |
43 |
44 |
45 |
Table of Contents
46 |
47 |
55 |
56 |
57 |
58 |
59 |
scroll_distance - Pixel width distance for each scroll click. Default: 300 pixels.
60 |
61 |
scroll_duration - Animation time for scrolling in milliseconds. Default: 300 milliseconds.
62 |
63 |
left_arrow_size - Pixel width for the scroll button on the left side. Default: 26 pixels
64 |
65 |
right_arrow_size - Pixel width for the scroll button on the right side. Default 26 pixels.
66 |
67 |
click_callback - Callback function on click. Accpets the click event object as an argument.
68 | The default callback function will change the page to the href in the 'rel' attribute of the item's span tag.
69 |
70 |
71 |
Usage
72 |
73 |
74 | $('#tabSet').scrollTabs({
75 | scroll_distance: 350,
76 | scroll_duration: 350,
77 | left_arrow_size: 26,
78 | right_arrow_size: 26,
79 | click_callback: function(e){
80 | var val = $(this).attr('rel');
81 | if(val){
82 | window.location.href = val;
83 | }
84 | }
85 | });
86 |
87 |
88 |
89 |
The returned object will have the following methods.
90 |
91 |
92 | var tabSet = $('#tab_set').scrollTabs();
93 | tabSet.addTab('<span>Hi</span>');
94 |
95 |
96 |
97 |
98 | domObject
100 |
101 |
102 |
103 |
104 | addTab(html, position)
111 |
112 |
113 | // Place a new tab into the first position
114 | tabSet.addTab('<span>Hi</span>', 0);
115 |
116 |
117 |
118 |
119 | removeTabs(jQuerySelector)
122 |
123 |
124 | // Remove the span with a specific ID
125 | tabSet.removeTabs('#tab_id');
126 |
127 | // Remove the first span, a couple of options
128 | tabSet.removeTabs('span:eq(0)');
129 | tabSet.removeTabs('span:nth-child(1)');
130 |
131 |
132 |
133 |
134 | clearTabs()
136 |
137 |
138 |
139 |
140 | destroy()
143 |
144 |
145 |
146 |
147 | hideTabs(jQuerySelector)
150 |
151 |
152 |
153 |
154 | showTabs(jQuerySelector)
156 |
157 |
158 |
159 |
You can override the basic styling CSS to make the look of the tabs as unique as you'd like!
160 |
161 |
.scroll_tabs_container.scrollTabs() on.
162 |
163 |
164 |
165 |
div.scroll_tab_inner
166 |
167 |
168 |
169 |
div.scroll_tab_inner span.scroll_tab_first (First Item), .scroll_tab_last (Last Item), .scroll_tab_over (Hover), and .tab_selected (Selected/Depressed).
170 |
171 |
172 |
173 |
div.scroll_tab_inner span.scroll_tab_left_finisher0 should you not need it.
174 |
175 |
176 |
177 |
div.scroll_tab_inner span.scroll_tab_right_finisher0 should you not need it.
178 |
179 |
180 |
181 |
.scroll_tab_left_button.scroll_tab_left_button_over (Hover) and .scroll_tab_left_button_disabled (Not Clickable--already scrolled all the way in this direction).
182 |
183 |
184 |
185 |
.scroll_tab_right_button.scroll_tab_right_button_over (Hover) and .scroll_tab_right_button_disabled (Not Clickable--already scrolled all the way in this direction).
186 |
187 |
188 |
189 |
Mouse wheel scrolling requires the jQuery Mousewheel plugin to be installed, which is bundled with this download. All credit goes to Brandon Aaron (http://brandonaaron.net ) for this fantastic plugin.
190 |
191 |
Disabling Mouse Wheel Scrolling: simply do not include the jQuery Mousewheel plugin.
192 |
`\n// element gets special love because it's special, and that's a fact!\n\n.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {\n height: @input-height;\n padding: @padding-vertical @padding-horizontal;\n font-size: @font-size;\n line-height: @line-height;\n border-radius: @border-radius;\n\n select& {\n height: @input-height;\n line-height: @input-height;\n }\n\n textarea&,\n select[multiple]& {\n height: auto;\n }\n}\n"]}
--------------------------------------------------------------------------------
/examples/css/bootstrap-theme.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.1.1 (http://getbootstrap.com)
3 | * Copyright 2011-2014 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 |
7 | .btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-default:active,.btn-primary:active,.btn-success:active,.btn-info:active,.btn-warning:active,.btn-danger:active,.btn-default.active,.btn-primary.active,.btn-success.active,.btn-info.active,.btn-warning.active,.btn-danger.active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn:active,.btn.active{background-image:none}.btn-default{background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;text-shadow:0 1px 0 #fff;border-color:#ccc}.btn-default:hover,.btn-default:focus{background-color:#e0e0e0;background-position:0 -15px}.btn-default:active,.btn-default.active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-primary{background-image:-webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%);background-image:linear-gradient(to bottom,#428bca 0,#2d6ca2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#2b669a}.btn-primary:hover,.btn-primary:focus{background-color:#2d6ca2;background-position:0 -15px}.btn-primary:active,.btn-primary.active{background-color:#2d6ca2;border-color:#2b669a}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:hover,.btn-success:focus{background-color:#419641;background-position:0 -15px}.btn-success:active,.btn-success.active{background-color:#419641;border-color:#3e8f3e}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:hover,.btn-info:focus{background-color:#2aabd2;background-position:0 -15px}.btn-info:active,.btn-info.active{background-color:#2aabd2;border-color:#28a4c9}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:hover,.btn-warning:focus{background-color:#eb9316;background-position:0 -15px}.btn-warning:active,.btn-warning.active{background-color:#eb9316;border-color:#e38d13}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:hover,.btn-danger:focus{background-color:#c12e2a;background-position:0 -15px}.btn-danger:active,.btn-danger.active{background-color:#c12e2a;border-color:#b92c28}.thumbnail,.img-thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-color:#e8e8e8}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background-image:-webkit-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);background-color:#357ebd}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f3f3f3 100%);background-image:linear-gradient(to bottom,#ebebeb 0,#f3f3f3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.navbar-inverse .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top,#222 0,#282828 100%);background-image:linear-gradient(to bottom,#222 0,#282828 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-static-top,.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0)}.progress-bar{background-image:-webkit-linear-gradient(top,#428bca 0,#3071a9 100%);background-image:linear-gradient(to bottom,#428bca 0,#3071a9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0)}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0)}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0)}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0)}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{text-shadow:0 -1px 0 #3071a9;background-image:-webkit-linear-gradient(top,#428bca 0,#3278b3 100%);background-image:linear-gradient(to bottom,#428bca 0,#3278b3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);border-color:#3278b3}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0)}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0)}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0)}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0)}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0)}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}
--------------------------------------------------------------------------------
/examples/css/demo.css:
--------------------------------------------------------------------------------
1 | div.navbar {
2 | margin-bottom: 0px;
3 | }
4 |
5 | div.colored_header {
6 | color: #FFFFFF;
7 | background: #0baed4; /* Old browsers */
8 | /* IE9 SVG, needs conditional override of 'filter' to 'none' */
9 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMGJhZWQ0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkODVhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
10 | background: -moz-linear-gradient(-45deg, #0baed4 0%, #0d85a3 100%); /* FF3.6+ */
11 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0baed4), color-stop(100%,#0d85a3)); /* Chrome,Safari4+ */
12 | background: -webkit-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* Chrome10+,Safari5.1+ */
13 | background: -o-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* Opera 11.10+ */
14 | background: -ms-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* IE10+ */
15 | background: linear-gradient(135deg, #0baed4 0%,#0d85a3 100%); /* W3C */
16 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0baed4', endColorstr='#0d85a3',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
17 | }
18 |
19 | div.indented_text {
20 | margin-left: 30px;
21 | }
22 |
23 | .section_title {
24 | margin-top: 40px;
25 | margin-bottom: 10px;
26 | border-bottom: 1px solid #999;
27 | padding-bottom: 5px;
28 | border-left: 5px solid #7ba4c7;
29 | padding-left: 10px;
30 | }
31 |
32 | #header_image {
33 | background: transparent url(../images/header.png) no-repeat top left;
34 | height: 176px;
35 | }
36 |
37 | div.jumbotron {
38 | border: 1px solid #DDD;
39 | }
40 |
41 | span.pre_comment {
42 | color: #9999AA;
43 | font-weight: bold;
44 | }
45 |
46 | span.pre_class {
47 | color: #7c2984;
48 | }
49 |
50 | span.pre_tag {
51 | color: #017b95;
52 | }
53 |
54 | span.pre_before {
55 | color: #e19215;
56 | }
57 |
58 | span.pre_attribute {
59 | color: #28ab1a;
60 | }
61 |
62 | @media screen and (max-width: 1200px){
63 | #header_image {
64 | background: transparent url(../images/header-940.png) no-repeat top left;
65 | }
66 | }
67 |
68 | @media screen and (max-width: 1000px){
69 | #header_image {
70 | background: transparent url(../images/header-compressed.png) no-repeat top left;
71 | }
72 | }
73 |
74 | div.footer {
75 | margin-top: 40px;
76 | padding-top: 15px;
77 | padding-bottom: 25px;
78 | color: #FFFFFF;
79 | text-align: center;
80 | background: #45484d; /* Old browsers */
81 | /* IE9 SVG, needs conditional override of 'filter' to 'none' */
82 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDU0ODRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
83 | background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%); /* FF3.6+ */
84 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
85 | background: -webkit-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
86 | background: -o-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Opera 11.10+ */
87 | background: -ms-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* IE10+ */
88 | background: linear-gradient(135deg, #45484d 0%,#000000 100%); /* W3C */
89 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
90 | }
91 |
92 | /******** CUSTOM SCROLL TABS ***********/
93 |
94 | #custom_style_container1 {
95 | position: relative;
96 | left: 0px;
97 | right: 0px;
98 | background: url(../images/toolbar-bg.jpg) repeat-x;
99 | height: 40px;
100 | margin-bottom: 10px;
101 | }
102 |
103 | #custom_style_container1 .style1 {
104 | position: absolute;
105 | top: 0px;
106 | left: 0px;
107 | right: 0px;
108 | background: url(../images/toolbar-bg.jpg) repeat-x;
109 | text-align: left;
110 | }
111 |
112 | /****** PLUGIN-SPECIFIED CLASS NAMES (though it's our proprietary plugin) ********/
113 | .style1 .scroll_tab_left_button::before {
114 | content: "";
115 | padding: 0px;
116 | }
117 |
118 | .style1 .scroll_tab_right_button::before {
119 | content: "";
120 | padding: 0px;
121 | }
122 |
123 | .style1 div.scroll_tab_inner {
124 | height: 40px;
125 | background: url(../images/toolbar-bg.jpg) repeat-x;
126 | }
127 |
128 | .style1 div.scroll_tab_inner span {
129 | padding-left: 20px;
130 | padding-right: 20px;
131 | line-height: 40px;
132 | font-size: 14px;
133 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -40px;
134 | color: #FFFFFF;
135 | cursor: pointer;
136 | }
137 |
138 | .style1 div.scroll_tab_inner span.scroll_tab_first {
139 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px -40px;
140 | }
141 |
142 | .style1 div.scroll_tab_inner span.scroll_tab_over {
143 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px 0px !important;
144 | }
145 |
146 | .style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over {
147 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
148 | }
149 |
150 | .style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over {
151 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
152 | }
153 |
154 | .style1 div.scroll_tab_inner span.scroll_tab_left_finisher {
155 | padding: 0px;
156 | width: 10px;
157 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -160px;
158 | }
159 |
160 | .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.scroll_tab_over {
161 | background-position: 0px -120px !important;
162 | }
163 | .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.tab_selected {
164 | background-position: 0px -200px;
165 | }
166 |
167 | .style1 div.scroll_tab_inner span.scroll_tab_right_finisher {
168 | padding: 0px;
169 | width: 10px;
170 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat right -160px;
171 | }
172 | .style1 div.scroll_tab_inner span.scroll_tab_right_finisher.scroll_tab_over {
173 | background-position: right -120px !important;
174 | }
175 | .style1 div.scroll_tab_inner span.scroll_tab_right_finisher.tab_selected {
176 | background-position: right -200px;
177 | }
178 |
179 |
180 | .style1 .scroll_tab_left_button {
181 | height: 40px;
182 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -40px;
183 | }
184 |
185 | .style1 .scroll_tab_left_button.scroll_arrow_over {
186 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
187 | }
188 |
189 | .style1 .scroll_tab_left_button.scroll_arrow_over {
190 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
191 | }
192 |
193 | .style1 .scroll_tab_left_button.scroll_arrow_disabled {
194 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -80px;
195 | }
196 |
197 | .style1 .scroll_tab_right_button {
198 | height: 40px;
199 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -40px;
200 | }
201 |
202 | .style1 .scroll_tab_right_button.scroll_arrow_over {
203 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px 0px;
204 | }
205 |
206 | .style1 .scroll_tab_right_button.scroll_arrow_disabled{
207 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -80px;
208 | }
209 |
210 | .style1 div.scroll_tab_inner span.tab_selected {
211 | background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -80px;
212 | }
213 |
214 | .style1 div.scroll_tab_inner span.tab_selected.scroll_tab_first {
215 | background-position: -40px -200px;
216 | }
217 |
--------------------------------------------------------------------------------
/examples/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/examples/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/examples/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/examples/images/header-940.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/header-940.png
--------------------------------------------------------------------------------
/examples/images/header-compressed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/header-compressed.png
--------------------------------------------------------------------------------
/examples/images/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/header.jpg
--------------------------------------------------------------------------------
/examples/images/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/header.png
--------------------------------------------------------------------------------
/examples/images/scroll_tab_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/scroll_tab_bg.jpg
--------------------------------------------------------------------------------
/examples/images/toolbar-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreed/jQuery-ScrollTabs/c28521b1d80239fbd0babc6ab81164eaeaf3261a/examples/images/toolbar-bg.jpg
--------------------------------------------------------------------------------
/examples/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.1.1 (http://getbootstrap.com)
3 | * Copyright 2011-2014 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.isLoading=!1};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",f.resetText||d.data("resetText",d[e]()),d[e](f[b]||this.options[b]),setTimeout(a.proxy(function(){"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},b.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}a&&this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}if(e.hasClass("active"))return this.sliding=!1;var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});return this.$element.trigger(j),j.isDefaultPrevented()?void 0:(this.sliding=!0,f&&this.pause(),this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid.bs.carousel",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")?(e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid.bs.carousel")},0)}).emulateTransitionEnd(1e3*d.css("transition-duration").slice(0,-1))):(d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid.bs.carousel")),f&&this.cycle(),this)};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .panel > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("collapse in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?void this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);!e&&f.toggle&&"show"==c&&(c=!c),e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find('[data-toggle=collapse][data-parent="'+i+'"]').not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(jQuery),+function(a){"use strict";function b(b){a(d).remove(),a(e).each(function(){var d=c(a(this)),e={relatedTarget:this};d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown",e)),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown",e))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('
').insertAfter(a(this)).on("click",b);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown",h),e.focus()}return!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=" li:not(.divider):visible a",i=f.find("[role=menu]"+h+", [role=listbox]"+h);if(i.length){var j=i.index(i.filter(":focus"));38==b.keyCode&&j>0&&j--,40==b.keyCode&&j
'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;(e||"destroy"!=c)&&(e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]())})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(a(c).is("body")?window:c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);{var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})}},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);if(g&&b<=e[0])return g!=(a=f[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parentsUntil(this.options.target,".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=this.pinnedOffset=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(b.RESET).addClass("affix");var a=this.$window.scrollTop(),c=this.$element.offset();return this.pinnedOffset=c.top-a},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"top"==this.affixed&&(e.top+=d),"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top(this.$element)),"function"==typeof h&&(h=f.bottom(this.$element));var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;if(this.affixed!==i){this.unpin&&this.$element.css("top","");var j="affix"+(i?"-"+i:""),k=a.Event(j+".bs.affix");this.$element.trigger(k),k.isDefaultPrevented()||(this.affixed=i,this.unpin="bottom"==i?this.getPinnedOffset():null,this.$element.removeClass(b.RESET).addClass(j).trigger(a.Event(j.replace("affix","affixed"))),"bottom"==i&&this.$element.offset({top:c-h-this.$element.height()}))}}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery ScrollTabs :: Josh Reed
5 |
6 |
7 |
38 |
39 |
40 |
41 |
Download Now!
42 |
Download now to get started. The package includes all the JavaScript and CSS you'll need to add ScrollTabs to your user interface.
43 |
44 | Download (.zip)
45 | Download (.tar.gz)
46 |
47 |
48 |
49 |
50 |
51 |
52 |
Examples
53 |
54 |
55 |
56 | Automatically adjusts to detect whether scrolling is needed, ideal for responsive interfaces. One of the greatest features for jQuery ScrollTabs is that you can have different right-and-left side styling depending on if scrolling is required.
57 | Here you can see that there are rounded corners for the right and left sides when it is not wide enough to scroll, however when scrolling there are right and left arrows accordingly.
58 |
59 |
60 |
61 | This is my tab
62 | Another Tab
63 | Third Tab
64 |
65 |
66 |
67 | This is my tab
68 | Another Tab 1
69 | Another Tab 2
70 | Another Tab 3
71 | Another Tab 4
72 | Another Tab 5
73 | Another Tab 6
74 | Another Tab 7
75 | Another Tab 8
76 | Another Tab 9
77 | Another Tab 10
78 | Another Tab 11
79 | Another Tab 12
80 |
81 |
82 |
83 |
Dynamic
84 |
85 |
86 |
ScrollTabs automatically adjusts when you add more items. There's a simple Javascript API for adding and removing items.
87 |
88 |
89 | First Item
90 |
91 |
92 |
Add Item
93 |
94 |
95 |
96 |
HTML:
97 |
98 | <div id="tabSet" class="scroll_tabs_theme_light">
99 | <span>First Item</span>
100 | </div>
101 |
102 |
JavaScript:
103 |
104 | tabSet = $('#tabSet').scrollTabs();
105 | tabSet.addTab('<span>Added Item</span>');
106 |
107 |
108 |
109 |
List Sytax (Version 2.0+)
110 |
111 |
112 |
ScrollTabs will also handle standard list syntax for greater compatibility with existing lists or other plugins.
113 |
114 |
118 |
119 |
Add Item
120 |
121 |
122 |
123 |
HTML:
124 |
125 | <ul id="tabSet" class="scroll_tabs_theme_light">
126 | <li>First Item</li>
127 | <li>Second Item</li>
128 | </ul>
129 |
130 |
JavaScript:
131 |
132 | tabSet = $('#tabSet').scrollTabs();
133 | tabSet.addTab('<li>Added Item</li>');
134 |
135 |
136 |
137 |
Custom Styling
138 |
139 |
140 |
Basic initialization, without any theme or custom CSS applied. Previous examples used the "light" theme: scroll_tabs_theme_light.
141 |
142 |
143 | First Tab
144 | Another Tab 2
145 | Another Tab 3
146 | Another Tab 4
147 | Another Tab 5
148 | Another Tab 6
149 | Another Tab 7
150 | Another Tab 8
151 | Another Tab 9
152 | Another Tab 10
153 | Another Tab 11
154 | Another Tab 12
155 | Another Tab 13
156 |
157 |
158 |
Remove First Item
159 |
160 |
161 |
162 |
This is an example with the "dark" theme applied. To apply this theme, simply append the class scroll_tabs_theme_dark to the container
163 | div element.
164 |
165 |
166 | First Tab
167 | Another Tab 2
168 | Another Tab 3
169 | Another Tab 4
170 | Another Tab 5
171 | Another Tab 6
172 | Another Tab 7
173 | Another Tab 8
174 | Another Tab 9
175 | Another Tab 10
176 | Another Tab 11
177 | Another Tab 12
178 | Another Tab 13
179 |
180 |
181 |
Remove First Item
182 |
183 |
184 |
185 |
HTML:
186 |
187 | <div id="tabSet" class="scroll_tabs_theme_dark">
188 | <span>First Tab</span>
189 | <!-- ... A Bunch of other Tabs ... -->
190 | </div>
191 |
192 |
Custom Background Images
193 |
194 |
Beyond using simple CSS to style your tabbed interface, you could also make use of background images. This can allow you to
195 | provide more unique styling without sacrificing browser compatibility (in some cases). Below is an example of a custom style for
196 | a dark-gray themed toolbar. Use the button to remove some tabs in order to see how it appears without the scrolling arrows.
197 |
198 |
199 |
200 | First Tab
201 | Another Tab 2
202 | Another Tab 3
203 | Another Tab 4
204 | Another Tab 5
205 | Another Tab 6
206 | Another Tab 7
207 | Another Tab 8
208 | Another Tab 9
209 | Another Tab 10
210 | Another Tab 11
211 | Another Tab 12
212 | Another Tab 13
213 |
214 |
215 |
216 |
Remove First Item
217 |
218 |
219 |
220 |
Here is the Custom CSS that provides for the above example:
221 |
222 |
223 |
224 |
225 |
226 | .style1 .scroll_tab_left_button ::before {
227 | content : "";
228 | padding : 0px;
229 | }
230 |
231 | .style1 .scroll_tab_right_button ::before {
232 | content : "";
233 | padding : 0px;
234 | }
235 |
236 |
237 | .style1 div .scroll_tab_inner {
238 | height : 40px;
239 | background : url(../images/toolbar-bg.jpg) repeat-x;
240 | }
241 |
242 |
243 | .style1 div .scroll_tab_inner span {
244 | padding-left : 20px;
245 | padding-right : 20px;
246 | line-height : 40px;
247 | font-size : 14px;
248 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -40px;
249 | color : #FFFFFF;
250 | cursor : pointer;
251 | }
252 |
253 |
254 | .style1 div .scroll_tab_inner span .scroll_tab_first {
255 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px -40px;
256 | }
257 |
258 |
259 | .style1 div .scroll_tab_inner span .scroll_tab_over {
260 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px 0px !important;
261 | }
262 |
263 |
264 | .style1 div .scroll_tab_inner span .scroll_tab_first .scroll_tab_over {
265 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
266 | }
267 |
268 |
269 | .style1 div .scroll_tab_inner span .scroll_tab_left_finisher {
270 | padding : 0px;
271 | width : 10px;
272 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -160px;
273 | }
274 |
275 |
276 | .style1 div .scroll_tab_inner span .scroll_tab_left_finisher .scroll_tab_over {
277 | background-position : 0px -120px !important;
278 | }
279 |
280 |
281 | .style1 div .scroll_tab_inner span .scroll_tab_left_finisher .tab_selected {
282 | background-position : 0px -200px;
283 | }
284 |
285 |
286 | .style1 div .scroll_tab_inner span .scroll_tab_right_finisher {
287 | padding : 0px;
288 | width : 10px;
289 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat right -160px;
290 | }
291 |
292 |
293 | .style1 div .scroll_tab_inner span .scroll_tab_right_finisher .scroll_tab_over {
294 | background-position : right -120px !important;
295 | }
296 |
297 |
298 | .style1 div .scroll_tab_inner span .scroll_tab_right_finisher .tab_selected {
299 | background-position : right -200px;
300 | }
301 |
302 |
303 | .style1 .scroll_tab_left_button {
304 | height : 40px;
305 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -40px;
306 | }
307 |
308 |
309 | .style1 .scroll_tab_left_button .scroll_arrow_over {
310 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
311 | }
312 |
313 |
314 | .style1 .scroll_tab_left_button .scroll_arrow_disabled {
315 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -80px;
316 | }
317 |
318 |
319 | .style1 .scroll_tab_right_button {
320 | height : 40px;
321 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -40px;
322 | }
323 |
324 |
325 | .style1 .scroll_tab_right_button .scroll_arrow_over {
326 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px 0px;
327 | }
328 |
329 |
330 | .style1 .scroll_tab_right_button .scroll_arrow_disabled {
331 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -80px;
332 | }
333 |
334 |
335 | .style1 div .scroll_tab_inner span .tab_selected {
336 | background : transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -80px;
337 | }
338 |
339 |
340 | .style1 div .scroll_tab_inner span .tab_selected .scroll_tab_first {
341 | background-position : -40px -200px;
342 | }
343 |
344 |
345 |
"+$(this).html()+"
");
35 |
36 | $(".scroll_tab_left_button", this).append($(opts.left_arrow_content_html));
37 | $(".scroll_tab_right_button", this).append($(opts.right_arrow_content_html));
38 |
39 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', this).css({
40 | 'display': 'none'
41 | });
42 |
43 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', this).css({
44 | 'display': 'none'
45 | });
46 |
47 |
48 | var _this = this;
49 |
50 | $('.scroll_tab_inner', this).css({
51 | 'margin': '0px',
52 | 'overflow': 'hidden',
53 | 'white-space': 'nowrap',
54 | '-ms-text-overflow': 'clip',
55 | 'text-overflow': 'clip',
56 | 'font-size': '0px',
57 | 'position': 'absolute',
58 | 'top': '0px',
59 | 'left': opts.left_arrow_size + 'px',
60 | 'right': opts.right_arrow_size + 'px'
61 | });
62 |
63 | // If mousewheel function not present, don't utilize it
64 | if($.isFunction($.fn.mousewheel)){
65 | $('.scroll_tab_inner', this).mousewheel(function(event, delta){
66 | // Only do mousewheel scrolling if scrolling is necessary
67 | if($('.scroll_tab_right_button', _this).css('display') !== 'none'){
68 | this.scrollLeft -= (delta * 30);
69 | state.scrollPos = this.scrollLeft;
70 | event.preventDefault();
71 | }
72 | });
73 | }
74 |
75 | // Set initial scroll position
76 | $('.scroll_tab_inner', _this).animate({scrollLeft: state.scrollPos + 'px'}, 0);
77 |
78 | $('.scroll_tab_left_button', this).css({
79 | 'position': 'absolute',
80 | 'left': '0px',
81 | 'top': '0px',
82 | 'width': opts.left_arrow_size + 'px',
83 | 'cursor': 'pointer'
84 | });
85 |
86 | $('.scroll_tab_right_button', this).css({
87 | 'position': 'absolute',
88 | 'right': '0px',
89 | 'top': '0px',
90 | 'width': opts.right_arrow_size + 'px',
91 | 'cursor': 'pointer'
92 | });
93 |
94 | $('.scroll_tab_inner > '+_this.itemTag, _this).css({
95 | 'display': '-moz-inline-stack',
96 | 'display': 'inline-block',
97 | 'zoom':1,
98 | '*display': 'inline',
99 | '_height': '40px',
100 | '-webkit-user-select': 'none',
101 | '-khtml-user-select': 'none',
102 | '-moz-user-select': 'none',
103 | '-ms-user-select': 'none',
104 | '-o-user-select': 'none',
105 | 'user-select': 'none'
106 | });
107 |
108 |
109 | var size_checking = function(){
110 | var panel_width = $('.scroll_tab_inner', _this).outerWidth();
111 |
112 | if($('.scroll_tab_inner', _this)[0].scrollWidth > panel_width){
113 | $('.scroll_tab_right_button',_this).show();
114 | $('.scroll_tab_left_button',_this).show();
115 | $('.scroll_tab_inner',_this).css({left: opts.left_arrow_size + 'px', right: opts.right_arrow_size + 'px'});
116 | $('.scroll_tab_left_finisher',_this).css('display','none');
117 | $('.scroll_tab_right_finisher',_this).css('display','none');
118 |
119 | if($('.scroll_tab_inner', _this)[0].scrollWidth - panel_width == $('.scroll_tab_inner', _this).scrollLeft()){
120 | $('.scroll_tab_right_button', _this).addClass('scroll_arrow_disabled').addClass('scroll_tab_right_button_disabled');
121 | } else {
122 | $('.scroll_tab_right_button', _this).removeClass('scroll_arrow_disabled').removeClass('scroll_tab_right_button_disabled');
123 | }
124 | if ($('.scroll_tab_inner', _this).scrollLeft() == 0) {
125 | $('.scroll_tab_left_button', _this).addClass('scroll_arrow_disabled').addClass('scroll_tab_left_button_disabled');
126 | } else {
127 | $('.scroll_tab_left_button', _this).removeClass('scroll_arrow_disabled').removeClass('scroll_tab_left_button_disabled');
128 | }
129 | } else {
130 | $('.scroll_tab_right_button',_this).hide();
131 | $('.scroll_tab_left_button',_this).hide();
132 | $('.scroll_tab_inner',_this).css({left: '0px', right: '0px'});
133 |
134 | if($('.scroll_tab_inner > '+_this.itemTag+':not(.scroll_tab_right_finisher):not(.scroll_tab_left_finisher):visible', _this).length > 0){
135 | $('.scroll_tab_left_finisher',_this).css('display','inline-block');
136 | $('.scroll_tab_right_finisher',_this).css('display','inline-block');
137 | }
138 | }
139 | };
140 |
141 | size_checking();
142 |
143 | state.delay_timer = setInterval(function(){
144 | size_checking();
145 | }, 500);
146 |
147 | var press_and_hold_timeout;
148 |
149 | $('.scroll_tab_right_button', this).mousedown(function(e){
150 | e.stopPropagation();
151 | var scrollRightFunc = function(){
152 | var left = $('.scroll_tab_inner', _this).scrollLeft();
153 | state.scrollPos = Math.min(left + opts.scroll_distance,$('.scroll_tab_inner', _this)[0].scrollWidth - $('.scroll_tab_inner', _this).outerWidth());
154 | $('.scroll_tab_inner', _this).animate({scrollLeft: (left + opts.scroll_distance) + 'px'}, opts.scroll_duration);
155 | };
156 | scrollRightFunc();
157 |
158 | press_and_hold_timeout = setInterval(function(){
159 | scrollRightFunc();
160 | }, opts.scroll_duration);
161 | }).bind("mouseup mouseleave", function(){
162 | clearInterval(press_and_hold_timeout);
163 | }).mouseover(function(){
164 | $(this).addClass('scroll_arrow_over').addClass('scroll_tab_right_button_over');
165 | }).mouseout(function(){
166 | $(this).removeClass('scroll_arrow_over').removeClass('scroll_tab_right_button_over');
167 | });
168 |
169 | $('.scroll_tab_left_button', this).mousedown(function(e){
170 | e.stopPropagation();
171 | var scrollLeftFunc = function(){
172 | var left = $('.scroll_tab_inner', _this).scrollLeft();
173 | state.scrollPos = Math.max(left - opts.scroll_distance,0);
174 | $('.scroll_tab_inner', _this).animate({scrollLeft: (left - opts.scroll_distance) + 'px'}, opts.scroll_duration);
175 | };
176 | scrollLeftFunc();
177 |
178 | press_and_hold_timeout = setInterval(function(){
179 | scrollLeftFunc();
180 | }, opts.scroll_duration);
181 | }).bind("mouseup mouseleave", function(){
182 | clearInterval(press_and_hold_timeout);
183 | }).mouseover(function(){
184 | $(this).addClass('scroll_arrow_over').addClass('scroll_tab_left_button_over');
185 | }).mouseout(function(){
186 | $(this).removeClass('scroll_arrow_over').removeClass('scroll_tab_left_button_over');
187 | });
188 |
189 | $('.scroll_tab_inner > '+this.itemTag+(this.itemTag !== 'span' ? ', .scroll_tab_inner > span' : ''), this).mouseover(function(){
190 | $(this).addClass('scroll_tab_over');
191 | if($(this).hasClass('scroll_tab_left_finisher')){
192 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).addClass('scroll_tab_over').addClass('scroll_tab_first_over');
193 | }
194 | if($(this).hasClass('scroll_tab_right_finisher')){
195 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).addClass('scroll_tab_over').addClass('scroll_tab_last_over');
196 | }
197 | if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
198 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).addClass('scroll_tab_over').addClass('scroll_tab_left_finisher_over');
199 | }
200 | if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
201 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).addClass('scroll_tab_over').addClass('scroll_tab_right_finisher_over');
202 | }
203 | }).mouseout(function(){
204 | $(this).removeClass('scroll_tab_over');
205 | if($(this).hasClass('scroll_tab_left_finisher')){
206 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_first_over');
207 | }
208 | if($(this).hasClass('scroll_tab_right_finisher')){
209 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_last_over');
210 | }
211 | if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
212 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_left_finisher_over');
213 | }
214 | if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
215 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_right_finisher_over');
216 | }
217 | }).click(function(e){
218 | e.stopPropagation();
219 | $('.tab_selected',_this).removeClass('tab_selected scroll_tab_first_selected scroll_tab_last_selected scroll_tab_left_finisher_selected scroll_tab_right_finisher_selected');
220 | $(this).addClass('tab_selected');
221 |
222 | var context_obj = this;
223 | if($(this).hasClass('scroll_tab_left_finisher')){
224 | context_obj = $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).addClass('tab_selected').addClass('scroll_tab_first_selected');
225 | }
226 | if($(this).hasClass('scroll_tab_right_finisher')){
227 | context_obj = $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).addClass('tab_selected').addClass('scroll_tab_last_selected');
228 | }
229 | if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
230 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
231 | }
232 | if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
233 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
234 | }
235 |
236 | // "Slide" it into view if not fully visible.
237 | scroll_selected_into_view.call(_this, state);
238 |
239 | opts.click_callback.call(context_obj,e);
240 | });
241 |
242 | // Check to set the edges as selected if needed
243 | if($('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('tab_selected'))
244 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_left_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
245 | if($('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('tab_selected'))
246 | $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_right_finisher', _this).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
247 | };
248 |
249 | var scroll_selected_into_view = function(state){
250 | var _this = this;
251 |
252 | var selected_item = $('.tab_selected:not(.scroll_tab_right_finisher, .scroll_tab_left_finisher)', _this);
253 |
254 | var left = $('.scroll_tab_inner', _this).scrollLeft();
255 | var scroll_width = $('.scroll_tab_inner', _this).width();
256 | if(selected_item && typeof(selected_item) !== 'undefined' && selected_item.position() && typeof(selected_item.position()) !== 'undefined'){
257 | if(selected_item.position().left < 0){
258 | state.scrollPos = Math.max(left + selected_item.position().left + 1,0);
259 | $('.scroll_tab_inner', _this).animate({scrollLeft: (left + selected_item.position().left + 1) + 'px'}, opts.scroll_duration);
260 | } else if ((selected_item.position().left + selected_item.outerWidth()) > scroll_width){
261 | state.scrollPos = Math.min(left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width),$('.scroll_tab_inner', _this)[0].scrollWidth - $('.scroll_tab_inner', _this).outerWidth());
262 | $('.scroll_tab_inner', _this).animate({scrollLeft: (left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width)) + 'px'}, opts.scroll_duration);
263 | }
264 | }
265 | };
266 |
267 | var ret = [];
268 |
269 | this.each(function(){
270 | var backup = $(this).html();
271 |
272 | var state = {};
273 | state.scrollPos = 0;
274 | initialize.call(this, state);
275 |
276 | var context_obj = this;
277 |
278 | ret.push({
279 | domObject: context_obj,
280 | state: state,
281 | addTab: function(html, position){
282 | if(typeof(position) === 'undefined'){
283 | position = $('.scroll_tab_inner > '+context_obj.itemTag, context_obj).length - (context_obj.itemTag === 'span' ? 2 : 0);
284 | }
285 |
286 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
287 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
288 | backup = "";
289 | var count = 0;
290 | $('.scroll_tab_inner > '+context_obj.itemTag, context_obj).each(function(){
291 | if($(this).hasClass('scroll_tab_left_finisher') || $(this).hasClass('scroll_tab_right_finisher')) return true;
292 | if(position == count){
293 | backup += html;
294 | }
295 | backup += $(this).clone().wrap('').parent().html();
296 | count++;
297 | });
298 |
299 | if(position >= count)
300 | backup += html;
301 |
302 | this.destroy();
303 | initialize.call(context_obj, state);
304 | this.refreshFirstLast();
305 | },
306 | removeTabs: function(jquery_selector_str){
307 | $('.scroll_tab_left_finisher', context_obj).remove();
308 | $('.scroll_tab_right_finisher', context_obj).remove();
309 |
310 | $(jquery_selector_str, context_obj).remove();
311 |
312 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
313 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
314 |
315 | this.refreshState();
316 | },
317 | destroy: function(){
318 | clearInterval(state.delay_timer);
319 | $(context_obj).html(backup);
320 | $(context_obj).removeClass('scroll_tabs_container');
321 | },
322 | refreshState: function(){
323 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
324 | $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
325 | backup = $('.scroll_tab_inner',context_obj).html();
326 | this.destroy();
327 | initialize.call(context_obj, state);
328 | this.refreshFirstLast();
329 | },
330 | clearTabs: function(){
331 | backup = "";
332 | this.destroy();
333 | initialize.call(context_obj, state);
334 | this.refreshFirstLast();
335 | },
336 | refreshFirstLast: function(){
337 | var old_last_item = $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj);
338 | var old_first_item = $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj);
339 |
340 | old_last_item.removeClass('scroll_tab_last');
341 | old_first_item.removeClass('scroll_tab_first');
342 |
343 | if(old_last_item.hasClass('tab_selected'))
344 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).removeClass('tab_selected scroll_tab_right_finisher_selected');
345 | if(old_first_item.hasClass('tab_selected'))
346 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).removeClass('tab_selected scroll_tab_left_finisher_selected');
347 |
348 | if($('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_right_finisher):not(.scroll_tab_left_finisher):visible', context_obj).length > 0){
349 | var new_last_item = $('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_right_finisher):visible', context_obj).last();
350 | var new_first_item = $('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_left_finisher):visible', context_obj).first();
351 |
352 | new_last_item.addClass('scroll_tab_last');
353 | new_first_item.addClass('scroll_tab_first');
354 |
355 | if(new_last_item.hasClass('tab_selected'))
356 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
357 | if(new_first_item.hasClass('tab_selected'))
358 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
359 | } else {
360 | $('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).hide();
361 | $('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).hide();
362 | }
363 | },
364 | hideTabs: function(domObj){
365 | $(domObj, context_obj).css('display','none');
366 | this.refreshFirstLast();
367 | },
368 | showTabs: function(domObj){
369 | $(domObj, context_obj).css({
370 | 'display': '-moz-inline-stack',
371 | 'display': 'inline-block',
372 | '*display': 'inline'
373 | });
374 | this.refreshFirstLast();
375 | },
376 | scrollSelectedIntoView:function(){
377 | scroll_selected_into_view.call(context_obj, state);
378 | }
379 | });
380 | });
381 |
382 | if(this.length == 1){
383 | return ret[0];
384 | } else {
385 | return ret;
386 | }
387 | };
388 |
389 | $.fn.scrollTabs.defaultOptions = {
390 | scroll_distance: 300,
391 | scroll_duration: 300,
392 | left_arrow_size: 26,
393 | right_arrow_size: 26,
394 | left_arrow_content_html: '',
395 | right_arrow_content_html: '',
396 | click_callback: function(e){
397 | var val = $(this).attr('rel');
398 | if(val){
399 | window.location.href = val;
400 | }
401 | }
402 | };
403 | })(jQuery);
404 |
--------------------------------------------------------------------------------
/scrolltabs.jquery.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "scrolltabs",
3 | "title": "jQuery ScrollTabs",
4 | "description": "jQuery highly configurable plugin to handle scrolling tabs horizontally when not enough space is available.",
5 | "keywords": [
6 | "scroll",
7 | "tabs",
8 | "tabbed",
9 | "horizontal"
10 | ],
11 | "version": "2.0.0",
12 | "author": {
13 | "name": "Josh Reed"
14 | },
15 | "maintainers": [
16 | {
17 | "name": "Josh Reed"
18 | }
19 | ],
20 | "licenses": [
21 | {
22 | "type": "MIT",
23 | "url": "https://github.com/joshreed/jQuery-ScrollTabs/blob/2.0.0/LICENSE"
24 | }
25 | ],
26 | "homepage": "http://joshreed.github.io/jQuery-ScrollTabs/",
27 | "docs": "http://joshreed.github.io/jQuery-ScrollTabs/documentation.html",
28 | "download": "http://joshreed.github.io/jQuery-ScrollTabs/index.html",
29 | "dependencies": {
30 | "jquery": ">=1.7.1"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------