API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 13th, 2016
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <html>
  5.  
  6. <!--
  7.  
  8. Hey friends! I'm HendrixRPH and this is my first character page theme. Don't claim this as your own, don't remove the credit, and don't use as a base, please!
  9.  
  10. On the other hand, if you want to steal the code that lets you filter by multiple criteria, go ahead. I stole it from the Isotope documentation anyway. I would recommend you look at it yourself before using so that you get the HTML structure right. Here is where I got it from: http://isotope.metafizzy.co/filtering.html#combination-filters
  11.  
  12. That said, special thanks to Metafizzy for this awesome library!
  13.  
  14. -->
  15.  
  16. <head>
  17. <title>Character Page Test</title>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Khula:400,300,700' rel='stylesheet' type='text/css'>
  20.  
  21. <style>
  22. ::-webkit-scrollbar {background-color:#888; height:4px; width:6px}
  23. ::-webkit-scrollbar-thumb:vertical {background-color:#333; height:50px}
  24. ::-webkit-scrollbar-thumb:horizontal {background-color:#333; height:8px!important}
  25.  
  26. body, html {
  27. height:100%;
  28. margin:0;
  29. padding:0;
  30. font-family:"Khula", Helvetica, Arial, sans-serif;
  31. background-color:#eee;
  32. overflow:hidden;
  33. }
  34.  
  35. .sidebar {
  36. float:left;
  37. width:280px;
  38. background:#333;
  39. height:100%;
  40. padding:0;
  41. font-family:"Khula", Helvetica, Arial, sans-serif;
  42. overflow:hidden;
  43. }
  44.  
  45. .sidebar::after {
  46. clear:both;
  47. }
  48.  
  49. h1 {
  50. text-transform:uppercase;
  51. text-align:center;
  52. padding: 10px 20px;
  53. padding-bottom:0px;
  54. margin:10px 0px;
  55. z-index:0;
  56. position:relative;
  57. letter-spacing:1px;
  58. font-weight:300;
  59. color:#eee;
  60. }
  61.  
  62. .nav {
  63. font-size:11px;
  64. letter-spacing:2px;
  65. text-transform:lowercase;
  66. text-align:center;
  67. margin-bottom:10px;
  68. }
  69.  
  70. .nav a, a {
  71. color:#ccc;
  72. text-decoration:none;
  73. border-bottom:1px solid #555;
  74. transition:0.5s all;
  75. }
  76.  
  77. .nav a:hover, a:hover {
  78. color:#ff66cc;
  79.  
  80. }
  81.  
  82. .nav a {
  83. padding:0 5px;
  84. border-bottom:0px;
  85. }
  86.  
  87. .desc {
  88. padding: 0px 15px;
  89. text-align:center;
  90. font-size:11px;
  91. margin:0 10px;
  92.  
  93. text-transform:lowercase;
  94. letter-spacing:1px;
  95. font-weight:300;
  96. color:#ddd;
  97. }
  98.  
  99. h2 {
  100. text-align:center;
  101. font-weight:300;
  102. text-transform:lowercase;
  103. letter-spacing:2px;
  104. margin-top:20px;
  105. margin-bottom:5px;
  106. color:#eee;
  107. }
  108.  
  109.  
  110. /* condensed buttons */
  111. .sidebar .button {
  112. display:inline;
  113. background:none;
  114. border:1px solid #555;
  115. margin:4px 2px;
  116. color:#ccc;
  117. width:120px;
  118. padding: 4px 0px 4px 0px;
  119. transition:0.5s all;
  120. }
  121.  
  122. .button-group {
  123. width:260px;
  124. margin:0 auto;
  125. text-align:center;
  126. }
  127.  
  128. .sidebar .button:hover {
  129. background-color:#cc0088;
  130. border:#777 1px solid;
  131. color:#eee;
  132. }
  133.  
  134. .button.ischecked {
  135. background-color:#555!important;
  136. border:#777 1px solid!important;
  137. color:#eee!important;
  138. }
  139.  
  140. .wrapper {
  141. background-color:#eee;
  142. max-height:100%;
  143. padding:0 15%;
  144. overflow-y:scroll;
  145. }
  146.  
  147. .wrapper:after {
  148. content: '';
  149. display: block;
  150. clear: both;
  151. }
  152.  
  153. .header {
  154. background-color:#333;
  155. margin:0;
  156. padding:0;
  157. height:100px;
  158. }
  159.  
  160. .header h1 {
  161. margin:0;
  162. padding-top:25px;
  163. padding-left:200px;
  164. font-size:40px;
  165. }
  166.  
  167. .chara {
  168. width:150px;
  169. height:200px;
  170. background-color:#333;
  171. float:center;
  172. margin:10px 15px;
  173. padding:0;
  174. z-index:0;
  175. position:relative;
  176. overflow:hidden;
  177. }
  178.  
  179. .charaimg {
  180. width:100px;
  181. z-index:1;
  182. position:relative;
  183. left:25px;
  184. top:25px;
  185. }
  186.  
  187. .charatitle {
  188. height:75px;
  189. position:absolute;
  190. bottom:0;
  191. background-color:#333;
  192. width:150px;
  193. color:#fff;
  194. opacity:0.8;
  195. text-align:center;
  196. z-index:1;
  197. }
  198.  
  199. .charatitle span {
  200. margin:0;
  201. padding-top:10px;
  202. display:inline-block;
  203. vertical-align:middle;
  204. line-height:1.5em;
  205. font-size:11px;
  206. letter-spacing:1px;
  207. font-weight:300;
  208. }
  209.  
  210. .charatitle span p {
  211. margin:0;
  212. padding:0;
  213. }
  214.  
  215. .charahover {
  216. position:absolute;
  217. z-index:5;
  218. background-color:#333;
  219. width:190px;
  220. height:240px;
  221. opacity:0;
  222. transition:1s opacity;
  223. padding:5px 0;
  224. padding-right:10px;
  225. overflow:hidden;
  226. }
  227.  
  228. .charahover:hover {
  229. opacity:0.9;
  230. overflow-y:scroll;
  231. }
  232.  
  233. .charahover p {
  234. line-height:1.35em;
  235. font-size:10px;
  236. letter-spacing:1px;
  237. font-weight:300;
  238. padding:2px 8px;
  239. color:#fff;
  240. margin:0 3px;
  241. }
  242.  
  243. .charahover ul, .charahover ol {
  244. line-height:1.35em;
  245. font-size:10px;
  246. letter-spacing:1px;
  247. font-weight:300;
  248. color:#fff;
  249. padding-left:30px;
  250. }
  251.  
  252. .credit {
  253. position:absolute;
  254. margin:7px 13px;
  255. padding:3px 5px;
  256. font-size:8px;
  257. bottom:0;
  258. right:0;
  259. background-color:#888;
  260. color:#fff;
  261. opacity:0.5;
  262. transition:0.75s all;
  263. }
  264.  
  265. .credit:hover {
  266. opacity:0.8;
  267. letter-spacing:normal;
  268. }
  269.  
  270.  
  271.  
  272.  
  273. </style>
  274. </head>
  275.  
  276. <body>
  277.  
  278. <div class='sidebar'>
  279.  
  280. <h1><b>CHARACTERS</b></h1> <!-- Page title goes here. -->
  281.  
  282. <div class="nav">
  283. <!-- Navigation links, change them to whatever you want. -->
  284. <a href="https://www.plurk.com/exclamationmarks">plurk</a>
  285. <a href="http://emirin.tumblr.com">tumblr</a>
  286. <a href="http://pencilcase.dreamwidth.org">musebox</a>
  287. <a href="http://hendrixrph.tumblr.com">credit</a>
  288. </div>
  289.  
  290.  
  291.  
  292. <!--
  293.  
  294. Okay, changing the filters is potentially the most difficult part. I'll try to explain how you do it.
  295.  
  296. *** ADD A NEW OPTION TO AN EXISTING GROUP:
  297.  
  298. Let's say you want to stick to my defaults, but want to add a "ghost" option for species. Go down to the button group you want to add an option to, in this case species. It looks like this:
  299.  
  300. --
  301.  
  302. <h2>Species</h2>
  303. <div class="button-group" data-filter-group="species">
  304. <button data-filter="" class="button ischecked">any</button>
  305. <button data-filter=".human" class="button">human</button>
  306. <button data-filter=".werewolf" class="button">werewolf</button>
  307. <button data-filter=".vampire" class="button">vampire</button>
  308. </div>
  309.  
  310. --
  311.  
  312. To add an option, start by coping one of the buttons and pasting it on the line below. We'll copy the vampire one. Here's what it looks like now.
  313.  
  314. --
  315.  
  316. <h2>Species</h2>
  317. <div class="button-group" data-filter-group="species">
  318. <button data-filter="" class="button ischecked">any</button>
  319. <button data-filter=".human" class="button">human</button>
  320. <button data-filter=".werewolf" class="button">werewolf</button>
  321. <button data-filter=".vampire" class="button">vampire</button>
  322. <button data-filter=".vampire" class="button">vampire</button>
  323. </div>
  324.  
  325. --
  326.  
  327. But we don't want two vampire ones, so we'll change the values. Here's what it will look like after the values are changed, compared to the original:
  328.  
  329. --
  330.  
  331. Original: <button data-filter=".vampire" class="button">vampire</button>
  332. New version: <button data-filter=".ghost" class="button">ghost</button>
  333. --
  334.  
  335. And that's it! Everything should work.
  336.  
  337.  
  338. *** REMOVE AN OPTION FROM AN EXISTING GROUP
  339.  
  340. This one's simple. Just find the code for the button that you want to remove and delete that one line. You're done!
  341.  
  342.  
  343. *** ADD A NEW FILTER GROUP
  344.  
  345. For this example, we'll pretend you want to add a filter group for the character's grade (freshman, sophomore, junior, or senior). First, copy and paste any of the filter groups, starting at the <h2> tag and ending at the </div>. Here's what we'll start with:
  346.  
  347. --
  348.  
  349. <h2>Species</h2>
  350. <div class="button-group" data-filter-group="species">
  351. <button data-filter="" class="button ischecked">any</button>
  352. <button data-filter=".human" class="button">human</button>
  353. <button data-filter=".werewolf" class="button">werewolf</button>
  354. <button data-filter=".vampire" class="button">vampire</button>
  355. </div>
  356.  
  357. --
  358.  
  359. Change the text between the <h2> tags to the title of your filter, in this case "Grade."
  360.  
  361. Next, we need to give the filter group a new official name. In the div tag, the one that looks like this:
  362.  
  363. <div class="button-group" data-filter-group="species">
  364.  
  365. Replace the content of data-filter-group="___" with whatever you want to call your group. In this case, grade works.
  366.  
  367. Don't mess with the first button! Having an "any" button is important, we don't want to remove it. If you really want to call it something else youc an change the "any" text to something else like "all", but leave all the attributes within the tag the same.
  368.  
  369. Now modify the other buttons to create your new options. You'll need to change the data-filter attribute (keep the period at the beginning, that's crucial!) and the label that's between the <button></button> tags.
  370.  
  371. For the data-filter, do not have any spaces. If you have multiple words, seperate them by dashes. Add and remove options as necessary.
  372.  
  373. In the end, it should look like this:
  374.  
  375. --
  376.  
  377. <h2>Grade</h2>
  378. <div class="button-group" data-filter-group="grade">
  379. <button data-filter="" class="button ischecked">any</button>
  380. <button data-filter=".freshman" class="button">freshman</button>
  381. <button data-filter=".sophomore" class="button">sophomore</button>
  382. <button data-filter=".junior" class="button">junior</button>
  383. <button data-filter=".senior" class="button">senior</button>
  384. </div>
  385.  
  386. --
  387.  
  388. And you're done! Make sure you add the new data filters to the class section of your character entries so the sorting will work. How to do that is covered further down.
  389.  
  390.  
  391. *** REMOVE A FILTER GROUP
  392.  
  393. To remove a filter group, locate the one you want to remove in the code. Delete everything starting from the <h2> tag and ending at the </div> tag.
  394.  
  395. -->
  396.  
  397. <div class="filters">
  398. <h2>filter by activity</h2>
  399. <div class="button-group" data-filter-group="activity">
  400. <button data-filter="" class="button ischecked">any</button>
  401. <button data-filter=".active" class="button">active</button>
  402. <button data-filter=".semiactive" class="button">semi-active</button>
  403. <button data-filter=".semiactive" class="button">semi-inactive</button>
  404. <button data-filter=".occasionally" class="button">retired</button>
  405. <button data-filter=".occasionally" class="button">never played</button>
  406. </div>
  407.  
  408. <h2>filter by status</h2>
  409. <div class="button-group" data-filter-group="status">
  410. <button data-filter="" class="button ischecked">any</button>
  411. <button data-filter=".ingame" class="button">currently in game</button>
  412. <button data-filter=".nopg" class="button">never been<br>in a game</button>
  413. <button data-filter=".pg" class="button">previously been<br>in a game</button>
  414. </div>
  415.  
  416. <h2>filter by media</h2>
  417. <div class="button-group" data-filter-group="media">
  418. <button data-filter="" class="button ischecked">any</button>
  419. <button data-filter=".liveaction" class="button">live action</button>
  420. <button data-filter=".animated" class="button">animated</button>
  421. <button data-filter=".books" class="button">books</button>
  422. <button data-filter=".game" class="button">game</button>
  423. <button data-filter=".webcomic" class="button">webcomic</button>
  424. </div>
  425.  
  426. <h2>filter by game</h2>
  427. <div class="button-group" data-filter-group="game">
  428. <button data-filter="" class="button ischecked">any</button>
  429. <button data-filter=".driftfleet" class="button">drift fleet</button>
  430. <button data-filter=".mom" class="button">mask or menace</button>
  431. <button data-filter=".court" class="button">court</button>
  432. <button data-filter=".ataraxion" class="button">ataraxion</button>
  433. <button data-filter=".decollage" class="button">decollage</button>
  434. <button data-filter=".enrichment center" class="button">enrichment center</button>
  435. <button data-filter=".scorched" class="button">scorched</button>
  436. <button data-filter=".thusia" class="button">thusia</button>
  437. <button data-filter=".aather" class="button">aather</button>
  438. <button data-filter=".sabra" class="button">sabra la tau</button>
  439. <button data-filter=".cfud" class="button">cfud</button>
  440. </div>
  441. </div>
  442.  
  443.  
  444. <div class="desc"><br><br>
  445. <p>Last updated 09-2016</p>
  446. </div>
  447. </div>
  448.  
  449. <div class="wrapper"> <!-- All of your character boxes should go in here. -->
  450.  
  451. <!-- BEGIN COPY PASTE -->
  452. <div class="chara active activeingame">
  453. <div class="charatitle"><span>
  454. <p><B>AHSOKA TANO</B></p>
  455. <p>the clone wars</p>
  456. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  457. </span></div>
  458. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  459. </div>
  460. <!-- END COPY PASTE -->
  461.  
  462. <!-- BEGIN COPY PASTE -->
  463. <div class="chara active activeingame">
  464. <div class="charatitle"><span>
  465. <p><B>AHSOKA TANO</B></p>
  466. <p>the clone wars</p>
  467. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  468. </span></div>
  469. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  470. </div>
  471. <!-- END COPY PASTE -->
  472.  
  473. <!-- BEGIN COPY PASTE -->
  474. <div class="chara active activeingame">
  475. <div class="charatitle"><span>
  476. <p><B>AHSOKA TANO</B></p>
  477. <p>the clone wars</p>
  478. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  479. </span></div>
  480. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  481. </div>
  482. <!-- END COPY PASTE -->
  483.  
  484. <!-- BEGIN COPY PASTE -->
  485. <div class="chara active activeingame">
  486. <div class="charatitle"><span>
  487. <p><B>AHSOKA TANO</B></p>
  488. <p>the clone wars</p>
  489. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  490. </span></div>
  491. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  492. </div>
  493. <!-- END COPY PASTE -->
  494.  
  495. <!-- BEGIN COPY PASTE -->
  496. <div class="chara active activeingame">
  497. <div class="charatitle"><span>
  498. <p><B>AHSOKA TANO</B></p>
  499. <p>the clone wars</p>
  500. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  501. </span></div>
  502. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  503. </div>
  504. <!-- END COPY PASTE -->
  505.  
  506. <!-- BEGIN COPY PASTE -->
  507. <div class="chara active activeingame">
  508. <div class="charatitle"><span>
  509. <p><B>AHSOKA TANO</B></p>
  510. <p>the clone wars</p>
  511. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  512. </span></div>
  513. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  514. </div>
  515. <!-- END COPY PASTE -->
  516.  
  517. <!-- BEGIN COPY PASTE -->
  518. <div class="chara active activeingame">
  519. <div class="charatitle"><span>
  520. <p><B>AHSOKA TANO</B></p>
  521. <p>the clone wars</p>
  522. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  523. </span></div>
  524. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  525. </div>
  526. <!-- END COPY PASTE -->
  527.  
  528. <!-- BEGIN COPY PASTE -->
  529. <div class="chara active activeingame">
  530. <div class="charatitle"><span>
  531. <p><B>AHSOKA TANO</B></p>
  532. <p>the clone wars</p>
  533. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  534. </span></div>
  535. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  536. </div>
  537. <!-- END COPY PASTE -->
  538.  
  539. <!-- BEGIN COPY PASTE -->
  540. <div class="chara active activeingame">
  541. <div class="charatitle"><span>
  542. <p><B>AHSOKA TANO</B></p>
  543. <p>the clone wars</p>
  544. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  545. </span></div>
  546. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  547. </div>
  548. <!-- END COPY PASTE -->
  549.  
  550. <!-- BEGIN COPY PASTE -->
  551. <div class="chara active activeingame">
  552. <div class="charatitle"><span>
  553. <p><B>AHSOKA TANO</B></p>
  554. <p>the clone wars</p>
  555. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  556. </span></div>
  557. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  558. </div>
  559. <!-- END COPY PASTE -->
  560.  
  561. <!-- BEGIN COPY PASTE -->
  562. <div class="chara active activeingame">
  563. <div class="charatitle"><span>
  564. <p><B>AHSOKA TANO</B></p>
  565. <p>the clone wars</p>
  566. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  567. </span></div>
  568. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  569. </div>
  570. <!-- END COPY PASTE -->
  571.  
  572. <!-- BEGIN COPY PASTE -->
  573. <div class="chara active activeingame">
  574. <div class="charatitle"><span>
  575. <p><B>AHSOKA TANO</B></p>
  576. <p>the clone wars</p>
  577. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  578. </span></div>
  579. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  580. </div>
  581. <!-- END COPY PASTE -->
  582.  
  583. <!-- BEGIN COPY PASTE -->
  584. <div class="chara active activeingame">
  585. <div class="charatitle"><span>
  586. <p><B>AHSOKA TANO</B></p>
  587. <p>the clone wars</p>
  588. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  589. </span></div>
  590. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  591. </div>
  592. <!-- END COPY PASTE -->
  593.  
  594. <!-- BEGIN COPY PASTE -->
  595. <div class="chara active activeingame">
  596. <div class="charatitle"><span>
  597. <p><B>AHSOKA TANO</B></p>
  598. <p>the clone wars</p>
  599. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  600. </span></div>
  601. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  602. </div>
  603. <!-- END COPY PASTE -->
  604.  
  605. <!-- BEGIN COPY PASTE -->
  606. <div class="chara active activeingame">
  607. <div class="charatitle"><span>
  608. <p><B>AHSOKA TANO</B></p>
  609. <p>the clone wars</p>
  610. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  611. </span></div>
  612. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  613. </div>
  614. <!-- END COPY PASTE -->
  615.  
  616. <!-- BEGIN COPY PASTE -->
  617. <div class="chara active activeingame">
  618. <div class="charatitle"><span>
  619. <p><B>AHSOKA TANO</B></p>
  620. <p>the clone wars</p>
  621. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  622. </span></div>
  623. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  624. </div>
  625. <!-- END COPY PASTE -->
  626.  
  627. <!-- BEGIN COPY PASTE -->
  628. <div class="chara active activeingame">
  629. <div class="charatitle"><span>
  630. <p><B>AHSOKA TANO</B></p>
  631. <p>the clone wars</p>
  632. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  633. </span></div>
  634. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  635. </div>
  636. <!-- END COPY PASTE -->
  637.  
  638. <!-- BEGIN COPY PASTE -->
  639. <div class="chara active activeingame">
  640. <div class="charatitle"><span>
  641. <p><B>AHSOKA TANO</B></p>
  642. <p>the clone wars</p>
  643. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  644. </span></div>
  645. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  646. </div>
  647. <!-- END COPY PASTE -->
  648.  
  649. <!-- BEGIN COPY PASTE -->
  650. <div class="chara active activeingame">
  651. <div class="charatitle"><span>
  652. <p><B>AHSOKA TANO</B></p>
  653. <p>the clone wars</p>
  654. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  655. </span></div>
  656. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  657. </div>
  658. <!-- END COPY PASTE -->
  659.  
  660. <!-- BEGIN COPY PASTE -->
  661. <div class="chara active activeingame">
  662. <div class="charatitle"><span>
  663. <p><B>AHSOKA TANO</B></p>
  664. <p>the clone wars</p>
  665. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  666. </span></div>
  667. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  668. </div>
  669. <!-- END COPY PASTE -->
  670.  
  671. <!-- BEGIN COPY PASTE -->
  672. <div class="chara active activeingame">
  673. <div class="charatitle"><span>
  674. <p><B>AHSOKA TANO</B></p>
  675. <p>the clone wars</p>
  676. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  677. </span></div>
  678. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  679. </div>
  680. <!-- END COPY PASTE -->
  681.  
  682. <!-- BEGIN COPY PASTE -->
  683. <div class="chara active activeingame">
  684. <div class="charatitle"><span>
  685. <p><B>AHSOKA TANO</B></p>
  686. <p>the clone wars</p>
  687. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  688. </span></div>
  689. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  690. </div>
  691. <!-- END COPY PASTE -->
  692.  
  693. <!-- BEGIN COPY PASTE -->
  694. <div class="chara active activeingame">
  695. <div class="charatitle"><span>
  696. <p><B>AHSOKA TANO</B></p>
  697. <p>the clone wars</p>
  698. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  699. </span></div>
  700. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  701. </div>
  702. <!-- END COPY PASTE -->
  703.  
  704. <!-- BEGIN COPY PASTE -->
  705. <div class="chara active activeingame">
  706. <div class="charatitle"><span>
  707. <p><B>AHSOKA TANO</B></p>
  708. <p>the clone wars</p>
  709. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  710. </span></div>
  711. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  712. </div>
  713. <!-- END COPY PASTE -->
  714.  
  715. <!-- BEGIN COPY PASTE -->
  716. <div class="chara active activeingame">
  717. <div class="charatitle"><span>
  718. <p><B>AHSOKA TANO</B></p>
  719. <p>the clone wars</p>
  720. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  721. </span></div>
  722. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  723. </div>
  724. <!-- END COPY PASTE -->
  725.  
  726. <!-- BEGIN COPY PASTE -->
  727. <div class="chara active activeingame">
  728. <div class="charatitle"><span>
  729. <p><B>AHSOKA TANO</B></p>
  730. <p>the clone wars</p>
  731. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  732. </span></div>
  733. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  734. </div>
  735. <!-- END COPY PASTE -->
  736.  
  737. <!-- BEGIN COPY PASTE -->
  738. <div class="chara active activeingame">
  739. <div class="charatitle"><span>
  740. <p><B>AHSOKA TANO</B></p>
  741. <p>the clone wars</p>
  742. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  743. </span></div>
  744. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  745. </div>
  746. <!-- END COPY PASTE -->
  747.  
  748. <!-- BEGIN COPY PASTE -->
  749. <div class="chara active activeingame">
  750. <div class="charatitle"><span>
  751. <p><B>AHSOKA TANO</B></p>
  752. <p>the clone wars</p>
  753. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  754. </span></div>
  755. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  756. </div>
  757. <!-- END COPY PASTE -->
  758.  
  759. <!-- BEGIN COPY PASTE -->
  760. <div class="chara active activeingame">
  761. <div class="charatitle"><span>
  762. <p><B>AHSOKA TANO</B></p>
  763. <p>the clone wars</p>
  764. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  765. </span></div>
  766. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  767. </div>
  768. <!-- END COPY PASTE -->
  769.  
  770. <!-- BEGIN COPY PASTE -->
  771. <div class="chara active activeingame">
  772. <div class="charatitle"><span>
  773. <p><B>AHSOKA TANO</B></p>
  774. <p>the clone wars</p>
  775. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  776. </span></div>
  777. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  778. </div>
  779. <!-- END COPY PASTE -->
  780.  
  781. <!-- BEGIN COPY PASTE -->
  782. <div class="chara active activeingame">
  783. <div class="charatitle"><span>
  784. <p><B>AHSOKA TANO</B></p>
  785. <p>the clone wars</p>
  786. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  787. </span></div>
  788. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  789. </div>
  790. <!-- END COPY PASTE -->
  791.  
  792. <!-- BEGIN COPY PASTE -->
  793. <div class="chara active activeingame">
  794. <div class="charatitle"><span>
  795. <p><B>AHSOKA TANO</B></p>
  796. <p>the clone wars</p>
  797. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  798. </span></div>
  799. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  800. </div>
  801. <!-- END COPY PASTE -->
  802.  
  803. <!-- BEGIN COPY PASTE -->
  804. <div class="chara active activeingame">
  805. <div class="charatitle"><span>
  806. <p><B>AHSOKA TANO</B></p>
  807. <p>the clone wars</p>
  808. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  809. </span></div>
  810. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  811. </div>
  812. <!-- END COPY PASTE -->
  813.  
  814. <!-- BEGIN COPY PASTE -->
  815. <div class="chara active activeingame">
  816. <div class="charatitle"><span>
  817. <p><B>AHSOKA TANO</B></p>
  818. <p>the clone wars</p>
  819. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  820. </span></div>
  821. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  822. </div>
  823. <!-- END COPY PASTE -->
  824.  
  825. <!-- BEGIN COPY PASTE -->
  826. <div class="chara active activeingame">
  827. <div class="charatitle"><span>
  828. <p><B>AHSOKA TANO</B></p>
  829. <p>the clone wars</p>
  830. <p>➤ <a href="http://resnipstance.dreamwidth.org/">resnipstance</a></p>
  831. </span></div>
  832. <img src="http://v.dreamwidth.org/9556289/2444732" class="charaimg">
  833. </div>
  834. <!-- END COPY PASTE -->
  835.  
  836.  
  837.  
  838.  
  839.  
  840. </div> <!-- Don't put any character boxes after this tag! -->
  841. <a href="http://hendrixrph.tumblr.com"><div class="credit">hendrixrph</div></a>
  842.  
  843.  
  844. <!-- All the filtering scripts. No need to mess with these unless you know what you're doing. -->
  845. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  846. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
  847. <script>
  848.  
  849. // external js: isotope.pkgd.js
  850.  
  851. $(document).ready( function() {
  852. // init Isotope
  853. var $grid = $('.wrapper').isotope({
  854. itemSelector: '.chara'
  855. });
  856.  
  857. // store filter for each group
  858. var filters = {};
  859.  
  860. $('.filters').on( 'click', '.button', function() {
  861. var $this = $(this);
  862. // get group key
  863. var $buttonGroup = $this.parents('.button-group');
  864. var filterGroup = $buttonGroup.attr('data-filter-group');
  865. // set filter for group
  866. filters[ filterGroup ] = $this.attr('data-filter');
  867. // combine filters
  868. var filterValue = concatValues( filters );
  869. // set filter for Isotope
  870. $grid.isotope({ filter: filterValue });
  871. });
  872.  
  873. // change is-checked class on buttons
  874. $('.button-group').each( function( i, buttonGroup ) {
  875. var $buttonGroup = $( buttonGroup );
  876. $buttonGroup.on( 'click', 'button', function() {
  877. $buttonGroup.find('.ischecked').removeClass('ischecked');
  878. $( this ).addClass('ischecked');
  879. });
  880. });
  881.  
  882. });
  883.  
  884. // flatten object by concatting values
  885. function concatValues( obj ) {
  886. var value = '';
  887. for ( var prop in obj ) {
  888. value += obj[ prop ];
  889. }
  890. return value;
  891. }
  892.  
  893. </script>
  894.  
  895. </body>
  896.  
  897. </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!