forked from thomd/jquery-scroll
/
bookmarklet.html
75 lines (71 loc) · 4.31 KB
/
bookmarklet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery-scroll testing bookmarklet</title>
<style type="text/css">
body {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:38px;letter-spacing:-0.03em;line-height:1.3em;margin:50px;color:#333;background:#EEE;text-shadow:1px 1px 0 #FFF;}
h1 {font-weight:bold;}
section {display:block;padding-top:50px;}
em {font-weight:bold;font-style:normal;}
a {color:#FF2125;cursor:pointer;display:inline-block;text-decoration:none;line-height:1em;}
a:hover {border-bottom:4px solid #FF2125;}
.bookmarklet {background:#FFF;margin:0 -50px;padding:0 50px;text-shadow:none;font-weight:bold;}
.bookmarklet a {background:#FF2125;color:#FFF;padding:7px 0 10px 19px;margin-left:20px;font-weight:normal;border:none;position:relative;z-index:1;}
.bookmarklet a:after {content:"";border:50px solid #FF2125;border-color:transparent;border-left-color:#FF2125;width:0;height:0;display:block;position:absolute;top:-22px;right:-84px;z-index:-1;}
pre {line-height:1em;margin:0;display:none;background:#FFF;margin:25px -50px;padding:25px 50px;}
code {font-weight:normal;font-size:24px;color:#777;line-height:1em;text-shadow:none;}
footer {padding-top:50px;}
</style>
</head>
<body>
<header>
<h1>jquery-scroll testing bookmarklet</h1>
</header>
<section>
<p>This bookmarklet enables you to test the unobtrusive jquery-scroll plugin on your webpage before implementing it. The scrollbar of all elements with an overflow of <em>auto</em> or <em>scroll</em> will be replaced with a custom scrollbar.</p>
<p class="bookmarklet">Drag this link to your Bookmarks Bar : <a href="javascript:(function(){if(typeof%20jQuery==%22undefined%22){var%20c=typeof%20$==%22function%22;a(function(){if(c){jQuery.noConflict()}b()})}else{b()}function%20b(){jQuery(%22<link>%22).attr({type:%22text/css%22,rel:%22stylesheet%22,href:%22https://github.com/thomd/jquery-scroll/raw/master/css/scrollbar.css%22}).appendTo(%22head%22);jQuery.getScript(%22https://github.com/thomd/jquery-scroll/raw/master/jquery.scroll.js%22,function(){jQuery(%22*%22).filter(function(){return%20jQuery(this).css(%22overflow%22).match(/auto|scroll/)||jQuery(this).css(%22overflow-y%22).match(/auto|scroll/)}).scrollbar()})}function%20a(f){var%20e=document.createElement(%22script%22);e.src=%22http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js%22;var%20d=false;e.onload=e.onreadystatechange=function(){if(!d&&(!this.readyState||this.readyState==%22loaded%22||this.readyState==%22complete%22)){d=true;f()}};document.getElementsByTagName(%22head%22)[0].appendChild(e)}})();">jquery-scroll testing</a></p>
</section>
<section>
<a class="source" href="#">view formatted bookmarklet source</a>
<pre><code>(function(){
if(typeof jQuery == 'undefined'){
var otherlib = typeof $ == 'function';
loadJQuery(function(){
if(otherlib) jQuery.noConflict();
loadScrollbar();
});
} else {
loadScrollbar();
}
function loadScrollbar(){
jQuery("<link>").attr({
type : 'text/css',
rel : 'stylesheet',
href : 'https://github.com/thomd/jquery-scroll/raw/master/css/scrollbar.css'
}).appendTo('head');
jQuery.getScript('https://github.com/thomd/jquery-scroll/raw/master/jquery.scroll.js', function(){
jQuery('*').filter(function(){return jQuery(this).css('overflow').match(/auto|scroll/) || jQuery(this).css('overflow-y').match(/auto|scroll/)}).scrollbar();
});
}
function loadJQuery(fn){
var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
var done = false;
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
fn();
}
};
document.getElementsByTagName('head')[0].appendChild(script);
}
})();</code></pre>
</section>
<footer>
<a href="http://github.com/thomd/jquery-scroll">jquery-scroll on Github</a>
</footer>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">$('.source').click(function(ev){ev.preventDefault();$('pre').slideToggle('slow')});</script>
</body>
</html>