Can you do this, like you can with MooTools
http://ryanflorence.com/slideshow/#navigation-demo
in jQuery? So you can navigate like that and use left/right keys?
+1
A:
sure you could.
just capture the keydown event for the document
$(document).keydown(function(evt) {
evt = evt || event;
switch (evt.keycode) {
case 37: //your left keycode
//now in each case statement you could
//load a new page via ajax and animate
//the new page into view.
// or you could do something different.
case 39: //your right keycode
case 38: //your up keycode
case 40: //your down keycode
}
})
Edited: Below is a functional solution that you can play with. Basically this solution creates some divs and fades them in and out using the left and right arrow keys.
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(document).keydown(function(evt) {
evt = evt || event;
var currentControlBoxIndex = parseInt($(".controlBox.controlBoxHighlight").text(), 10);
var leftControlBoxIndex = currentControlBoxIndex == 1 ? 3 : currentControlBoxIndex - 1;
var rightControlBoxIndex = currentControlBoxIndex == 3 ? 1 : currentControlBoxIndex + 1;
$("#f" + currentControlBoxIndex).toggleClass("controlBoxHighlight");
$("#fade" + currentControlBoxIndex).fadeOut("slow", function () {
$(this).toggleClass("controlBoxHighlight");
});
switch (evt.keyCode) {
case 37:
$("#f" + leftControlBoxIndex).toggleClass("controlBoxHighlight");
$("#fade" + leftControlBoxIndex).fadeIn("slow", function () {
$(this).toggleClass("controlBoxHighlight");
});
break;
case 39: //your right keycode
$("#f" + rightControlBoxIndex).toggleClass("controlBoxHighlight");
$("#fade" + rightControlBoxIndex).fadeIn("slow", function () {
$(this).toggleClass("controlBoxHighlight");
});
break;
}
});
});
</script>
<style type="text/css">
#controls {
position:absolute;
left:100px;
bottom: 100px;
z-index: 500;
}
.controlBox {
border: 1px solid #000000;
margin: 10px;
display: block;
float: left;
width: 20px;
height:20px;
text-align: center;
}
.controlBoxHighlight{
color: #FFFFFF;
background-color: #000000;
}
.fadeDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.fadeDivTop {
z-index: 100;
}
.fadeDivBottom {
z-index: -100;
}
</style>
<body>
<div id="fade1" class="fadeDiv fadeDivTop" style="background-color:#FF0000;">
</div>
<div id="fade2" class="fadeDiv" style="background-color:#00FF00;">
</div>
<div id="fade3" class="fadeDiv" style="background-color:#0000FF;">
</div>
<div id ="controls">
<span id="f1" class="controlBox controlBoxHighlight">1</span>
<span id="f2" class="controlBox">2</span>
<span id="f3" class="controlBox">3</span>
</div>
</div>
</body>
</html>
John Hartsock
2010-06-15 14:14:38
give me a min...i will clean up my answer
John Hartsock
2010-06-15 14:14:57
Ok there you go...Its a start and should point you in the right direction.
John Hartsock
2010-06-15 14:21:29
I dont get it, sorry i am new to this so help me out. With the load a new page via ajax and animate, thats not how i wanted. I want to like maybe (idea) have these "texts" in a <li>text1</li> <li>text2</li> and then by navigating it shows text2 , and so on.. not possible maybe?
Karem
2010-06-15 14:35:17
@azzyh....take a look at the functional example. Note this example uses a fade technique.. I will leave it up to you to do the research on how to handle a slide techinque. A clue to the slide technique would be to use JQUERY's animate.
John Hartsock
2010-06-15 15:17:43