I am trying to build a single-page scrolling website leveraging the Ascensor JQuery plugin, and am having a lot of trouble getting it setup correctly. The documentation at http://kirkas.ch/ascensor/ is helpful, but I still must be missing something. What I want is a simple 3-floor layout, top to bottom. It seems that the layout of my "building" gets generated correctly, but I am unable to move between the "levels." The arrow keys and my links don't move the page at all. Can I get a little help with my code? Any guidance is appreciated. Thanks, Brett\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Ascensor Test</title><script src="http://stackoverflow.com/questions/15893099/jquery-1.9.1.js"></script><script src="http://stackoverflow.com/questions/15893099/jquery.scrollTo-1.4.3.1.js"></script><script src="http://stackoverflow.com/questions/15893099/jquery.ascensor.js"></script><script src="http://stackoverflow.com/questions/15893099/jquery.easing.1.3.js"></script><script>$(document).ready(function(){ $('#house').ascensor( { AscensorName:'ascensor', ChildType:'div', AscensorFloorName:'Home | Implementation | HTML', Time:1000, Easing:'easeInOutCubic', WindowsOn:1, Direction:'y', AscensorMap:'1|1 & 2|1 & 3|1', KeyNavigation: true, Queued:false, QueuedDirection:"x" });});</script><style>body{ margin: 0; padding: 0;}#house{ overflow: hidden; border: 5px solid black;}#navigation{ z-index: 1000; position: fixed; top: 50px; left: 50px;}#ascensorFloor1{ background-color: orange;}</style></head><body> <div id="navigation"> <a href="http://stackoverflow.com/questions/15893099/#" class="ascensorLink ascensorLink1">Floor 1</a> <a href="http://stackoverflow.com/questions/15893099/#" class="ascensorLink ascensorLink2">Floor 2</a> <a href="http://stackoverflow.com/questions/15893099/#" class="ascensorLink ascensorLink3">Floor 3</a> </div> <div id="house"> <div> Floor 1 </div> <div> Floor 2 </div> <div> Floor 3 </div> </div></body></html>\[/code\]
JQuery Ascensor JS Plugin Trouble
- Thread starter tdsii
- Start date