API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 05. All in One {CherryPop}

Noir-Et-Blanc
Feb 9th, 2016
2,277
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.85 KB | None | 0 0
raw download clone embed print report
  1. <!-- All in One
  2.  
  3. {. Cherry Pop .}
  4.  
  5. Page #05. (All in One)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this theme 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.  
  11. CREDITS TO:
  12. ►Images used in the original preview:
  13. Background: http://cocorini.tumblr.com/
  14. Main picture: http://www.colourlovers.com/pattern/5047803/Winter_Birds
  15. About Picture: http://www.pixiv.net/member_illust.php?id=1030499
  16.  
  17. ►Pop up code: http://hkthemes.tumblr.com/
  18.  
  19. ►Accordion code: http://inspirationalpixels.com/
  20.  
  21.  
  22. -->
  23.  
  24. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  25. <html xmlns="http://www.w3.org/1999/xhtml">
  26. <head>
  27. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  28. <link rel="shortcut icon" href="{Favicon}">
  29.  
  30. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  31. <link href='https://fonts.googleapis.com/css?family=Dosis|Jura' rel='stylesheet' type='text/css'>
  32.  
  33. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  34. <script type="text/javascript" src="https://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  35.  
  36. <title>{Title}</title>
  37.  
  38. <style>
  39.  
  40. ::-webkit-scrollbar-track
  41. {
  42. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  43. background-color: #F5F5F5;
  44. }
  45.  
  46. ::-webkit-scrollbar
  47. {
  48. width: 1px;
  49. background-color: #F5F5F5;
  50. }
  51.  
  52. ::-webkit-scrollbar-thumb
  53. {
  54. background-color: #000000;
  55. border: 1px solid #555555;
  56. }
  57.  
  58. body{
  59. background-color:#fff3e0; /*Change the color of the main bg here */
  60. background: url("http://68.media.tumblr.com/a4177db7fb45fd4685f1a694ce76ed34/tumblr_novhnrwKja1ru3nbdo8_r2_100.png");
  61. /*Change the main bg image here */
  62. margin:0;
  63. padding:0;
  64. font-family: 'Dosis', sans-serif;
  65. background-attachment: fixed;
  66. }
  67.  
  68.  
  69. #wonderland{
  70. position:absolute;
  71. height:250px;
  72. width:600px;
  73. top:50%;
  74. left:50%;
  75. margin-left:-300px;
  76. margin-top:-125px;
  77. text-align:center;
  78. border-radius:4px;
  79. }
  80.  
  81. #wonderland:hover .picto{
  82. margin-top:5px;
  83. }
  84.  
  85. #wonderland:hover .navbar{
  86. bottom:0px;
  87. opacity:1;
  88. }
  89.  
  90.  
  91. .picto{
  92. margin-top:25px;
  93. -moz-transition:all .8s ease-in-out; /*For Mozilla Browser*/
  94. -webkit-transition:all .8s ease-in-out; /*For Chrome and Safari*/
  95. -o-transition:all .8s ease-in-out; /*For Opera Browser*/
  96. transition:all .8s ease-in-out;
  97. }
  98.  
  99. .picto img{
  100. max-width:200px;
  101. max-height:200px;
  102. border-radius:150px;
  103.  
  104. }
  105.  
  106. .navbar{
  107. position:absolute;
  108. bottom:30px;
  109. width:600px;
  110. height:25px;
  111. line-height:25px;
  112. opacity:0;
  113. -moz-transition:all .8s ease-in-out; /*For Mozilla Browser*/
  114. -webkit-transition:all .8s ease-in-out; /*For Chrome and Safari*/
  115. -o-transition:all .8s ease-in-out; /*For Opera Browser*/
  116. transition:all .8s ease-in-out;
  117. }
  118.  
  119. .navbar a{
  120. text-decoration:none;
  121. color:#EF959D;
  122. display:inline-block;
  123. margin:0 10px;
  124. border-bottom:3px solid transparent;
  125. -moz-transition:all .3s ease-in-out; /*For Mozilla Browser*/
  126. -webkit-transition:all .3s ease-in-out; /*For Chrome and Safari*/
  127. -o-transition:all .3s ease-in-out; /*For Opera Browser*/
  128. transition:all .3s ease-in-out;
  129. }
  130.  
  131. .navbar a:before{
  132. content:"+";
  133. font-size:1.3em;
  134. margin-right:3px;
  135. }
  136.  
  137. .navbar a:hover{
  138. border-bottom:3px solid #B8D8BA;
  139. }
  140.  
  141.  
  142. #fade { /*--Transparent background layer--*/
  143. display: none; /*--hidden by default--*/
  144. background: #000;
  145. position: fixed; left: 0; top: 0;
  146. width: 100%; height: 100%;
  147. opacity: .40;
  148. z-index: 9999;
  149. }
  150. .popup_block{
  151. display: none; /*--hidden by default--*/
  152. background: #fff;
  153. padding: 20px;
  154. border: 1px solid #ddd;
  155. float: left;
  156. position: fixed;
  157. top: 50%; left: 50%;
  158. z-index: 99999;
  159. }
  160.  
  161. /* ABOUT STYLE */
  162.  
  163. .about{
  164. position:absolute;
  165. width:500px;
  166. height:300px;
  167. top:50%;
  168. left:50%;
  169. margin-top:-150px;
  170. margin-left:-230px;
  171. background-color:#fff;
  172. border:1px solid #666;
  173. border-radius:4px;
  174. -moz-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  175. -webkit-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  176. box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  177. }
  178.  
  179. .infotab{
  180. position:absolute;
  181. width:350px;
  182. height:300px;
  183. padding:10px;
  184. box-sizing:border-box;
  185. }
  186.  
  187.  
  188. .infotitle{
  189. position:absolute;
  190. top:-30px;
  191. font-size:30px;
  192. color:white;
  193. text-shadow:-3px -1px 0px #000000;
  194. font-family: 'Jura', sans-serif;
  195. }
  196.  
  197. .fa-user{
  198. margin-right:6px;
  199. color:#ddd;
  200. }
  201.  
  202. .det{
  203. position:relative;
  204. display:inline-block;
  205. width:150px;
  206. height:30px;
  207. margin:5px;
  208. }
  209.  
  210.  
  211. .det b{
  212. position:absolute;
  213. bottom:0px;
  214. border-top:1px solid #ffa0c4;
  215. width:100%;
  216. text-align:right;
  217. font-size:10px;
  218. font-weight: normal;
  219. }
  220.  
  221. .det p{
  222. text-align:left;
  223. font-size:14px;
  224. margin:0;
  225. padding:0;
  226. }
  227.  
  228. .pictab{
  229. position:absolute;
  230. width:150px;
  231. height:300px;
  232. right:0;
  233. text-align:center;
  234. overflow:hidden;
  235. border-left:1px dotted #250903;
  236. }
  237.  
  238. .pictab img{
  239. max-height:300px;
  240. }
  241.  
  242. .detbox{
  243. position:relative;
  244. width:315px;
  245. margin:3px 5px;
  246. }
  247.  
  248. .big{
  249. height:75px !important;
  250. }
  251.  
  252. .detbox b{
  253. display:block;
  254. border-bottom:1px solid #ffa0c4;
  255. width:100%;
  256. text-align:left;
  257. font-size:10px;
  258. font-weight: normal;
  259. }
  260.  
  261. .detbox p{
  262. margin:0;
  263. padding:2px 5px;
  264. }
  265.  
  266. .detbox li{
  267. list-style:none;
  268. display:inline-block;
  269. font-size:14px;
  270. margin:0 6px;
  271. }
  272.  
  273. .likes li:before{
  274. content:"♡";
  275. margin-right:3px;
  276. }
  277.  
  278. .dislikes li:before{
  279. content:"✘";
  280. margin-right:3px;
  281. }
  282.  
  283. .aboutcc{
  284. height:38px;
  285. overflow:auto;
  286. font-size:14px;
  287. margin:5px;
  288. }
  289.  
  290. .detbox ul{
  291. padding:0;
  292. margin:0;
  293. }
  294.  
  295. /*TAGS STYLE*/
  296. .tags{
  297. position:absolute;
  298. width:700px;
  299. height:450px;
  300. top:50%;
  301. left:50%;
  302. margin-left:-350px;
  303. margin-top:-225px;
  304. background-color:#fff;
  305. border:1px solid #222;
  306. border-radius:4px;
  307. -moz-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  308. -webkit-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  309. box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  310. }
  311.  
  312. .tagstitle{
  313. position:absolute;
  314. top:-35px;
  315. font-size:30px;
  316. color:white;
  317. text-shadow:-3px -1px 0px #000000;
  318. font-family: 'Jura', sans-serif;
  319. }
  320.  
  321. .fa-tags{
  322. margin-right:6px;
  323. color:#ddd;
  324. }
  325.  
  326. .sidepic{
  327. position:absolute;
  328. height:450px;
  329. width:150px;
  330. overflow:hidden;
  331. right:0;
  332. opacity:0.8;
  333. }
  334.  
  335. .sidepic img{
  336. max-height:700px;
  337. margin-left:-5px;
  338. }
  339.  
  340. .tagbody{
  341. position:absolute;
  342. width:550px;
  343. height:450px;
  344. box-sizing:border-box;
  345. padding:10px 20px;
  346. overflow:auto;
  347. }
  348.  
  349. .newcat{
  350. margin-bottom:15px;
  351. }
  352. .newcat ul{
  353. max-height:100px;
  354. overflow:auto;
  355. padding:0;
  356. margin:0;
  357. }
  358.  
  359.  
  360. .newcat ul a{
  361. color:#222;
  362. text-decoration:none;
  363. display:inline-block;
  364. margin:5px;
  365. background-color:#FBD1DB;
  366. padding:5px 10px;
  367. font-size:12px;
  368. min-width:45px;
  369. -moz-transition:all .3s ease-in-out; /*For Mozilla Browser*/
  370. -webkit-transition:all .3s ease-in-out; /*For Chrome and Safari*/
  371. -o-transition:all .3s ease-in-out; /*For Opera Browser*/
  372. transition:all .3s ease-in-out;
  373. border-left:5px solid #4B494A;
  374. }
  375.  
  376.  
  377. .newcat ul a:hover{
  378. background-color:#FBDCE5;
  379. border-left:15px solid #4B494A;
  380. }
  381.  
  382. .newcat b{
  383. display:block;
  384. width:100%;
  385. border-bottom:solid 1px #222;
  386. }
  387.  
  388. /* FAQ STYLE */
  389. .faq{
  390. position:absolute;
  391. width:700px;
  392. height:450px;
  393. top:50%;
  394. left:50%;
  395. margin-left:-350px;
  396. margin-top:-225px;
  397. background-color:#fff;
  398. border:1px solid #222;
  399. border-radius:4px;
  400. -moz-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  401. -webkit-box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  402. box-shadow: 4px 4px 0px RGBA(0,0,0,0.6);
  403. }
  404.  
  405. .faqtitle{
  406. position:absolute;
  407. top:-35px;
  408. font-size:30px;
  409. color:white;
  410. text-shadow:-3px -1px 0px #000000;
  411. font-family: 'Jura', sans-serif;
  412. }
  413.  
  414. .fa-question-circle{
  415. margin-right:6px;
  416. color:#ddd;
  417. }
  418.  
  419. .sidepic{
  420. position:absolute;
  421. height:450px;
  422. width:150px;
  423. overflow:hidden;
  424. right:0;
  425. opacity:0.8;
  426. }
  427.  
  428. .sidepic img{
  429. max-height:700px;
  430. margin-left:-5px;
  431. }
  432.  
  433. .faqbody{
  434. position:absolute;
  435. width:550px;
  436. height:450px;
  437. box-sizing:border-box;
  438. padding:10px 20px;
  439. overflow:auto;
  440. }
  441.  
  442. .faq-title{
  443. display:block;
  444. width:509px;
  445. border-bottom:1px solid #222;
  446. text-decoration:none;
  447. color:#222;
  448. padding-bottom:2px;
  449. font-weight:bold;
  450. cursor: crosshair;
  451. }
  452.  
  453. .faq-title:before{
  454. content:"+";
  455. position:relative;
  456. top:-1px;
  457. font-size:18px;
  458. margin-right:3px;
  459. color:#f7a0b9;
  460. }
  461.  
  462. .faq-content{
  463. width:509px;
  464. display:none;
  465. }
  466.  
  467.  
  468. .new-qa{
  469. width:90%;
  470. position:relative;
  471. box-sizing: border-box;
  472. margin:0 auto;
  473. margin-bottom:20px;
  474. margin-top:10px;
  475. }
  476.  
  477. .new-qa li{
  478. list-style:none;
  479. }
  480.  
  481.  
  482. .question{
  483. text-align:right;
  484. padding:3px 5px;
  485. font-weight:bold;
  486. }
  487.  
  488. .question:before{
  489. content:"✉";
  490. margin-right:2px;
  491. font-weight:normal;
  492. }
  493.  
  494. .answer{
  495. text-align:justify;
  496. border:1px dotted #ffbfce;
  497. padding:6px 5px;
  498. font-size:13px;
  499. }
  500.  
  501. .answer:before{
  502. content:"❝";
  503. margin-right:2px;
  504. }
  505.  
  506. .answer:after{
  507. content:"❞";
  508. margin-left:2px;
  509. }
  510.  
  511. .answer a{
  512. color:#f28aa2;
  513. text-decoration:none;
  514. -moz-transition:all .3s ease-in-out; /*For Mozilla Browser*/
  515. -webkit-transition:all .3s ease-in-out; /*For Chrome and Safari*/
  516. -o-transition:all .3s ease-in-out; /*For Opera Browser*/
  517. transition:all .3s ease-in-out;
  518. }
  519.  
  520. .answer a:hover{
  521. text-decoration:underline;
  522. color:#ffced9;
  523. }
  524.  
  525. #credits{
  526. position:absolute;
  527. bottom:0;
  528. right:0;
  529. }
  530.  
  531. #credits a{
  532. display:block;
  533. text-decoration:none;
  534. background-color:#FDFBF5;
  535. width:60px;
  536. height:25px;
  537. line-height:25px;
  538. text-align:center;
  539. color:#5B3928;
  540. }
  541.  
  542. </style>
  543. </head>
  544.  
  545.  
  546. <body>
  547.  
  548. <div id="wonderland">
  549. <div class="picto">
  550. <a href="/"><img src="https://i.imgur.com/BMtnmlU.png" class="resize"></a>
  551. </div>
  552.  
  553. <div class="navbar">
  554. <a href="#?w=0" rel="01" class="poplight">About</a>
  555. <a href="#?w=0" rel="02" class="poplight">FAQ</a>
  556. <a href="#?w=0" rel="03" class="poplight">Tags</a>
  557. <a href="http://noiretblanc-themes.tumblr.com/">Theme</a>
  558. </div>
  559. </div>
  560.  
  561. <!-- ABOUT BODY -->
  562. <div id="01" class="popup_block">
  563. <div class="about">
  564. <div class="infotitle"><i class="fa fa-user"></i>About Me</div>
  565.  
  566. <div class="infotab">
  567.  
  568. <!-- Basic Info goes here -->
  569. <div class="det">
  570. <b>Name</b>
  571. <p>Your Name</p>
  572. </div>
  573.  
  574. <div class="det">
  575. <b>Gender</b>
  576. <p>Your Gender</p>
  577. </div>
  578.  
  579. <div class="det">
  580. <b>Age</b>
  581. <p>Your Age</p>
  582. </div>
  583.  
  584. <div class="det">
  585. <b>DOB</b>
  586. <p>Your Birthday</p>
  587. </div>
  588. <!-- End of Basic Info-->
  589.  
  590. <!-- Add things you like here -->
  591. <div class="detbox likes">
  592. <b>Likes</b>
  593. <ul class="aboutcc">
  594. <li>Something</li>
  595. </ul>
  596. </div>
  597.  
  598. <!-- Add things you don't like here -->
  599. <div class="detbox dislikes">
  600. <b>Dislikes</b>
  601. <ul class="aboutcc">
  602. <li>Something</li>
  603. </ul>
  604. </div>
  605.  
  606. <!-- Add extra things about yourself here -->
  607.  
  608. <div class="detbox">
  609. <b>Extra</b>
  610. <p class="aboutcc big">
  611. "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 dolor 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."
  612. </p></div>
  613. </div>
  614.  
  615. <!-- Replace the URL here to change the About side picture-->
  616. <div class="pictab">
  617. <img src="URL">
  618. </div>
  619.  
  620. </div>
  621. </div>
  622. <!-- END OF ABOUT BODY -->
  623.  
  624. <!-- FAQ BODY -->
  625. <div id="02" class="popup_block">
  626. <div class="faq">
  627. <div class="faqtitle"><i class="fa fa-question-circle"></i></i>FAQ</div>
  628.  
  629. <div class="sidepic">
  630. <img src="http://orig08.deviantart.net/4f0f/f/2011/020/b/1/youtube_flower_background_by_spiritedxdefeat-d37m709.jpg">
  631. </div>
  632.  
  633. <div class="faqbody">
  634.  
  635. <!--To create a new category copy the next code:
  636.  
  637. --------------------------------------------
  638.  
  639. <div class="faq-new">
  640. <a class="faq-title active" href="#****">Category Name</a>
  641. <div id="****" class="faq-content">
  642. <div class="new-qa">
  643. <li class="question">What's your name?</li>
  644. <li class="answer">Krome</li>
  645. </div>
  646.  
  647. <div class="new-qa">
  648. <li class="question">How old are you?</li>
  649. <li class="answer">24</li>
  650. </div>
  651.  
  652. <div class="new-qa">
  653. <li class="question">How are you?</li>
  654. <li class="answer">Pretty good thanks.</li>
  655. </div>
  656. </div>
  657. </div>
  658.  
  659. ------------------------------------------
  660.  
  661. Replace the **** with whatever you want.
  662. BE CAREFUL IN THIS THO.
  663. Whatever you put in
  664. href="#****"
  665. needs to be the same in
  666. id="****"
  667. or it won't display the category properly.
  668.  
  669. <!-- NEW CATEGORY. EXAMPLE -->
  670. <div class="faq-new">
  671. <a class="faq-title active" href="#category1">A Category</a>
  672. <div id="category1" class="faq-content">
  673.  
  674. <!-- NEW QUESTION -->
  675. <div class="new-qa">
  676. <li class="question">A question?</li>
  677. <li class="answer">An answer</li>
  678. </div>
  679. <!-- END OF NEW QUESTION -->
  680.  
  681. <!-- All questions must be abrove from this -->
  682. </div>
  683. </div>
  684. <!-- END OF CATEGORY -->
  685.  
  686. <!-- NEW CATEGORY. EXAMPLE -->
  687. <div class="faq-new">
  688. <a class="faq-title active" href="#category2">A Category</a>
  689. <div id="category2" class="faq-content">
  690.  
  691. <!-- NEW QUESTION -->
  692. <div class="new-qa">
  693. <li class="question">A question?</li>
  694. <li class="answer">An answer</li>
  695. </div>
  696. <!-- END OF NEW QUESTION -->
  697.  
  698. <!-- All questions must be abrove from this -->
  699. </div>
  700. </div>
  701. <!-- END OF CATEGORY -->
  702.  
  703. <!-- NEW CATEGORY. EXAMPLE -->
  704. <div class="faq-new">
  705. <a class="faq-title active" href="#category3">A Category</a>
  706. <div id="category3" class="faq-content">
  707.  
  708. <!-- NEW QUESTION -->
  709. <div class="new-qa">
  710. <li class="question">A question?</li>
  711. <li class="answer">An answer</li>
  712. </div>
  713. <!-- END OF NEW QUESTION -->
  714.  
  715. <!-- All questions must be abrove from this -->
  716. </div>
  717. </div>
  718. <!-- END OF CATEGORY -->
  719.  
  720. <!-- NEW CATEGORY. EXAMPLE -->
  721. <div class="faq-new">
  722. <a class="faq-title active" href="#category4">A Category</a>
  723. <div id="category4" class="faq-content">
  724.  
  725. <!-- NEW QUESTION -->
  726. <div class="new-qa">
  727. <li class="question">A question?</li>
  728. <li class="answer">An answer</li>
  729. </div>
  730. <!-- END OF NEW QUESTION -->
  731.  
  732. <!-- All questions must be abrove from this -->
  733. </div>
  734. </div>
  735. <!-- END OF CATEGORY -->
  736.  
  737. <!-- ASKBOX -->
  738. <div class="faq-new">
  739. <a class="faq-title" href="#category5">Another question?</a>
  740. <div id="category5" class="faq-content">
  741. <div class="new-qa">
  742. <li class="question">Your question wasn't answered? Let me help you then</li>
  743. <iframe frameborder="0" border="0" scrolling="no" width="480" height="190" allowtransparency="true" src="http://www.tumblr.com/ask_form/YOURUSERNAMEHERE.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  744. </div>
  745.  
  746. </div>
  747. </div>
  748. <!-- ASKBOX -->
  749.  
  750. <!-- ALL CATEGORIES MUST BE ABOVE FROM THIS CODE -->
  751. </div>
  752. </div>
  753. </div>
  754. <!-- FAQ BODY -->
  755.  
  756. <!-- TAG BODY -->
  757. <div id="03" class="popup_block">
  758. <div class="tags">
  759. <div class="tagstitle"><i class="fa fa-tags"></i>Tags</div>
  760.  
  761. <div class="sidepic">
  762. <img src="http://orig08.deviantart.net/4f0f/f/2011/020/b/1/youtube_flower_background_by_spiritedxdefeat-d37m709.jpg">
  763. </div>
  764.  
  765. <div class="tagbody">
  766.  
  767. <!-- New Tag Category -->
  768. <div class="newcat">
  769. <b>TagBox Title</b>
  770. <ul class="taglist">
  771. <a href="/tagged/xxx">Tag</a>
  772. <a href="/tagged/xxx">Tag</a>
  773. <a href="/tagged/xxx">Tag</a>
  774. <a href="/tagged/xxx">Tag</a>
  775. <a href="/tagged/xxx">Tag</a>
  776. <a href="/tagged/xxx">Tag</a>
  777. <a href="/tagged/xxx">Tag</a>
  778. <a href="/tagged/xxx">Tag</a>
  779. <a href="/tagged/xxx">Tag</a>
  780. <a href="/tagged/xxx">Tag</a>
  781. <a href="/tagged/xxx">Tag</a>
  782. <a href="/tagged/xxx">Tag</a>
  783. <a href="/tagged/xxx">Tag</a>
  784. <a href="/tagged/xxx">Tag</a>
  785. <a href="/tagged/xxx">Tag</a>
  786. <a href="/tagged/xxx">Tag</a>
  787. <a href="/tagged/xxx">Tag</a>
  788. <a href="/tagged/xxx">Tag</a>
  789. <a href="/tagged/xxx">Tag</a>
  790. <a href="/tagged/xxx">Tag</a>
  791. <a href="/tagged/xxx">Tag</a>
  792. </ul>
  793. </div>
  794. <!-- End of Tag Category -->
  795.  
  796. <!-- All tag boxes must be above this code -->
  797.  
  798. </div>
  799. </div>
  800. <!-- TAG BODY -->
  801.  
  802. </div>
  803. </body>
  804.  
  805.  
  806.  
  807. <script>
  808. // POPOUT CODE //
  809. $(document).ready(function() {
  810. //
  811. $('a.poplight[href^=#]').click(function() {
  812. var popID = $(this).attr('rel'); //Get Popup Name
  813. var popURL = $(this).attr('href'); //Get Popup href to define size
  814. var query= popURL.split('?');
  815. var dim= query[1].split('&');
  816. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  817. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  818. var popMargTop = ($('#' + popID).height() + 80) / 2;
  819. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  820. //Apply Margin to Popup
  821. $('#' + popID).css({
  822. 'margin-top' : -popMargTop,
  823. 'margin-left' : -popMargLeft
  824. });
  825.  
  826. $('body').append('<div id="fade"></div>');
  827.  
  828. $('#fade').css({'filter' : 'alpha(opacity=60)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=60)'})
  829. return false;
  830. });
  831.  
  832. $('a.close, #fade').live('click', function() {
  833. $('#fade , .popup_block').fadeOut(function() {
  834. $('#fade, a.close').remove(); //fade them both out
  835. });
  836. return false;
  837. });
  838. });
  839. // POPOUT CODE //
  840.  
  841. // Scroll //
  842. $( '.taglist' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
  843. var e0 = e.originalEvent,
  844. delta = e0.wheelDelta || -e0.detail;
  845.  
  846. this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
  847. e.preventDefault();
  848. });
  849.  
  850. /// ACCORDION CODE ///
  851. $(document).ready(function() {
  852. var activeopen = $('.faqbody .faq-title.active');
  853. $('.faqbody ' + activeopen.attr('href')).show();
  854. function close_accordion_section() {
  855. $('.faqbody .faq-title').removeClass('active');
  856. $('.faqbody .faq-content').slideUp(600).removeClass('open');
  857.  
  858. }
  859. $('.faq-title').click(function(e) {
  860. // Grab current anchor value
  861. var currentAttrValue = jQuery(this).attr('href');
  862.  
  863. if($(e.target).is('.active')) {
  864. close_accordion_section();
  865. }else {
  866. close_accordion_section();
  867.  
  868. // Add active class to section title
  869. $(this).addClass('active');
  870. // Open up the hidden content panel
  871. $('.faqbody ' + currentAttrValue).slideDown(600).addClass('open');
  872. }
  873. e.preventDefault();
  874. });
  875. });
  876.  
  877. </script>
  878. </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!