API tools faq
paste
Advertisement
Noir-Et-Blanc

Theme 01. {Memories}

Noir-Et-Blanc
Jun 27th, 2017
954
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.22 KB | None | 0 0
raw download clone embed print report
  1. <!-- Theme 01
  2.  
  3. {. Memories .}
  4.  
  5. Theme #01. (Memories)
  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. Profile Preview: https://www.pixiv.net/member.php?id=328608
  13. Photoset code: http://gukthemes.com/post/149193631486/tutorial-540pxresponsive-photosets
  14.  
  15. -->
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="http://www.w3.org/1999/xhtml">
  19. <head>
  20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  24. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  25. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  26. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  27. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  28. <link href="https://fonts.googleapis.com/css?family=Marvel|Reenie+Beanie" rel="stylesheet">
  29.  
  30. <title>{Title}</title>
  31.  
  32. <!-- Images -->
  33. <meta name="image:Profile Image" content="http://static.tumblr.com/g703xso/VFsos7bn0/picture.png"/>
  34. <meta name="image:Sidebar BG" content="http://static.tumblr.com/g703xso/hn0os7c1v/bg.png"/>
  35. <meta name="image:Content BG" content="http://static.tumblr.com/g703xso/2Acos7c6m/bg2.png"/>
  36.  
  37. <!-- Colors:Sidebar -->
  38. <meta name="color:Scrollbar" content="#2e2e2e"/>
  39. <meta name="color:Scrollbar BG" content="#F5F5F5"/>
  40. <meta name="color:Sidebar Background" content="#2e2e2e"/>
  41. <meta name="color:Sidebar Title" content="#fff"/>
  42. <meta name="color:Sidebar Font" content="#fff"/>
  43. <meta name="color:Profile Border" content="#e2e2e2"/>
  44. <meta name="color:Profile Subtitle" content="#fff"/>
  45. <meta name="color:Sidebar Links" content="#fff"/>
  46. <meta name="color:Sidebar Links Background" content="transparent"/>
  47. <meta name="color:Sidebar Link Hover" content="#000"/>
  48.  
  49. <!-- Colors:Content -->
  50. <meta name="color:Content Background" content="#fff"/>
  51. <meta name="color:Content Font" content="#000"/>
  52. <meta name="color:Posts Links" content="#83939B"/>
  53. <meta name="color:Posts Background" content="#fff"/>
  54. <meta name="color:Tags Color" content="#fff"/>
  55. <meta name="color:Posts Border" content="#2e2e2e"/>
  56.  
  57. <!-- Content Size -->
  58. <meta name="if:500pxPosts" content="1"/>
  59. <meta name="if:400pxPosts" content="0"/>
  60.  
  61. <!-- Links -->
  62. <meta name="text:Subtitle" content=""/>
  63. <meta name="text:Link1" content=""/>
  64. <meta name="text:Link1URL" content=""/>
  65. <meta name="text:Link2" content=""/>
  66. <meta name="text:Link2URL" content=""/>
  67. <meta name="text:Link3" content=""/>
  68. <meta name="text:Link3URL" content=""/>
  69. <meta name="text:Link4" content=""/>
  70. <meta name="text:Link4URL" content=""/>
  71. <meta name="text:Link5" content=""/>
  72. <meta name="text:Link5URL" content=""/>
  73. <meta name="text:Link6" content=""/>
  74. <meta name="text:Link6URL" content=""/>
  75.  
  76. <style>
  77.  
  78. a{
  79. color:{color:Posts Links};
  80. }
  81.  
  82. pre{
  83. background:#ededed;
  84. padding:10px;
  85. }
  86.  
  87. ::-webkit-scrollbar-track
  88. {
  89. border: 1px solid {color:Scrollbar};
  90. background-color: {color:Scrollbar BG};
  91. }
  92.  
  93. ::-webkit-scrollbar
  94. {
  95. width: 5px;
  96. background-color: {color:Scrollbar BG};
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb
  100. {
  101. background-color: {color:Scrollbar};
  102. }
  103.  
  104. body{
  105. background:{color:Content Background};
  106. background-image: url("{image:Content BG}");
  107. background-attachment: fixed;
  108. margin:0;
  109. padding:0;
  110. font-family: 'Marvel', sans-serif;
  111. color: {color:Sidebar Font};
  112. }
  113.  
  114. a{
  115. -moz-transition:all .5s ease-in-out;
  116. -webkit-transition:all .5s ease-in-out;
  117. -o-transition:all .5s ease-in-out;
  118. transition:all .5s ease-in-out;
  119. cursor: crosshair;
  120. }
  121.  
  122. .ss{
  123. position:fixed;
  124. background: {color:Sidebar Background};
  125. background-image: url("{image:Sidebar BG}");
  126. width:350px;
  127. height:100%;
  128. }
  129.  
  130. .sidebar{
  131. position: absolute;
  132. height: 100%;
  133. width: 250px;
  134. text-align: center;
  135. left: 50px;
  136. }
  137.  
  138. .pixbox{
  139. position: relative;
  140. margin-top: 10px;
  141. }
  142.  
  143. .pix{
  144. display: inline-block;
  145. height: 200px;
  146. width: 200px;
  147. border: 10px solid {color:Profile Border};
  148. border-bottom:50px solid {color:Profile Border};
  149. overflow:hidden;
  150. }
  151.  
  152. .pix img{
  153. max-height: 200px;
  154. }
  155.  
  156. .pixstamp{
  157. position: absolute;
  158. bottom: -6px;
  159. left: 2px;
  160. width: 50px;
  161. height: 25px;
  162. background: rgba(255, 255, 255, 0.61);
  163. -ms-transform: rotate(7deg); /* IE 9 */
  164. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  165. transform: rotate(20deg);
  166. z-index: 1;
  167. }
  168.  
  169. .pixstamp2{
  170. position: absolute;
  171. top:-6px;
  172. right: -2px;
  173. width: 50px;
  174. height: 25px;
  175. background: rgba(255, 255, 255, 0.61);
  176. -ms-transform: rotate(7deg); /* IE 9 */
  177. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  178. transform: rotate(45deg);
  179. z-index: 1;
  180. }
  181.  
  182. .pixstamp3{
  183. position: absolute;
  184. top:-6px;
  185. left:0;
  186. width: 50px;
  187. height: 25px;
  188. background: rgba(255, 255, 255, 0.61);
  189. -ms-transform: rotate(7deg); /* IE 9 */
  190. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  191. transform: rotate(-35deg);
  192. z-index: 1;
  193. }
  194.  
  195. .pixstamp4{
  196. position: absolute;
  197. bottom: -5px;
  198. right: 0;
  199. width: 50px;
  200. height: 25px;
  201. background: rgba(255, 255, 255, 0.61);
  202. -ms-transform: rotate(7deg); /* IE 9 */
  203. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  204. transform: rotate(-30deg);
  205. z-index: 1;
  206. }
  207.  
  208. .titlebox{
  209. width: 100%;
  210. margin-top: 40px;
  211. font-family: 'Reenie Beanie', cursive;
  212. font-size: 30px;
  213. color:{color:Sidebar Title};
  214. }
  215.  
  216. .subtitlebox{
  217. width: 100%;
  218. margin-top: 15px;
  219. font-family: 'Reenie Beanie', cursive;
  220. font-size: 20px;
  221. color:{color:Sidebar Subtitle};
  222. }
  223.  
  224. .descbox{
  225. margin-top: 10px;
  226. font-size: 12px;
  227. }
  228.  
  229. .linkbox{
  230. margin-top: 10px;
  231. }
  232.  
  233. .linkbox a{
  234. display: block;
  235. color:{color:Sidebar Links};
  236. background:{color:Sidebar Links Background};
  237. text-decoration: none;
  238. border-bottom: 2px solid {color:Sidebar Links};
  239. margin: 10px 0;
  240. font-family: 'Reenie Beanie', cursive;
  241. font-size: 18px;
  242. }
  243.  
  244. .linkbox a:hover{
  245. border-bottom: 2px solid {color:Sidebar Link Hover};
  246. letter-spacing: 2px;
  247. }
  248.  
  249. .content{
  250. position:absolute;
  251. left:350px;
  252. right:0;
  253. height:100%;
  254. padding-bottom:20px;
  255. color:{color:Content Font};
  256. }
  257.  
  258. .post{
  259. margin:25px 0 25px 50px;
  260. {block:If500pxPosts}width:500px;{/block:if500pxPosts}
  261. {block:If400pxPosts}width:400px; {/block:if400pxPosts}
  262. position:relative;
  263. background:{color:Posts Background};
  264. -webkit-box-shadow: 2px 2px 17px -4px rgba(0,0,0,1);
  265. -moz-box-shadow: 2px 2px 17px -4px rgba(0,0,0,1);
  266. box-shadow: 2px 2px 17px -4px rgba(0,0,0,1);
  267. border:1px solid {color:Posts Border};
  268. z-index:100;
  269. font-size:14px;
  270. }
  271.  
  272. .post blockquote{
  273. margin-left:15px;
  274. padding-left:10px;
  275. border-left:1px solid {color:Posts Border};
  276. }
  277.  
  278. .title{
  279. display:block;
  280. padding-top:5px;
  281. text-align:center;
  282. font-size:30px;
  283. letter-spacing:3px;
  284. border-bottom:1px solid {color:Posts Border};
  285. padding:5px 0 5px; 0
  286. }
  287.  
  288. .title a{
  289. text-decoration:none;
  290. color:{color:Posts Border} !important;
  291. }
  292.  
  293. .post a{
  294. color:{color:Posts Links};
  295. }
  296.  
  297. .post img{
  298. max-width: 100%;
  299. height:auto;
  300. }
  301.  
  302. .info{
  303. position:absolute;
  304. font-size:12px;
  305. right:0;
  306. top:-1px;
  307. width:80px;
  308. height:auto;
  309. color:{color:Content Font};
  310. background:{color:Posts Background};
  311. border:1px solid {color:Posts Border};
  312. padding:5px 0 10px 20px;
  313. -moz-transition:all .35s ease-in-out;
  314. -webkit-transition:all .35s ease-in-out;
  315. -o-transition:all .35s ease-in-out;
  316. transition:all .35s ease-in-out;
  317. opacity:0;
  318. z-index:-99;
  319.  
  320. }
  321.  
  322. .post:hover .info{
  323. right:-115px;
  324. opacity:1;
  325. }
  326.  
  327. .info a{
  328. text-decoration:none;
  329. color:{color:Content Font};
  330. display:inline-block;
  331. padding:5px 30px 5px 0;
  332. }
  333.  
  334. .tagbox{
  335. padding:5px;
  336. background:{color:Posts Border};
  337. color:{color:Tags color};
  338. font-size:12px;
  339. }
  340.  
  341. .tagbox a{
  342. color:{color:Tags color};
  343. text-decoration:none;
  344. padding:0 5px;
  345. display:inline-block;
  346. }
  347.  
  348. .pagination a{
  349. color:{color:Sidebar Links};
  350. text-decoration:none;
  351. display:inline-block;
  352. }
  353.  
  354. .current_page{
  355. color:{color:Sidebar Link Hover};
  356. }
  357.  
  358.  
  359. .questionbox{
  360. background:{color:Posts Border};
  361. color:{color:Tags color};
  362. }
  363.  
  364. .questionbox a{
  365. color:{color:Tags color};
  366. text-decoration:none;
  367. font-size:12px;
  368. }
  369.  
  370. .askerportrait{
  371. display:inline-block;
  372. margin:5px 0 5px 5px;
  373. }
  374. .askerportrait img{
  375. border-radius:50px;
  376. }
  377.  
  378. .askerurl{
  379. display:inline-block;
  380. position:relative;
  381. top:-15px;
  382. }
  383.  
  384. .question{
  385. display:block;
  386. padding:0 10px 10px 10px;
  387. }
  388.  
  389. .answer{
  390. display:block;
  391. margin:0;
  392. padding:0 10px;
  393. }
  394.  
  395. .caption{
  396. padding:0 10px;
  397. }
  398.  
  399. .quote{
  400. font-size:40px;
  401. padding-bottom:4px;
  402. }
  403.  
  404. .quote i{
  405. display:inline-block;
  406. margin-top:5px;
  407. margin-left:5px;
  408. font-size: 15px;
  409. vertical-align:top;
  410. }
  411. .source{
  412. font-size:14px;
  413. text-align:right;
  414. background:{color:Posts Border};
  415. color:{color:Tags color};
  416. padding:10px;
  417. }
  418.  
  419. .source::after{
  420. margin-left:5px;
  421. content:"-";
  422. }
  423.  
  424. .linkpost{
  425. background:{color:Posts Border};
  426. padding:10px 0;
  427. font-size:26px;
  428. text-align:center;
  429. }
  430.  
  431. .linkpost a{
  432. text-decoration:none;
  433. color:{color:Tags color};
  434. }
  435.  
  436. .reblog-button, .like-button{
  437. display:inline-block;
  438. }
  439.  
  440. .line.odd {
  441. padding:5px;
  442. list-style:none;
  443. background:{color:Posts Border};
  444. color:{color:Tags color};
  445. }
  446.  
  447. .line.even {
  448. padding:5px;
  449. list-style:none;
  450. }
  451.  
  452. .player {
  453. position:absolute;
  454. margin-left:30px;
  455. margin-top:30px;
  456. width:29px;
  457. height:30px;
  458. overflow:hidden;
  459. z-index:9999;
  460. }
  461.  
  462. .audioart{
  463. background:{color:Posts Border};
  464. padding:10px;
  465. width:90px;
  466. height:90px;
  467. position:relative;
  468. float:left;
  469. border-right:1px solid {color:Posts Border};
  470. border-bottom:1px solid {color:Posts Border};
  471. }
  472.  
  473. .audioinfo {
  474. font-size:14px;
  475. position:relative;
  476. padding:33px;
  477. margin-left:100px;
  478. border-bottom:1px solid {color:Posts Border};
  479. }
  480.  
  481. .tracktitle{
  482. padding-top:10px;
  483. text-transform:uppercase;
  484. letter-spacing:2px;
  485. font-weight:600;
  486. }
  487.  
  488. .pagination i{
  489. display:inline-block;
  490. margin:0 5px;
  491. }
  492.  
  493. .credit{
  494. position:fixed;
  495. bottom:0;
  496. right:0;
  497. }
  498.  
  499. .credit a{
  500. display:block;
  501. text-decoration:none;
  502. background:{color:Posts Border};
  503. color:{color:Tags color};
  504. padding:8px 5px 5px 12px;
  505. border-radius:50px 0 0 5px;
  506. }
  507.  
  508. .tooltip {
  509. display:none;
  510. position:absolute;
  511. border:1px solid #333;
  512. background-color:{color:Posts Border};
  513. border-radius:5px;
  514. padding:5px;
  515. color:{color:Tags color};
  516. font-size:12px;
  517. z-index:9999;
  518. }
  519. </style>
  520. </head>
  521. <body>
  522.  
  523. <div class="ss">
  524. <div class="sidebar">
  525.  
  526. <div class="titlebox">{Title}</div>
  527. <div class="pixbox">
  528. <div class="pixstamp"></div><div class="pixstamp2"></div><div class="pixstamp3"></div><div class="pixstamp4"></div>
  529. <div class="pix"><a href="/"><img src="{image:Profile Image}"></a></div>
  530. </div>
  531.  
  532. <div class="subtitlebox">{text:subtitle}</div>
  533.  
  534. <div class="descbox">
  535. {Description}
  536. </div>
  537.  
  538. <div class="linkbox">
  539. <a href="/">Refresh</a>
  540. {block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
  541. {block:SubmissionsEnabled} <a href="/submit">Submit</a>{/block:SubmissionsEnabled}
  542. {block:ifLink1}<a href="{text:Link1URL}">{text:Link1}</a>{/block:ifLink1}
  543. {block:ifLink2}<a href="{text:Link2URL}">{text:Link2}</a>{/block:ifLink2}
  544. {block:ifLink3}<a href="{text:Link3URL}">{text:Link3}</a>{/block:ifLink3}
  545. {block:ifLink4}<a href="{text:Link4URL}">{text:Link4}</a>{/block:ifLink4}
  546. {block:ifLink5}<a href="{text:Link5URL}">{text:Link5}</a>{/block:ifLink5}
  547. {block:ifLink6}<a href="{text:Link6URL}">{text:Link6}</a>{/block:ifLink6}
  548. </div>
  549.  
  550. {block:Pagination}
  551. <div class="pagination">{block:PreviousPage}
  552. <a href="{PreviousPage}"><div class="jump_page"><i class="fa fa-caret-left" aria-hidden="true"></i></div></a>{/block:PreviousPage}
  553. {block:JumpPagination length="5"}
  554. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  555. {block:JumpPage}<span class="jump_page"><a href="{URL}">{PageNumber}</a></span>{/block:JumpPage}
  556. {/block:JumpPagination}
  557. {block:NextPage}<a href="{NextPage}"><div class="jump_page"><i class="fa fa-caret-right" aria-hidden="true"></i></div></a>{/block:NextPage}
  558. </div>
  559. {/block:Pagination}
  560. </div>
  561. </div>
  562.  
  563. <div class="content">
  564. {block:Posts}
  565. <div class="post">
  566. {block:Text}
  567. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  568. <div class="caption">{Body}</div>
  569. {/block:Text}
  570.  
  571. {block:Answer}
  572. <div class="questionbox">
  573. <div class="askerportrait"><img src="{AskerPortraitURL-40}"></div>
  574. <div class="askerurl">{Asker}:</div><div class="question">{Question}</div>
  575. </div>
  576.  
  577. <div class="answer">{Answer}</div>
  578. {/block:Answer}
  579.  
  580. {block:Quote}
  581. <div class="quote">
  582. <i class="fa fa-quote-left" aria-hidden="true"></i>{Quote}<i class="fa fa-quote-right" aria-hidden="true"></i>
  583. </div>
  584. {block:Source}
  585. <div class="source">{Source}</div>
  586. {/block:Source}
  587. {/block:Quote}
  588.  
  589. {block:Link}
  590. <div class="linkpost">
  591. <a href="{URL}">{Name}</a>
  592. </div>
  593. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  594. {/block:Link}
  595.  
  596. {block:Photo}
  597. {LinkOpenTag}{block:If500pxPosts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:If500pxPosts}
  598. {block:If400pxPosts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxPosts}{LinkCloseTag}
  599. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  600. {/block:Photo}
  601.  
  602. {block:Audio}
  603. <div class="audioart">
  604. <div class="player">{AudioPlayer}</div>
  605. {block:AlbumArt}<img src="{AlbumArtURL}" width="90">{/block:AlbumArt}
  606. </div>
  607.  
  608. <div class="audioinfo">
  609. {block:TrackName}<div class="tracktitle">{TrackName}</div>{/block:TrackName}
  610. {block:Artist}{Artist}{/block:Artist}
  611. </div>
  612. <div class="caption">{Caption}</div>
  613. {/block:Audio}
  614.  
  615.  
  616. {block:Video}
  617. {block:If500pxPosts}{Video-500}{/block:If500pxPosts}
  618. {block:If400pxPosts}{Video-400}{/block:if400pxPosts}
  619. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  620. {/block:Video}
  621.  
  622.  
  623. {block:Chat}
  624. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  625. <div class="chat">{block:Lines}<li class="line {Alt}">{block:Label}<b>{Label}</b>{/block:Label}{Line}</li>{/block:Lines}</div>
  626. {/block:Chat}
  627.  
  628. {block:Photoset}
  629. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  630. {block:Photos}
  631. <div class="photo-data">
  632. <div class="pxu-photo">
  633. {block:If500pxPosts}<img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">{/block:If500pxPosts}
  634.  
  635. {block:If400pxPosts}<img src="{PhotoURL-400}" width="{PhotoWidth-400}" height="{PhotoHeight-400}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">{/block:If400pxPosts}
  636. </div>
  637. </div>
  638. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  639. {/block:Photos}
  640. </div>
  641. {block:Caption}<div class="caption">{Caption}</div> {/block:Caption}
  642. {/block:Photoset}
  643.  
  644. {block:HasTags}
  645. <div class="tagbox">
  646. <i class="fa fa-hashtag" aria-hidden="true"></i>:{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  647. </div>
  648. {/block:HasTags}
  649.  
  650. {block:Date}
  651. <div class="info">
  652. <div class="reblog-button">{ReblogButton color="grey" size="14"}</div>
  653. <div class="reblog-button">{LikeButton color="grey" size="14"}</div>
  654. <a href="{Permalink}">{block:NoteCount}{NoteCountWithLabel}</a>{/block:NoteCount}
  655. <a href="{Permalink}">{TimeAgo}</a>
  656. {block:RebloggedFrom}
  657. <a href="{ReblogParentURL}" title="{ReblogParentName}" class="masterTooltip">source: <img src="{ReblogParentPortraitURL-16}"></a>
  658. <a href="{ReblogRootURL}" title="{ReblogRootName}" class="masterTooltip">origin:<img src="{ReblogRootPortraitURL-16}"></a>{/block:RebloggedFrom}
  659. </div>
  660. {/block:Date}
  661.  
  662. {block:PostNotes}
  663. {PostNotes}
  664. {/block:PostNotes}
  665.  
  666. </div>
  667. {/block:Posts}
  668.  
  669. <div class="credit"><a href="http://noiretblanc-themes.tumblr.com/" title="Noir-et-Blanc" class="masterTooltip"><i class="fa fa-code" aria-hidden="true"></i></a></div>
  670.  
  671. <script>
  672. // PXU Photoset Script by Pixel Union
  673. $(document).ready(function(){
  674. $('.photo-slideshow').pxuPhotoset({
  675. lightbox:true,
  676. rounded:false,
  677. gutter:'0px',
  678. borderRadius:'0px',
  679. photoset:'.photo-slideshow',
  680. photoWrap:'.photo-data',
  681. photo:'.pxu-photo'
  682. });
  683. });
  684.  
  685. $(document).ready(function() {
  686. // Tooltip only Text
  687. $('.masterTooltip').hover(function(){
  688. // Hover over code
  689. var title = $(this).attr('title');
  690. $(this).data('tipText', title).removeAttr('title');
  691. $('<p class="tooltip"></p>')
  692. .text(title)
  693. .appendTo('body')
  694. .fadeIn('slow');
  695. }, function() {
  696. // Hover out code
  697. $(this).attr('title', $(this).data('tipText'));
  698. $('.tooltip').remove();
  699. }).mousemove(function(e) {
  700. var mousex = e.pageX + -80; //Get X coordinates
  701. var mousey = e.pageY + -50; //Get Y coordinates
  702. $('.tooltip')
  703. .css({ top: mousey, left: mousex })
  704. });
  705. });
  706.  
  707. </script>
  708. </body>
  709. </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!