Skip to content

Instantly share code, notes, and snippets.

@CloCkWeRX

CloCkWeRX/Octopus.html

Created June 8, 2012 05:42
Show Gist options
  • Save CloCkWeRX/2893798 to your computer and use it in GitHub Desktop.
Save CloCkWeRX/2893798 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Octopus.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="http://www.lokka.com/daniel/" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link type="text/css" rel="stylesheet" href="css/lokka.css" media="all"/>
<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" />
<title>LOKKA - Automatic Differential Locker</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.lokka.com/favicon.ico" />
<link rel="icon" href="http://www.lokka.com/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- TODO Re-add this, Dan's just commenting it out to be quick -->
<!--
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
-->
<!--script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script-->
<script type="text/javascript" src="js/jquery-templ.js"></script>
<script type="text/template" id="makeTemplate">
<option value="${id}">${manufacturer}</option>
</script>
<script type="text/template" id="modelTemplate">
<option value="${id}">${description}</option>
</script>
<script type="text/template" id="resultTemplate">
<tr><td>${diff_code}</td><td>${model_features}</td><!--td>${axle_desc}</td--><td>${axle_features}</td>
<!--td>${type_desc}</td--><!--td>${year_display}</td--><td>${availability}</td><td>${us_price}</td>
<td></td>
</tr>
</script>
</head>
<body>
<div id="yellowBar"></div>
<div class="container home">
<img src="img/lokka.png" alt="Lokka" style="float:left;" />
<ul id="nav">
<li>How it works</li>
<li>Find a LOKKA</li>
<li>FAQ</li>
<li>Recommendations</li>
</ul>
<h1 class="hometext">LOKKA is an automatic differential locker that is invaluable for off-roading. <br/>By utilizing maximum traction, LOKKA allows you to drive in and out of more places that would usually make your wheels spin.</h1>
<br style="clear:both;" />
</div>
<div id="blueStrip">
<div class="container">
<form id="searchForm">
<h2>LOKKA SELECTA</h2>
<label for="make">Make:</label> <select name="make" id="make"><option>Select ...</option></select><br/>
<label for="model">Model:</label> <select name="model" id="model"><option>Select ...</option></select><br/>
<label for="axle">Axle:</label> <select name="axle" id="axle"><option>Select ...</option><option value="F">Front</option><option value="R">Rear</option></select><br/>
<label for="diff">Diff:</label> <select name="diff" id="diff"><option>Select ...</option><option value="O">Open</option><option value="L">LSD</option></select><br/>
<label for="year">Year:</label> <input name="year" id="year" size="4" maxlength="4"/><br/>
<input id="search" type="submit" onclick="return false" />
</form>
<script type="text/javascript">
$('#search').click(function() {
if (console) {
console.log("Hey Jess, check out the neat console that is in Chrome, Firefox. Makes javascript a snap!");
}
// So, we can do all of this. But it's boring. Means thinking about the home/diffs controller/action and what have you.
/*
$("#results tbody > tr").remove();
var model_id = $('#model').val();
var axle = $('#axle').val();
var diff = $('#diff').val();
var year = $('#year').val();
$.ajax({
url: 'index.php/home/diffs/' + model_id + '/' + axle + '/' + diff + '/' + year,
dataType: 'json',
success: function( response ) {
$( '#resultTemplate' ).render( response ).appendTo( "#results" );
}
});
*/
// Instead, let's get octopuses.
var response = [];
if (window.console) {
console.log(response);
}
var steve = {
"name": "Steve the octopus",
"age": 66,
"arms": 8,
"diff_code": "Octopussy",
"model_features": "Sassy",
"axle_desc": "Longggggggggg",
"axle_features": "Its a big axle",
"type_desc": "I'm a sophisticated octopus",
"year_display": 66,
"availability": "I'm easy",
"us_price": "Lots"
};
var mike = {
"name": "Mike the squid",
"age": 2,
"arms": 77,
"diff_code": "Squidtastical",
"model_features": "Sassy",
"axle_desc": "Short",
"axle_features": "Its a wide axle",
"type_desc": "I'm a sophisticated secret agent",
"year_display": 66,
"availability": "I'm easy",
"us_price": "Lots"
};
if (window.console) {
console.log("Let's look at steve the data object");
console.log(steve);
}
response.push(steve);
response.push(mike);
if (window.console) {
console.log("So there you have it ladies and gents, you are just making a javascript response which looks like this. Except it comes from the controller/home/diffs action.");
}
$( '#resultTemplate' ).render( response ).appendTo( "#results" );
return false; // Stops form submission
});
</script>
<p style="float:right; width:400px;" class="yellow">Check availablility of LOKKA to suit your vehicle. If you are unsure what you need, you can submit the Model and VIN number of your vehicle on our contact form</p>
<!-- end bluestrip--> </div>
<table border="1" id="results">
<thead>
<tr><th>Code</th><th>Model Features</th><!--th>Axle</th--><th>Axle Features</th>
<!--th>Diff Type</th--><!--th>Year</th--><th>Availability</th><th>Price USD</th>
<th>Buy</th></tr>
</thead>
</table>
<!-- end searchForm--> </div>
</div>
<div class="container">
<div id="bottom">
<iframe width="300" height="225" style="float:left; margin-right:15px;" src="http://www.youtube.com/embed/RJ_cCwl-mjI" frameborder="0" allowfullscreen></iframe>
<p><strong>Lokka Differential Products</strong><br>
LOKKA is a fully automatic Differential Lock that does not require manual operation. It doesn’t have switches, external lines, electric or pneumatic controls of any sort.<br>
It relies on a simple mechanical design which makes use of two distinct sets of forces - the &quot;ground driven&quot; forces acting on a wheel when cornering (that force an outside wheel to turn faster) and the forces from the engine (power) turning the differential and axles. </p>
<p>The combination of these two sets of opposing forces and the Lokka design allow the automatic engagement and disengagement of the driving gears when a vehicle turns or requires differential action.</p>
<p>Wheel slippage or a loss of traction can occur for many reasons off-road and include excess throttle, fast approach speeds, limitations in wheel travel (especially independent front suspension vehicles), weight transfer off drive wheels and slippery surfaces such as mud, sand, snow, shale, wet grass etc.</p>
<p>In many of these circumstances both the normal standard differential and LSD centre will allow the wheels with the least resistance to spin. Thus the wheels with traction do not obtain any real drive and the vehicle will lose speed or stop. LSD centres might assist under these circumstances but only if they are in good condition and only if there is enough resistance on the spinning wheels to activate the clutch pack or gears to force drive to the wheels with traction. <br>
Even a new LSD will allow a lifted wheel to spin freely with no drive to the wheel with traction.</p>
<p>LOKKA overcomes the traction deficiency of the standard differential and LSD centre to ensure that a 50:50 power split is achieved when driving, irrespective of ground (or air !) conditions, yet at the same time still allowing differential action when cornering on hard ground.</p>
<p>Whether fitted to front or rear or both differentials, Traction Performance is significantly improved in all situations.</p>
<p>Lokka enjoys an excellent reputation for reliability throughout the world &ndash; sold in every continent, in all realms of 4x4 and 2x4 performance activity.</p>
<!-- end #bottom --></div>
<div id="footer">
Copyright &copy; 2012 Gear to Goannawhere. <a href="#">Terms &amp; Conditions</a>
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- must be at end -->
<!-- TODO Re-instate this :) -->
<!--
<script type="text/javascript" src="js/all.js"></script>
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment