Cleaned out unnecessary code / files (ei: ads)

demo/demo.css

@@ -0,0 +1,266 @@
+/*** layout ***/
+
+body, html {
+    font-family: verdana;
+    font-size: 12px;
+    line-height:20px;
+    color: #333;
+    background-color: #FEFEFE;
+    margin: 0;
+    text-rendering: optimizeLegibility;
+}
+a {
+    color: #3399FF;
+    text-decoration: none;
+}
+code {
+    padding: 1px 3px;
+    color: #D14;
+    background-color: #F7F7F9;
+    border: 1px solid #E1E1E8;
+    border-radius: 5px;
+}
+
+h2 {
+    display: inline-block;
+}
+
+.no-margin-top {
+    margin-top: 0px;
+}
+
+/*** header ***/
+
+header {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: #1B1B1B;
+    background-image: linear-gradient(to bottom, #222222, #111111);
+    background-repeat: repeat-x;
+    border-color: #252525;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+    border-width: 0 0 1px;
+    color: #FFF;
+    font-size: 10px;
+    text-align: left;
+    vertical-align: middle;
+    z-index: 100;
+}
+#header-logo {
+    position: absolute;
+    display: block;
+    width: 94px;
+    height: 20px;
+    left: 10px;
+    top: 10px;
+    background-image: url('./img/websanova-logo-small-full-black.png');
+}
+#header-links {
+    display: none;
+    position: absolute;
+    width: 100%;
+    left: 0px;
+    top: 40px;
+}
+#header-links a {
+    display: block;
+    font-size: 9px;
+    font-weight: bold;
+    font-family: Verdana;
+    color: #FAFAFA;
+    text-transform: uppercase;
+    margin-left: 0px;
+    text-align: center;
+    background-color: #1B1B1B;
+    border-top: solid 1px #CACACA;
+    line-height: 14px;
+    padding: 10px;
+}
+#header-links a:hover {
+    color: #636363;
+}
+
+/*** menu ***/
+
+#header-menu-button {
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    display: block;
+    color: #757575;
+    background-color: #e1e1e1;
+    background-repeat: repeat-x;
+    background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
+    background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
+    background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
+    background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
+    background-image: linear-gradient(top, #ebebeb, #e1e1e1);
+    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
+    border: none;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    padding: 6px 10px;
+    font-size: 11px;
+    line-height: 16px;
+    cursor: pointer;
+}
+
+/*** content ***/
+
+#plugin-name {
+    padding-bottom: 30px;
+    font-size: 24px;
+    border-bottom: solid #CACACA 1px;
+}
+#github-button {
+    display: block;
+    float: left;
+    margin-right: 2px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    background-image: url('./img/addthis-github.png');
+}
+#addthis-toolbox {
+    position: absolute;
+    right: 15px;
+    top: 40px;
+}
+#content {
+    position: relative;
+    background: #FEFEFE;
+    max-width: 728px;
+    padding: 20px;
+    margin: 30px auto;
+}
+.content-box {
+    padding-left: 10px;
+}
+#content ul {
+    padding-left: 30px;
+}
+/*** footer ***/
+
+footer {
+    position: fixed;
+    left: 0px;
+    bottom: -1px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: #1B1B1B;
+    background-image: linear-gradient(to bottom, #222222, #111111);
+    background-repeat: repeat-x;
+    border-color: #252525;
+    box-shadow: 10px 1px 10px rgba(0, 0, 0, 0.5);
+    border-width: 0 0 1px;
+    color: #FFF;
+    font-size: 10px;
+    text-align: left;
+    vertical-align: middle;
+    z-index: 100;
+}
+#footer-icons {
+    position: absolute;
+    right: 10px;
+    top: 0px;
+}
+#footer-icons a {
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+    width: 17px;
+    height: 17px;
+    margin: 12px 0 0 10px;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+#linkedin-icon { background-image: url('./img/linkedin-icon.png'); width: 18px; }
+#stumbleupon-icon { background-image: url('./img/stumbleupon-icon.png'); }
+#googleplus-icon { background-image: url('./img/googleplus-icon.png'); }
+#youtube-icon { background-image: url('./img/youtube-icon.png'); width: 17px; height: 18px; }
+#facebook-icon { background-image: url('./img/facebook-icon.png'); width: 8px; }
+#twitter-icon { background-image: url('./img/twitter-icon.png'); width: 20px; }
+#github-icon { background-image: url('./img/github-icon.png'); width: 20px; }
+#rss-icon { background-image: url('./img/rss-icon.png'); }
+
+
+/*** media ***/
+
+@media screen and (min-width: 600px) {
+    #header-logo {
+        left: 50px;
+    }
+    #footer-icons {
+        left: auto;
+        right: 50px;
+    }
+    #header-links {
+        display: block !important;
+        width: auto;
+        top: 0px;
+        left: auto;
+        right: 50px;
+    }
+    #header-links a {
+        display: inline;
+        font-size: 10px;
+        margin-left: 20px;
+        text-align: left;
+        background-color: none;
+        border-top: 0px;
+        margin-left: 10px;
+        line-height: inherit;
+        padding: 0px;
+    }
+    #header-menu-button {
+        display: none;
+    }
+    #plugin-name {
+        font-size: 30px;
+    }
+    #addthis-toolbox {
+        top: 44px;
+    }
+}
+
+/*** ads ***/
+
+.websanova-plugins-page-horizontal-responsive { display:block; margin:0 auto; width: 320px; height: 50px; }
+@media(min-width: 520px) { .websanova-plugins-page-horizontal-responsive { width: 468px; height: 60px; } }
+@media(min-width: 800px) { .websanova-plugins-page-horizontal-responsive { width: 728px; height: 90px; } }
+
+.adsblock {
+    position: relative;
+    margin: 0 auto;
+}
+.ads2block {
+    margin-top: 20px;
+}
+.adsblock-mobile-banner {
+    width: 320px;
+    height: 50px;
+}
+.adsblock-banner {
+    display: none;
+    width: 468px;
+    height: 60px;
+}
+.adsblock-leaderboard {
+    display: none;
+    width: 728px;
+    height: 90px;
+}
+@media (min-width:520px) {
+    .adsblock-mobile-banner { display: none; }
+    .adsblock-banner { display: block; }
+}
+@media (min-width:800px) {
+    .adsblock-mobile-banner { display: none; }
+    .adsblock-banner { display: none; }
+    .adsblock-leaderboard { display: block; }
+}

index.html

@@ -1,59 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
-
-	<title>mousestop</title>
-
-	<script type="text/javascript" src="./lib/jquery-1.10.1.min.js"></script>
-	<script type="text/javascript" src="./mousestop.js"></script>
+  <meta charset="utf-8">
+  <title>Websanova :: mousestop</title>
+
+  <!-- filestart -->
+  <link rel="icon" type="image/vnd.microsoft.icon"  href="./demo/img/favicon.ico" />
+  <link rel="Stylesheet" type="text/css" href="./demo/demo.css" />
+  <script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
+  <!-- fileend -->
 </head>
 <body>
-	<h1>mousestop</h1>
-
-	<div id="test" style="display:inline-block;padding:20px;border:solid 1px;">test default</div>
-	<div id="test2" style="display:inline-block;padding:20px;border:solid 1px;">test (long) delay</div>
-	<div id="test3" style="display:inline-block;padding:20px;border:solid 1px;">test .on()</div>
-	<div id="test4" style="display:inline-block;padding:20px;border:solid 1px;">test .on() settings</div>
-
-	<script type="text/javascript">
-		// test 1
-		$('#test')
-		.mousestop(function() {
-			console.log('mousestop');
-		})
-		.mousemove(function() {
-			console.log('mousemove');
-		})
-		.mouseover(function() {
-			console.log('mouseover');
-		})
-		.mouseout(function() {
-			console.log('mouseout');
-		});
-
-		$('#test').mousestop();
-		$('#test').trigger('mousestop');
-
-		// test 2
-		$('#test2')
-		.mousestop(2000, function() {
-			console.log('mousestop 2');
-		});
-
-		// test 3
-		$('#test3')
-		.on('mousestop', function() {
-			console.log('mousestop 3');
-		});
-
-		// test 4
-		$('#test4').on('mousestop', {timeToStop:1000}, test);
-
-		function test(e) {
-			console.log(e);
-			console.log('mousestop 4');
-		}
-	</script>
+  <!-- headstart -->
+  <header>
+    <a id="header-logo" href="http://websanova.com"></a>
+
+    <div id="header-links">
+      <a href="http://websanova.com">Blog</a>
+      <a href="http://websanova.com/plugins">Plugins</a>
+      <a href="http://websanova.com/extensions">Extensions</a>
+      <a href="http://websanova.com/services">Services</a>
+    </div>
+  </header>
+  <!-- headend -->
+
+  <div id="content">
+    <h1 id="plugin-name">mousestop.js</h1>
+
+    <div class="content-box">
+      <div id="test" style="display:inline-block;padding:20px;border:solid 1px;">test default</div>
+      <div id="test2" style="display:inline-block;padding:20px;border:solid 1px;">test (long) delay</div>
+      <div id="test3" style="display:inline-block;padding:20px;border:solid 1px;">test .on()</div>
+      <div id="test4" style="display:inline-block;padding:20px;border:solid 1px;">test .on() timeToStop</div>
+
+      <div id="output" style="width:300px;height:150px;margin-top:5px;border:solid #CACACA 1px;overflow:auto;"></div>
+
+      <script type="text/javascript" src="./mousestop.js"></script>
+      <script type="text/javascript">
+        $('#test')
+        .mousestop(function() { $('#output').prepend('mousestop<br/>'); })
+        .mousemove(function() { $('#output').prepend('mousemove<br/>'); })
+        .mouseover(function() { $('#output').prepend('mouseover<br/>'); })
+        .mouseout(function() { $('#output').prepend('mouseout<br/>'); });
+
+        $('#test').mousestop().trigger('mousestop');
+        $('#test2').mousestop(2000, function() { $('#output').prepend('mousestop 2<br/>'); });
+        $('#test3').on('mousestop', function() { $('#output').prepend('mousestop 3<br/>'); });
+        $('#test4').on('mousestop', {timeToStop:1000}, test);
+
+        function test(e) {
+          console.log(e);
+          $('#output').prepend('mousestop 4<br/>');
+        }
+      </script>
+    </div>
+
+  </div>
+
+  <!-- footstart -->
+  <footer>
+    <div id="footer-icons">
+      <!--a id="youtube-icon" href="http://websanova.com/youtube" target="_blank"></a-->
+      <a id="stumbleupon-icon" href="http://websanova.com/stumbleupon" target="_blank"></a>
+      <a id="linkedin-icon" href="http://websanova.com/linkedin" target="_blank"></a>
+      <a id="facebook-icon" href="http://websanova.com/facebook" target="_blank"></a>
+      <a id="googleplus-icon" href="http://websanova.com/googleplus" target="_blank"></a>
+      <a id="twitter-icon" href="http://websanova.com/twitter" target="_blank"></a>
+      <a id="github-icon" href="http://websanova.com/github" target="_blank"></a>
+      <a id="rss-icon" href="http://websanova.com/feed" target="_blank"></a>
+    </div>
+  </footer>
+  <!-- footend -->
 </body>
 </html>