-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (102 loc) · 5.61 KB
/
index.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>dogey.js</title>
<!--[if lt IE 9]>
<script src="resources/third_party/js/html5shiv/html5shiv.min.js"></script>
<script src="resources/third_party/js/html5shiv/html5shiv-printshiv.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="resources/third_party/css/normalize.css" />
<link rel="stylesheet" href="resources/third_party/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="resources/third_party/bootswatch/flatly/bootstrap.min.css" />
<link rel="stylesheet" href="resources/css/styles.css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60077209-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="container">
<header class="row" id="header">
<h1>dogey.js</h1>
<p class="lead">
Finally! A useful javascript doge plugin!
</p>
</header>
</div>
<div class="container">
<main id="main">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 doge_img_wrapper">
<img src="resources/images/doge_large.jpg" class="img-rounded img-responsive" alt="" />
</div>
</div>
<div class="col-lg-6 col-lg-offset-3">
<h2>What is dogey.js?</h2>
<p>
The community has needed something like this ever since the meme's creation. Maybe there is one out there, but I've only ever seen generic ones with static phrases. This one goes of dynamic content from a selected element.
</p>
<p>
Essentially the plugin creates a list of all the words within the selected element, spits them out (in doge meme form) within a container.
</p>
<ul>
<li>You can fade phrases in one after another (or turn it off all together)</li>
<li>Change the offset of the the phrases fading in</li>
<li>Change the duration of the fade</li>
<li>Limit the amount of phrases</li>
<li>Remove certain words that are used in the text that's passed to the plugin</li>
<li>Add extra doge words (like "wow" and "such")</li>
</p>
<div class="col-lg-6 col-lg-offset-3">
<a href="https://github.com/lexbi/dogey.js/tree/master" class="btn btn-block btn-lg btn-primary">Download on GitHub</a>
</div>
</div>
<div class="clear"></div>
<div class="col-lg-8 col-lg-offset-2">
<h3>Example</h3>
</div>
<div class="clear"></div>
<div class="well col-lg-8 col-lg-offset-2 code">
<code>
$(".doge_img_wrapper").dogey({<br>
    heightMode: document, <span class="comment">// The words will load at random points all the way down the document, you can also use "window", make sure not to use quotes for this option. This option will be ignored if a container other than "body" is set.</span><br>
    container:"body", <span class="comment">// The wrapping container element that all the Doge phrases will be injected into</span><br>
    animate: true, <span class="comment">// Will load the words in one after another (using jquery animate), otherwise they'll just appear on doc ready or window load…</span><br>
    offset: 500, <span class="comment">// The offset (in ms) in which the words will fade in</span><br>
    duration: 600, <span class="comment">// The duration of the fadeIn animation</span><br>
    limit:20, <span class="comment">// The amount of doge words that will be added to the page</span><br>
    removeWords:null, <span class="comment">// Remove specific words from the text that gets passed to the plugin, needs to be in quotes and space seperated "like this"</span><br>
    addDogeWords:null, <span class="comment">// Add doge words like "such", "much", "very" needs to be in quotes and space seperated "like this"</span><br>
    overflow:"hidden" <span class="comment">// Sets the overflow of the container element, either you may want "scroll" or "hidden"</span><br>
});
</code>
</div>
<div class="clear"></div>
</main>
</div>
<footer id="footer">
<div class="container">
<div class="row">
<h3 class="footer-title">Developed by</h3>
<p><a href="http://www.joe-pagan.com">Joe Pagan</a>.</p>
</div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// CDN Fallback
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='resources/third_party/js/jquery/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="resources/third_party/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/third_party/flat-ui/js/flat-ui.min.js"></script>
<script src="jquery.dogey.js"></script>
<script src="resources/js/global.js"></script>
</body>
</html>