API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 01.2. RP Masterlist {Word Tracker}

Noir-Et-Blanc
Aug 22nd, 2017
2,624
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.55 KB | None | 0 0
raw download clone embed print report
  1. <!-- Page 01.2
  2.  
  3. {. Word Tracker .}
  4.  
  5. Page #01.2 (Word Tracker)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this page as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10. Take in mind that I won't provide assistance to heavy edited codes.
  11.  
  12.  
  13. CREDITS TO:
  14. Filter Code: https://www.kunkalabs.com/mixitup/
  15.  
  16. ************** INSTRUCTIONS **************
  17. Search for the word:
  18. Edit:
  19. To find all the editable parts of this code.
  20.  
  21. Filter creation instructions can be found more below.
  22.  
  23. -->
  24.  
  25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  26. <html xmlns="http://www.w3.org/1999/xhtml">
  27.  
  28. <head>
  29. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link href="https://dl.dropboxusercontent.com/s/c8x3tijrg1fuolf/credits.css" rel="stylesheet" type="text/css" />
  32. <link href="https://fonts.googleapis.com/css?family=Saira|Share+Tech+Mono" rel="stylesheet">
  33. <!-- FontAwesome -->
  34. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  35. <!-- Jquery -->
  36. <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  37. <!-- Mix it Up -->
  38. <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
  39.  
  40. <title>{Title}</title>
  41.  
  42. <style>
  43. ::-webkit-scrollbar-track
  44. {
  45. border: 3px solid #e0e0e0;
  46. background-color: #333333;
  47. border-bottom: none;
  48. border-top: none;
  49. }
  50.  
  51. ::-webkit-scrollbar
  52. {
  53. width: 7px;
  54. background-color: #F5F5F5;
  55.  
  56. }
  57.  
  58. ::-webkit-scrollbar-thumb
  59. {
  60. background-color: #ffffff;
  61. border: 2px solid #363636;
  62. }
  63.  
  64. .summary::-webkit-scrollbar-track
  65. {
  66. border: 1px solid #000000;
  67. background-color: #F5F5F5;
  68. }
  69.  
  70. .summary::-webkit-scrollbar
  71. {
  72. width: 3px;
  73. background-color: #F5F5F5;
  74. }
  75.  
  76. .summary::-webkit-scrollbar-thumb
  77. {
  78. background-color: #171717;
  79. }
  80.  
  81. * {
  82. margin: 0;
  83. padding: 0;
  84. }
  85.  
  86. a {
  87. text-decoration: none;
  88. color: inherit;
  89. }
  90.  
  91. body {
  92. font-family: 'Share Tech Mono', monospace;
  93. font-size: 10px;
  94. background-color: #ffffff; /* Edit: Content BG color */
  95. background-image: url("URL"); /* Edit: Add a BG Image if you want */
  96. }
  97.  
  98. h1,h2,h3 {font-family: 'Share Tech Mono', monospace;}
  99.  
  100. span.noir-et-blanc {
  101. position: fixed!important;
  102. bottom: 0;
  103. right: 0;
  104. height: 35px;
  105. width: 35px;
  106. }
  107.  
  108. /* Edit: Credits color */
  109. span.noir-et-blanc:before,span.noiretblanc:after,span.noiretblanc:before,span.noir-et-blanc:after {
  110. background: #5f5f5f;
  111. }
  112.  
  113. /* Edit: Credits hover color */
  114. span.noir-et-blanc:hover:before,span.noir-et-blanc:hover>span.noiretblanc:after,span.noir-et-blanc:hover>span.noiretblanc:before,span.noir-et-blanc:hover:after {
  115. background: #000000;
  116. }
  117.  
  118. /*Edit: Credit text color*/
  119. .hoverme{
  120. left: -55px;
  121. bottom: 23px;
  122. color: black;
  123. }
  124.  
  125. .noir-et-blanc:hover > .hoverme{
  126. left: -60px;
  127. }
  128.  
  129. /************************ Left Side Bar ************************/
  130.  
  131. #left-bar {
  132. position: fixed;
  133. width: 200px;
  134. height: 100vh;
  135. background-color: black; /* Edit: Sidebar BG color */
  136. background-image: url("URL"); /* Edit: Add a BG Image if you want */
  137. color: white; /* Edit: Sidebar Font color */
  138. }
  139.  
  140. .page-title {
  141. display: block;
  142. text-align: center;
  143. margin: 40px 0 20px;
  144. font-size: 28px;
  145. }
  146.  
  147. #left-bar p {
  148. padding: 0 15px 15px;
  149. }
  150.  
  151. .link-box a {
  152. position: relative;
  153. display: block;
  154. margin: 0 15px;
  155. }
  156.  
  157. .link-box a:hover>.fa {
  158. margin-right: 5px;
  159. }
  160.  
  161. .acc li {
  162. list-style-type: none;
  163. }
  164.  
  165. ul.acc {
  166. margin: 10px 0;
  167. }
  168.  
  169. .linkb{
  170. margin-bottom:5px;
  171. }
  172.  
  173. .acc_ctrl,.linkb {
  174. border: none;
  175. display: block;
  176. position: relative;
  177. width: 100%;
  178. padding: .5em;
  179. border-bottom: 1px solid black; /* Edit: Tabs border color */
  180. background: #ffffff; /* Edit: Tabs bg color */
  181. color: black; /* Edit: Tabs font color */
  182. }
  183.  
  184. .acc_ctrl h2, .linkb h2 {
  185. font-size: 14px;
  186. font-weight: normal;
  187. position: relative;
  188. text-align: left;
  189. }
  190.  
  191. .linkb h2.nav:before {
  192. font-family: FontAwesome;
  193. content: "\f0c9";
  194. margin-right: 3px;
  195. }
  196.  
  197. .acc_ctrl h2.lin:before {
  198. font-family: FontAwesome;
  199. content: "\f0fe";
  200. margin-right: 3px;
  201. }
  202.  
  203. .acc_ctrl h2.fil:before {
  204. font-family: FontAwesome;
  205. content: "\f046";
  206. margin-right: 3px;
  207. }
  208.  
  209. .acc_panel {
  210. display: none;
  211. overflow: hidden;
  212. text-align: left;
  213. margin: 5px;
  214. }
  215.  
  216. .acc_panel a {
  217. position: relative;
  218. display: block;
  219. margin: 0 10px;
  220. }
  221.  
  222. .fa {
  223. -moz-transition: all .5s ease-in-out;
  224. -webkit-transition: all .5s ease-in-out;
  225. -o-transition: all .5s ease-in-out;
  226. transition: all .5s ease-in-out;
  227. }
  228.  
  229. .acc_panel a:hover>.fa {
  230. margin-right: 5px;
  231. }
  232.  
  233. /************************ FILTERS ************************/
  234.  
  235. .filterbox,.centre {
  236. text-align: center;
  237. font-family: 'Saira', sans-serif;
  238. }
  239.  
  240. h2.filter-title {
  241. padding: 5px 10px;
  242. font-size: 14px;
  243. text-align: left;
  244. }
  245.  
  246. .checkbox {
  247. display: inline-block;
  248. position: relative;
  249. cursor: pointer;
  250. margin-right: 5px;
  251. top: -10px;
  252. }
  253.  
  254. .checkbox input[type="checkbox"] {
  255. position: absolute;
  256. display: block;
  257. top: 0;
  258. left: 0;
  259. cursor: crosshair;
  260. margin: 0;
  261. opacity: 0;
  262. z-index: 1;
  263. }
  264.  
  265. .checkbox label {
  266. display: inline-block;
  267. vertical-align: top;
  268. padding-left: 1.85em;
  269. }
  270.  
  271. .checkbox label:before,
  272. .checkbox label:after {
  273. content: '';
  274. display: block;
  275. position: absolute;
  276. }
  277.  
  278. .checkbox label:before {
  279. left: 0;
  280. top: 0;
  281. width: 15px;
  282. height: 15px;
  283. margin-right: 10px;
  284. border-radius: 30px;
  285. background: #f8f8f8; /* Edit: Checkbox BG color */
  286. }
  287.  
  288. .checkbox label:after {
  289. position: absolute;
  290. top: 2px;
  291. left: 2px;
  292. width: 11px;
  293. height: 11px;
  294. padding-top: 2px;
  295. padding-left: 3px;
  296. box-sizing: border-box;
  297. border-radius: 30px;
  298. opacity: 0;
  299. pointer-events: none;
  300. background: #292929; /* Edit: Selected checkbox color */
  301. }
  302.  
  303. .checkbox input:checked~label:after {
  304. opacity: 1;
  305. }
  306.  
  307. .checkbox:last-child {
  308. margin-top: 8px;
  309. }
  310.  
  311. .reset-button {
  312. background-color: transparent;
  313. border: none;
  314. text-align: center;
  315. font-family: 'Share Tech Mono', monospace;
  316. padding: 5px 15px;
  317. font-size: 12px;
  318. border-radius: 4px;
  319. border-bottom: 1px solid white; /* Edit: Clear botton border color */
  320. color: white; /* Edit: Clear botton font color */
  321. }
  322.  
  323. .container {
  324. position: absolute;
  325. left: 200px;
  326. right: 0;
  327. padding: 30px 0 0 15px;
  328. height: 100%;
  329. box-sizing: border-box;
  330. color: black; /* Edit: Content font color */
  331. }
  332.  
  333. .container .fail-message {
  334. position: absolute;
  335. top: 0;
  336. left: 0;
  337. bottom: 0;
  338. right: 0;
  339. text-align: center;
  340. opacity: 0;
  341. pointer-events: none;
  342. -webkit-transition: 150ms;
  343. -moz-transition: 150ms;
  344. transition: 150ms;
  345. }
  346.  
  347. .container .fail-message:before {
  348. content: '';
  349. display: inline-block;
  350. vertical-align: middle;
  351. height: 100%;
  352. }
  353.  
  354. .container .fail-message span {
  355. display: inline-block;
  356. vertical-align: middle;
  357. font-size: 20px;
  358. font-weight: bold;
  359. }
  360.  
  361. .container.fail .fail-message {
  362. opacity: 1;
  363. pointer-events: auto;
  364. }
  365.  
  366. .container .mix {
  367. display: none;
  368. }
  369.  
  370. /************************ RP Boxes ************************/
  371.  
  372. .thread-box {
  373. position: relative;
  374. display: inline-block;
  375. width: 300px;
  376. height: 195px;
  377. margin: 5px 10px 10px;
  378. }
  379.  
  380. .thread-header {
  381. position: relative;
  382. display: block;
  383. height: 25px;
  384. }
  385.  
  386. .t-title {
  387. display: block;
  388. font-size: 18px;
  389. padding-left: 5px;
  390. font-family: 'Saira', sans-serif;
  391. }
  392.  
  393. .t-title:before {
  394. font-family: FontAwesome;
  395. content: "\f02e";
  396. margin-right: 3px;
  397. }
  398.  
  399. .t-details {
  400. position: absolute;
  401. top: 10px;
  402. right: 5px;
  403. }
  404.  
  405. .t-details span:last-child:before {
  406. font-family: FontAwesome;
  407. content: "\f142";
  408. margin-right: 5px;
  409. }
  410.  
  411. .thread-content {
  412. position: relative;
  413. display: block;
  414. height: 150px;
  415. border-radius: 5px;
  416. overflow: hidden;
  417. background: #ebebeb; /* Edit: RP box bg color */
  418. }
  419.  
  420. .t-bar {
  421. display: block;
  422. height: 25px;
  423. line-height: 25px;
  424. padding: 0 5px;
  425. position: relative;
  426. top: 15px;
  427. border-bottom: 1px dashed black;
  428. border-top: 1px dashed black;
  429. background: white; /* Edit: Character name bg color */
  430. }
  431.  
  432. .summary {
  433. position: absolute;
  434. top: 42px;
  435. bottom: 1px;
  436. right: 0;
  437. left: 0;
  438. padding: 10px;
  439. overflow-y: auto;
  440. font-family: 'Saira', sans-serif;
  441. }
  442.  
  443. .t-bar p {
  444. display: inline-block;
  445. font-size: 15px;
  446. }
  447.  
  448. .t-bar i {
  449. font-size: 9px;
  450. }
  451.  
  452. .t-bar i:before {
  453. content: "(";
  454. }
  455.  
  456. .t-bar i:after {
  457. content: ")";
  458. }
  459.  
  460. span.complete {
  461. position: absolute;
  462. right: 5px;
  463. color: #4ebf4e;
  464. }
  465.  
  466. span.complete:after {
  467. font-family: FontAwesome;
  468. content: "\f14a";
  469. font-size: 14px;
  470. }
  471.  
  472. span.complete:before {
  473. content: "Complete ";
  474. position: relative;
  475. top: -2px;
  476. }
  477.  
  478. span.ongoing-active {
  479. position: absolute;
  480. right: 5px;
  481. color: #4ebf4e;
  482. }
  483.  
  484. span.ongoing-active:after {
  485. font-family: FontAwesome;
  486. content: "\f021";
  487. font-size: 14px;
  488. }
  489.  
  490. span.ongoing-active:before {
  491. content: "On-Going ";
  492. position: relative;
  493. top: -2px;
  494. }
  495.  
  496. span.ongoing-hiatus {
  497. position: absolute;
  498. right: 5px;
  499. color: #d9a925;
  500. }
  501.  
  502. span.ongoing-hiatus:after {
  503. font-family: FontAwesome;
  504. content: "\f110";
  505. font-size: 14px;
  506. }
  507.  
  508. span.ongoing-hiatus:before {
  509. content: "On-Going ";
  510. position: relative;
  511. top: -2px;
  512. }
  513.  
  514. span.cancel {
  515. position: absolute;
  516. right: 5px;
  517. color: #dd1a1a;
  518. }
  519.  
  520. span.cancel:after {
  521. font-family: FontAwesome;
  522. content: "\f057";
  523. font-size: 14px;
  524. }
  525.  
  526. span.cancel:before {
  527. content: "Cancelled ";
  528. position: relative;
  529. top: -2px;
  530. }
  531.  
  532. .tags {
  533. display: block;
  534. margin: 5px 0;
  535. font-family: 'Share Tech Mono', monospace;
  536. }
  537.  
  538. .tags a {
  539. font-size: 12px;
  540. margin-left: -2px;
  541. }
  542.  
  543. .tags a:before {
  544. content: "#";
  545. }
  546.  
  547. .tags a:after {
  548. content: ",";
  549. }
  550.  
  551. .tags a:last-child:after {
  552. content: "";
  553. }
  554.  
  555. .thread-footer {
  556. display: block;
  557. height: 20px;
  558. text-align: center;
  559. font-size: 9px;
  560. }
  561.  
  562. .post {
  563. display: inline-block;
  564. position: relative;
  565. width: 145px;
  566. }
  567.  
  568. .post a {
  569. display: inline-block;
  570. padding: 0 20px;
  571. height: 100%;
  572. line-height: 20px;
  573. border-radius: 0 0 10px 10px;
  574. font-family: 'Saira', sans-serif;
  575. background: #ebebeb; /* Edit: Starter and Last post bg color */
  576. }
  577.  
  578. </style>
  579. </head>
  580.  
  581. <body>
  582.  
  583. <div id="left-bar">
  584. <!-- Edit: Top Title -->
  585. <h1 class="page-title">RP Tracker</h1>
  586.  
  587. <!-- Edit: Intro text -->
  588. <p>Some intro text. Totally optional But honestly why not?</p>
  589.  
  590. <!-- Edit: Main Navigation -->
  591. <div class="link-box">
  592. <button class="linkb"><h2 class="nav">Navigation</h2></button>
  593. <a href="/"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
  594. <a href="/ask"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Message</a>
  595. <a href="/submit"><i class="fa fa-external-link fa-fw" aria-hidden="true"></i> Submit</a>
  596. <a href="/dashboard"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Dashboard</a>
  597. </div>
  598.  
  599. <ul class="acc">
  600. <!-- Edit: Extra Links -->
  601. <li><button class="acc_ctrl"><h2 class="lin">Extra Links</h2></button>
  602. <div class="acc_panel">
  603. <a href="/"><i class="fa fa-star fa-fw" aria-hidden="true"></i> Link1</a>
  604. <a href="/"><i class="fa fa-star fa-fw" aria-hidden="true"></i> Link2</a>
  605. <a href="/"><i class="fa fa-star fa-fw" aria-hidden="true"></i> Link3</a>
  606. <a href="/"><i class="fa fa-star fa-fw" aria-hidden="true"></i> Link4</a>
  607. <a href="/"><i class="fa fa-star fa-fw" aria-hidden="true"></i> Link5</a>
  608. </div>
  609. </li>
  610. <!-- Edit: Extra Links -->
  611.  
  612. <!-- Edit: Filters -->
  613. <li><form class="controls" id="Filters">
  614. <button class="acc_ctrl"><h2 class="fil">Filter By:</h2></button>
  615. <div class="acc_panel centre">
  616.  
  617. <!-- To create a new category you can copy this base code:
  618.  
  619. <div class="filterbox">
  620. <h2 class="filter-title">Privacy:</h2>
  621. <div class="filter-category">
  622.  
  623. <!-- New filter // Erase this line
  624. <div class="checkbox">
  625. <input type="checkbox" value=".open" />
  626. <label>Open</label>
  627. </div>
  628. <!-- End of New filter // Erase this line //
  629.  
  630. </div>
  631. </div>
  632.  
  633. ------------------------------------------------
  634. You will have to replace the next parts:
  635. <h2 class="filter-title">Privacy:</h2>
  636. value=".open" (replace .open to w/e you want)
  637. <label>Open</label>
  638.  
  639. <!-- New Category: Privacy -->
  640. <div class="filterbox">
  641. <h2 class="filter-title">Privacy:</h2>
  642.  
  643. <div class="filter-category">
  644. <div class="checkbox">
  645. <input type="checkbox" value=".open" />
  646. <label>Open</label>
  647. </div>
  648.  
  649. <div class="checkbox">
  650. <input type="checkbox" value=".private" />
  651. <label>Private</label>
  652. </div>
  653.  
  654. </div>
  655. </div>
  656. <!-- New Category: Privacy -->
  657.  
  658. <!-- New Category: Status -->
  659. <div class="filterbox">
  660. <h2 class="filter-title">Status:</h2>
  661.  
  662. <div class="filter-category">
  663. <div class="checkbox">
  664. <input type="checkbox" value=".complete" />
  665. <label>Complete</label>
  666. </div>
  667.  
  668. <div class="checkbox">
  669. <input type="checkbox" value=".ongoing-active" />
  670. <label>On-Going (Active)</label>
  671. </div>
  672.  
  673. <div class="checkbox">
  674. <input type="checkbox" value=".ongoing-hiatus" />
  675. <label>On-Going (Hiatus)</label>
  676. </div>
  677.  
  678. <div class="checkbox">
  679. <input type="checkbox" value=".cancelled" />
  680. <label>Cancelled</label>
  681. </div>
  682.  
  683. </div>
  684. </div>
  685. <!-- New Category: Status -->
  686.  
  687. <!-- New Category: Rating -->
  688. <div class="filterbox">
  689. <h2 class="filter-title">Rating:</h2>
  690.  
  691. <div class="filter-category">
  692. <div class="checkbox">
  693. <input type="checkbox" value=".sfw" />
  694. <label>SFW</label>
  695. </div>
  696.  
  697. <div class="checkbox">
  698. <input type="checkbox" value=".nsfw" />
  699. <label>NSFW</label>
  700. </div>
  701. </div>
  702. </div>
  703. <!-- New Category: Rating -->
  704.  
  705. <!-- New Category: Setting -->
  706. <div class="filterbox">
  707. <h2 class="filter-title">Setting:</h2>
  708.  
  709. <div class="filter-category">
  710. <div class="checkbox">
  711. <input type="checkbox" value=".canon" />
  712. <label>Canon</label>
  713. </div>
  714.  
  715. <div class="checkbox">
  716. <input type="checkbox" value=".au" />
  717. <label>AU</label>
  718. </div>
  719.  
  720.  
  721.  
  722. </div>
  723. </div>
  724. <!-- New Category:Setting -->
  725.  
  726. <!-- New Category: Setting -->
  727. <div class="filterbox">
  728. <h2 class="filter-title">Fandom:</h2>
  729.  
  730. <div class="filter-category">
  731. <div class="checkbox">
  732. <input type="checkbox" value=".oc" />
  733. <label>OC</label>
  734. </div>
  735.  
  736. <div class="checkbox">
  737. <input type="checkbox" value=".fan1" />
  738. <label>Haikyuu!!</label>
  739. </div>
  740.  
  741. <div class="checkbox">
  742. <input type="checkbox" value=".fan3" />
  743. <label>Voltron</label>
  744. </div>
  745.  
  746. <div class="checkbox">
  747. <input type="checkbox" value=".fan2" />
  748. <label>Boku no Hero Academia</label>
  749. </div>
  750.  
  751. </div>
  752. </div>
  753. <!-- New Category:Setting -->
  754.  
  755. <button id="Reset" class="reset-button">Clear</button>
  756.  
  757. </div>
  758. </form>
  759. </li>
  760. </ul>
  761. </div>
  762.  
  763. <div id="Container" class="container">
  764. <!-- Edit: Error Message. This message will appear when nothing matches the combination of filters -->
  765. <div class="fail-message"><span>No Rp's match your search.<br>Try something different.</span></div>
  766.  
  767. <!-- Example Thread -->
  768. <!-- Edit: Change the filters of each RP below: -->
  769. <div class="mix open complete sfw au fan1">
  770. <div class="thread-box">
  771. <div class="thread-header">
  772. <!-- Edit: RP Title. You can erase it if needed.-->
  773. <span class="t-title">Example 1</span>
  774.  
  775. <span class="t-details">
  776. <!-- Edit: Open or Private RP-->
  777. <span>Open RP</span>
  778. <!-- Edit: SFW or NSFW -->
  779. <span>SFW</span>
  780. </span>
  781. </div>
  782.  
  783. <div class="thread-content">
  784. <span class="t-bar">
  785. <!-- Edit: Character Name -->
  786. <p>Character Name</p>
  787. <!-- Edit: Character Series-->
  788. <i>Series</i>
  789. <!-- Edit: RP Status. Change the word "complete" for whatever fits your rp:
  790.  
  791. complete ongoing-active ongoing-hiatus cancel
  792.  
  793. -->
  794. <span class="complete"></span>
  795. </span>
  796.  
  797. <span class="summary">
  798.  
  799. <!-- Edit: RP Summary. Feel free to erase if needed.-->
  800. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  801. <!-- End of RP Summary -->
  802.  
  803. <!-- Edit: RP Tags. Feel free to erase if needed. -->
  804. <span class="tags">
  805. <a href="/tagged/">Haikyuu</a>
  806. <a href="/tagged/">Mermaid AU</a>
  807. </span>
  808. <!-- End of RP Tags -->
  809.  
  810. </span>
  811. </div>
  812.  
  813. <div class="thread-footer">
  814. <!-- Edit: Link to starter post -->
  815. <span class="post"><a href="URL">Starter</a></span>
  816.  
  817. <!-- Edit: Link to last post. Feel free to erase if needed. -->
  818. <span class="post"><a href="URL">Last Post</a></span>
  819.  
  820. </div>
  821. </div>
  822. </div>
  823. <!-- End of Example Thread -->
  824.  
  825.  
  826. </div>
  827.  
  828. <!-- Credit. Do not erase or modify this part -->
  829. <a href="http://noiretblanc-themes.tumblr.com/"><span class="noir-et-blanc"><span class="noiretblanc"></span><span class="hoverme"></span></span></a>
  830.  
  831.  
  832. <script>
  833. // Accordion //
  834. $(function() {
  835. $('.acc_ctrl').on('click', function(e) {
  836. e.preventDefault();
  837. if ($(this).hasClass('active')) {
  838. $(this).removeClass('active');
  839. $(this).next()
  840. .stop()
  841. .slideUp(300);
  842. } else {
  843. $(this).addClass('active');
  844. $(this).next()
  845. .stop()
  846. .slideDown(300);
  847. }
  848. });
  849. });
  850.  
  851. // Mix it up //
  852.  
  853. var checkboxFilter = {
  854. $filters: null,
  855. $reset: null,
  856. groups: [],
  857. outputArray: [],
  858. outputString: '',
  859. init: function() {
  860. var self = this;
  861. self.$filters = $('#Filters');
  862. self.$reset = $('#Reset');
  863. self.$container = $('#Container');
  864. self.$filters.find('.filter-category').each(function() {
  865. self.groups.push({
  866. $inputs: $(this).find('input'),
  867. active: [],
  868. tracker: false
  869. });
  870. });
  871. self.bindHandlers();
  872. },
  873.  
  874. bindHandlers: function() {
  875. var self = this;
  876. self.$filters.on('change', function() {
  877. self.parseFilters();
  878. });
  879.  
  880. self.$reset.on('click', function(e) {
  881. e.preventDefault();
  882. self.$filters[0].reset();
  883. self.parseFilters();
  884. });
  885. },
  886.  
  887. parseFilters: function() {
  888. var self = this;
  889. for (var i = 0, group; group = self.groups[i]; i++) {
  890. group.active = [];
  891. group.$inputs.each(function() {
  892. $(this).is(':checked') && group.active.push(this.value);
  893. });
  894. group.active.length && (group.tracker = 0);
  895. }
  896. self.concatenate();
  897. },
  898.  
  899. concatenate: function() {
  900. var self = this,
  901. cache = '',
  902. crawled = false,
  903. checkTrackers = function() {
  904. var done = 0;
  905. for (var i = 0, group; group = self.groups[i]; i++) {
  906. (group.tracker === false) && done++;
  907. }
  908. return (done < self.groups.length);
  909. },
  910. crawl = function() {
  911. for (var i = 0, group; group = self.groups[i]; i++) {
  912. group.active[group.tracker] && (cache += group.active[group.tracker]);
  913. if (i === self.groups.length - 1) {
  914. self.outputArray.push(cache);
  915. cache = '';
  916. updateTrackers();
  917. }
  918. }
  919. },
  920. updateTrackers = function() {
  921. for (var i = self.groups.length - 1; i > -1; i--) {
  922. var group = self.groups[i];
  923. if (group.active[group.tracker + 1]) {
  924. group.tracker++;
  925. break;
  926. } else if (i > 0) {
  927. group.tracker && (group.tracker = 0);
  928. } else {
  929. crawled = true;
  930. }
  931. }
  932. };
  933.  
  934. self.outputArray = [];
  935. do {
  936. crawl();
  937. }
  938. while (!crawled && checkTrackers());
  939. self.outputString = self.outputArray.join();
  940. !self.outputString.length && (self.outputString = 'all');
  941. if (self.$container.mixItUp('isLoaded')) {
  942. self.$container.mixItUp('filter', self.outputString);
  943. }
  944. }
  945. };
  946.  
  947.  
  948. $(function() {
  949. checkboxFilter.init();
  950. $('#Container').mixItUp({
  951. controls: {
  952. enable: false
  953. },
  954. animation: {
  955. easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
  956. duration: 600
  957. }
  958. });
  959. });
  960. </script>
  961. </body>
  962.  
  963. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!