JSBrowser.html / JSBrowser-dev.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    outline: 0;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
	body {
	    line-height: 1;
		text-align: center;
	ol, ul {
	    list-style: none;
	blockquote, q {
	    quotes: none;
	blockquote:before, blockquote:after,
	q:before, q:after {
	    content: '';
	    content: none;
	/* remember to define focus styles! */
	:focus {
	    outline: 0;
	/* remember to highlight inserts somehow! */
	ins {
	    text-decoration: none;
	del {
	    text-decoration: line-through;
	/* tables still need 'cellspacing="0"' in the markup */
	table {
	    border-collapse: collapse;
	    border-spacing: 0;

	#container, body {
		background: black;
	a, a:visited, a:active {
		color: black;
		text-decoration: none;
		background-color: transparent;
	a:hover {
		background-color: silver;
	#container {
		width: 100%;
		height: 100%;
		cursor: pointer;
		z-index: -1;
	.template {
	/*	display: none;*/
    #tip {
    	position: absolute;
		top: 500px;
		left: 200px;
		background-color: white;
		padding: 0.5em;
		display: none;
	body {
		overflow: hidden;
	#information, #tip {
		font-family: monospace, sans-serif;
		font-size: 80%;
        -moz-border-radius: 12px; /* FF1+ */
        -webkit-border-radius: 12px; /* Saf3-4 */
        border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */       		

	#currentImg {
		font-weight: bold;
		margin-bottom: 1em;

    .activeLink {
    	font-weight: bold;

    .imageLink {
    	font-size: 90%;
	.list {
		display: none;
		margin-bottom: 1em;
	#currentImg, .list * {
        width: 10em;
        overflow: hidden;
        text-overflow: ellipsis;    
        white-space: nowrap;
    #information {
    	position: absolute;
		left: 1em;
		top: 1em;
		background-color: white;
		padding: 1em;
		text-align: left;

    #information:hover {
	#imgList  {
	#showAll {
	img {
		-moz-box-shadow: 0px 0px 15px #ffffff; /* FF3.5+ */
		-webkit-box-shadow: 0px 0px 15px #ffffff; /* Saf3.0+, Chrome */
		box-shadow: 0px 0px 15px #ffffff; /* Opera 10.5, IE 9.0 */
	#projecthome {
		font-size: 100%;
		margin-top: 1em;
		font-size: 100%;
	#listCloseButton {
		margin-left: 4.5em;
		font-weight: bold;
		font-size: 110%;

<!-- Url parsing library -->
<script type="text/javascript" src="js/vendor/parseuri.js"></script>

<!-- Functional and string manipulation tools for Javascript -->
<script type="text/javascript" src="js/vendor/underscore.js"></script>
<script type="text/javascript" src="js/vendor/underscore.strings.js"></script>

<!-- jQuery and its plugings -->
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/vendor/jquery.ba-hashchange.js"></script>
<script type="text/javascript" src="js/vendor/jQueryRotate.js"></script>
<script type="text/javascript" src="js/vendor/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.query-2.1.7.js"></script>

<!-- My code -->
<script type="text/javascript" src="js/jquery.hashmanager.js"></script>
<script type="text/javascript" src="js/jquery.imgpreload.js"></script>
<script type="text/javascript" src="js/jquery.maximizeto.js"></script>
<script type="text/javascript" src="js/jquery.hidewhennomovement.js"></script>
<script type="text/javascript" src="js/jquery.cursortip.js"></script>
<script type="text/javascript" src="js/jquery.jsview.js"></script>
<script type="text/javascript" src="js/jquery.jsview.main.js"></script>

<title>loading - JSBrowser.html</title>
<div class="template" id="tip"></div>

<div id="information">

	   <span id="currentImgIndex">0</span> / <span id="imgCount">0</span>
	<p id="currentImg">
		<a href="" title="Open the current image directly in the browser"></a>
	<div id="imgList" class="list" >
		  <h1>IMAGES <a href=""  id="listCloseButton">X</a></h1>
	<div id="subdirList" class="list">
		<h1>OTHER PAGES</h1>
	<p><a href="" id="showAll" 
	      title="Show list of images" >show list</a></p>
	<p id="projecthome">
		<a href="http://esa-matti.suuronen.org/projects/jsbrowser.html/"
		   title="Goto JSBrowser.html homepage"
<div id="container">
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.