├── Changes ├── LICENSE ├── README.md ├── demo ├── assets │ ├── css │ │ ├── animate.css │ │ ├── bootstrap.css │ │ ├── font-awesome.css │ │ ├── jquery.fs.picker.css │ │ ├── jquery.fs.scroller.css │ │ ├── jquery.fs.selecter.css │ │ ├── refineslide-theme-dark.css │ │ ├── refineslide.css │ │ ├── scojs.css │ │ └── theme.css │ ├── fonts │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.eot?v=4.0.3 │ │ ├── fontawesome-webfont.svg?v=4.0.3 │ │ ├── fontawesome-webfont.ttf?v=4.0.3 │ │ ├── fontawesome-webfont.woff │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ ├── bg-main.jpg │ │ ├── black10.png │ │ ├── black60.png │ │ ├── fs-picker-icon.png │ │ ├── fs-selecter-arrow.png │ │ ├── s-1.jpg │ │ ├── s-2.jpg │ │ └── s-3.jpg │ └── js │ │ ├── bootstrap.js │ │ ├── dynamo.min.js │ │ ├── jquery.fs.picker.js │ │ ├── jquery.fs.scroller.js │ │ ├── jquery.fs.selecter.js │ │ ├── jquery.js │ │ ├── jquery.refineslide.js │ │ ├── sco.ajax.js │ │ ├── sco.collapse.js │ │ ├── sco.confirm.js │ │ ├── sco.countdown.js │ │ ├── sco.message.js │ │ ├── sco.modal.js │ │ └── theme.js ├── cars.db ├── cars.sql ├── images │ ├── audi_a4_2003_blue.jpg │ ├── audi_a8_2014_white.jpg │ ├── audi_q7_2007_silver.jpg │ ├── bmw_325i_2002_white.jpg │ ├── bmw_m3_1998_silver.jpg │ ├── bmw_z4_2003_silver.jpg │ ├── maserati_spyder_2012_silver.jpg │ ├── mini_clubman_2010_black.jpg │ ├── mini_cooper_2010_red.jpg │ └── no_image.jpg ├── index.php └── js │ ├── demo.js │ ├── jquery.deserialize.js │ ├── jquery.facets.js │ └── jquery.min.js ├── facets.jquery.json ├── jquery.deserialize.js ├── jquery.facets.js └── jquery.min.js /Changes: -------------------------------------------------------------------------------- 1 | 0.0.8 2 | 3 | Added get/set method 4 | 5 | 0.0.7 6 | 7 | Added shouldSubmit 8 | 9 | 0.0.4 10 | 11 | Added generateData functionality. 12 | 13 | 0.0.3 14 | 15 | Manifest issue 16 | 17 | 0.0.2 18 | 19 | Fixed issue with hashOptions. Also, fixed it so that empty values are not sent in ajax request 20 | 21 | 0.0.1 22 | 23 | Released to the world! -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2013 Adam Hopkins, Inc. http://srchulo.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery-Facets 2 | ============= 3 | 4 | A jQuery plugin that facilitates faceted search. 5 | 6 | All information about this plugin including documentation can be found 7 | [here](http://srchulo.com/jquery_plugins/jquery_facets.html "jQuery Facets") 8 | -------------------------------------------------------------------------------- /demo/assets/css/font-awesome.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); 10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | .fa { 15 | display: inline-block; 16 | font-family: FontAwesome; 17 | font-style: normal; 18 | font-weight: normal; 19 | line-height: 1; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | /* makes the font 33% larger relative to the icon container */ 24 | .fa-lg { 25 | font-size: 1.3333333333333333em; 26 | line-height: 0.75em; 27 | vertical-align: -15%; 28 | } 29 | .fa-2x { 30 | font-size: 2em; 31 | } 32 | .fa-3x { 33 | font-size: 3em; 34 | } 35 | .fa-4x { 36 | font-size: 4em; 37 | } 38 | .fa-5x { 39 | font-size: 5em; 40 | } 41 | .fa-fw { 42 | width: 1.2857142857142858em; 43 | text-align: center; 44 | } 45 | .fa-ul { 46 | padding-left: 0; 47 | margin-left: 2.142857142857143em; 48 | list-style-type: none; 49 | } 50 | .fa-ul > li { 51 | position: relative; 52 | } 53 | .fa-li { 54 | position: absolute; 55 | left: -2.142857142857143em; 56 | width: 2.142857142857143em; 57 | top: 0.14285714285714285em; 58 | text-align: center; 59 | } 60 | .fa-li.fa-lg { 61 | left: -1.8571428571428572em; 62 | } 63 | .fa-border { 64 | padding: .2em .25em .15em; 65 | border: solid 0.08em #eeeeee; 66 | border-radius: .1em; 67 | } 68 | .pull-right { 69 | float: right; 70 | } 71 | .pull-left { 72 | float: left; 73 | } 74 | .fa.pull-left { 75 | margin-right: .3em; 76 | } 77 | .fa.pull-right { 78 | margin-left: .3em; 79 | } 80 | .fa-spin { 81 | -webkit-animation: spin 2s infinite linear; 82 | -moz-animation: spin 2s infinite linear; 83 | -o-animation: spin 2s infinite linear; 84 | animation: spin 2s infinite linear; 85 | } 86 | @-moz-keyframes spin { 87 | 0% { 88 | -moz-transform: rotate(0deg); 89 | } 90 | 100% { 91 | -moz-transform: rotate(359deg); 92 | } 93 | } 94 | @-webkit-keyframes spin { 95 | 0% { 96 | -webkit-transform: rotate(0deg); 97 | } 98 | 100% { 99 | -webkit-transform: rotate(359deg); 100 | } 101 | } 102 | @-o-keyframes spin { 103 | 0% { 104 | -o-transform: rotate(0deg); 105 | } 106 | 100% { 107 | -o-transform: rotate(359deg); 108 | } 109 | } 110 | @-ms-keyframes spin { 111 | 0% { 112 | -ms-transform: rotate(0deg); 113 | } 114 | 100% { 115 | -ms-transform: rotate(359deg); 116 | } 117 | } 118 | @keyframes spin { 119 | 0% { 120 | transform: rotate(0deg); 121 | } 122 | 100% { 123 | transform: rotate(359deg); 124 | } 125 | } 126 | .fa-rotate-90 { 127 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 128 | -webkit-transform: rotate(90deg); 129 | -moz-transform: rotate(90deg); 130 | -ms-transform: rotate(90deg); 131 | -o-transform: rotate(90deg); 132 | transform: rotate(90deg); 133 | } 134 | .fa-rotate-180 { 135 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 136 | -webkit-transform: rotate(180deg); 137 | -moz-transform: rotate(180deg); 138 | -ms-transform: rotate(180deg); 139 | -o-transform: rotate(180deg); 140 | transform: rotate(180deg); 141 | } 142 | .fa-rotate-270 { 143 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 144 | -webkit-transform: rotate(270deg); 145 | -moz-transform: rotate(270deg); 146 | -ms-transform: rotate(270deg); 147 | -o-transform: rotate(270deg); 148 | transform: rotate(270deg); 149 | } 150 | .fa-flip-horizontal { 151 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 152 | -webkit-transform: scale(-1, 1); 153 | -moz-transform: scale(-1, 1); 154 | -ms-transform: scale(-1, 1); 155 | -o-transform: scale(-1, 1); 156 | transform: scale(-1, 1); 157 | } 158 | .fa-flip-vertical { 159 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 160 | -webkit-transform: scale(1, -1); 161 | -moz-transform: scale(1, -1); 162 | -ms-transform: scale(1, -1); 163 | -o-transform: scale(1, -1); 164 | transform: scale(1, -1); 165 | } 166 | .fa-stack { 167 | position: relative; 168 | display: inline-block; 169 | width: 2em; 170 | height: 2em; 171 | line-height: 2em; 172 | vertical-align: middle; 173 | } 174 | .fa-stack-1x, 175 | .fa-stack-2x { 176 | position: absolute; 177 | left: 0; 178 | width: 100%; 179 | text-align: center; 180 | } 181 | .fa-stack-1x { 182 | line-height: inherit; 183 | } 184 | .fa-stack-2x { 185 | font-size: 2em; 186 | } 187 | .fa-inverse { 188 | color: #ffffff; 189 | } 190 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 191 | readers do not read off random characters that represent icons */ 192 | .fa-glass:before { 193 | content: "\f000"; 194 | } 195 | .fa-music:before { 196 | content: "\f001"; 197 | } 198 | .fa-search:before { 199 | content: "\f002"; 200 | } 201 | .fa-envelope-o:before { 202 | content: "\f003"; 203 | } 204 | .fa-heart:before { 205 | content: "\f004"; 206 | } 207 | .fa-star:before { 208 | content: "\f005"; 209 | } 210 | .fa-star-o:before { 211 | content: "\f006"; 212 | } 213 | .fa-user:before { 214 | content: "\f007"; 215 | } 216 | .fa-film:before { 217 | content: "\f008"; 218 | } 219 | .fa-th-large:before { 220 | content: "\f009"; 221 | } 222 | .fa-th:before { 223 | content: "\f00a"; 224 | } 225 | .fa-th-list:before { 226 | content: "\f00b"; 227 | } 228 | .fa-check:before { 229 | content: "\f00c"; 230 | } 231 | .fa-times:before { 232 | content: "\f00d"; 233 | } 234 | .fa-search-plus:before { 235 | content: "\f00e"; 236 | } 237 | .fa-search-minus:before { 238 | content: "\f010"; 239 | } 240 | .fa-power-off:before { 241 | content: "\f011"; 242 | } 243 | .fa-signal:before { 244 | content: "\f012"; 245 | } 246 | .fa-gear:before, 247 | .fa-cog:before { 248 | content: "\f013"; 249 | } 250 | .fa-trash-o:before { 251 | content: "\f014"; 252 | } 253 | .fa-home:before { 254 | content: "\f015"; 255 | } 256 | .fa-file-o:before { 257 | content: "\f016"; 258 | } 259 | .fa-clock-o:before { 260 | content: "\f017"; 261 | } 262 | .fa-road:before { 263 | content: "\f018"; 264 | } 265 | .fa-download:before { 266 | content: "\f019"; 267 | } 268 | .fa-arrow-circle-o-down:before { 269 | content: "\f01a"; 270 | } 271 | .fa-arrow-circle-o-up:before { 272 | content: "\f01b"; 273 | } 274 | .fa-inbox:before { 275 | content: "\f01c"; 276 | } 277 | .fa-play-circle-o:before { 278 | content: "\f01d"; 279 | } 280 | .fa-rotate-right:before, 281 | .fa-repeat:before { 282 | content: "\f01e"; 283 | } 284 | .fa-refresh:before { 285 | content: "\f021"; 286 | } 287 | .fa-list-alt:before { 288 | content: "\f022"; 289 | } 290 | .fa-lock:before { 291 | content: "\f023"; 292 | } 293 | .fa-flag:before { 294 | content: "\f024"; 295 | } 296 | .fa-headphones:before { 297 | content: "\f025"; 298 | } 299 | .fa-volume-off:before { 300 | content: "\f026"; 301 | } 302 | .fa-volume-down:before { 303 | content: "\f027"; 304 | } 305 | .fa-volume-up:before { 306 | content: "\f028"; 307 | } 308 | .fa-qrcode:before { 309 | content: "\f029"; 310 | } 311 | .fa-barcode:before { 312 | content: "\f02a"; 313 | } 314 | .fa-tag:before { 315 | content: "\f02b"; 316 | } 317 | .fa-tags:before { 318 | content: "\f02c"; 319 | } 320 | .fa-book:before { 321 | content: "\f02d"; 322 | } 323 | .fa-bookmark:before { 324 | content: "\f02e"; 325 | } 326 | .fa-print:before { 327 | content: "\f02f"; 328 | } 329 | .fa-camera:before { 330 | content: "\f030"; 331 | } 332 | .fa-font:before { 333 | content: "\f031"; 334 | } 335 | .fa-bold:before { 336 | content: "\f032"; 337 | } 338 | .fa-italic:before { 339 | content: "\f033"; 340 | } 341 | .fa-text-height:before { 342 | content: "\f034"; 343 | } 344 | .fa-text-width:before { 345 | content: "\f035"; 346 | } 347 | .fa-align-left:before { 348 | content: "\f036"; 349 | } 350 | .fa-align-center:before { 351 | content: "\f037"; 352 | } 353 | .fa-align-right:before { 354 | content: "\f038"; 355 | } 356 | .fa-align-justify:before { 357 | content: "\f039"; 358 | } 359 | .fa-list:before { 360 | content: "\f03a"; 361 | } 362 | .fa-dedent:before, 363 | .fa-outdent:before { 364 | content: "\f03b"; 365 | } 366 | .fa-indent:before { 367 | content: "\f03c"; 368 | } 369 | .fa-video-camera:before { 370 | content: "\f03d"; 371 | } 372 | .fa-picture-o:before { 373 | content: "\f03e"; 374 | } 375 | .fa-pencil:before { 376 | content: "\f040"; 377 | } 378 | .fa-map-marker:before { 379 | content: "\f041"; 380 | } 381 | .fa-adjust:before { 382 | content: "\f042"; 383 | } 384 | .fa-tint:before { 385 | content: "\f043"; 386 | } 387 | .fa-edit:before, 388 | .fa-pencil-square-o:before { 389 | content: "\f044"; 390 | } 391 | .fa-share-square-o:before { 392 | content: "\f045"; 393 | } 394 | .fa-check-square-o:before { 395 | content: "\f046"; 396 | } 397 | .fa-arrows:before { 398 | content: "\f047"; 399 | } 400 | .fa-step-backward:before { 401 | content: "\f048"; 402 | } 403 | .fa-fast-backward:before { 404 | content: "\f049"; 405 | } 406 | .fa-backward:before { 407 | content: "\f04a"; 408 | } 409 | .fa-play:before { 410 | content: "\f04b"; 411 | } 412 | .fa-pause:before { 413 | content: "\f04c"; 414 | } 415 | .fa-stop:before { 416 | content: "\f04d"; 417 | } 418 | .fa-forward:before { 419 | content: "\f04e"; 420 | } 421 | .fa-fast-forward:before { 422 | content: "\f050"; 423 | } 424 | .fa-step-forward:before { 425 | content: "\f051"; 426 | } 427 | .fa-eject:before { 428 | content: "\f052"; 429 | } 430 | .fa-chevron-left:before { 431 | content: "\f053"; 432 | } 433 | .fa-chevron-right:before { 434 | content: "\f054"; 435 | } 436 | .fa-plus-circle:before { 437 | content: "\f055"; 438 | } 439 | .fa-minus-circle:before { 440 | content: "\f056"; 441 | } 442 | .fa-times-circle:before { 443 | content: "\f057"; 444 | } 445 | .fa-check-circle:before { 446 | content: "\f058"; 447 | } 448 | .fa-question-circle:before { 449 | content: "\f059"; 450 | } 451 | .fa-info-circle:before { 452 | content: "\f05a"; 453 | } 454 | .fa-crosshairs:before { 455 | content: "\f05b"; 456 | } 457 | .fa-times-circle-o:before { 458 | content: "\f05c"; 459 | } 460 | .fa-check-circle-o:before { 461 | content: "\f05d"; 462 | } 463 | .fa-ban:before { 464 | content: "\f05e"; 465 | } 466 | .fa-arrow-left:before { 467 | content: "\f060"; 468 | } 469 | .fa-arrow-right:before { 470 | content: "\f061"; 471 | } 472 | .fa-arrow-up:before { 473 | content: "\f062"; 474 | } 475 | .fa-arrow-down:before { 476 | content: "\f063"; 477 | } 478 | .fa-mail-forward:before, 479 | .fa-share:before { 480 | content: "\f064"; 481 | } 482 | .fa-expand:before { 483 | content: "\f065"; 484 | } 485 | .fa-compress:before { 486 | content: "\f066"; 487 | } 488 | .fa-plus:before { 489 | content: "\f067"; 490 | } 491 | .fa-minus:before { 492 | content: "\f068"; 493 | } 494 | .fa-asterisk:before { 495 | content: "\f069"; 496 | } 497 | .fa-exclamation-circle:before { 498 | content: "\f06a"; 499 | } 500 | .fa-gift:before { 501 | content: "\f06b"; 502 | } 503 | .fa-leaf:before { 504 | content: "\f06c"; 505 | } 506 | .fa-fire:before { 507 | content: "\f06d"; 508 | } 509 | .fa-eye:before { 510 | content: "\f06e"; 511 | } 512 | .fa-eye-slash:before { 513 | content: "\f070"; 514 | } 515 | .fa-warning:before, 516 | .fa-exclamation-triangle:before { 517 | content: "\f071"; 518 | } 519 | .fa-plane:before { 520 | content: "\f072"; 521 | } 522 | .fa-calendar:before { 523 | content: "\f073"; 524 | } 525 | .fa-random:before { 526 | content: "\f074"; 527 | } 528 | .fa-comment:before { 529 | content: "\f075"; 530 | } 531 | .fa-magnet:before { 532 | content: "\f076"; 533 | } 534 | .fa-chevron-up:before { 535 | content: "\f077"; 536 | } 537 | .fa-chevron-down:before { 538 | content: "\f078"; 539 | } 540 | .fa-retweet:before { 541 | content: "\f079"; 542 | } 543 | .fa-shopping-cart:before { 544 | content: "\f07a"; 545 | } 546 | .fa-folder:before { 547 | content: "\f07b"; 548 | } 549 | .fa-folder-open:before { 550 | content: "\f07c"; 551 | } 552 | .fa-arrows-v:before { 553 | content: "\f07d"; 554 | } 555 | .fa-arrows-h:before { 556 | content: "\f07e"; 557 | } 558 | .fa-bar-chart-o:before { 559 | content: "\f080"; 560 | } 561 | .fa-twitter-square:before { 562 | content: "\f081"; 563 | } 564 | .fa-facebook-square:before { 565 | content: "\f082"; 566 | } 567 | .fa-camera-retro:before { 568 | content: "\f083"; 569 | } 570 | .fa-key:before { 571 | content: "\f084"; 572 | } 573 | .fa-gears:before, 574 | .fa-cogs:before { 575 | content: "\f085"; 576 | } 577 | .fa-comments:before { 578 | content: "\f086"; 579 | } 580 | .fa-thumbs-o-up:before { 581 | content: "\f087"; 582 | } 583 | .fa-thumbs-o-down:before { 584 | content: "\f088"; 585 | } 586 | .fa-star-half:before { 587 | content: "\f089"; 588 | } 589 | .fa-heart-o:before { 590 | content: "\f08a"; 591 | } 592 | .fa-sign-out:before { 593 | content: "\f08b"; 594 | } 595 | .fa-linkedin-square:before { 596 | content: "\f08c"; 597 | } 598 | .fa-thumb-tack:before { 599 | content: "\f08d"; 600 | } 601 | .fa-external-link:before { 602 | content: "\f08e"; 603 | } 604 | .fa-sign-in:before { 605 | content: "\f090"; 606 | } 607 | .fa-trophy:before { 608 | content: "\f091"; 609 | } 610 | .fa-github-square:before { 611 | content: "\f092"; 612 | } 613 | .fa-upload:before { 614 | content: "\f093"; 615 | } 616 | .fa-lemon-o:before { 617 | content: "\f094"; 618 | } 619 | .fa-phone:before { 620 | content: "\f095"; 621 | } 622 | .fa-square-o:before { 623 | content: "\f096"; 624 | } 625 | .fa-bookmark-o:before { 626 | content: "\f097"; 627 | } 628 | .fa-phone-square:before { 629 | content: "\f098"; 630 | } 631 | .fa-twitter:before { 632 | content: "\f099"; 633 | } 634 | .fa-facebook:before { 635 | content: "\f09a"; 636 | } 637 | .fa-github:before { 638 | content: "\f09b"; 639 | } 640 | .fa-unlock:before { 641 | content: "\f09c"; 642 | } 643 | .fa-credit-card:before { 644 | content: "\f09d"; 645 | } 646 | .fa-rss:before { 647 | content: "\f09e"; 648 | } 649 | .fa-hdd-o:before { 650 | content: "\f0a0"; 651 | } 652 | .fa-bullhorn:before { 653 | content: "\f0a1"; 654 | } 655 | .fa-bell:before { 656 | content: "\f0f3"; 657 | } 658 | .fa-certificate:before { 659 | content: "\f0a3"; 660 | } 661 | .fa-hand-o-right:before { 662 | content: "\f0a4"; 663 | } 664 | .fa-hand-o-left:before { 665 | content: "\f0a5"; 666 | } 667 | .fa-hand-o-up:before { 668 | content: "\f0a6"; 669 | } 670 | .fa-hand-o-down:before { 671 | content: "\f0a7"; 672 | } 673 | .fa-arrow-circle-left:before { 674 | content: "\f0a8"; 675 | } 676 | .fa-arrow-circle-right:before { 677 | content: "\f0a9"; 678 | } 679 | .fa-arrow-circle-up:before { 680 | content: "\f0aa"; 681 | } 682 | .fa-arrow-circle-down:before { 683 | content: "\f0ab"; 684 | } 685 | .fa-globe:before { 686 | content: "\f0ac"; 687 | } 688 | .fa-wrench:before { 689 | content: "\f0ad"; 690 | } 691 | .fa-tasks:before { 692 | content: "\f0ae"; 693 | } 694 | .fa-filter:before { 695 | content: "\f0b0"; 696 | } 697 | .fa-briefcase:before { 698 | content: "\f0b1"; 699 | } 700 | .fa-arrows-alt:before { 701 | content: "\f0b2"; 702 | } 703 | .fa-group:before, 704 | .fa-users:before { 705 | content: "\f0c0"; 706 | } 707 | .fa-chain:before, 708 | .fa-link:before { 709 | content: "\f0c1"; 710 | } 711 | .fa-cloud:before { 712 | content: "\f0c2"; 713 | } 714 | .fa-flask:before { 715 | content: "\f0c3"; 716 | } 717 | .fa-cut:before, 718 | .fa-scissors:before { 719 | content: "\f0c4"; 720 | } 721 | .fa-copy:before, 722 | .fa-files-o:before { 723 | content: "\f0c5"; 724 | } 725 | .fa-paperclip:before { 726 | content: "\f0c6"; 727 | } 728 | .fa-save:before, 729 | .fa-floppy-o:before { 730 | content: "\f0c7"; 731 | } 732 | .fa-square:before { 733 | content: "\f0c8"; 734 | } 735 | .fa-bars:before { 736 | content: "\f0c9"; 737 | } 738 | .fa-list-ul:before { 739 | content: "\f0ca"; 740 | } 741 | .fa-list-ol:before { 742 | content: "\f0cb"; 743 | } 744 | .fa-strikethrough:before { 745 | content: "\f0cc"; 746 | } 747 | .fa-underline:before { 748 | content: "\f0cd"; 749 | } 750 | .fa-table:before { 751 | content: "\f0ce"; 752 | } 753 | .fa-magic:before { 754 | content: "\f0d0"; 755 | } 756 | .fa-truck:before { 757 | content: "\f0d1"; 758 | } 759 | .fa-pinterest:before { 760 | content: "\f0d2"; 761 | } 762 | .fa-pinterest-square:before { 763 | content: "\f0d3"; 764 | } 765 | .fa-google-plus-square:before { 766 | content: "\f0d4"; 767 | } 768 | .fa-google-plus:before { 769 | content: "\f0d5"; 770 | } 771 | .fa-money:before { 772 | content: "\f0d6"; 773 | } 774 | .fa-caret-down:before { 775 | content: "\f0d7"; 776 | } 777 | .fa-caret-up:before { 778 | content: "\f0d8"; 779 | } 780 | .fa-caret-left:before { 781 | content: "\f0d9"; 782 | } 783 | .fa-caret-right:before { 784 | content: "\f0da"; 785 | } 786 | .fa-columns:before { 787 | content: "\f0db"; 788 | } 789 | .fa-unsorted:before, 790 | .fa-sort:before { 791 | content: "\f0dc"; 792 | } 793 | .fa-sort-down:before, 794 | .fa-sort-asc:before { 795 | content: "\f0dd"; 796 | } 797 | .fa-sort-up:before, 798 | .fa-sort-desc:before { 799 | content: "\f0de"; 800 | } 801 | .fa-envelope:before { 802 | content: "\f0e0"; 803 | } 804 | .fa-linkedin:before { 805 | content: "\f0e1"; 806 | } 807 | .fa-rotate-left:before, 808 | .fa-undo:before { 809 | content: "\f0e2"; 810 | } 811 | .fa-legal:before, 812 | .fa-gavel:before { 813 | content: "\f0e3"; 814 | } 815 | .fa-dashboard:before, 816 | .fa-tachometer:before { 817 | content: "\f0e4"; 818 | } 819 | .fa-comment-o:before { 820 | content: "\f0e5"; 821 | } 822 | .fa-comments-o:before { 823 | content: "\f0e6"; 824 | } 825 | .fa-flash:before, 826 | .fa-bolt:before { 827 | content: "\f0e7"; 828 | } 829 | .fa-sitemap:before { 830 | content: "\f0e8"; 831 | } 832 | .fa-umbrella:before { 833 | content: "\f0e9"; 834 | } 835 | .fa-paste:before, 836 | .fa-clipboard:before { 837 | content: "\f0ea"; 838 | } 839 | .fa-lightbulb-o:before { 840 | content: "\f0eb"; 841 | } 842 | .fa-exchange:before { 843 | content: "\f0ec"; 844 | } 845 | .fa-cloud-download:before { 846 | content: "\f0ed"; 847 | } 848 | .fa-cloud-upload:before { 849 | content: "\f0ee"; 850 | } 851 | .fa-user-md:before { 852 | content: "\f0f0"; 853 | } 854 | .fa-stethoscope:before { 855 | content: "\f0f1"; 856 | } 857 | .fa-suitcase:before { 858 | content: "\f0f2"; 859 | } 860 | .fa-bell-o:before { 861 | content: "\f0a2"; 862 | } 863 | .fa-coffee:before { 864 | content: "\f0f4"; 865 | } 866 | .fa-cutlery:before { 867 | content: "\f0f5"; 868 | } 869 | .fa-file-text-o:before { 870 | content: "\f0f6"; 871 | } 872 | .fa-building-o:before { 873 | content: "\f0f7"; 874 | } 875 | .fa-hospital-o:before { 876 | content: "\f0f8"; 877 | } 878 | .fa-ambulance:before { 879 | content: "\f0f9"; 880 | } 881 | .fa-medkit:before { 882 | content: "\f0fa"; 883 | } 884 | .fa-fighter-jet:before { 885 | content: "\f0fb"; 886 | } 887 | .fa-beer:before { 888 | content: "\f0fc"; 889 | } 890 | .fa-h-square:before { 891 | content: "\f0fd"; 892 | } 893 | .fa-plus-square:before { 894 | content: "\f0fe"; 895 | } 896 | .fa-angle-double-left:before { 897 | content: "\f100"; 898 | } 899 | .fa-angle-double-right:before { 900 | content: "\f101"; 901 | } 902 | .fa-angle-double-up:before { 903 | content: "\f102"; 904 | } 905 | .fa-angle-double-down:before { 906 | content: "\f103"; 907 | } 908 | .fa-angle-left:before { 909 | content: "\f104"; 910 | } 911 | .fa-angle-right:before { 912 | content: "\f105"; 913 | } 914 | .fa-angle-up:before { 915 | content: "\f106"; 916 | } 917 | .fa-angle-down:before { 918 | content: "\f107"; 919 | } 920 | .fa-desktop:before { 921 | content: "\f108"; 922 | } 923 | .fa-laptop:before { 924 | content: "\f109"; 925 | } 926 | .fa-tablet:before { 927 | content: "\f10a"; 928 | } 929 | .fa-mobile-phone:before, 930 | .fa-mobile:before { 931 | content: "\f10b"; 932 | } 933 | .fa-circle-o:before { 934 | content: "\f10c"; 935 | } 936 | .fa-quote-left:before { 937 | content: "\f10d"; 938 | } 939 | .fa-quote-right:before { 940 | content: "\f10e"; 941 | } 942 | .fa-spinner:before { 943 | content: "\f110"; 944 | } 945 | .fa-circle:before { 946 | content: "\f111"; 947 | } 948 | .fa-mail-reply:before, 949 | .fa-reply:before { 950 | content: "\f112"; 951 | } 952 | .fa-github-alt:before { 953 | content: "\f113"; 954 | } 955 | .fa-folder-o:before { 956 | content: "\f114"; 957 | } 958 | .fa-folder-open-o:before { 959 | content: "\f115"; 960 | } 961 | .fa-smile-o:before { 962 | content: "\f118"; 963 | } 964 | .fa-frown-o:before { 965 | content: "\f119"; 966 | } 967 | .fa-meh-o:before { 968 | content: "\f11a"; 969 | } 970 | .fa-gamepad:before { 971 | content: "\f11b"; 972 | } 973 | .fa-keyboard-o:before { 974 | content: "\f11c"; 975 | } 976 | .fa-flag-o:before { 977 | content: "\f11d"; 978 | } 979 | .fa-flag-checkered:before { 980 | content: "\f11e"; 981 | } 982 | .fa-terminal:before { 983 | content: "\f120"; 984 | } 985 | .fa-code:before { 986 | content: "\f121"; 987 | } 988 | .fa-reply-all:before { 989 | content: "\f122"; 990 | } 991 | .fa-mail-reply-all:before { 992 | content: "\f122"; 993 | } 994 | .fa-star-half-empty:before, 995 | .fa-star-half-full:before, 996 | .fa-star-half-o:before { 997 | content: "\f123"; 998 | } 999 | .fa-location-arrow:before { 1000 | content: "\f124"; 1001 | } 1002 | .fa-crop:before { 1003 | content: "\f125"; 1004 | } 1005 | .fa-code-fork:before { 1006 | content: "\f126"; 1007 | } 1008 | .fa-unlink:before, 1009 | .fa-chain-broken:before { 1010 | content: "\f127"; 1011 | } 1012 | .fa-question:before { 1013 | content: "\f128"; 1014 | } 1015 | .fa-info:before { 1016 | content: "\f129"; 1017 | } 1018 | .fa-exclamation:before { 1019 | content: "\f12a"; 1020 | } 1021 | .fa-superscript:before { 1022 | content: "\f12b"; 1023 | } 1024 | .fa-subscript:before { 1025 | content: "\f12c"; 1026 | } 1027 | .fa-eraser:before { 1028 | content: "\f12d"; 1029 | } 1030 | .fa-puzzle-piece:before { 1031 | content: "\f12e"; 1032 | } 1033 | .fa-microphone:before { 1034 | content: "\f130"; 1035 | } 1036 | .fa-microphone-slash:before { 1037 | content: "\f131"; 1038 | } 1039 | .fa-shield:before { 1040 | content: "\f132"; 1041 | } 1042 | .fa-calendar-o:before { 1043 | content: "\f133"; 1044 | } 1045 | .fa-fire-extinguisher:before { 1046 | content: "\f134"; 1047 | } 1048 | .fa-rocket:before { 1049 | content: "\f135"; 1050 | } 1051 | .fa-maxcdn:before { 1052 | content: "\f136"; 1053 | } 1054 | .fa-chevron-circle-left:before { 1055 | content: "\f137"; 1056 | } 1057 | .fa-chevron-circle-right:before { 1058 | content: "\f138"; 1059 | } 1060 | .fa-chevron-circle-up:before { 1061 | content: "\f139"; 1062 | } 1063 | .fa-chevron-circle-down:before { 1064 | content: "\f13a"; 1065 | } 1066 | .fa-html5:before { 1067 | content: "\f13b"; 1068 | } 1069 | .fa-css3:before { 1070 | content: "\f13c"; 1071 | } 1072 | .fa-anchor:before { 1073 | content: "\f13d"; 1074 | } 1075 | .fa-unlock-alt:before { 1076 | content: "\f13e"; 1077 | } 1078 | .fa-bullseye:before { 1079 | content: "\f140"; 1080 | } 1081 | .fa-ellipsis-h:before { 1082 | content: "\f141"; 1083 | } 1084 | .fa-ellipsis-v:before { 1085 | content: "\f142"; 1086 | } 1087 | .fa-rss-square:before { 1088 | content: "\f143"; 1089 | } 1090 | .fa-play-circle:before { 1091 | content: "\f144"; 1092 | } 1093 | .fa-ticket:before { 1094 | content: "\f145"; 1095 | } 1096 | .fa-minus-square:before { 1097 | content: "\f146"; 1098 | } 1099 | .fa-minus-square-o:before { 1100 | content: "\f147"; 1101 | } 1102 | .fa-level-up:before { 1103 | content: "\f148"; 1104 | } 1105 | .fa-level-down:before { 1106 | content: "\f149"; 1107 | } 1108 | .fa-check-square:before { 1109 | content: "\f14a"; 1110 | } 1111 | .fa-pencil-square:before { 1112 | content: "\f14b"; 1113 | } 1114 | .fa-external-link-square:before { 1115 | content: "\f14c"; 1116 | } 1117 | .fa-share-square:before { 1118 | content: "\f14d"; 1119 | } 1120 | .fa-compass:before { 1121 | content: "\f14e"; 1122 | } 1123 | .fa-toggle-down:before, 1124 | .fa-caret-square-o-down:before { 1125 | content: "\f150"; 1126 | } 1127 | .fa-toggle-up:before, 1128 | .fa-caret-square-o-up:before { 1129 | content: "\f151"; 1130 | } 1131 | .fa-toggle-right:before, 1132 | .fa-caret-square-o-right:before { 1133 | content: "\f152"; 1134 | } 1135 | .fa-euro:before, 1136 | .fa-eur:before { 1137 | content: "\f153"; 1138 | } 1139 | .fa-gbp:before { 1140 | content: "\f154"; 1141 | } 1142 | .fa-dollar:before, 1143 | .fa-usd:before { 1144 | content: "\f155"; 1145 | } 1146 | .fa-rupee:before, 1147 | .fa-inr:before { 1148 | content: "\f156"; 1149 | } 1150 | .fa-cny:before, 1151 | .fa-rmb:before, 1152 | .fa-yen:before, 1153 | .fa-jpy:before { 1154 | content: "\f157"; 1155 | } 1156 | .fa-ruble:before, 1157 | .fa-rouble:before, 1158 | .fa-rub:before { 1159 | content: "\f158"; 1160 | } 1161 | .fa-won:before, 1162 | .fa-krw:before { 1163 | content: "\f159"; 1164 | } 1165 | .fa-bitcoin:before, 1166 | .fa-btc:before { 1167 | content: "\f15a"; 1168 | } 1169 | .fa-file:before { 1170 | content: "\f15b"; 1171 | } 1172 | .fa-file-text:before { 1173 | content: "\f15c"; 1174 | } 1175 | .fa-sort-alpha-asc:before { 1176 | content: "\f15d"; 1177 | } 1178 | .fa-sort-alpha-desc:before { 1179 | content: "\f15e"; 1180 | } 1181 | .fa-sort-amount-asc:before { 1182 | content: "\f160"; 1183 | } 1184 | .fa-sort-amount-desc:before { 1185 | content: "\f161"; 1186 | } 1187 | .fa-sort-numeric-asc:before { 1188 | content: "\f162"; 1189 | } 1190 | .fa-sort-numeric-desc:before { 1191 | content: "\f163"; 1192 | } 1193 | .fa-thumbs-up:before { 1194 | content: "\f164"; 1195 | } 1196 | .fa-thumbs-down:before { 1197 | content: "\f165"; 1198 | } 1199 | .fa-youtube-square:before { 1200 | content: "\f166"; 1201 | } 1202 | .fa-youtube:before { 1203 | content: "\f167"; 1204 | } 1205 | .fa-xing:before { 1206 | content: "\f168"; 1207 | } 1208 | .fa-xing-square:before { 1209 | content: "\f169"; 1210 | } 1211 | .fa-youtube-play:before { 1212 | content: "\f16a"; 1213 | } 1214 | .fa-dropbox:before { 1215 | content: "\f16b"; 1216 | } 1217 | .fa-stack-overflow:before { 1218 | content: "\f16c"; 1219 | } 1220 | .fa-instagram:before { 1221 | content: "\f16d"; 1222 | } 1223 | .fa-flickr:before { 1224 | content: "\f16e"; 1225 | } 1226 | .fa-adn:before { 1227 | content: "\f170"; 1228 | } 1229 | .fa-bitbucket:before { 1230 | content: "\f171"; 1231 | } 1232 | .fa-bitbucket-square:before { 1233 | content: "\f172"; 1234 | } 1235 | .fa-tumblr:before { 1236 | content: "\f173"; 1237 | } 1238 | .fa-tumblr-square:before { 1239 | content: "\f174"; 1240 | } 1241 | .fa-long-arrow-down:before { 1242 | content: "\f175"; 1243 | } 1244 | .fa-long-arrow-up:before { 1245 | content: "\f176"; 1246 | } 1247 | .fa-long-arrow-left:before { 1248 | content: "\f177"; 1249 | } 1250 | .fa-long-arrow-right:before { 1251 | content: "\f178"; 1252 | } 1253 | .fa-apple:before { 1254 | content: "\f179"; 1255 | } 1256 | .fa-windows:before { 1257 | content: "\f17a"; 1258 | } 1259 | .fa-android:before { 1260 | content: "\f17b"; 1261 | } 1262 | .fa-linux:before { 1263 | content: "\f17c"; 1264 | } 1265 | .fa-dribbble:before { 1266 | content: "\f17d"; 1267 | } 1268 | .fa-skype:before { 1269 | content: "\f17e"; 1270 | } 1271 | .fa-foursquare:before { 1272 | content: "\f180"; 1273 | } 1274 | .fa-trello:before { 1275 | content: "\f181"; 1276 | } 1277 | .fa-female:before { 1278 | content: "\f182"; 1279 | } 1280 | .fa-male:before { 1281 | content: "\f183"; 1282 | } 1283 | .fa-gittip:before { 1284 | content: "\f184"; 1285 | } 1286 | .fa-sun-o:before { 1287 | content: "\f185"; 1288 | } 1289 | .fa-moon-o:before { 1290 | content: "\f186"; 1291 | } 1292 | .fa-archive:before { 1293 | content: "\f187"; 1294 | } 1295 | .fa-bug:before { 1296 | content: "\f188"; 1297 | } 1298 | .fa-vk:before { 1299 | content: "\f189"; 1300 | } 1301 | .fa-weibo:before { 1302 | content: "\f18a"; 1303 | } 1304 | .fa-renren:before { 1305 | content: "\f18b"; 1306 | } 1307 | .fa-pagelines:before { 1308 | content: "\f18c"; 1309 | } 1310 | .fa-stack-exchange:before { 1311 | content: "\f18d"; 1312 | } 1313 | .fa-arrow-circle-o-right:before { 1314 | content: "\f18e"; 1315 | } 1316 | .fa-arrow-circle-o-left:before { 1317 | content: "\f190"; 1318 | } 1319 | .fa-toggle-left:before, 1320 | .fa-caret-square-o-left:before { 1321 | content: "\f191"; 1322 | } 1323 | .fa-dot-circle-o:before { 1324 | content: "\f192"; 1325 | } 1326 | .fa-wheelchair:before { 1327 | content: "\f193"; 1328 | } 1329 | .fa-vimeo-square:before { 1330 | content: "\f194"; 1331 | } 1332 | .fa-turkish-lira:before, 1333 | .fa-try:before { 1334 | content: "\f195"; 1335 | } 1336 | .fa-plus-square-o:before { 1337 | content: "\f196"; 1338 | } 1339 | -------------------------------------------------------------------------------- /demo/assets/css/jquery.fs.picker.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Picker Plugin [Formstone Library] 3 | * @author Ben Plum 4 | * @version 0.4.0 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | .picker-element { left: -999999px; position: absolute; } 11 | .picker { cursor: pointer; margin: 0 0 10px 0; overflow: hidden; } 12 | .picker .picker-label { color: #888; display: block; float: left; font-size: 14px; float: left; line-height: 16px; 13 | -webkit-user-select: none; 14 | -moz-user-select: none; 15 | -ms-user-select: none; 16 | -o-user-select: none; 17 | user-select: none; 18 | } 19 | .picker .picker-handle { border: 1px solid #ccc; display: block; float: left; height: 16px; margin: 0 5px 0 0; width: 16px; } 20 | 21 | @media screen and (min-width: 740px) { 22 | .picker:hover .picker-label { color: #555; } 23 | .picker:hover .picker-handle { border-color: #aaa; } 24 | 25 | .picker.picker-radio:hover .picker-flag { background: #ddd; } 26 | } 27 | 28 | .picker.focus .picker-label { color: #555; } 29 | .picker.focus .picker-handle { border-color: #aaa; } 30 | 31 | /* Radio Input */ 32 | .picker.picker-radio .picker-handle { border-radius: 8px; } 33 | .picker.picker-radio .picker-flag { background: #fff; display: block; border-radius: 4px; height: 8px; margin: 3px; width: 8px; } 34 | 35 | .picker.picker-radio.focus .picker-flag { background: #ddd; } 36 | .picker.picker-radio.checked .picker-flag { background: #999; } 37 | 38 | /* Checkbox Input */ 39 | .picker.picker-checkbox .picker-handle { border-radius: 3px; } 40 | .picker.picker-checkbox .picker-flag { background: #fff; border-radius: 2px; display: block; height: 100%; margin: 0; width: 100%; } 41 | /* 'Checked' */ 42 | .picker.picker-checkbox.checked .picker-flag { background: #fff url('../img/fs-picker-icon.png') no-repeat center; } 43 | 44 | /* Toggle Input */ 45 | .picker.picker-toggle { padding: 20px 0 0; position: relative; } 46 | .picker.picker-toggle .picker-toggle-label { color: #999; font-size: 12px; position: absolute; text-transform: uppercase; top: 0; } 47 | .picker.picker-toggle .picker-toggle-label.on { left: 0; } 48 | .picker.picker-toggle .picker-toggle-label.off { color: #333; right: 0; } 49 | .picker.picker-toggle .picker-label { display: none; } 50 | .picker.picker-toggle .picker-handle { border-radius: 3px; position: relative; width: 100%; } 51 | .picker.picker-toggle .picker-flag { background: #666; border-radius: 2px; display: block; height: 100%; left: 50%; margin: 0; position: absolute; top: 0; width: 50%; 52 | -webkit-transition: left 0.1s linear; 53 | -moz-transition: left 0.1s linear; 54 | -ms-transition: left 0.1s linear; 55 | -o-transition: left 0.1s linear; 56 | transition: left 0.1s linear; 57 | } 58 | .picker.picker-toggle.checked .picker-toggle-label.on { color: #333; } 59 | .picker.picker-toggle.checked .picker-toggle-label.off { color: #999; } 60 | .picker.picker-toggle.checked .picker-flag { background: #666; left: 0; } 61 | 62 | /* 'Disabled' State */ 63 | .picker.disabled .picker-label { color: #ccc; cursor: default; } 64 | .picker.disabled .picker-handle { border-color: #eee; cursor: default; } 65 | .picker.picker-radio.disabled .picker-flag { background: #fff; } 66 | .picker.picker-radio.disabled.checked .picker-flag { background: #eee; } 67 | .picker.picker-checkbox.disabled .picker-flag::after { color: #eee; content: ''; } 68 | .picker.picker-checkbox.disabled.checked .picker-flag::after { color: #eee; content: '\2714'; } -------------------------------------------------------------------------------- /demo/assets/css/jquery.fs.scroller.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Scroller Plugin [Formstone Library] 3 | * @author Ben Plum 4 | * @version 0.6.4 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | .scroller { overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: relative; } 11 | .scroller-content { height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; position: relative; z-index: 1; } 12 | .scroller-bar { background: #FBFBFB; border-left: 1px solid #EEEEEE; display: none; height: 100%; position: absolute; right: 0; top: 0; width: 20px; z-index: 2; } 13 | .scroller-track { background: #FBFBFB; height: 100%; overflow: hidden; position: relative; width: 100%; } 14 | .scroller-handle { background: #EEEEEE; border: 1px solid #D5D5D5; border-radius: 5px; cursor: pointer; height: 20px; overflow: hidden; position: absolute; right: 5px; top: 0; width: 10px; z-index: 2; 15 | -webkit-transition: right 0.1s linear, width 0.1s linear; 16 | -moz-transition: right 0.1s linear, width 0.1s linear; 17 | -ms-transition: right 0.1s linear, width 0.1s linear; 18 | -o-transition: right 0.1s linear, width 0.1s linear; 19 | transition: right 0.1s linear, width 0.1s linear; 20 | } 21 | 22 | /* Webkit Fix */ 23 | .scroller-content::-webkit-scrollbar, 24 | .scroller-content::-webkit-scrollbar-button, 25 | .scroller-content::-webkit-scrollbar-track, 26 | .scroller-content::-webkit-scrollbar-track-piece, 27 | .scroller-content::-webkit-scrollbar-thumb, 28 | .scroller-content::-webkit-scrollbar-corner, 29 | .scroller-content::-webkit-resizer { background: transparent; opacity: 0; } 30 | 31 | /* Active Scrollbar */ 32 | .scroller-active .scroller-content { padding: 20px; } 33 | .scroller-active .scroller-bar { display: block; } 34 | 35 | /* Setup Scrollbar - Should match 'active' styles for proper sizing */ 36 | .scroller-active .scroller-content { padding: 20px; } 37 | .scroller-active .scroller-bar { display: block; } 38 | 39 | /* Horizontal */ 40 | .scroller-horizontal .scroller-content { overflow: auto; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px 0; } 41 | .scroller-horizontal .scroller-bar { border-left: none; border-top: 1px solid #EEEEEE; bottom: 0; height: 20px; top: auto; width: 100%; } 42 | .scroller-horizontal .scroller-handle { bottom: 5px; height: 10px; right: auto; top: auto; width: 20px; } -------------------------------------------------------------------------------- /demo/assets/css/jquery.fs.selecter.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Selecter Plugin [Formstone Library] 3 | * @author Ben Plum 4 | * @version 2.2.3 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | .selecter-element { *left: -999999px; position: absolute; opacity: 0; } 11 | .selecter { display: block; margin: 10px 0; position: relative; max-width: 30%; z-index: 1; } 12 | .selecter .selecter-selected { background: #F9F9F9 url(../img/fs-selecter-arrow.png) no-repeat right center; border: 1px solid #ccc; border-radius: 3px; color: #333; cursor: pointer; display: block; font-size: 13px; margin: 0; overflow: hidden; padding: 8px 10px; position: relative; text-overflow: clip; z-index: 49; } 13 | .selecter .selecter-options { border: 1px solid #ccc; border-width: 0 1px 1px; background-color: #fefefe; border-radius: 0 0 3px 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); display: none; left: 0; margin: 0; max-height: 260px; overflow: auto; overflow-x: hidden; padding: 0; position: absolute; top: 100%; width: 100%; *width: auto; z-index: 50; } 14 | .selecter .selecter-group { background: #F9F9F9; border-bottom: 1px solid #e3e3e3; color: #999; display: block; font-size: 11px; padding: 5px 10px 4px; text-transform: uppercase; } 15 | .selecter .selecter-item { background: #fff; border-bottom: 1px solid #e3e3e3; color: #333; cursor: pointer; display: block; font-size: 13px; margin: 0; overflow: hidden; padding: 8px 10px; text-overflow: ellipsis; width: 100%; } 16 | .selecter .selecter-item.selected { background: #F9F9F9; } 17 | .selecter .selecter-item.disabled { color: #999; cursor: default; } 18 | .selecter .selecter-item.first { border-radius: 0; } 19 | .selecter .selecter-item.last { border-radius: 0 0 2px 2px; border-bottom: 0; } 20 | 21 | @media screen and (min-width: 740px) { 22 | .selecter .selecter-item:hover, 23 | .selecter .selecter-item.selected:hover { background-color: #f3f3f3; } 24 | .selecter .selecter-item.disabled:hover { background-color: #fff; } 25 | 26 | .selecter:hover .selecter-selected { background-color: #fff; } 27 | 28 | .selecter.disabled .selecter-item:hover { background: #fff; } 29 | } 30 | 31 | /* Open */ 32 | .selecter.open { z-index: 3; } 33 | .selecter.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 51; } 34 | 35 | .selecter.open .selecter-selected, 36 | .selecter.focus .selecter-selected { background-color: #fff; } 37 | 38 | /* 'Cover' Positioning */ 39 | .selecter.cover .selecter-options { border-radius: 3px; border-width: 1px; top: 0; } 40 | .selecter.cover .selecter-options .selecter-item.first { border-radius: 3px 3px 0 0; } 41 | .selecter.cover.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 49; } 42 | 43 | /* 'Bottom' Positioning */ 44 | .selecter.bottom .selecter-options { border-width: 1px 1px 0; bottom: 100%; top: auto; } 45 | .selecter.bottom .selecter-item.last { border: none; } 46 | .selecter.bottom.open .selecter-selected { border-radius: 0 0 3px 3px; } 47 | .selecter.bottom.open .selecter-options { border-radius: 3px 3px 0 0; } 48 | 49 | /* 'Bottom' + 'Cover' Positioning */ 50 | .selecter.bottom.cover .selecter-options { bottom: 0; top: auto; } 51 | .selecter.bottom.cover.open .selecter-selected { border-radius: 3px; } 52 | .selecter.bottom.cover.open .selecter-options { border-radius: 3px; } 53 | 54 | /* Multiple Select */ 55 | .selecter.multiple .selecter-options { border-radius: 3px; border-width: 1px; box-shadow: none; display: block; position: static; width: 100%; } 56 | 57 | /* 'Disabled' State */ 58 | .selecter.disabled .selecter-selected { background: #fff; border-color: #eee; color: #ccc; cursor: default; } 59 | .selecter.disabled .selecter-options { background: #fff; border-color: #eee; } 60 | .selecter.disabled .selecter-group, 61 | .selecter.disabled .selecter-item { border-color: #eee; color: #ccc; cursor: default; } 62 | .selecter.disabled .selecter-item.selected { background: #fafafa; } 63 | 64 | /* Scroller Support */ 65 | .selecter .selecter-options.scroller { overflow: hidden; } 66 | .selecter .selecter-options.scroller .scroller-content { max-height: 260px; padding: 0; } 67 | 68 | /* Media Queries */ 69 | @media screen and (max-width: 740px) { 70 | .selecter { max-width: 40%; } 71 | } 72 | @media screen and (max-width: 500px) { 73 | .selecter { max-width: 100%; } 74 | } -------------------------------------------------------------------------------- /demo/assets/css/refineslide-theme-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery RefineSlide plugin v0.3 3 | * Copyright 2012, Alex Dunphy 4 | * MIT License (http://www.opensource.org/licenses/mit-license.php) 5 | * 6 | * Dark theme 7 | */ 8 | 9 | .rs-slide-bg { 10 | padding: 15px; 11 | background: rgb(75, 79, 87); 12 | border-bottom: 1px solid #5e6266!important; 13 | border-bottom: 1px solid rgba(255, 255, 255, .1)!important; 14 | -webkit-border-radius: 5px; 15 | -moz-border-radius: 5px; 16 | border-radius: 5px; 17 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset; 18 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset; 19 | box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset; 20 | } 21 | 22 | .rs-slider > li { 23 | -moz-border-radius: 5px; 24 | -webkit-border-radius: 5px; 25 | border-radius: 5px; 26 | } 27 | 28 | .rs-slider > li img { 29 | -moz-border-radius: 5px; 30 | -webkit-border-radius: 5px; 31 | border-radius: 5px; 32 | -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .5); 33 | -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .5); 34 | box-shadow: 0 0 4px rgba(0, 0, 0, .5); 35 | } 36 | 37 | /* ===[ Thumbnails ]=== */ 38 | 39 | .rs-thumb-wrap { margin: 21px 0 0 } 40 | 41 | .rs-thumb-wrap > a { 42 | opacity: .7; 43 | padding: 8px; 44 | *padding: 0; 45 | background: url(../img/black10.png); 46 | background: rgba(0, 0, 0, .1); 47 | border-bottom: 1px solid #5e6266!important; 48 | border-bottom: 1px solid rgba(255, 255, 255, .1)!important; 49 | -moz-border-radius: 3px; 50 | -webkit-border-radius: 3px; 51 | border-radius: 3px; 52 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset!important; 53 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset!important; 54 | box-shadow: 0 1px 1px rgba(0, 0, 0, .15) inset!important; 55 | -moz-transition: opacity .5s ease-in-out; 56 | -webkit-transition: opacity .5s ease-in-out; 57 | -o-transition: opacity .5s ease-in-out; 58 | -ms-transition: opacity .5s ease-in-out; 59 | transition: opacity .5s ease-in-out; 60 | } 61 | 62 | .rs-thumb-wrap > a > img { 63 | -moz-border-radius: 3px; 64 | -webkit-border-radius: 3px; 65 | border-radius: 3px; 66 | -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4); 67 | -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4); 68 | box-shadow: 0 0 3px rgba(0, 0, 0, .4); 69 | } 70 | 71 | .rs-thumb-wrap > a:hover, 72 | .rs-thumb-wrap > a.active { opacity: 1 } 73 | 74 | .rs-thumb-wrap > a:first-child { margin-left: 0!important } 75 | 76 | /* ===[ Arrows ]=== */ 77 | 78 | .rs-arrows { 79 | position: relative; 80 | left: 45%; 81 | } 82 | 83 | .rs-arrows .rs-next, 84 | .rs-arrows .rs-prev { 85 | width: 42px; 86 | height: 42px; 87 | display: block; 88 | float: left; 89 | margin: 10px 0 10px 0; 90 | position: relative; 91 | text-shadow: 0 -1px 0 #000; 92 | padding: 0 2px 2px 0; 93 | border: 1px solid #35393b; 94 | border: 1px solid rgba(0, 0, 0, .2); 95 | border-bottom: 1px solid #313437; 96 | border-bottom: 1px solid rgba(0, 0, 0, .35); 97 | background: #4b4f57; 98 | -moz-border-radius: 5px 0 0 5px; 99 | -webkit-border-radius: 5px 0 0 5px; 100 | border-radius: 5px 0 0 5px; 101 | -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 1px rgba(255, 255, 255, 0) inset; 102 | -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 1px rgba(255, 255, 255, 0) inset; 103 | box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 1px rgba(255, 255, 255, 0) inset; 104 | } 105 | 106 | .rs-arrows:hover .rs-next, 107 | .rs-arrows:hover .rs-prev { 108 | border: 1px solid #313336; 109 | border: 1px solid rgba(0, 0, 0, .3); 110 | border-bottom: 1px solid #292b2d; 111 | border-bottom: 1px solid rgba(0, 0, 0, .45); 112 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .05) inset; 113 | -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .05) inset; 114 | box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .05) inset; 115 | } 116 | 117 | .rs-arrows .rs-next:active, 118 | .rs-arrows .rs-prev:active { 119 | border-color: #292b2d; 120 | border-color: rgba(0, 0, 0, .45); 121 | -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset; 122 | -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset; 123 | box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset; 124 | } 125 | 126 | .rs-arrows .rs-next { 127 | border-left: 0!important; 128 | -moz-border-radius: 0 5px 5px 0; 129 | -webkit-border-radius: 0 5px 5px 0; 130 | border-radius: 0 5px 5px 0; 131 | } 132 | 133 | .rs-arrows .rs-next:before, 134 | .rs-arrows .rs-prev:before { 135 | content: ""; 136 | width: 0; 137 | height: 0; 138 | border-top: 10px solid transparent; 139 | border-bottom: 10px solid transparent; 140 | border-left: 10px solid #c6c8c9; 141 | border-left: 10px solid rgba(255, 255, 255, .7); 142 | position: absolute; 143 | top: 11px; 144 | left: 16px; 145 | } 146 | 147 | .rs-arrows .rs-prev:before { 148 | border-left: none; 149 | border-right: 10px solid #c6c8c9; 150 | border-right: 10px solid rgba(255, 255, 255, .7); 151 | } 152 | 153 | .rs-arrows .rs-prev:hover:before { border-right: 10px solid #fff } 154 | 155 | .rs-arrows .rs-next:hover:before { border-left: 10px solid #fff } 156 | 157 | .rs-arrows .rs-prev:active:before { border-right: 10px solid #8acdf3 } 158 | 159 | .rs-arrows .rs-next:active:before { border-left: 10px solid #8acdf3 } 160 | 161 | /* ===[ Captions ]=== */ 162 | 163 | .rs-caption { 164 | padding: 20px; 165 | color: #fff; 166 | text-shadow: 0 -1px 0 #000; 167 | border: 1px solid #000; 168 | background: url(../img/black60.png); 169 | background: rgba(0, 0, 0, .6); 170 | background: -moz-linear-gradient(top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)); 171 | background: -webkit-linear-gradient(top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)); 172 | background: -o-linear-gradient(top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)); 173 | background: -ms-linear-gradient(top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)); 174 | background: linear-gradient(top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)); 175 | -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; 176 | -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; 177 | box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; 178 | } 179 | 180 | .rs-caption p { 181 | color: #fff; 182 | margin-bottom: 0; 183 | } 184 | 185 | .rs-caption.rs-top-left { 186 | -moz-border-radius: 5px 0 5px 0; 187 | -webkit-border-radius: 5px 0 5px 0; 188 | border-radius: 5px 0 5px 0; 189 | border-top: none; 190 | border-left: none; 191 | } 192 | 193 | .rs-caption.rs-bottom-right { 194 | -moz-border-radius: 5px 0 5px 0; 195 | -webkit-border-radius: 5px 0 5px 0; 196 | border-radius: 5px 0 5px 0; 197 | border-bottom: none; 198 | border-right: none; 199 | } 200 | 201 | .rs-caption.rs-top-right { 202 | -moz-border-radius: 0 5px 0 5px; 203 | -webkit-border-radius: 0 5px 0 5px; 204 | border-radius: 0 5px 0 5px; 205 | border-top: none; 206 | border-right: none; 207 | } 208 | 209 | .rs-caption.rs-bottom-left { 210 | -moz-border-radius: 0 5px 0 5px; 211 | -webkit-border-radius: 0 5px 0 5px; 212 | border-radius: 0 5px 0 5px; 213 | border-bottom: none; 214 | border-left: none; 215 | } 216 | 217 | .rs-caption.rs-bottom { 218 | -moz-border-radius: 0 0 5px 5px; 219 | -webkit-border-radius: 0 0 5px 5px; 220 | border-radius: 0 0 5px 5px; 221 | border-bottom: none; 222 | border-left: none; 223 | border-right: none; 224 | } 225 | 226 | .rs-caption.rs-top { 227 | -moz-border-radius: 5px 5px 0 0; 228 | -webkit-border-radius: 5px 5px 0 0; 229 | border-radius: 5px 5px 0 0; 230 | border-top: none; 231 | border-left: none; 232 | border-right: none; 233 | } 234 | 235 | .rs-caption.rs-left { 236 | -moz-border-radius: 5px 0 0 5px; 237 | -webkit-border-radius: 5px 0 0 5px; 238 | border-radius: 5px 0 0 5px; 239 | border-left: none; 240 | border-top: none; 241 | border-bottom: none; 242 | } 243 | 244 | .rs-caption.rs-right { 245 | -moz-border-radius: 0 5px 5px 0; 246 | -webkit-border-radius: 0 5px 5px 0; 247 | border-radius: 0 5px 5px 0; 248 | border-right: none; 249 | border-top: none; 250 | border-bottom: none; 251 | } 252 | 253 | /* ===[ Grid ]=== */ 254 | 255 | .rs-grid { 256 | border-radius: 5px; 257 | overflow: hidden; 258 | } 259 | 260 | .rs-gridlet.rs-top-left { 261 | -moz-border-radius-topleft: 5px; 262 | -webkit-border-top-left-radius: 5px; 263 | border-top-left-radius: 5px; 264 | } 265 | 266 | .rs-gridlet.rs-top-right { 267 | -moz-border-radius-topright: 5px; 268 | -webkit-border-top-right-radius: 5px; 269 | border-top-right-radius: 5px; 270 | } 271 | 272 | .rs-gridlet.rs-bottom-left { 273 | -moz-border-radius-bottomleft: 5px; 274 | -webkit-border-bottom-left-radius: 5px; 275 | border-bottom-left-radius: 5px; 276 | } 277 | 278 | .rs-gridlet.rs-bottom-right { 279 | -moz-border-radius-bottomright: 5px; 280 | -webkit-border-bottom-right-radius: 5px; 281 | border-bottom-right-radius: 5px; 282 | } -------------------------------------------------------------------------------- /demo/assets/css/refineslide.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | #images {padding-left: 0px; margin-bottom: 0px;} 4 | 5 | 6 | 7 | 8 | 9 | .rs-wrap:after, 10 | .rs-slider:after, 11 | .rs-thumb-wrap:after, 12 | .rs-arrows:after, 13 | .rs-caption:after { 14 | content: "."; 15 | display: block; 16 | height: 0; 17 | clear: both; 18 | line-height: 0; 19 | visibility: hidden; 20 | } 21 | 22 | /* ===[ Slider ]=== */ 23 | 24 | .rs-wrap { 25 | position: relative; 26 | max-width: 100%; 27 | } 28 | 29 | .rs-slide-bg { *zoom: 1 } 30 | 31 | .rs-slider > li > a { display: block } 32 | 33 | .rs-slider > li { 34 | list-style: none; 35 | filter: alpha(opacity=0); 36 | opacity: 0; 37 | width: 100%; 38 | height: 100%; 39 | margin: 0 -100% 0 0; 40 | padding: 0; 41 | float: left; 42 | position: relative; 43 | } 44 | 45 | .rs-slider > li > a { 46 | padding: 0; 47 | background: none; 48 | -webkit-border-radius: 0; 49 | -moz-border-radius: 0; 50 | border-radius: 0; 51 | } 52 | 53 | .rs-slider > li img { 54 | display: block; 55 | max-width: 100%; 56 | max-height: 100%; 57 | -ms-interpolation-mode: bicubic; 58 | } 59 | 60 | /* ===[ Thumbnails ]=== */ 61 | 62 | .rs-thumb-wrap { *zoom: 1 } 63 | 64 | .rs-thumb-wrap > a { 65 | display: block; 66 | float: left; 67 | position: relative; 68 | -moz-box-sizing: border-box; 69 | -webkit-box-sizing: border-box; 70 | box-sizing: border-box; 71 | -webkit-backface-visibility: hidden; /* Hardware accelerate to prevent jumps on transition */ 72 | } 73 | 74 | .rs-thumb-wrap > a > img { 75 | max-width: 100%; 76 | max-height: 100%; 77 | display: block; 78 | -ms-interpolation-mode: bicubic; 79 | } 80 | 81 | .rs-thumb-wrap > a:first-child { margin-left: 0!important } 82 | 83 | /* ===[ Arrows ]=== */ 84 | 85 | .rs-arrows .rs-next, 86 | .rs-arrows .rs-prev { z-index: 1; } 87 | 88 | .rs-arrows:hover .rs-next, 89 | .rs-arrows:hover .rs-prev { z-index: 2; } 90 | 91 | /* ===[ Captions ]=== */ 92 | 93 | .rs-caption { 94 | position: absolute; 95 | max-height: 100%; 96 | overflow: auto; 97 | -moz-box-sizing: border-box; 98 | -webkit-box-sizing: border-box; 99 | box-sizing: border-box; 100 | bottom: 0; 101 | left: 0; 102 | } 103 | 104 | .rs-caption.rs-top-left { 105 | top: 0; 106 | bottom: auto; 107 | } 108 | 109 | .rs-caption.rs-top-right { 110 | top: 0; 111 | right: 0; 112 | left: auto; 113 | bottom: auto; 114 | } 115 | 116 | .rs-caption.rs-bottom-left { 117 | bottom: 0; 118 | left: 0; 119 | } 120 | 121 | .rs-caption.rs-bottom-right { 122 | right: 0; 123 | left: auto; 124 | border-bottom: none; 125 | border-right: none; 126 | } 127 | 128 | .rs-caption.rs-top { 129 | top: 0; 130 | bottom: auto; 131 | width: 100%!important; 132 | } 133 | 134 | .rs-caption.rs-bottom { width: 100%!important } 135 | 136 | .rs-caption.rs-left { 137 | top: 0; 138 | height: 100%; 139 | } 140 | 141 | .rs-caption.rs-right { 142 | top: 0; 143 | left: auto; 144 | right: 0; 145 | height: 100%; 146 | } 147 | 148 | /* ===[ Grid ]=== */ 149 | 150 | .rs-grid { 151 | position: absolute; 152 | overflow: hidden; 153 | width: 100%; 154 | height: 100%; 155 | display: none; 156 | } 157 | 158 | .rs-gridlet { 159 | position: absolute; 160 | opacity: 1; 161 | } 162 | 163 | /* Optional - remove captions at smaller screen widths 164 | @media screen and (max-width: 480px) { 165 | .rs-caption { opacity: 0!important; } 166 | } 167 | */ 168 | 169 | -------------------------------------------------------------------------------- /demo/assets/css/scojs.css: -------------------------------------------------------------------------------- 1 | /* sco.message.js */ 2 | #page_message { 3 | -webkit-background-size: 40px 40px; 4 | -moz-background-size: 40px 40px; 5 | background-size: 40px 40px; 6 | -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4); 7 | -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4); 8 | box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4); 9 | display: none; 10 | font-size: 15px; 11 | overflow: visible; 12 | text-align: center; 13 | left: 0; 14 | top: 0; 15 | z-index: 10001; 16 | width: 100%; 17 | color: #FFF; 18 | padding: 15px; 19 | position: fixed; 20 | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); 21 | } 22 | .page_mess_error { 23 | background-color: #de4343; 24 | opacity: 0.9; 25 | border-color: #de4343; 26 | } 27 | .page_mess_ok { 28 | background-color: #A2C765; 29 | opacity: 0.9; 30 | 31 | border-color: #309343; 32 | } 33 | 34 | 35 | 36 | .tooltip .pointer { 37 | position: absolute; 38 | width: 0; 39 | height: 0; 40 | margin: 0; 41 | } 42 | 43 | .tooltip.pos_e .pointer { 44 | border-right: 8px solid #444; 45 | border-top: 8px dashed transparent; 46 | border-bottom: 8px dashed transparent; 47 | left: -8px; 48 | top: 50%; 49 | margin-top: -8px; 50 | } 51 | 52 | .tooltip.pos_w .pointer { 53 | border-left: 8px solid #444; 54 | border-top: 8px dashed transparent; 55 | border-bottom: 8px dashed transparent; 56 | right: -8px; 57 | top: 50%; 58 | margin-top: -8px; 59 | } 60 | 61 | .tooltip.pos_n .pointer { 62 | border-top: 8px solid #444; 63 | border-left: 8px dashed transparent; 64 | border-right: 8px dashed transparent; 65 | left: 50%; 66 | margin-left: -8px; 67 | bottom: -8px; 68 | } 69 | 70 | .tooltip.pos_s .pointer { 71 | border-bottom: 8px solid #444; 72 | border-left: 8px dashed transparent; 73 | border-right: 8px dashed transparent; 74 | left: 50%; 75 | margin-left: -8px; 76 | top: -8px; 77 | } 78 | 79 | .tooltip.pos_nw .pointer { 80 | border-top: 14px solid #444; 81 | border-left: 14px dashed transparent; 82 | border-right: 0px dashed transparent; 83 | left: 100%; 84 | margin-left: -20px; 85 | bottom: -13px; 86 | } 87 | 88 | .tooltip.pos_sw .pointer { 89 | border-bottom: 14px solid #444; 90 | border-left: 14px dashed transparent; 91 | border-right: 0px dashed transparent; 92 | left: 100%; 93 | margin-left: -20px; 94 | top: -13px; 95 | } 96 | 97 | .tooltip.pos_se .pointer { 98 | border-bottom: 14px solid #444; 99 | border-right: 14px dashed transparent; 100 | border-left: 0px dashed transparent; 101 | left: 8px; 102 | top: -13px; 103 | } 104 | 105 | .tooltip.pos_ne .pointer { 106 | border-top: 14px solid #444; 107 | border-right: 14px dashed transparent; 108 | border-left: 0px dashed transparent; 109 | left: 8px; 110 | bottom: -13px; 111 | } 112 | 113 | 114 | /* sco.panes.js */ 115 | .pane-wrapper { 116 | position: relative; 117 | overflow: hidden; 118 | } 119 | 120 | .pane-wrapper > div { 121 | width: 100%; 122 | display: none; 123 | top: 0; 124 | left: 0; 125 | position: relative; 126 | transition: .6s ease-in-out all; 127 | -webkit-transition: .6s ease-in-out all; 128 | -o-transition: all .6s ease-in-out; 129 | -moz-transition: all .6s ease-in-out; 130 | -ms-transition: all .6s ease-in-out; 131 | } 132 | 133 | .pane-wrapper > .active, 134 | .pane-wrapper > .prev, 135 | .pane-wrapper > .next { 136 | display: block; 137 | } 138 | 139 | .pane-wrapper.xfade > div, 140 | .pane-wrapper.xfade > .active.right, 141 | .pane-wrapper.xfade > .active.left { 142 | opacity: 0; 143 | } 144 | .pane-wrapper.xfade > .next.left, 145 | .pane-wrapper.xfade > .prev.right, 146 | .pane-wrapper.xfade > .active { 147 | opacity: 1; 148 | } 149 | .pane-wrapper.xfade > .next, 150 | .pane-wrapper.xfade > .prev { 151 | position: absolute; 152 | } 153 | 154 | .pane-wrapper.slide > .active { 155 | left: 0; 156 | } 157 | .pane-wrapper.slide > .next, 158 | .pane-wrapper.slide > .prev { 159 | position: absolute; 160 | width: 100%; 161 | } 162 | .pane-wrapper.slide > .next { 163 | left: 100%; 164 | } 165 | .pane-wrapper.slide > .prev { 166 | left: -100%; 167 | } 168 | .pane-wrapper.slide > .next.left, 169 | .pane-wrapper.slide > .prev.right { 170 | left: 0; 171 | } 172 | .pane-wrapper.slide > .active.left { 173 | left: -100%; 174 | } 175 | .pane-wrapper.slide > .active.right { 176 | left: 100%; 177 | } 178 | 179 | .pane-wrapper.flip > div { 180 | position: relative; 181 | width: 100%; 182 | top: 0; 183 | left: 0; 184 | -webkit-transform: rotateY(-180deg); 185 | -moz-transform: rotateY(-180deg); 186 | -webkit-transform-style: preserve-3d; 187 | -moz-transform-style: preserve-3d; 188 | -webkit-backface-visibility: hidden; 189 | -moz-backface-visibility: hidden; 190 | } 191 | 192 | .pane-wrapper.flip > .active { 193 | -webkit-transform: rotateY(0deg); 194 | -moz-transform: rotateY(0deg); 195 | } 196 | 197 | .pane-wrapper.flip > .next, 198 | .pane-wrapper.flip > .prev { 199 | position: absolute; 200 | display: block; 201 | } 202 | 203 | .pane-wrapper.flip > .active.left { 204 | -webkit-transform: rotateY(-180deg); 205 | -moz-transform: rotateY(-180deg); 206 | } 207 | 208 | .pane-wrapper.flip > .active.right { 209 | -webkit-transform: rotateY(180deg); 210 | -moz-transform: rotateY(180deg); 211 | } 212 | .pane-wrapper.flip > .next.left, 213 | .pane-wrapper.flip > .prev.right { 214 | -webkit-transform: rotateY(0deg); 215 | -moz-transform: rotateY(0deg); 216 | } 217 | 218 | input.error {border: 2px solid red;} 219 | 220 | span.message {padding-top: 9px; 221 | display: block; 222 | font-size: 12px; 223 | color: #CD4F53;} -------------------------------------------------------------------------------- /demo/assets/css/theme.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Nunito:400,700,300); 2 | @import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700); 3 | 4 | 5 | 6 | /* Wrapper for page content to push down footer */ 7 | #wrap { 8 | min-height: 100%; 9 | height: auto; 10 | /* Negative indent footer by its height */ 11 | margin: 0 auto -60px; 12 | /* Pad bottom by footer height */ 13 | padding: 0 0 60px; 14 | } 15 | 16 | /* Set the fixed height of the footer here */ 17 | #footer { 18 | text-align: center; 19 | padding: 2em; 20 | background-color: white; 21 | border-top: 2px solid #F0F0F0; 22 | } 23 | #footer p {font-size: 12px;} 24 | 25 | 26 | 27 | body { 28 | font-family: "Oxygen",Helvetica,Arial,sans-serif; height: 100%; 29 | width: 100%; 30 | margin-top: 0px; /* 50px is the height of the navbar - change this if the navbarn height changes */ 31 | background-color:#F0F0F0; 32 | } 33 | 34 | 35 | html {font-family: "Oxygen",Helvetica,Arial,sans-serif; height: 100% ;} 36 | 37 | .hero-spacer { 38 | margin-top: 50px; 39 | } 40 | 41 | .hero-feature { 42 | margin-bottom: 30px;/* spaces out the feature boxes once they start to stack responsively */ 43 | } 44 | 45 | footer { 46 | font-size: 12px; 47 | margin: 50px 0; 48 | text-align: center; 49 | } 50 | 51 | 52 | /* Custom styles */ 53 | body .btn .glyphicon {padding-right:4px;} 54 | 55 | body .top-form-inner {padding: 20px 20px; 56 | float: right; 57 | overflow: hidden;} 58 | 59 | 60 | 61 | #top .navbar-default { 62 | background-color: transparent; 63 | border-top: none; 64 | min-height: 40px; 65 | 66 | } 67 | 68 | #top .navbar-nav { 69 | font-size: 12px; 70 | text-transform: uppercase; 71 | font-weight: 400; 72 | } 73 | 74 | #top .navbar-nav > li > a { 75 | box-shadow: inset 0 15px 31px -24px rgba(182, 182, 182, 0.6); 76 | border-right: 1px solid #DADADA; 77 | padding-top: 10px; 78 | padding-bottom: 10px; 79 | font-weight: bold; 80 | } 81 | 82 | #top .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 83 | color: #555; 84 | border-left: 1px solid #DADADA; 85 | 86 | background-color: #E7E7E7; 87 | } 88 | 89 | 90 | #top .navbar-nav > li > .dropdown-menu { 91 | text-transform: none; 92 | font-size: 12px; 93 | } 94 | 95 | 96 | .left-sec .filter-sec {} 97 | 98 | 99 | .left-sec .input-control {margin-top: 20px; 100 | font-size: 13px;} 101 | 102 | 103 | .left-sec .input-control label { 104 | font-size: 12px;} 105 | 106 | .left-sec { 107 | border-right: 1px solid #D6D6D6; 108 | height: 100%; 109 | padding-top: 1em; 110 | overflow-y: auto; 111 | z-index: 1000;} 112 | 113 | .left-sec .left-cont { 114 | padding:15px; 115 | border-bottom: 1px solid #D6D6D6; 116 | 117 | } 118 | 119 | .left-sec .left-cont h6 {text-transform: uppercase; 120 | color: grey; font-size: 9px;} 121 | 122 | 123 | .left-sec .left-cont p { 124 | font-size: 11px; 125 | color: grey; 126 | } 127 | 128 | 129 | .right-sec { 130 | margin-top: 1em; 131 | overflow: hidden; 132 | } 133 | 134 | .right-sec .thumbnail img { 135 | height: 175px; 136 | width: 100%; 137 | border: 1px solid rgb(126, 126, 126); 138 | } 139 | .right-sec .thumbnail img:hover { 140 | opacity: 0.9; 141 | } 142 | .right-sec .thumbnail { 143 | font-family: 'Montserrat',Arial,Helvetica,sans-serif;border-radius: 0px 0px 0px 0px; 144 | -moz-border-radius: 0px 0px 0px 0px; 145 | -webkit-border-radius: 0px 0px 0px 0px; 146 | padding:0px; 147 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08); 148 | margin-bottom: 25px;} 149 | 150 | .right-sec h4.title { 151 | font-size: 12px; 152 | font-weight: 700; 153 | margin-top: 0px;} 154 | 155 | .right-sec ul.list-unstyled { 156 | font-size: 11px; 157 | margin-bottom: 0px; 158 | color: #494949; 159 | } 160 | 161 | .right-sec ul.list-unstyled li { 162 | padding: 3px 2px; 163 | } 164 | 165 | 166 | .right-sec ul.media-list { font-family: 'Montserrat',Arial,Helvetica,sans-serif;} 167 | 168 | .right-sec ul.media-list li.premium-item {color: #DAF2FA; 169 | background: #27B3E0; 170 | } 171 | 172 | 173 | .right-sec .media-body h4 {margin-top: 0px; margin-bottom: 15px; font-family: inherit; font-weight: bold; padding-right: 10px;} 174 | 175 | .right-sec .media-body .label {font-family: "Oxygen",Helvetica,Arial,sans-serif;} 176 | 177 | .right-sec ul.media-list li.premium-item .label-success {background: #FFF; 178 | color: #5CB85C; 179 | font-size: 17px;} 180 | 181 | 182 | 183 | .right-sec ul.media-list li { 184 | 185 | background: #FFF; 186 | margin-bottom: 10px; 187 | border-right: 1px solid #D6D3D3; 188 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08); 189 | } 190 | 191 | .right-sec ul.media-list .media-body {padding:10px; 192 | font-size: 12px;} 193 | .right-sec ul.media-list .media-object {width: 125px; 194 | height: 100px; 195 | } 196 | 197 | 198 | .right-sec .thumbnail .label { 199 | 200 | position: absolute; 201 | left: 15px; 202 | top: 15px; 203 | font-size: 18px; 204 | opacity: 0.9} 205 | 206 | .right-sec .thumbnail a { 207 | font-family: 'Montserrat',Arial,Helvetica,sans-serif;color: #444343; 208 | font-size: 15px; 209 | font-family: inherit;} 210 | 211 | 212 | 213 | .right-sec .top {margin: 30px 0px;} 214 | .right-sec .bio {margin: 60px 0px;} 215 | .right-sec .bio h3 {font-family: inherit; margin-bottom: 5px;} 216 | .right-sec .bio p {font-size: 12px; margin-top: 10px; color: #6D6A6A;} 217 | .right-sec .bio span {font-style: italic;} 218 | 219 | .right-sec .bio-img {text-align: center; width: 100%; } 220 | .right-sec .bio-img img {background: #FFF;padding: 4px;border: 1px solid #C2BABA; } 221 | 222 | 223 | .sub-foot {background-color: white;padding: 6em 0em;} 224 | .sub-foot p {color: grey; } 225 | .sub-foot img.logo { 226 | width: 100%; 227 | height: 100px; 228 | border-radius: 2px 2px 2px 2px; 229 | -moz-border-radius: 2px 2px 2px 2px; 230 | -webkit-border-radius: 2px 2px 2px 2px; 231 | border: 2px solid #E4E4E4; 232 | padding: 20px; 233 | } 234 | 235 | .sub-foot img.logo:hover { 236 | opacity: 0.6; 237 | } 238 | 239 | .sub-foot .thumbnail {border: none;} 240 | 241 | 242 | .right-sec .premium {color: #DAF2FA; 243 | background: #27B3E0; 244 | 245 | border-top: 5px solid #27B3E0; } 246 | .right-sec .premium img {min-height:175px; border-top: none;} 247 | .right-sec .premium img:hover {opacity: 0.8;} 248 | 249 | .right-sec .premium h4 a {font-size: 14px; 250 | color: #D5F0F9; } 251 | .right-sec .premium ul {margin-bottom: 0px;} 252 | 253 | .right-sec .premium ul> li {font-size: 9px; color: #A9EBFF; } 254 | 255 | .right-sec .list-inline > li { 256 | display: inline-block; 257 | padding-right: 5px; 258 | padding-left: 0px; 259 | } 260 | 261 | .right-sec .premium ul> li:first-child {padding-left:5px;} 262 | 263 | 264 | 265 | .listing-page {padding: 4em 0px; 266 | background: #FFF; 267 | } 268 | 269 | .listing-page-top {padding: 2em 0px 0em; 270 | border-bottom: 1px solid #DDD; 271 | } 272 | 273 | .listing-page-top .nav-tabs { 274 | border-bottom: none; 275 | margin-top: 45px; 276 | } 277 | 278 | .listing-page-top h2 {margin-top: 5px; 279 | font-family: inherit; 280 | font-weight: bold;} 281 | 282 | .listing-page-top .nav-tabs i { 283 | padding-right: 7px; 284 | font-size: 15px; 285 | vertical-align: middle; 286 | } 287 | 288 | 289 | .listing-page .tab-content {padding: 20px; 290 | border: 1px solid #D3D3D3; 291 | border-top: none; 292 | } 293 | 294 | 295 | 296 | 297 | .listing-page .col-lg-12 298 | {border-bottom: 1px solid #DAD7D7; 299 | margin-bottom: 17px;} 300 | 301 | 302 | .listing-page .media 303 | { 304 | /*box-shadow:0px 0px 4px -2px #000;*/ 305 | margin: 13px 0; 306 | padding: 5px 25px; 307 | } 308 | .listing-page .dp 309 | { 310 | border:10px solid #eee; 311 | transition: all 0.2s ease-in-out; 312 | } 313 | .listing-page .dp:hover 314 | { 315 | border:5px solid #eee; 316 | 317 | /*-webkit-font-smoothing:antialiased;*/ 318 | } 319 | 320 | 321 | .nav-tabs > li.active > a, 322 | .nav-tabs > li.active > a:focus { 323 | color: #555555; 324 | cursor: pointer; 325 | background-color: #ffffff; 326 | border: 1px solid #dddddd; 327 | border-bottom-color: transparent; 328 | } 329 | 330 | .nav-tabs > li.active > a:hover 331 | 332 | {background: #F8F8F8; cursor: pointer;} 333 | 334 | .listing-page-top p {font-size: 11px; 335 | color: #635F5F; 336 | } 337 | 338 | .listing-page .table {font-size: 11px;} 339 | 340 | .listing-page-top .label {font-family: inherit; font-size: 99%; } 341 | 342 | .error-page { 343 | text-align: center; 344 | margin: 5em; 345 | background: rgba(0, 0, 0, 0); 346 | } 347 | 348 | .error-page p.error { 349 | font-size: 10em; 350 | font-weight: bold;} 351 | 352 | .error-page p.text { 353 | font-family: inherit; 354 | font-size: 30px; 355 | font-weight: bold; 356 | margin-bottom: 2em; 357 | color: #838383; 358 | } 359 | 360 | .error-page .fa-compass {color:#A2C765;} 361 | 362 | #landing .services {background: white;} 363 | 364 | 365 | 366 | #landing .glyphicon {padding-right:5px;} 367 | 368 | #landing .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { 369 | text-transform: uppercase; 370 | color: #FFF; 371 | background-color: rgba(0, 0, 0, 0); 372 | border: 3px solid #10799B; 373 | } 374 | 375 | #landing .subline {font-size: 2em; 376 | color: rgba(192, 240, 255, 0.9);} 377 | 378 | 379 | 380 | #landing .nav > li > a { 381 | color: #FFF; 382 | text-transform: uppercase; 383 | padding: 10px 15px;} 384 | 385 | #landing .nav > li > a:hover { 386 | background: transparent;} 387 | 388 | #landing .text-muted { 389 | color: white; 390 | font-family: 'Nunito', sans-serif; 391 | font-size: 22px; 392 | letter-spacing: -1px; 393 | } 394 | 395 | #landing .search-block { 396 | background-color: rgba(16, 121, 155, 0.9); 397 | margin-left: auto; 398 | margin-right: auto; 399 | padding: 50px 0px; 400 | } 401 | 402 | #landing .header-image { 403 | position: relative; 404 | z-index: 1; 405 | 406 | background: url('../img/bg-main.jpg') repeat;/* Use a tiling background image or a full width image - if you're using full width you will need to change no-repeat center center cover */ 407 | background-position: center; 408 | height: auto; 409 | display: block; 410 | width: 100%; 411 | min-height: 750px; 412 | -webkit-background-size: cover; 413 | -moz-background-size: cover; 414 | -o-background-size: cover; 415 | background-size: cover; 416 | } 417 | 418 | 419 | #landing .header-image:before { 420 | z-index: -2; 421 | content: ""; 422 | display: block; 423 | position: absolute; 424 | top: 0; 425 | bottom: 0; 426 | left: 0; 427 | right: 0; 428 | background: rgba(39, 179, 224, 0.9);} 429 | 430 | #landing .header {overflow: hidden; 431 | margin-bottom: 6em;} 432 | 433 | 434 | 435 | #landing .headline { 436 | padding: 60px 10px 55px 10px;} 437 | 438 | #landing .headline > .container > h1 { 439 | font-weight: bold; 440 | font-size: 51px; 441 | text-shadow: 0px 2px 2px rgba(1, 52, 117, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1); 442 | color: #FFF; 443 | 444 | } 445 | 446 | #landing .headline > .container > h2 { 447 | 448 | 449 | font-size: 45px; 450 | color: #FFF; 451 | 452 | letter-spacing: -2px; 453 | } 454 | 455 | 456 | 457 | #landing .featurette-divider { 458 | margin: 80px 0; 459 | } 460 | #landing .featurette { 461 | overflow: hidden; 462 | } 463 | 464 | #landing .featurette-image.pull-left { 465 | margin-right: 40px; 466 | } 467 | #landing .featurette-image.pull-right { 468 | margin-left: 40px; 469 | } 470 | 471 | #landing .featurette-heading { 472 | font-size: 50px; 473 | } 474 | 475 | 476 | 477 | #landing .auth-unit { 478 | width: 300px;margin-right: auto; 479 | margin-left: auto;} 480 | #landing .auth-unit-inner { 481 | -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.65); 482 | -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.65); 483 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.65); 484 | border-radius: 0px 0px 3px 3px; 485 | -moz-border-radius: 0px 0px 3px 3px; 486 | -webkit-border-radius: 0px 0px 3px 3px; 487 | background: #F0F0F0; 488 | 489 | padding: 25px; 490 | } 491 | 492 | #landing .auth-unit label {font-size: 13px; width: 100%;} 493 | 494 | #landing .auth-unit-top { 495 | 496 | background: #FCFCFC; 497 | border-bottom: 1px solid #CACACA; 498 | padding: 5px 25px; 499 | border-radius: 3px 3px 0px 0px; 500 | -moz-border-radius: 3px 3px 0px 0px; 501 | -webkit-border-radius: 3px 3px 0px 0px;} 502 | 503 | 504 | #landing .auth-unit-top h3 { 505 | font-family: inherit; 506 | margin-top: 10px; 507 | margin-bottom: 5px; 508 | font-size: 25px;} 509 | 510 | #landing .auth-unit-top p { 511 | font-size: 12px; 512 | color: #7E7E7E;} 513 | 514 | #landing .auth-unit h3.text-brand { 515 | font-family: inherit; 516 | text-align: center; 517 | margin-bottom: 5px; 518 | padding: 1em 0em 35px; 519 | font-size: 30px; 520 | font-weight: bold; 521 | color: #FFF; 522 | letter-spacing: -1px;} 523 | 524 | #landing hr {border-top: 1px solid rgba(224, 213, 213, 0.87); 525 | border-bottom: 1px solid rgba(255, 255, 255, 0.5); 526 | margin-top: 20px; 527 | margin-bottom: 20px;} 528 | 529 | .sec-features {padding:4em 0em;} 530 | 531 | 532 | 533 | .section-sec {background: #F7F7F7; padding: 60px 0px;} 534 | 535 | footer { 536 | margin: 50px 0; 537 | } 538 | 539 | 540 | footer a { 541 | font-weight: bold; 542 | } 543 | 544 | 545 | /* Overide BS Styles */ 546 | 547 | .fade { 548 | opacity: 1; 549 | transition: opacity .25s ease-in-out; 550 | -moz-transition: opacity .25s ease-in-out; 551 | -webkit-transition: opacity .25s ease-in-out; 552 | } 553 | .fade:hover { 554 | opacity: 0.5; 555 | } 556 | 557 | .featurette-divider { 558 | margin: 80px 0; 559 | } 560 | .featurette { 561 | overflow: hidden; 562 | } 563 | 564 | .featurette-image.pull-left { 565 | margin-right: 40px; 566 | } 567 | .featurette-image.pull-right { 568 | margin-left: 40px; 569 | } 570 | 571 | .featurette-heading { 572 | font-size: 50px; 573 | } 574 | 575 | 576 | img.featurette-image { 577 | height: 240px; 578 | width: 245px; 579 | padding: 10px; 580 | background: #FFF; 581 | } 582 | 583 | 584 | .navbar-form { 585 | margin-top: 10px;} 586 | 587 | .section {padding: 60px 0px; 588 | background: #FFF;} 589 | 590 | .section.secondary { background: #F7F7F7;} 591 | 592 | .section p {color: #6F6E6E;} 593 | 594 | .navbar-btn { 595 | margin-top: 10px; 596 | margin-bottom: 10px; 597 | } 598 | 599 | .navbar .btn-toolbar { 600 | border-right: 1px solid #C2C2C2; 601 | padding-right: 16px;} 602 | 603 | .navbar-default { 604 | background-color: #FFFFFF; 605 | border-color: #CFCFCF; 606 | } 607 | .navbar { 608 | border-radius: 0px 0px 0px 0px; 609 | -moz-border-radius: 0px 0px 0px 0px; 610 | -webkit-border-radius: 0px 0px 0px 0px; 611 | margin-bottom: 0px; 612 | } 613 | 614 | .selecter { 615 | display: block; 616 | margin: 10px 0; 617 | position: relative; 618 | max-width: 100%; 619 | z-index: 1; 620 | } 621 | 622 | .navbar-brand { 623 | color: #4B4949; 624 | font-family: 'Nunito', sans-serif; 625 | padding: 15px 30px; 626 | font-size: 16px; 627 | font-weight: bold; 628 | letter-spacing: -1px; 629 | } 630 | .navbar-brand:hover { 631 | opacity: 0.9;} 632 | 633 | .navbar-brand span.sub-brand {color: #6B6B6B;} 634 | 635 | .navbar-brand .glyphicon {color: #1EA4D1; 636 | vertical-align: top; 637 | line-height: 15px;} 638 | 639 | 640 | .navbar-default .navbar-brand { 641 | color: #575757;} 642 | 643 | 644 | .navbar-default .navbar-link { 645 | color: #555353; 646 | cursor: pointer; 647 | font-weight: bold; 648 | } 649 | 650 | .navbar-default .navbar-text { 651 | color: #7A7A7A; 652 | font-size: 12px; 653 | } 654 | 655 | .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border-bottom: 1px solid #dddddd;} 656 | .nav-tabs { 657 | } 658 | 659 | textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable- input:focus { 660 | border-color: none; 661 | box-shadow: none; 662 | -webkit-box-shadow: none; 663 | outline: -webkit-focus-ring-color auto 5px; 664 | } 665 | 666 | 667 | .has-error .form-control { 668 | border: 2px solid #de4343; 669 | 670 | } 671 | 672 | 673 | .btn-primary { 674 | background-color: #009DDC; 675 | border-color: #0085B7;} 676 | 677 | 678 | .btn-primary:hover, 679 | .btn-primary:focus, 680 | .btn-primary:active, 681 | .btn-primary.active, 682 | .open .dropdown-toggle.btn-primary { 683 | color: #ffffff; 684 | background-color: #0094CC; 685 | border-color: #285e8e; 686 | } 687 | 688 | 689 | 690 | .btn-success { 691 | background-color: #A2C765; 692 | border-color: #7DA53D;} 693 | 694 | 695 | .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { 696 | color: #FFF; 697 | background-color: #91BC47 698 | ; 699 | border-color: #739638; 700 | } 701 | 702 | .btn-danger { 703 | background-color: #F26963; 704 | border-color: #d43f3a; 705 | } 706 | 707 | 708 | 709 | .label-success { 710 | background-color:#A2C765; 711 | } 712 | 713 | .label-primary { 714 | background-color: #009DDC; 715 | } 716 | 717 | 718 | 719 | .grid i { 720 | font-size: 25px; 721 | padding-right: 10px; 722 | 723 | } 724 | .grid p { 725 | font-size: 12px; 726 | color: grey; 727 | 728 | } 729 | .grid { 730 | margin-left: 0px; 731 | list-style: none; 732 | overflow: hidden; 733 | max-width: 100%; 734 | margin: 0 auto; 735 | } 736 | .grid li { 737 | padding: 0 1.5em 1.5em 0; 738 | } 739 | .grid li > div { 740 | background: white; 741 | padding: 15px ; color: black; 742 | } 743 | 744 | .grid h5 { 745 | margin-top: 3px; 746 | 747 | } 748 | 749 | 750 | .grid li > div img { 751 | width: 100%; 752 | height: 210px; 753 | 754 | } 755 | 756 | .grid li.wide { 757 | width: 100%; 758 | } 759 | .grid li a { 760 | font-size: 17px; 761 | color: #3B3B3B; 762 | 763 | font-family: inherit; 764 | } 765 | 766 | @media all and (min-width: 27em) { 767 | .grid li { 768 | width: 50%; 769 | float: left; 770 | } 771 | } 772 | 773 | @media all and (min-width: 40em) { 774 | .grid li { 775 | width: 33.3333333%; 776 | } 777 | .grid li.wide { 778 | width: 66.666666%; 779 | } 780 | } 781 | @media all and (min-width: 60em) { 782 | .grid li { 783 | width: 25%; 784 | } 785 | .grid li.wide { 786 | width: 50%; 787 | } 788 | 789 | -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.eot?v=4.0.3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/fontawesome-webfont.eot?v=4.0.3 -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.ttf?v=4.0.3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/fontawesome-webfont.ttf?v=4.0.3 -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /demo/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /demo/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /demo/assets/img/bg-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/bg-main.jpg -------------------------------------------------------------------------------- /demo/assets/img/black10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/black10.png -------------------------------------------------------------------------------- /demo/assets/img/black60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/black60.png -------------------------------------------------------------------------------- /demo/assets/img/fs-picker-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/fs-picker-icon.png -------------------------------------------------------------------------------- /demo/assets/img/fs-selecter-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/fs-selecter-arrow.png -------------------------------------------------------------------------------- /demo/assets/img/s-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/s-1.jpg -------------------------------------------------------------------------------- /demo/assets/img/s-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/s-2.jpg -------------------------------------------------------------------------------- /demo/assets/img/s-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srchulo/jQuery-Facets/c51c3262da5c441ab3d9844930f3fe39bed52101/demo/assets/img/s-3.jpg -------------------------------------------------------------------------------- /demo/assets/js/dynamo.min.js: -------------------------------------------------------------------------------- 1 | (function(a){a.fn.dynamo=function(){return this.each(function(b,c){c=a(c),delay=parseInt(c.data("delay"))||3e3,speed=parseInt(c.data("speed"))||350,pause=c.data("pause")||!1,lines=c.data("lines").split(c.data("delimiter")||","),c.html(a("").text(c.text())),max=c.find("span:eq(0)").width();for(k in lines)span=a("").text(lines[k]),c.append(span),max=Math.max(max,span.width());c.find("span").each(function(b,e){s=a(e).remove(),d=a("
").text(s.text()),d.width(max),c.append(d)}),height=c.find(">:first-child").height(),c.width(max).height(height).css({display:"inline-block",position:"relative",overflow:"hidden","vertical-align":"bottom","text-align":"left"}),c.data("center")&&c.css("text-align","center"),transition=function(){c.dynamo_trigger()},pause||setInterval(transition,delay)})},a.fn.dynamo_trigger=function(){return this.each(function(b,c){speed=parseInt(a(c).data("speed"))||350,a(c).find("div:first").slideUp(speed,function(){a(c).append(a(this).show())})})},a(".dynamo").dynamo()})(jQuery); -------------------------------------------------------------------------------- /demo/assets/js/jquery.fs.picker.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Picker Plugin [Formstone Library] 3 | * @author Ben Plum 4 | * @version 0.4.0 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | if (jQuery) (function($) { 11 | 12 | // Default Options 13 | var options = { 14 | customClass: "", 15 | toggle: false, 16 | labelOn: "ON", 17 | labelOff: "OFF" 18 | }; 19 | 20 | // Public Methods 21 | var pub = { 22 | 23 | // Set Defaults 24 | defaults: function(opts) { 25 | options = $.extend(options, opts || {}); 26 | return $(this); 27 | }, 28 | 29 | // Disable field 30 | disable: function() { 31 | return $(this).each(function(i, input) { 32 | var $input = $(input), 33 | data = $input.data("picker"); 34 | 35 | if (typeof data != "undefined") { 36 | var $picker = data.$picker; 37 | 38 | $input.prop("disabled", true); 39 | $picker.addClass("disabled"); 40 | } 41 | }); 42 | }, 43 | 44 | // Enable field 45 | enable: function() { 46 | return $(this).each(function(i, input) { 47 | var $input = $(input), 48 | data = $input.data("picker"); 49 | 50 | if (typeof data != "undefined") { 51 | var $picker = data.$picker; 52 | 53 | $input.prop("disabled", false); 54 | $picker.removeClass("disabled"); 55 | } 56 | }); 57 | }, 58 | 59 | // Destroy picker 60 | destroy: function() { 61 | return $(this).each(function(i, input) { 62 | var $input = $(input), 63 | data = $input.data("picker"); 64 | 65 | if (typeof data != "undefined") { 66 | var $picker = data.$picker, 67 | $handle = $picker.find(".picker-handle"), 68 | $labels = $picker.find(".picker-toggle-label"), 69 | $label = $("label[for=" + $input.attr("id") + "]"); 70 | 71 | // Restore DOM / Unbind click events 72 | $picker.off(".picker"); 73 | $handle.remove(); 74 | $labels.remove(); 75 | $input.off(".picker") 76 | .removeClass("picker-element") 77 | .data("picker", null); 78 | $label.removeClass("picker-label") 79 | .unwrap(); 80 | } 81 | }); 82 | }, 83 | 84 | // Update field 85 | update: function() { 86 | return $(this).each(function(i, input) { 87 | var $input = $(input), 88 | data = $input.data("picker"); 89 | 90 | if (typeof data != "undefined" && !$input.is(":disabled")) { 91 | if ($input.is(":checked")) { 92 | _onSelect({ data: data }, true); 93 | } else { 94 | _onDeselect({ data: data }, true); 95 | } 96 | } 97 | }); 98 | } 99 | }; 100 | 101 | // Private Methods 102 | 103 | // Initialize 104 | function _init(opts) { 105 | // Settings 106 | opts = $.extend({}, options, opts); 107 | 108 | // Apply to each element 109 | var $items = $(this); 110 | for (var i = 0, count = $items.length; i < count; i++) { 111 | _build($items.eq(i), opts); 112 | } 113 | return $items; 114 | } 115 | 116 | // Build 117 | function _build($input, opts) { 118 | if (!$input.data("picker")) { 119 | // EXTEND OPTIONS 120 | opts = $.extend({}, opts, $input.data("picker-options")); 121 | 122 | var $label = $("label[for=" + $input.attr("id") + "]"), 123 | type = $input.attr("type"), 124 | typeClass = "picker-" + (type == "radio" ? "radio" : "checkbox"), 125 | group = $input.attr("name"), 126 | html = '
'; 127 | 128 | if (opts.toggle) { 129 | typeClass += " picker-toggle"; 130 | html = '' + opts.labelOn + '' + opts.labelOff + '' + html; 131 | } 132 | 133 | // Modify DOM 134 | $input.addClass("picker-element"); 135 | $label.wrap('
') 136 | .before(html) 137 | .addClass("picker-label"); 138 | 139 | // Store plugin data 140 | var $picker = $label.parents(".picker"), 141 | $handle = $picker.find(".picker-handle"), 142 | $labels = $picker.find(".picker-toggle-label"); 143 | 144 | // Check checked 145 | if ($input.is(":checked")) { 146 | $picker.addClass("checked"); 147 | } 148 | 149 | // Check disabled 150 | if ($input.is(":disabled")) { 151 | $picker.addClass("disabled"); 152 | } 153 | 154 | $.extend(opts, { 155 | $picker: $picker, 156 | $input: $input, 157 | $handle: $handle, 158 | $label: $label, 159 | $labels: $labels, 160 | group: group, 161 | isRadio: (type == "radio"), 162 | isCheckbox: (type == "checkbox") 163 | }); 164 | 165 | // Bind click events 166 | $input.on("focus.picker", opts, _onFocus) 167 | .on("blur.picker", opts, _onBlur) 168 | .on("change.picker", opts, _onChange) 169 | .on("deselect.picker", opts, _onDeselect) 170 | .data("picker", opts); 171 | 172 | $picker.on("click.picker", opts, _onClick); 173 | } 174 | } 175 | 176 | // Handle Picker click 177 | function _onClick(e) { 178 | e.preventDefault(); 179 | e.stopPropagation(); 180 | 181 | var data = e.data; 182 | 183 | if (!$(e.target).is(data.$input)) { 184 | data.$input.trigger("click"); 185 | } 186 | } 187 | 188 | // Handle input click 189 | function _onChange(e) { 190 | e.stopPropagation(); 191 | 192 | var data = e.data; 193 | 194 | if (!data.$input.is(":disabled")) { 195 | // Checkbox change events fire after state has changed 196 | var checked = data.$input.is(":checked"); 197 | if (data.isCheckbox) { 198 | if (checked) { 199 | _onSelect(e, true); 200 | } else { 201 | _onDeselect(e, true); 202 | } 203 | } else { 204 | // radio 205 | if (checked) { 206 | _onSelect(e); 207 | } 208 | } 209 | } 210 | } 211 | 212 | // Handle select 213 | function _onSelect(e, internal) { 214 | var data = e.data; 215 | 216 | if (typeof data.group !== "undefined" && data.isRadio) { 217 | $('input[name="' + data.group + '"]').not(data.$input).trigger("deselect"); 218 | } 219 | 220 | data.$picker.addClass("checked"); 221 | } 222 | 223 | // Handle deselect 224 | function _onDeselect(e, internal) { 225 | var data = e.data; 226 | 227 | data.$picker.removeClass("checked"); 228 | } 229 | 230 | // Handle focus 231 | function _onFocus(e) { 232 | e.data.$picker.addClass("focus"); 233 | } 234 | 235 | // Handle blur 236 | function _onBlur(e) { 237 | e.data.$picker.removeClass("focus"); 238 | } 239 | 240 | // Define Plugin 241 | $.fn.picker = function(method) { 242 | if (pub[method]) { 243 | return pub[method].apply(this, Array.prototype.slice.call(arguments, 1)); 244 | } else if (typeof method === 'object' || !method) { 245 | return _init.apply(this, arguments); 246 | } 247 | return this; 248 | }; 249 | })(jQuery); 250 | -------------------------------------------------------------------------------- /demo/assets/js/jquery.fs.scroller.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Scroller Plugin [Formstone Library] 3 | * @author Ben Plum 4 | * @version 0.6.4 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | if (jQuery) (function($) { 11 | 12 | var options = { 13 | customClass: "", 14 | duration: 0, 15 | handleSize: false, 16 | horizontal: false, 17 | trackMargin: 0 18 | }; 19 | 20 | var pub = { 21 | 22 | defaults: function(opts) { 23 | options = $.extend(options, opts || {}); 24 | return $(this); 25 | }, 26 | 27 | destroy: function() { 28 | return $(this).each(function(i) { 29 | var data = $(this).data("scroller"); 30 | if (data) { 31 | data.$scroller.removeClass(data.customClass) 32 | .removeClass("scroller") 33 | .removeClass("scroller-active"); 34 | data.$content.replaceWith(data.$content.html()); 35 | data.$bar.remove(); 36 | 37 | data.$content.off(".scroller"); 38 | data.$scroller.off(".scroller") 39 | .removeData("scroller"); 40 | } 41 | }); 42 | }, 43 | 44 | scroll: function(pos, duration) { 45 | return $(this).each(function(i) { 46 | var data = $(this).data("scroller"), 47 | duration = duration || options.duration; 48 | 49 | if (typeof pos != "number") { 50 | var $el = $(pos); 51 | if ($el.length > 0) { 52 | var offset = $el.position(); 53 | if (data.horizontal == true) { 54 | pos = offset.left + data.$content.scrollLeft(); 55 | } else { 56 | pos = offset.top + data.$content.scrollTop(); 57 | } 58 | } else { 59 | pos = data.$content.scrollTop(); 60 | } 61 | } 62 | 63 | if (data.horizontal == true) { 64 | data.$content.stop().animate({ scrollLeft: pos }, duration); 65 | } else { 66 | data.$content.stop().animate({ scrollTop: pos }, duration); 67 | } 68 | }); 69 | }, 70 | 71 | reset: function(_data) { 72 | return $(this).each(function(i) { 73 | var data = _data || $(this).data("scroller"); 74 | 75 | if (typeof data != "undefined") { 76 | data.$scroller.addClass("scroller-setup"); 77 | 78 | if (data.horizontal == true) { 79 | // Horizontal 80 | data.barHeight = data.$content[0].offsetHeight - data.$content[0].clientHeight; 81 | data.frameWidth = data.$content.outerWidth(); 82 | data.trackWidth = data.frameWidth - (data.trackMargin * 2); 83 | data.scrollWidth = data.$content[0].scrollWidth; 84 | data.ratio = data.trackWidth / data.scrollWidth; 85 | data.trackRatio = data.trackWidth / data.scrollWidth; 86 | data.handleWidth = (data.handleSize) ? data.handleSize : data.trackWidth * data.trackRatio; 87 | data.scrollRatio = (data.scrollWidth - data.frameWidth) / (data.trackWidth - data.handleWidth); 88 | data.handleBounds = { 89 | left: 0, 90 | right: data.trackWidth - data.handleWidth 91 | }; 92 | 93 | data.$scroller.data("scroller", data); 94 | data.$content.css({ paddingBottom: data.barHeight + data.paddingBottom }); 95 | 96 | var scrollLeft = data.$content.scrollLeft(); 97 | var handleLeft = scrollLeft * data.ratio; 98 | 99 | if (data.scrollWidth <= data.frameWidth) { 100 | data.$scroller.removeClass("scroller-active"); 101 | } else { 102 | data.$scroller.addClass("scroller-active"); 103 | } 104 | 105 | data.$bar.css({ width: data.frameWidth }); 106 | data.$track.css({ width: data.trackWidth, marginLeft: data.trackMargin, marginRight: data.trackMargin }); 107 | data.$handle.css({ width: data.handleWidth }); 108 | _position.apply(data.$scroller, [data, handleTop]); 109 | } else { 110 | // Vertical 111 | data.barWidth = data.$content[0].offsetWidth - data.$content[0].clientWidth; 112 | data.frameHeight = data.$content.outerHeight(); 113 | data.trackHeight = data.frameHeight - (data.trackMargin * 2); 114 | data.scrollHeight = data.$content[0].scrollHeight; 115 | data.ratio = data.trackHeight / data.scrollHeight; 116 | data.trackRatio = data.trackHeight / data.scrollHeight; 117 | data.handleHeight = (data.handleSize) ? data.handleSize : data.trackHeight * data.trackRatio; 118 | data.scrollRatio = (data.scrollHeight - data.frameHeight) / (data.trackHeight - data.handleHeight); 119 | data.handleBounds = { 120 | top: 0, 121 | bottom: data.trackHeight - data.handleHeight 122 | }; 123 | 124 | data.$scroller.data("scroller", data); 125 | 126 | var scrollTop = data.$content.scrollTop(); 127 | var handleTop = scrollTop * data.ratio; 128 | 129 | if (data.scrollHeight <= data.frameHeight) { 130 | data.$scroller.removeClass("scroller-active"); 131 | } else { 132 | data.$scroller.addClass("scroller-active"); 133 | } 134 | 135 | data.$bar.css({ height: data.frameHeight }); 136 | data.$track.css({ height: data.trackHeight, marginBottom: data.trackMargin, marginTop: data.trackMargin }); 137 | data.$handle.css({ height: data.handleHeight }); 138 | _position.apply(data.$scroller, [data, handleTop]); 139 | } 140 | 141 | data.$scroller.removeClass("scroller-setup"); 142 | } 143 | }); 144 | } 145 | } 146 | 147 | function _init(opts) { 148 | // Local options 149 | opts = $.extend({}, options, opts || {}); 150 | 151 | // Apply to each element 152 | var $items = $(this); 153 | for (var i = 0, count = $items.length; i < count; i++) { 154 | _build($items.eq(i), opts); 155 | } 156 | return $items; 157 | } 158 | 159 | // Build 160 | function _build($scroller, opts) { 161 | if (!$scroller.data("scroller")) { 162 | // EXTEND OPTIONS 163 | $.extend(opts, $scroller.data("scroller-options")); 164 | 165 | var html = '
'; 166 | html += '
'; 167 | html += '
'; 168 | html += '
'; 169 | 170 | opts.paddingRight = parseInt($scroller.css("padding-right"), 10); 171 | opts.paddingBottom = parseInt($scroller.css("padding-bottom"), 10); 172 | 173 | $scroller.addClass(opts.customClass + " scroller") 174 | .wrapInner('
') 175 | .prepend(html); 176 | 177 | if (opts.horizontal) { 178 | $scroller.addClass("scroller-horizontal"); 179 | } 180 | 181 | opts = $.extend({ 182 | $scroller: $scroller, 183 | $content: $scroller.find(".scroller-content"), 184 | $bar: $scroller.find(".scroller-bar"), 185 | $track: $scroller.find(".scroller-track"), 186 | $handle: $scroller.find(".scroller-handle") 187 | }, opts); 188 | 189 | opts.$content.on("scroll.scroller", opts, _onScroll); 190 | opts.$scroller.on("mousedown.scroller", ".scroller-track", opts, _onTrackDown) 191 | .on("mousedown.scroller", ".scroller-handle", opts, _onHandleDown) 192 | .data("scroller", opts); 193 | 194 | pub.reset.apply($scroller, [opts]); 195 | $(window).one("load", function() { 196 | pub.reset.apply($scroller, [opts]); 197 | }); 198 | } 199 | } 200 | 201 | function _onScroll(e) { 202 | e.preventDefault(); 203 | e.stopPropagation(); 204 | 205 | var data = e.data; 206 | 207 | if (data.horizontal == true) { 208 | // Horizontal 209 | var scrollLeft = data.$content.scrollLeft(); 210 | if (scrollLeft < 0) { 211 | scrollLeft = 0; 212 | } 213 | 214 | var handleLeft = scrollLeft / data.scrollRatio; 215 | if (handleLeft > data.handleBounds.right) { 216 | handleLeft = data.handleBounds.right; 217 | } 218 | 219 | data.$handle.css({ left: handleLeft }); 220 | } else { 221 | // Vertical 222 | var scrollTop = data.$content.scrollTop(); 223 | if (scrollTop < 0) { 224 | scrollTop = 0; 225 | } 226 | 227 | var handleTop = scrollTop / data.scrollRatio; 228 | if (handleTop > data.handleBounds.bottom) { 229 | handleTop = data.handleBounds.bottom; 230 | } 231 | 232 | data.$handle.css({ top: handleTop }); 233 | } 234 | } 235 | 236 | function _onTrackDown(e) { 237 | e.preventDefault(); 238 | e.stopPropagation(); 239 | 240 | var data = e.data; 241 | var offset = data.$track.offset(); 242 | 243 | if (data.horizontal == true) { 244 | // Horizontal 245 | data.mouseStart = e.pageX; 246 | data.handleLeft = e.pageX - offset.left - (data.handleWidth / 2); 247 | _position.apply(data.$scroller, [data, data.handleLeft]); 248 | } else { 249 | // Vertical 250 | data.mouseStart = e.pageY; 251 | data.handleTop = e.pageY - offset.top - (data.handleHeight / 2); 252 | _position.apply(data.$scroller, [data, data.handleTop]); 253 | } 254 | 255 | data.$scroller.data("scroller", data); 256 | data.$content.off(".scroller"); 257 | $("body").on("mousemove.scroller", data, _onMouseMove) 258 | .on("mouseup.scroller", data, _onMouseUp); 259 | } 260 | 261 | function _onHandleDown(e) { 262 | e.preventDefault(); 263 | e.stopPropagation(); 264 | 265 | var data = e.data; 266 | 267 | if (data.horizontal == true) { 268 | // Horizontal 269 | data.mouseStart = e.pageX; 270 | data.handleLeft = parseInt(data.$handle.css("left"), 10); 271 | } else { 272 | // Vertical 273 | data.mouseStart = e.pageY; 274 | data.handleTop = parseInt(data.$handle.css("top"), 10); 275 | } 276 | 277 | data.$scroller.data("scroller", data); 278 | data.$content.off(".scroller"); 279 | $("body").on("mousemove.scroller", data, _onMouseMove) 280 | .on("mouseup.scroller", data, _onMouseUp); 281 | } 282 | 283 | function _onMouseMove(e) { 284 | e.preventDefault(); 285 | e.stopPropagation(); 286 | 287 | var data = e.data; 288 | var pos = 0; 289 | 290 | if (data.horizontal == true) { 291 | // Horizontal 292 | var delta = data.mouseStart - e.pageX; 293 | pos = data.handleLeft - delta; 294 | } else { 295 | // Vertical 296 | var delta = data.mouseStart - e.pageY; 297 | pos = data.handleTop - delta; 298 | } 299 | 300 | _position.apply(data.$scroller, [data, pos]); 301 | } 302 | 303 | function _onMouseUp(e) { 304 | e.preventDefault(); 305 | e.stopPropagation(); 306 | 307 | var data = e.data; 308 | 309 | data.$content.on("scroll.scroller", data, _onScroll); 310 | $("body").off(".scroller"); 311 | } 312 | 313 | function _position(data, pos) { 314 | if (data.horizontal == true) { 315 | // Horizontal 316 | if (pos < data.handleBounds.left) { 317 | pos = data.handleBounds.left; 318 | } 319 | if (pos > data.handleBounds.right) { 320 | pos = data.handleBounds.right; 321 | } 322 | 323 | var scrollLeft = Math.round(pos * data.scrollRatio); 324 | 325 | data.$handle.css({ left: pos }); 326 | data.$content.scrollLeft( scrollLeft ); 327 | } else { 328 | // Vertical 329 | if (pos < data.handleBounds.top) { 330 | pos = data.handleBounds.top; 331 | } 332 | if (pos > data.handleBounds.bottom) { 333 | pos = data.handleBounds.bottom; 334 | } 335 | 336 | var scrollTop = Math.round(pos * data.scrollRatio); 337 | 338 | data.$handle.css({ top: pos }); 339 | data.$content.scrollTop( scrollTop ); 340 | } 341 | } 342 | 343 | // Define Plugin 344 | $.fn.scroller = function(method) { 345 | if (pub[method]) { 346 | return pub[method].apply(this, Array.prototype.slice.call(arguments, 1)); 347 | } else if (typeof method === 'object' || !method) { 348 | return _init.apply(this, arguments); 349 | } 350 | return this; 351 | }; 352 | })(jQuery); 353 | -------------------------------------------------------------------------------- /demo/assets/js/jquery.fs.selecter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Selecter Plugin [Formtone Library] 3 | * @author Ben Plum 4 | * @version 2.2.3 5 | * 6 | * Copyright © 2013 Ben Plum 7 | * Released under the MIT License 8 | */ 9 | 10 | if (jQuery) (function($) { 11 | 12 | // Mobile Detect 13 | var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1, 14 | isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test( (navigator.userAgent||navigator.vendor||window.opera) ); 15 | 16 | // Default Options 17 | var options = { 18 | callback: function() {}, 19 | cover: false, 20 | customClass: "", 21 | defaultLabel: false, 22 | externalLinks: false, 23 | links: false, 24 | trimOptions: false 25 | }; 26 | 27 | // Identify each instance 28 | var guid = 0; 29 | 30 | // Public Methods 31 | var pub = { 32 | 33 | // Set Defaults 34 | defaults: function(opts) { 35 | options = $.extend(options, opts || {}); 36 | return $(this); 37 | }, 38 | 39 | // Disable field 40 | disable: function(option) { 41 | return $(this).each(function(i, input) { 42 | var data = $(input).next(".selecter").data("selecter"); 43 | 44 | if (typeof option != "undefined") { 45 | var index = data.$items.index( data.$items.filter("[data-value=" + option + "]") ); 46 | 47 | data.$items.eq(index).addClass("disabled"); 48 | data.$optionEls.eq(index).prop("disabled", true); 49 | } else { 50 | if (data.$selecter.hasClass("open")) { 51 | data.$selecter.find(".selecter-selected").trigger("click"); 52 | } 53 | 54 | data.$selecter.addClass("disabled"); 55 | data.$selectEl.prop("disabled", true); 56 | } 57 | }); 58 | }, 59 | 60 | // Enable field 61 | enable: function(option) { 62 | return $(this).each(function(i, input) { 63 | var data = $(input).next(".selecter").data("selecter"); 64 | 65 | if (typeof option != "undefined") { 66 | var index = data.$items.index( data.$items.filter("[data-value=" + option + "]") ) 67 | 68 | data.$items.eq(index).removeClass("disabled"); 69 | data.$optionEls.eq(index).prop("disabled", false); 70 | } else { 71 | data.$selecter.removeClass("disabled"); 72 | data.$selectEl.prop("disabled", false); 73 | } 74 | }); 75 | }, 76 | 77 | // Destroy selecter 78 | destroy: function() { 79 | return $(this).each(function(i, input) { 80 | var $input = $(input), 81 | $selecter = $input.next(".selecter"); 82 | 83 | if ($selecter.hasClass("open")) { 84 | $selecter.find(".selecter-selected").trigger("click"); 85 | } 86 | 87 | // Scroller support 88 | if ($.fn.scroller != undefined) { 89 | $selecter.find(".selecter-options").scroller("destroy"); 90 | } 91 | 92 | $input.off(".selecter") 93 | .removeClass("selecter-element") 94 | .show(); 95 | 96 | $selecter.off(".selecter") 97 | .remove(); 98 | }); 99 | } 100 | }; 101 | 102 | // Private Methods 103 | 104 | // Initialize 105 | function _init(opts) { 106 | // Local options 107 | opts = $.extend({}, options, opts || {}); 108 | 109 | // Apply to each element 110 | var $items = $(this); 111 | for (var i = 0, count = $items.length; i < count; i++) { 112 | _build($items.eq(i), opts); 113 | } 114 | return $items; 115 | } 116 | 117 | // Build each 118 | function _build($selectEl, opts) { 119 | if (!$selectEl.hasClass("selecter-element")) { 120 | if (opts.externalLinks) { 121 | opts.links = true; 122 | } 123 | 124 | // EXTEND OPTIONS 125 | $.extend(opts, $selectEl.data("selecter-options")); 126 | 127 | // Build options array 128 | var $allOptionEls = $selectEl.find("option, optgroup"), 129 | $optionEls = $allOptionEls.filter("option"), 130 | $originalOption = $optionEls.filter(":selected"), 131 | originalIndex = (opts.defaultLabel) ? -1 : $optionEls.index($originalOption), 132 | totalItems = $allOptionEls.length - 1, 133 | wrapperTag = (opts.links) ? "nav" : "div", 134 | itemTag = (opts.links) ? "a" : "span"; 135 | 136 | opts.multiple = $selectEl.prop("multiple"); 137 | opts.disabled = $selectEl.is(":disabled"); 138 | 139 | // Build HTML 140 | var html = '<' + wrapperTag + ' class="selecter ' + opts.customClass; 141 | // Special case classes 142 | if (isMobile) { 143 | html += ' mobile'; 144 | } else if (opts.cover) { 145 | html += ' cover'; 146 | } 147 | if (opts.multiple) { 148 | html += ' multiple'; 149 | } else { 150 | html += ' closed'; 151 | } 152 | if (opts.disabled) { 153 | html += ' disabled'; 154 | } 155 | html += '">'; 156 | if (!opts.multiple) { 157 | html += ''; 158 | html += $(''; 175 | } else { 176 | html += '<' + itemTag + ' class="selecter-item'; 177 | // Default selected value - now handles multi's thanks to @kuilkoff 178 | if ($op.is(':selected') && !opts.defaultLabel) { 179 | html += ' selected'; 180 | } 181 | // Disabled options 182 | if ($op.is(":disabled")) { 183 | html += ' disabled'; 184 | } 185 | // CSS styling classes - might ditch for pseudo selectors 186 | if (i == 0) { 187 | html += ' first'; 188 | } 189 | if (i == totalItems) { 190 | html += ' last'; 191 | } 192 | html += '" '; 193 | if (opts.links) { 194 | html += 'href="' + $op.val() + '"'; 195 | } else { 196 | html += 'data-value="' + $op.val() + '"'; 197 | } 198 | html += '>' + $("").text( _checkLength(opts.trimOptions, $op.text()) ).html() + ''; 199 | j++; 200 | } 201 | } 202 | html += '
'; 203 | html += ''; 204 | 205 | // Modify DOM 206 | $selectEl.addClass("selecter-element") 207 | .after(html); 208 | 209 | // Store plugin data 210 | var $selecter = $selectEl.next(".selecter"); 211 | opts = $.extend({ 212 | $selectEl: $selectEl, 213 | $optionEls: $optionEls, 214 | $selecter: $selecter, 215 | $selected: $selecter.find(".selecter-selected"), 216 | $itemsWrapper: $selecter.find(".selecter-options"), 217 | $items: $selecter.find(".selecter-item"), 218 | index: originalIndex, 219 | guid: guid 220 | }, opts); 221 | 222 | // Scroller support 223 | if ($.fn.scroller != undefined) { 224 | opts.$itemsWrapper.scroller(); 225 | } 226 | 227 | // Bind click events 228 | $selecter.on("click.selecter", ".selecter-selected", opts, _handleClick) 229 | .on("click.selecter", ".selecter-item", opts, _select) 230 | .on("selecter-close", opts, _close) 231 | .data("selecter", opts); 232 | 233 | // Bind Blur/focus events 234 | if ((!opts.links && !isMobile) || isMobile) { 235 | $selectEl.on("change", opts, _change) 236 | .on("blur.selecter", opts, _blur); 237 | if (!isMobile) { 238 | $selectEl.on("focus.selecter", opts, _focus); 239 | } 240 | } else { 241 | // Disable browser focus/blur for jump links 242 | $selectEl.hide(); 243 | } 244 | 245 | guid++; 246 | } 247 | } 248 | 249 | // Handle Click 250 | function _handleClick(e) { 251 | e.preventDefault(); 252 | e.stopPropagation(); 253 | 254 | var data = e.data; 255 | 256 | if (!data.$selectEl.is(":disabled")) { 257 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]); 258 | 259 | // Handle mobile 260 | if (isMobile) { 261 | var el = data.$selectEl[0]; 262 | if (document.createEvent) { // All 263 | var evt = document.createEvent("MouseEvents"); 264 | evt.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 265 | el.dispatchEvent(evt); 266 | } else if (element.fireEvent) { // IE 267 | el.fireEvent("onmousedown"); 268 | } 269 | } else { 270 | // Delegate intent 271 | if (data.$selecter.hasClass("closed")) { 272 | _open(e); 273 | } else if (data.$selecter.hasClass("open")) { 274 | _close(e); 275 | } 276 | } 277 | } 278 | } 279 | 280 | // Open Options 281 | function _open(e) { 282 | e.preventDefault(); 283 | e.stopPropagation(); 284 | 285 | var data = e.data; 286 | 287 | // Make sure it's not alerady open 288 | if (!data.$selecter.hasClass("open")) { 289 | var selectOffset = data.$selecter.offset(), 290 | bodyHeight = $("body").outerHeight(), 291 | optionsHeight = data.$itemsWrapper.outerHeight(true); 292 | 293 | // Calculate bottom of document if not mobile 294 | if (selectOffset.top + optionsHeight > bodyHeight && isMobile) { 295 | data.$selecter.addClass("bottom"); 296 | } else { 297 | data.$selecter.removeClass("bottom"); 298 | } 299 | 300 | data.$itemsWrapper.show(); 301 | 302 | // Bind Events 303 | data.$selecter.removeClass("closed") 304 | .addClass("open"); 305 | $("body").on("click.selecter-" + data.guid, ":not(.selecter-options)", data, _closeListener); 306 | /* .on("keydown.selecter-" + data.guid, data, _keypress); */ 307 | 308 | var selectedOffset = (data.index >= 0) ? data.$items.eq(data.index).position() : { left: 0, top: 0 }; 309 | 310 | if ($.fn.scroller != undefined) { 311 | data.$itemsWrapper.scroller("scroll", (data.$itemsWrapper.find(".scroller-content").scrollTop() + selectedOffset.top), 0) 312 | .scroller("reset"); 313 | } else { 314 | data.$itemsWrapper.scrollTop( data.$itemsWrapper.scrollTop() + selectedOffset.top ); 315 | } 316 | } 317 | } 318 | 319 | // Close Options 320 | function _close(e) { 321 | e.preventDefault(); 322 | e.stopPropagation(); 323 | 324 | var data = e.data; 325 | 326 | // Make sure it's actually open 327 | if (data.$selecter.hasClass("open")) { 328 | data.$itemsWrapper.hide(); 329 | data.$selecter.removeClass("open").addClass("closed"); 330 | $("body").off(".selecter-" + data.guid); 331 | } 332 | } 333 | 334 | // Close listener 335 | function _closeListener(e) { 336 | e.preventDefault(); 337 | e.stopPropagation(); 338 | 339 | if ($(e.currentTarget).parents(".selecter").length == 0) { 340 | _close(e); 341 | } 342 | } 343 | 344 | // Select option 345 | function _select(e) { 346 | e.preventDefault(); 347 | e.stopPropagation(); 348 | 349 | var $target = $(this), 350 | data = e.data; 351 | 352 | if (!data.$selectEl.is(":disabled")) { 353 | if (data.$itemsWrapper.is(":visible")) { 354 | // Update 355 | var index = data.$items.index($target); 356 | _update(index, data, false); 357 | } 358 | 359 | if (!data.multiple) { 360 | // Clean up 361 | _close(e); 362 | } 363 | } 364 | } 365 | 366 | // Handle outside changes 367 | function _change(e, internal) { 368 | if (!internal) { 369 | var $target = $(this), 370 | data = e.data; 371 | 372 | // Mobile link support 373 | if (data.links) { 374 | if (isMobile) { 375 | _launch($target.val(), data.externalLinks); 376 | } else { 377 | _launch($target.attr("href"), data.externalLinks); 378 | } 379 | } else { 380 | // Otherwise update 381 | var index = data.$optionEls.index(data.$optionEls.filter("[value='" + _escape($target.val()) + "']")); 382 | _update(index, data, false); 383 | } 384 | } 385 | } 386 | 387 | // Handle focus 388 | function _focus(e) { 389 | e.preventDefault(); 390 | e.stopPropagation(); 391 | 392 | var data = e.data; 393 | 394 | if (!data.$selectEl.is(":disabled") && !data.multiple) { 395 | data.$selecter.addClass("focus"); 396 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]); 397 | $("body").on("keydown.selecter-" + data.guid, data, _keypress); 398 | } 399 | } 400 | 401 | // Handle blur 402 | function _blur(e) { 403 | e.preventDefault(); 404 | e.stopPropagation(); 405 | 406 | var data = e.data; 407 | data.$selecter.removeClass("focus"); 408 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]); 409 | $("body").off(".selecter-" + data.guid); 410 | } 411 | 412 | // Handle keydown on focus 413 | function _keypress(e) { 414 | var data = e.data; 415 | 416 | if (data.$selecter.hasClass("open") && e.keyCode == 13) { 417 | _update(data.index, data, false); 418 | _close(e); 419 | } else if (e.keyCode != 9 && (!e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey)) { 420 | // Ignore modifiers & tabs 421 | e.preventDefault(); 422 | e.stopPropagation(); 423 | 424 | var total = data.$items.length - 1, 425 | index = -1; 426 | 427 | // Firefox left/right support thanks to Kylemade 428 | if ($.inArray(e.keyCode, (isFirefox) ? [38, 40, 37, 39] : [38, 40]) > -1) { 429 | // Increment / decrement using the arrow keys 430 | index = data.index + ((e.keyCode == 38 || (isFirefox && e.keyCode == 37)) ? -1 : 1); 431 | if (index < 0) { 432 | index = 0; 433 | } 434 | if (index > total) { 435 | index = total; 436 | } 437 | } else { 438 | var input = String.fromCharCode(e.keyCode).toUpperCase(); 439 | 440 | // Search for input from original index 441 | for (i = data.index + 1; i <= total; i++) { 442 | var letter = data.$optionEls.eq(i).text().charAt(0).toUpperCase(); 443 | if (letter == input) { 444 | index = i; 445 | break; 446 | } 447 | } 448 | 449 | // If not, start from the beginning 450 | if (index < 0) { 451 | for (i = 0; i <= total; i++) { 452 | var letter = data.$optionEls.eq(i).text().charAt(0).toUpperCase(); 453 | if (letter == input) { 454 | index = i; 455 | break; 456 | } 457 | } 458 | } 459 | } 460 | 461 | // Update 462 | if (index >= 0) { 463 | _update(index, data, true /* !data.$selecter.hasClass("open") */); 464 | } 465 | } 466 | } 467 | 468 | // Update element value + DOM 469 | function _update(index, data, keypress) { 470 | var $item = data.$items.eq(index), 471 | isSelected = $item.hasClass("selected"), 472 | isDisabled = $item.hasClass("disabled"); 473 | 474 | // Check for disabled options 475 | if (!isDisabled) { 476 | // Make sure we have a new index to prevent false 'change' triggers 477 | if (!isSelected || data.links) { 478 | var newLabel = $item.html(), 479 | newValue = $item.data("value"); 480 | 481 | // Modify DOM 482 | if (data.multiple) { 483 | data.$optionEls.eq(index).prop("selected", true); 484 | } else { 485 | data.$selected.html(newLabel); 486 | data.$items.filter(".selected").removeClass("selected"); 487 | if (!keypress/* || (keypress && !isFirefox) */) { 488 | data.$selectEl[0].selectedIndex = index; 489 | } 490 | 491 | if (data.links && !keypress) { 492 | if (isMobile) { 493 | _launch(data.$selectEl.val(), data.externalLinks); 494 | } else { 495 | _launch($item.attr("href"), data.externalLinks); 496 | } 497 | 498 | return; 499 | } 500 | } 501 | data.$selectEl.trigger("change", [ true ]); 502 | $item.addClass("selected"); 503 | } else if (data.multiple) { 504 | data.$optionEls.eq(index).prop("selected", null); 505 | $item.removeClass("selected"); 506 | } 507 | 508 | if (!isSelected || data.multiple) { 509 | // Fire callback 510 | data.callback.call(data.$selecter, data.$selectEl.val(), index); 511 | data.index = index; 512 | } 513 | } 514 | } 515 | 516 | // Check label's length 517 | function _checkLength(length, text) { 518 | if (length === false) { 519 | return text; 520 | } else { 521 | if (text.length > length) { 522 | return text.substring(0, length) + "..."; 523 | } else { 524 | return text; 525 | } 526 | } 527 | } 528 | 529 | // Launch link 530 | function _launch(link, external) { 531 | if (external) { 532 | // Open link in a new tab/window 533 | window.open(link); 534 | } else { 535 | // Open link in same tab/window 536 | window.location.href = link; 537 | } 538 | } 539 | 540 | // Escape 541 | function _escape(str) { 542 | return str.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1'); 543 | } 544 | 545 | // Define Plugin 546 | $.fn.selecter = function(method) { 547 | if (pub[method]) { 548 | return pub[method].apply(this, Array.prototype.slice.call(arguments, 1)); 549 | } else if (typeof method === 'object' || !method) { 550 | return _init.apply(this, arguments); 551 | } 552 | return this; 553 | }; 554 | })(jQuery); -------------------------------------------------------------------------------- /demo/assets/js/jquery.refineslide.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery RefineSlide plugin v0.4.1 3 | * http://github.com/alexdunphy/refineslide 4 | * Requires: jQuery v1.8+ 5 | * MIT License (http://www.opensource.org/licenses/mit-license.php) 6 | */ 7 | 8 | ;(function ($, window, document) { 9 | 'use strict'; 10 | 11 | // Baked-in settings for extension 12 | var defaults = { 13 | maxWidth : 800, // Max slider width - should be set to image width 14 | transition : 'cubeV', // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV') 15 | customTransitions : [], 16 | fallback3d : 'sliceV', // String (default 'sliceV'): Fallback for browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms) 17 | perspective : 1000, // Perspective (used for 3d transforms) 18 | useThumbs : true, // Bool (default true): Navigation type thumbnails 19 | useArrows : false, // Bool (default false): Navigation type previous and next arrows 20 | thumbMargin : 3, // Int (default 3): Percentage width of thumb margin 21 | autoPlay : false, // Int (default false): Auto-cycle slider 22 | delay : 5000, // Int (default 5000) Time between slides in ms 23 | transitionDuration : 800, // Int (default 800): Transition length in ms 24 | startSlide : 0, // Int (default 0): First slide 25 | keyNav : true, // Bool (default true): Use left/right arrow keys to switch slide 26 | captionWidth : 50, // Int (default 50): Percentage of slide taken by caption 27 | arrowTemplate : '
', // String: The markup used for arrow controls (if arrows are used). Must use classes '.rs-next' & '.rs-prev' 28 | onInit : function () {}, // Func: User-defined, fires with slider initialisation 29 | onChange : function () {}, // Func: User-defined, fires with transition start 30 | afterChange : function () {} // Func: User-defined, fires after transition end 31 | }; 32 | 33 | // RS (RefineSlide) object constructor 34 | function RS(elem, settings) { 35 | this.$slider = $(elem).addClass('rs-slider'); // Elem: Slider element 36 | this.settings = $.extend({}, defaults, settings); // Obj: Merged user settings/defaults 37 | this.$slides = this.$slider.find('> li'); // Elem Arr: Slide elements 38 | this.totalSlides = this.$slides.length; // Int: Number of slides 39 | this.cssTransitions = testBrowser.cssTransitions(); // Bool: Test for CSS transition support 40 | this.cssTransforms3d = testBrowser.cssTransforms3d(); // Bool: Test for 3D transform support 41 | this.currentPlace = this.settings.startSlide; // Int: Index of current slide (starts at 0) 42 | this.$currentSlide = this.$slides.eq(this.currentPlace); // Elem: Starting slide 43 | this.inProgress = false; // Bool: Prevents overlapping transitions 44 | this.$sliderWrap = this.$slider.wrap('
').parent(); // Elem: Slider wrapper div 45 | this.$sliderBG = this.$slider.wrap('
').parent(); // Elem: Slider background (useful for styling & essential for cube transitions) 46 | this.settings.slider = this; // Make slider object accessible to client call code with 'this.slider' (there's probably a better way to do this) 47 | 48 | this.init(); 49 | } 50 | 51 | RS.prototype = { 52 | cycling: null, 53 | $slideImages: null, 54 | 55 | init: function () { 56 | // User-defined function to fire on slider initialisation 57 | this.settings.onInit(); 58 | 59 | // Setup captions 60 | this.captions(); 61 | 62 | if(this.settings.transition === 'custom') { 63 | this.nextAnimIndex = -1; // Set animation index for custom animation 64 | } 65 | 66 | if (this.settings.useArrows) { 67 | this.setArrows(); // Setup arrow navigation 68 | } 69 | 70 | if (this.settings.keyNav) { 71 | this.setKeys(); // Setup keyboard navigation 72 | } 73 | 74 | for (var i = 0; i < this.totalSlides; i++) { // Add slide identifying classes 75 | this.$slides.eq(i).addClass('rs-slide-' + i); 76 | } 77 | 78 | if (this.settings.autoPlay) { 79 | this.setAutoPlay(); 80 | 81 | // Listen for slider mouseover 82 | this.$slider.on({ 83 | mouseenter: $.proxy(function () { 84 | if (this.cycling !== null) { 85 | clearTimeout(this.cycling); 86 | } 87 | }, this), 88 | mouseleave: $.proxy(this.setAutoPlay, this) // Resume slideshow 89 | }); 90 | } 91 | 92 | // Get the first image in each slide
  • 93 | this.$slideImages = this.$slides.find('img:eq(0)').addClass('rs-slide-image'); 94 | 95 | this.setup(); 96 | } 97 | 98 | ,setup: function () { 99 | this.$sliderWrap.css('width', this.settings.maxWidth); 100 | 101 | if (this.settings.useThumbs) { 102 | this.setThumbs(); 103 | } 104 | 105 | // Display first slide 106 | this.$currentSlide.css({'opacity' : 1, 'z-index' : 2}); 107 | } 108 | 109 | ,setArrows:function () { 110 | var that = this; 111 | 112 | // Append user-defined arrow template (elems) to '.rs-wrap' elem 113 | this.$sliderWrap.append(this.settings.arrowTemplate); 114 | 115 | // Fire next() method when clicked 116 | $('.rs-next', this.$sliderWrap).on('click', function (e) { 117 | e.preventDefault(); 118 | that.next(); 119 | }); 120 | 121 | // Fire prev() method when clicked 122 | $('.rs-prev', this.$sliderWrap).on('click', function (e) { 123 | e.preventDefault(); 124 | that.prev(); 125 | }); 126 | } 127 | 128 | ,next: function () { 129 | if (this.settings.transition === 'custom') { 130 | this.nextAnimIndex++; 131 | } 132 | 133 | // If on final slide, loop back to first slide 134 | if (this.currentPlace === this.totalSlides - 1) { 135 | this.transition(0, true); // Call transition 136 | } else { 137 | this.transition(this.currentPlace + 1, true); // Call transition 138 | } 139 | } 140 | 141 | ,prev: function () { 142 | if (this.settings.transition === 'custom') { 143 | this.nextAnimIndex--; 144 | } 145 | 146 | // If on first slide, loop round to final slide 147 | if (this.currentPlace == 0) { 148 | this.transition(this.totalSlides - 1, false); // Call transition 149 | } else { 150 | this.transition(this.currentPlace - 1, false); // Call transition 151 | } 152 | } 153 | 154 | ,setKeys: function () { 155 | var that = this; 156 | 157 | // Bind keyboard left/right arrows to next/prev methods 158 | $(document).on('keydown', function (e) { 159 | if (e.keyCode === 39) { // Right arrow key 160 | that.next(); 161 | } else if (e.keyCode === 37) { // Left arrow key 162 | that.prev(); 163 | } 164 | }); 165 | } 166 | 167 | ,setAutoPlay: function () { 168 | var that = this; 169 | 170 | // Set timeout to object property so it can be accessed/cleared externally 171 | this.cycling = setTimeout(function () { 172 | that.next(); 173 | }, this.settings.delay); 174 | } 175 | 176 | ,setThumbs: function () { 177 | var that = this, 178 | // Set percentage width (minus user-defined margin) to span width of slider 179 | width = (100 - ((this.totalSlides - 1) * this.settings.thumbMargin)) / this.totalSlides + '%'; 180 | 181 | //').appendTo(this.$sliderWrap); 183 | 184 | // Loop to apply thumbnail widths/margins to wraps, appending an image clone to each 185 | for (var i = 0; i < this.totalSlides; i++) { 186 | var $thumb = $('') 187 | .css({ 188 | width : width, 189 | marginLeft : this.settings.thumbMargin + '%' 190 | }) 191 | .attr('href', '#') 192 | .data('rs-num', i); 193 | 194 | this.$slideImages.eq(i).clone() 195 | .removeAttr('style') 196 | .appendTo(this.$thumbWrap) 197 | .wrap($thumb); 198 | } 199 | 200 | this.$thumbWrapLinks = this.$thumbWrap.find('a'); 201 | 202 | // Safety margin to stop IE7 wrapping the thumbnails (no visual effect in other browsers) 203 | this.$thumbWrap.children().last().css('margin-right', -10); 204 | 205 | // Add active class to starting slide's respective thumb 206 | this.$thumbWrapLinks.eq(this.settings.startSlide).addClass('active'); 207 | 208 | // Listen for click events on thumnails 209 | this.$thumbWrap.on('click', 'a', function (e) { 210 | e.preventDefault(); 211 | 212 | that.transition(parseInt($(this).data('rs-num'))); // Call transition using identifier from thumb class 213 | }); 214 | } 215 | 216 | ,captions: function() { 217 | var that = this, 218 | $captions = this.$slides.find('.rs-caption'); 219 | 220 | // User-defined caption width 221 | $captions.css({ 222 | width: that.settings.captionWidth + '%', 223 | opacity: 0 224 | }); 225 | 226 | // Display starting slide's caption 227 | this.$currentSlide.find('.rs-caption').css('opacity', 1); 228 | 229 | $captions.each(function() { 230 | $(this).css({ 231 | transition: 'opacity ' + that.settings.transitionDuration + 'ms linear', 232 | backfaceVisibility: 'hidden' 233 | }); 234 | }); 235 | } 236 | 237 | ,transition: function (slideNum, forward) { 238 | // If inProgress flag is not set (i.e. if not mid-transition) 239 | if (!this.inProgress) { 240 | // If not already on requested slide 241 | if (slideNum !== this.currentPlace) { 242 | // Check whether the requested slide index is ahead or behind in the array (if not passed in as param) 243 | if (typeof forward === 'undefined') { 244 | forward = slideNum > this.currentPlace ? true : false; 245 | } 246 | 247 | // If thumbnails exist, revise active class states 248 | if (this.settings.useThumbs) { 249 | this.$thumbWrapLinks.eq(this.currentPlace).removeClass('active'); 250 | this.$thumbWrapLinks.eq(slideNum).addClass('active'); 251 | } 252 | 253 | // Assign next slide prop (elem) 254 | this.$nextSlide = this.$slides.eq(slideNum); 255 | 256 | // Assign next slide index prop (int) 257 | this.currentPlace = slideNum; 258 | 259 | // User-defined function, fires with transition 260 | this.settings.onChange(); 261 | 262 | // Instantiate new Transition object, passing in self (RS obj), transition type (string), direction (bool) 263 | new Transition(this, this.settings.transition, forward); 264 | } 265 | } 266 | } 267 | }; 268 | 269 | // Transition object constructor 270 | function Transition(RS, transition, forward) { 271 | this.RS = RS; // RS (RefineSlide) object 272 | this.RS.inProgress = true; // Set RS inProgress flag to prevent additional Transition objects being instantiated until transition end 273 | this.forward = forward; // Bool: true for forward, false for backward 274 | this.transition = transition; // String: name of transition requested 275 | 276 | if (this.transition === 'custom') { 277 | this.customAnims = this.RS.settings.customTransitions; 278 | this.isCustomTransition = true; 279 | } 280 | 281 | // Remove incorrect specified elements from customAnims array. 282 | if (this.transition === 'custom') { 283 | var that = this; 284 | $.each(this.customAnims, function (i, obj) { 285 | if ($.inArray(obj, that.anims) === -1) { 286 | that.customAnims.splice(i, 1); 287 | } 288 | }); 289 | } 290 | 291 | this.fallback3d = this.RS.settings.fallback3d; // String: fallback to use when 3D transforms aren't supported 292 | 293 | this.init(); // Call Transition initialisation method 294 | } 295 | 296 | // Transition object Prototype 297 | Transition.prototype = { 298 | // Fallback to use if CSS transitions are unsupported 299 | fallback: 'fade' 300 | 301 | // Array of possible animations 302 | ,anims: ['cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV'] 303 | 304 | ,customAnims: [] 305 | 306 | ,init: function () { 307 | // Call requested transition method 308 | this[this.transition](); 309 | } 310 | 311 | ,before: function (callback) { 312 | var that = this; 313 | 314 | // Prepare slide opacity & z-index 315 | this.RS.$currentSlide.css('z-index', 2); 316 | this.RS.$nextSlide.css({'opacity' : 1, 'z-index' : 1}); 317 | 318 | // Fade out/in captions with CSS/JS depending on browser capability 319 | if (this.RS.cssTransitions) { 320 | this.RS.$currentSlide.find('.rs-caption').css('opacity', 0); 321 | this.RS.$nextSlide.find('.rs-caption').css('opacity', 1); 322 | } else { 323 | this.RS.$currentSlide.find('.rs-caption').animate({'opacity' : 0}, that.RS.settings.transitionDuration); 324 | this.RS.$nextSlide.find('.rs-caption').animate({'opacity' : 1}, that.RS.settings.transitionDuration); 325 | } 326 | 327 | // Check if transition describes a setup method 328 | if (typeof this.setup === 'function') { 329 | // Setup required by transition 330 | var transition = this.setup(); 331 | 332 | setTimeout(function () { 333 | callback(transition); 334 | }, 20); 335 | } else { 336 | // Transition execution 337 | this.execute(); 338 | } 339 | 340 | // Listen for CSS transition end on elem (set by transition) 341 | if (this.RS.cssTransitions) { 342 | $(this.listenTo).one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', $.proxy(this.after, this)); 343 | } 344 | } 345 | 346 | ,after: function () { 347 | // Reset transition CSS 348 | this.RS.$sliderBG.removeAttr('style'); 349 | this.RS.$slider.removeAttr('style'); 350 | this.RS.$currentSlide.removeAttr('style'); 351 | this.RS.$nextSlide.removeAttr('style'); 352 | this.RS.$currentSlide.css({ 353 | zIndex: 1, 354 | opacity: 0 355 | }); 356 | this.RS.$nextSlide.css({ 357 | zIndex: 2, 358 | opacity : 1 359 | }); 360 | 361 | // Additional reset steps required by transition (if any exist) 362 | if (typeof this.reset === 'function') { 363 | this.reset(); 364 | } 365 | 366 | // If slideshow is active, reset the timeout 367 | if (this.RS.settings.autoPlay) { 368 | clearTimeout(this.RS.cycling); 369 | this.RS.setAutoPlay(); 370 | } 371 | 372 | // Assign new slide position 373 | this.RS.$currentSlide = this.RS.$nextSlide; 374 | 375 | // Remove RS obj inProgress flag (i.e. allow new Transition to be instantiated) 376 | this.RS.inProgress = false; 377 | 378 | // User-defined function, fires after transition has ended 379 | this.RS.settings.afterChange(); 380 | } 381 | 382 | ,fade: function () { 383 | var that = this; 384 | 385 | // If CSS transitions are supported by browser 386 | if (this.RS.cssTransitions) { 387 | // Setup steps 388 | this.setup = function () { 389 | // Set event listener to next slide elem 390 | that.listenTo = that.RS.$currentSlide; 391 | 392 | that.RS.$currentSlide.css('transition', 'opacity ' + that.RS.settings.transitionDuration + 'ms linear'); 393 | }; 394 | 395 | // Execution steps 396 | this.execute = function () { 397 | // Display next slide over current slide 398 | that.RS.$currentSlide.css('opacity', 0); 399 | } 400 | } else { // JS animation fallback 401 | this.execute = function () { 402 | that.RS.$currentSlide.animate({'opacity' : 0}, that.RS.settings.transitionDuration, function () { 403 | // Reset steps 404 | that.after(); 405 | }); 406 | } 407 | } 408 | 409 | this.before($.proxy(this.execute, this)); 410 | } 411 | 412 | // cube() method is used by cubeH() & cubeV() - not for calling directly 413 | ,cube: function (tz, ntx, nty, nrx, nry, wrx, wry) { // Args: translateZ, (next slide) translateX, (next slide) translateY, (next slide) rotateX, (next slide) rotateY, (wrap) rotateX, (wrap) rotateY 414 | // Fallback if browser does not support 3d transforms/CSS transitions 415 | if (!this.RS.cssTransitions || !this.RS.cssTransforms3d) { 416 | return this[this['fallback3d']](); // User-defined transition 417 | } 418 | 419 | var that = this; 420 | 421 | // Setup steps 422 | this.setup = function () { 423 | // Set event listener to '.rs-slider'