API tools faq
paste
Advertisement
sprwthemata

Navigation Page 01 - Raconteur

sprwthemata
Jan 28th, 2015
2,732
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.82 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. NAVIGATION PAGE 01 BY CEDRICDIGGERY.TUMBLR.COM ;; RACONTEUR
  4.  
  5. PLEASE FOLLOW THE RULES - DO NOT REMOVE THIS TEXT - ALL RIGHTS RESERVED
  6.  
  7. -->
  8. <!DOCTYPE html>
  9. <script type="text/javascript"
  10. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  11.  
  12. <script>
  13.  
  14.  
  15.  
  16. $(document).ready(function() {
  17.  
  18. //
  19.  
  20.  
  21.  
  22. //When you click on a link with class of poplight and the href starts with a #
  23.  
  24. $('a.poplight[href^=#]').click(function() {
  25.  
  26. var popID = $(this).attr('rel'); //Get Popup Name
  27.  
  28. var popURL = $(this).attr('href'); //Get Popup href to define size
  29.  
  30.  
  31.  
  32. //Pull Query & Variables from href URL
  33.  
  34. var query= popURL.split('?');
  35.  
  36. var dim= query[1].split('&');
  37.  
  38. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  39.  
  40.  
  41.  
  42. //Fade in the Popup and add close button
  43.  
  44. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  45.  
  46.  
  47. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  48.  
  49. var popMargTop = ($('#' + popID).height() + 80) / 2;
  50.  
  51. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  52.  
  53.  
  54.  
  55. //Apply Margin to Popup
  56.  
  57. $('#' + popID).css({
  58.  
  59. 'margin-top' : -popMargTop,
  60.  
  61. 'margin-left' : -popMargLeft
  62.  
  63. });
  64.  
  65.  
  66.  
  67. //Fade in Background
  68.  
  69. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  70.  
  71. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  72.  
  73.  
  74.  
  75. return false;
  76.  
  77. });
  78.  
  79.  
  80.  
  81. //Close Popups and Fade Layer
  82.  
  83. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  84.  
  85. $('#fade , .popup_block').fadeOut(function() {
  86.  
  87. $('#fade, a.close').remove(); //fade them both out
  88.  
  89. });
  90.  
  91. return false;
  92.  
  93. });
  94.  
  95.  
  96.  
  97.  
  98.  
  99. });
  100.  
  101. </script>
  102. <head>
  103.  
  104. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  105.  
  106. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  107.  
  108. <script>
  109.  
  110. (function($){
  111.  
  112. $(document).ready(function(){
  113.  
  114. $("a[title]").style_my_tooltips({
  115.  
  116. tip_follows_cursor:true,
  117.  
  118. tip_delay_time:30,
  119.  
  120. tip_fade_speed:30,
  121.  
  122. attribute:"title"
  123.  
  124. });
  125.  
  126. });
  127.  
  128. })(jQuery);
  129.  
  130. </script>
  131.  
  132. <title>{Title}</title>
  133. <link rel="shortcut icon" href="{Favicon}">
  134. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  135.  
  136. <style type="text/css">
  137.  
  138. ::-moz-selection {
  139. color: #a2a3c8;
  140. background: transparent;
  141. }
  142.  
  143. ::selection {
  144. color: #a2a3c8;
  145. background: transparent;
  146. }
  147.  
  148. #s-m-t-tooltip {
  149. max-width:300px;
  150. height:auto;
  151. background-color:#000;
  152. font-size:10px;
  153. color:#fff;
  154. letter-spacing:1px;
  155. text-transform:lowercase;
  156. font-style:italic;
  157. font-family:times;
  158. font-size:12px;
  159. border:1px solid #fff;
  160. padding:7px;
  161. margin:0px 20px 0px 20px;
  162. z-index:9999999999999999999999;
  163. }
  164.  
  165. #fade {
  166. display: none;
  167. background: #000; /* background colour */
  168. position: fixed;
  169. left: 0;
  170. top: 0;
  171. width: 100%;
  172. height: 400px;
  173. opacity: .60; /* background opacity; 0.70 would go for 70% */
  174. z-index: 9999;
  175. color:#fff;
  176. }
  177.  
  178. .popup_block{
  179. display: none;
  180. border:1px solid #fff;
  181. padding:10px;
  182. background:#000; /* square colour; if you don't want one write none*/
  183. opacity:1;
  184. padding: 20px;
  185. float: left;
  186. height: 400px;
  187. position: fixed;
  188. top: 50%;
  189. left: 50%;
  190. overflow:auto;
  191. z-index: 99999;
  192. color:#fff;
  193. font-size:12px;
  194. text-align:center;
  195. text-transform:uppercase;
  196. }
  197.  
  198. .popup_block a {
  199. height:200px;
  200. word-spacing:3px;
  201. margin-top:10px;
  202. margin-bottom:10px;
  203. padding:5px;
  204. line-height:27px;
  205. border-bottom:1px solid #888;
  206. transition:all 0.5s;
  207. }
  208.  
  209. .popup_block a:hover {
  210. height:200px;
  211. margin-top:10px;
  212. padding-left:100px;
  213. padding-right:100px;
  214. transition:all 0.5s;
  215. }
  216.  
  217. img.btn_close {
  218. float: right;
  219. margin: -55px -55px 0 0;
  220. }
  221.  
  222. *html #fade {
  223. position: absolute;
  224. }
  225.  
  226. *html .popup_block {
  227. position: absolute;
  228. }
  229.  
  230. body {
  231. background-color:#000;
  232. color:#fff;
  233. font-family:times;
  234. text-align:justify;
  235. }
  236.  
  237. a {
  238. color:#777;
  239. text-decoration:none;
  240. transition:all 0.5s;
  241. -webkit-transition:0.5s;
  242. -moz-transition:0.5s;
  243. -ms-transition:0.5s;
  244. -o-transition:0.5s;
  245. }
  246.  
  247. a:hover {
  248. color:#a2a3c8;
  249. transition:all 0.5s;
  250. -webkit-transition:0.5s;
  251. -moz-transition:0.5s;
  252. -ms-transition:0.5s;
  253. -o-transition:0.5s;
  254. }
  255.  
  256. #paget {
  257. color:#fff;
  258. font-weight:bold;
  259. letter-spacing:-3px;
  260. font-size:35px;
  261. text-align:center;
  262. text-transform:none;
  263. margin-top:160px;
  264. margin-left:auto;
  265. margin-right:auto;
  266. font-style:italic;
  267. transition:all 0.5s;
  268. -webkit-transition:0.5s;
  269. -moz-transition:0.5s;
  270. -ms-transition:0.5s;
  271. -o-transition:0.5s;
  272. }
  273.  
  274. #toplinks {
  275. margin-left:auto;
  276. margin-right:auto;
  277. text-align:center;
  278. font-size:20px;
  279. margin-top:22px;
  280. }
  281.  
  282. #toplinks a {
  283. margin:0 20px;
  284. text-transform:uppercase;
  285. font-weight:none;
  286. transition:all 0.5s;
  287. -webkit-transition:0.5s;
  288. -moz-transition:0.5s;
  289. -ms-transition:0.5s;
  290. -o-transition:0.5s;
  291. }
  292.  
  293. #toplinks a:hover {
  294. color:#a2a3c8;
  295. font-style:italic;
  296. transition:all 0.5s;
  297. -webkit-transition:0.5s;
  298. -moz-transition:0.5s;
  299. -ms-transition:0.5s;
  300. -o-transition:0.5s;
  301. }
  302.  
  303. #txt {
  304. position:fixed;
  305. font-family:times;
  306. text-transform:none;
  307. font-size:16px;
  308. right:22px;
  309. bottom:25px;
  310. padding:5px;
  311. color:#888;
  312. -webkit-transition:0.5s;
  313. -moz-transition:0.5s;
  314. -ms-transition:0.5s;
  315. -o-transition:0.5s;
  316. }
  317.  
  318. #txt a {
  319. padding:5px;
  320. display:inline-block;
  321. border:1px solid #fff;
  322. border-radius:100%;
  323. width:50%;
  324. height:50%;
  325. background-color:none;
  326. -webkit-transition:0.5s;
  327. -moz-transition:0.5s;
  328. -ms-transition:0.5s;
  329. -o-transition:0.5s;
  330. }
  331.  
  332. #txt a:hover {
  333. background-color:#fff;
  334. display:inline-block;
  335. border:1px solid #000;
  336. border-radius:100%;
  337. width:50%;
  338. height:50%;
  339. color:#000;
  340. -webkit-transition:0.5s;
  341. -moz-transition:0.5s;
  342. -ms-transition:0.5s;
  343. -o-transition:0.5s;
  344. }
  345.  
  346. #borderline {
  347. margin-top:50px;
  348. border-bottom:1px solid #fff;
  349. width:700px;
  350. margin-left:auto;
  351. margin-right:auto;
  352. }
  353.  
  354. #groups {
  355. padding:20px;
  356. font-size:20px;
  357. color:#fff;
  358. text-align:center;
  359. margin-top:50px;
  360. line-height:43px;
  361. width:700px;
  362. margin-left:auto;
  363. margin-right:auto;
  364. }
  365.  
  366. #groups a {
  367. letter-spacing:-1px;
  368. font-style:italic;
  369. font-weight:80%;
  370. margin:0 100px;
  371. font-family:times;
  372. }
  373.  
  374. #groups a:hover {
  375. color:#fff;
  376. cursor:help;
  377. }
  378.  
  379. ::-webkit-scrollbar {
  380. width: 4px;
  381. height: 3px;
  382. background: #000;
  383. }
  384.  
  385. ::-webkit-scrollbar-thumb {
  386. background-color:#fff;
  387. border: 1px solid #fff;
  388. }
  389.  
  390. </style></head><body>
  391.  
  392. <!-- BEGIN TOPBAR -->
  393. <!-- BEGIN PAGE TITLE -->
  394. <div id="paget">
  395. <strong><span style="color:#a2a3c8;">n</span></strong>avigation;
  396. </div>
  397. <!-- END PAGE TITLE -->
  398.  
  399. <!-- BEGIN LINKS -->
  400. <div id="toplinks">
  401. <a href="/" title="index">I.</a>
  402. <a href="/ask" title="message">II.</a>
  403. <a href="/" title="once">III.</a>
  404. <a href="/" title="twice">IV.</a>
  405. <a href="/" title="thrice">V.</a>
  406. </div>
  407. <!-- END LINKS
  408. <!-- END TOPBAR -->
  409.  
  410. <div id="borderline"></div>
  411.  
  412. <!-- BEGIN TAG GROUPS -->
  413. <div id="groups">
  414. <a href="#?w=500" rel="popup1" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading one</a>
  415.  
  416. <a href="#?w=500" rel="popup2" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading two</a>
  417.  
  418. <a href="#?w=500" rel="popup3" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading three</a>
  419.  
  420. <a href="#?w=500" rel="popup4" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading four</a>
  421.  
  422. <a href="#?w=500" rel="popup5" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading five</a>
  423.  
  424. <a href="#?w=500" rel="popup6" class="poplight"><strong><span style="color:#a2a3c8;">H</span></strong>eading six</a>
  425. </div>
  426. <!-- END TAG GROUPS -->
  427.  
  428. <!-- BEGIN TAGS -->
  429.  
  430. <!-- BEGIN FIRST GROUP -->
  431. <div id="popup1" class="popup_block">
  432. <a href="/tagged/">tag number one</a> <br>
  433. <a href="/tagged/">tag number two</a> <br>
  434. <a href="/tagged/">tag number three</a> <br>
  435. <a href="/tagged/">tag number four</a> <br>
  436. <a href="/tagged/">tag number five</a> <br>
  437. <a href="/tagged/">tag number six</a> <br>
  438. <a href="/tagged/">tag number seven</a> <br>
  439. <a href="/tagged/">tag number eight</a> <br>
  440. <a href="/tagged/">tag number nine</a> <br>
  441. <a href="/tagged/">tag number ten</a>
  442. </div>
  443. <!-- END FIRST GROUP -->
  444.  
  445.  
  446. <!-- BEGIN SECOND GROUP -->
  447. <div id="popup2" class="popup_block">
  448. <a href="/tagged/">tag number one</a> <br>
  449. <a href="/tagged/">tag number two</a> <br>
  450. <a href="/tagged/">tag number three</a> <br>
  451. <a href="/tagged/">tag number four</a> <br>
  452. <a href="/tagged/">tag number five</a> <br>
  453. <a href="/tagged/">tag number six</a> <br>
  454. <a href="/tagged/">tag number seven</a> <br>
  455. <a href="/tagged/">tag number eight</a> <br>
  456. <a href="/tagged/">tag number nine</a> <br>
  457. <a href="/tagged/">tag number ten</a> <br>
  458. <a href="/tagged/">tag number eleven</a>
  459. </div>
  460. <!-- END SECOND GROUP -->
  461.  
  462. <!-- BEGIN THIRD GROUP -->
  463. <div id="popup3" class="popup_block">
  464. <a href="/tagged/">tag number one</a> <br>
  465. <a href="/tagged/">tag number two</a> <br>
  466. <a href="/tagged/">tag number three</a> <br>
  467. <a href="/tagged/">tag number four</a> <br>
  468. <a href="/tagged/">tag number five</a> <br>
  469. <a href="/tagged/">tag number six</a> <br>
  470. <a href="/tagged/">tag number seven</a> <br>
  471. <a href="/tagged/">tag number eight</a> <br>
  472. <a href="/tagged/">tag number nine</a> <br>
  473. <a href="/tagged/">tag number ten</a> <br>
  474. <a href="/tagged/">tag number eleven</a> <br>
  475. <a href="/tagged/">tag number twelve</a>
  476. </div>
  477. <!-- END THIRD GROUP -->
  478.  
  479. <!-- BEGIN FOURTH GROUP -->
  480. <div id="popup4" class="popup_block">
  481. <a href="/tagged/">tag number one</a> <br>
  482. <a href="/tagged/">tag number two</a> <br>
  483. <a href="/tagged/">tag number three</a> <br>
  484. <a href="/tagged/">tag number four</a> <br>
  485. <a href="/tagged/">tag number five</a> <br>
  486. <a href="/tagged/">tag number six</a> <br>
  487. <a href="/tagged/">tag number seven</a> <br>
  488. <a href="/tagged/">tag number eight</a> <br>
  489. <a href="/tagged/">tag number nine</a> <br>
  490. <a href="/tagged/">tag number ten</a> <br>
  491. <a href="/tagged/">tag number eleven</a> <br>
  492. <a href="/tagged/">tag number twelve</a> <br>
  493. <a href="/tagged/">tag number thirteen</a>
  494. </div>
  495. <!-- END FOURTH GROUP -->
  496.  
  497. <!-- BEGIN FIFTH GROUP -->
  498. <div id="popup5" class="popup_block">
  499. <a href="/tagged/">tag number one</a> <br>
  500. <a href="/tagged/">tag number two</a> <br>
  501. <a href="/tagged/">tag number three</a> <br>
  502. <a href="/tagged/">tag number four</a> <br>
  503. <a href="/tagged/">tag number five</a> <br>
  504. <a href="/tagged/">tag number six</a> <br>
  505. <a href="/tagged/">tag number seven</a> <br>
  506. <a href="/tagged/">tag number eight</a> <br>
  507. <a href="/tagged/">tag number nine</a> <br>
  508. <a href="/tagged/">tag number ten</a> <br>
  509. <a href="/tagged/">tag number eleven</a> <br>
  510. <a href="/tagged/">tag number twelve</a> <br>
  511. <a href="/tagged/">tag number thirteen</a> <br>
  512. <a href="/tagged/">tag number fourteen</a>
  513. </div>
  514. <!-- END FIFTH GROUP -->
  515.  
  516. <!-- BEGIN SIXTH GROUP -->
  517. <div id="popup6" class="popup_block">
  518. <a href="/tagged/">tag number one</a> <br>
  519. <a href="/tagged/">tag number two</a> <br>
  520. <a href="/tagged/">tag number three</a> <br>
  521. <a href="/tagged/">tag number four</a> <br>
  522. <a href="/tagged/">tag number five</a> <br>
  523. <a href="/tagged/">tag number six</a> <br>
  524. <a href="/tagged/">tag number seven</a> <br>
  525. <a href="/tagged/">tag number eight</a> <br>
  526. <a href="/tagged/">tag number nine</a> <br>
  527. <a href="/tagged/">tag number ten</a> <br>
  528. <a href="/tagged/">tag number eleven</a> <br>
  529. <a href="/tagged/">tag number twelve</a> <br>
  530. <a href="/tagged/">tag number thirteen</a> <br>
  531. <a href="/tagged/">tag number fourteen</a> <br>
  532. <a href="/tagged/">tag number fifteen</a>
  533. </div>
  534. <!-- END SIXTH GROUP -->
  535.  
  536. <!-- END TAGS -->
  537.  
  538. <div id="txt"><a href="http://chochang.co.vu/" target="_blank" title="sparrow's themes">S</a></div>
  539.  
  540. </html></body>
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!