Commits

msssk  committed a7d6e91

clikkit-demo.html:
- remove: dead code
- add: hot keys info

index.html:
- remove: dead code
- add: more links

  • Participants
  • Parent commits 24ab783

Comments (0)

Files changed (4)

File clikkit-chrome/usage.html

+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	
+	<title></title>
+	<meta name="description" content="">
+	<meta name="author" content="">
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<link rel="stylesheet" href="../css/style.css?v=2">
+
+	<script src="../js/libs/modernizr-1.7.min.js"></script>
+
+<script type="text/javascript">
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-24584990-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+
+</head>
+
+<body>
+
+<div id="container">
+	<header>
+		<h1>Using clikkit</h1>
+	</header>
+
+	<div id="content-container">
+		<div id="section-navigation">
+			<h2>Supported Sites</h2>
+			<ul>
+				<li><a href="http://www.reddit.com/">reddit</a></li>
+				<li><a href="http://news.ycombinator.com/">Hacker News</a></li>
+				<li><a href="http://www.hubski.com/">hubski</a></li>
+				<li><a href="http://www.google.com/search?q=jquery">Google</a>
+				<div class="help">Disabled by default - Tools -> Extensions, then click Options under clikkit to enable</div>
+				</li>
+			</ul>
+		</div>
+		<div id="content">
+			<h2>
+				Queueing Links
+			</h2>
+			<p>
+				You can click multiple links - as you click more, they will load in the background. The current number of links you have queued is displayed to the left of the title in the clikkit pane.
+				When you close a link, the next one is displayed - if there are no more, the clikkit pane closes.
+			</p>
+
+			<h2>
+				Images
+			</h2>
+			<p>
+				You can click on images to toggle between native size and fit-to-frame. Images larger than the pane are displayed fit-to-frame by default; small images are displayed normally.
+			</p>
+
+			<h2>
+				Contracting &amp; Expanding the clikkit Pane
+			</h2>
+			<p>
+				When you hover over a clikkit link, the clikkit pane will contract and become translucent to give you a better view of the links you are looking at to queue up. When you move your mouse
+				back over the clikkit pane, it will expand (or you can use the Hot Keys as described below).
+			</p>
+
+			<h2>
+				Hot Keys
+			</h2>
+			<p>
+				<ul>
+					<li>Close Link - Escape or Keypad minus</li>
+					<li>Expand clikkit - Left arrow or Keypad plus</li>
+				</ul>
+			</p>
+
+			<h2>
+				reddit
+			</h2>
+			<p>
+				<b>IMPORTANT</b>: commenting does not work on reddit in a frame (perhaps some sort of anti-spam/hacking approach by reddit?). If you load reddit comments in clikkit, you can read them
+				and vote, but if you try to comment it will simply hang.  You'll need to open the comments page in a new window to add your own comments. I think this can be fixed by using the reddit API,
+				and doing so is high priority, but non-trivial.
+			</p>
+		</div>
+		<div id="aside">
+		</div>
+		<footer>
+			<a href="index.html" style="float: right;">Mangala Sadhu Sangeet Singh Khalsa</a>
+			<div class="clearfix"></div>
+		</footer>
+	</div>
+</div>
+
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
+	<script src="https://bitbucket.org/msssk/clikkit/raw/a841bd219400/clikkit.js"></script>
+	<script src="https://bitbucket.org/msssk/clikkit/raw/a841bd219400/stompit.js"></script>
+	<script src="https://bitbucket.org/msssk/clikkit-chrome/raw/3b2164b4b6d9/lib/hoverIntent.js"></script>
+	<script src="../js/script.js"></script>
+
+<script>
+(function() {
+
+}());
+</script>
+</body>
+</html>

File clikkit-demo.html

 </head>
 
 <body>
-<!--
-	<div id="container">
-		<header>
-			<h1>Mangala Sadhu Sangeet Singh Khalsa</h1>
-		</header>
 
-		<div id="main" role="main">
-			<div id="left-nav">
-			</div>
-
-			Projects:
-			clikkit
-		</div>
-
-		<footer>
-
-		</footer>
-	</div>
--->
 <div id="container">
 	<header>
 		<h1>clikkit Demo</h1>
 			</p>
 			<p>
 				The image links demonstrate native and fit-to-frame size toggling when you click on the image. Large images are automatically sized to fit, while small images remain unchanged by default.
+			</p>
+
+			<h2>
+				Hot Keys
+			</h2>
+			<p>
+				<ul>
+					<li>Close Link - Escape or Keypad minus</li>
+					<li>Expand clikkit - Left arrow or Keypad plus</li>
+				</ul>
+			</p>
 		</div>
 		<div id="aside">
 		</div>

File css/style.css

 	background-color: hsl(0, 0%, 30%);
 	font-family: Calibri, Helvetica, Arial, sans-serif;
 	font-size: 1.1em;
-	letter-spacing: 0.075em;
-	word-spacing: 0.15em;
 }
 
+b, strong {
+	font-weight: bolder;
+}
+
+#content p + h2,
 p + p {
 	margin-top: 10px;
 }
 
-/*header {
-	text-align: center;
-}
-
-header h1 {
-	font-size: 1.1em;
-	background-color: hsl(0, 0%, 42%);
-	border: 2px solid hsl(0, 0%, 48%);
-	border-radius: 6px;
-	width: 64%;
-	padding: 6px;
-	margin: 10px 0 10px 80px;
-}*/
-
 #left-nav {
 	position: relative;
 	display: inline;
 	margin: 0 14px 0 4px;
 }
 
-#main {
-	position: relative;
-	display: block;
-	background-color: hsl(0, 0%, 48%);
-	border: 2px solid hsl(0, 0%, 54%);
-	border-radius: 4px;
-	width: 70%;
-	padding: 4px;
-}
-
-/* ***** */
 #container
 {
 	margin: 0 auto;
 }
 
 header h1 {
+	letter-spacing: 0.06em;
+	word-spacing: 0.16em;
 	text-shadow: 3px 2px 2px hsl(0, 0%, 15%);
 	text-align: center;
 	font-size: 1.1em;
 	min-height: 20em;
 }
 
+#section-navigation h2 {
+	text-shadow: 1px 1px 2px hsl(0, 0%, 52%);
+}
+
 #section-navigation > ul
 {
 	margin: 0;
 	text-shadow: 1px 1px 1px hsl(90, 2%, 31%);
 }
 
+#section-navigation .help {
+	font-size: smaller;
+}
+
 #content {
 	float: left;
 	width: 600px;
 	text-decoration: none;
 	text-shadow: none;
 }
-/* ***** */
-
-
-
-
 
 
 
 </head>
 
 <body>
-<!--
-	<div id="container">
-		<header>
-			<h1>Mangala Sadhu Sangeet Singh Khalsa</h1>
-		</header>
 
-		<div id="main" role="main">
-			<div id="left-nav">
-			</div>
-
-			Projects:
-			clikkit
-		</div>
-
-		<footer>
-
-		</footer>
-	</div>
--->
 <div id="container">
 	<header>
 		<h1>Mangala Sadhu Sangeet Singh Khalsa</h1>
 					<ul>
 						<li><a href="clikkit-demo.html">demo</a></li>
 						<li><a href="http://www.bitbucket.org/msssk/clikkit/">bitbucket repo</a></li>
-						<li><a href="jsdoc/clikkit/symbols/_global_.html">jsdoc</a></li>
+						<li><a href="https://bitbucket.org/msssk/clikkit/wiki">Wiki</a></li>
+						<li><a href="jsdoc/clikkit/symbols/_global_.html">clikkit jsdoc</a></li>
+						<li><a href="jsdoc/stompit/symbols/_global_.html">stompit jsdoc</a></li>
 					</ul>
 				</li>
 				<li>
 					clikkit-Chrome
 					<ul>
-						<li><a href="https://bitbucket.org/msssk/clikkit-chrome/downloads/clikkit.crx">install</a></li>
+						<li><a href="https://chrome.google.com/webstore/detail/beoobakjmicjpifdpcbfdgifhimhpnen">install</a></li>
+						<li><a href="clikkit-chrome/usage.html">usage</a></li>
 						<li><a href="http://www.bitbucket.org/msssk/clikkit-chrome/">bitbucket repo</a></li>
 					</ul>
 				</li>
 		</div>
 		<div id="aside">
 		</div>
+
 		<footer>
 			<div style="float: right;">
 			<a href="http://www.linkedin.com/pub/mangalasadhusangeet-khalsa/22/401/a5a">