I wan't to make a horizontal navbar that is scrollable. However I would like the items in the navbar to scroll when the cursor hovers over a button that points to the direction the navbar will scroll in. Any information on how I can do this will be very helpful. Thank you.
Add a comment
|
3 Answers
You could do something like this, which uses javascript to prevent any type of scrolling unless the up or down arrow is hovered over.
var down = document.getElementById('down'),
up = document.getElementById('up'),
body = document.body;
var timeout;
down.onmouseover = function (e) {
timeout = setInterval(function () {
window.scrollBy(0, 7);
}, 20)
};
down.onmouseout = function (e) {
if (timeout) {
clearInterval(timeout);
}
};
up.onmouseover = function (e) {
timeout = setInterval(function () {
window.scrollBy(0, -7);
}, 20)
};
up.onmouseout = function (e) {
if (timeout) {
clearInterval(timeout);
}
};
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36, backspace: 8
var keys = [37, 38, 39, 40, 32, 34, 33, 35, 36, 8];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
Credit goes to galambalazs for his answer in this SO question that aided me in disabling page scrolls
Comments
You can try couple of things. First off, you button can be local anchors, through CSS you can specify on-hover or hover styles, that will allow you call functions for switching NAV bar buttons, same as old school roll-overs but using a different fire on event.
1 Comment
Mister Joe
could you give ma an example of what you mean by this?
This is what i came up with.
The previous answer uses setInterval function to domouover continuously, i coudn;t egt it to work yet.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var images=["img1","img2","img3","img4"]
var imgIndex = 0
window.setInterval(function () { moveleft() }, 100)
window.setInterval(function () { moveright()},100)
function function1() {
document.getElementById(images[imgIndex]).className = "turnon"
}
function moveleft() {
imgIndex = imgIndex - 1
if (imgIndex < 0) {
imgIndex = images.length - 1
document.getElementById(images[imgIndex]).className = "turnon"
document.getElementById(images[0]).className = "turnoff"
} else {
document.getElementById(images[imgIndex]).className = "turnon"
document.getElementById(images[imgIndex + 1]).className = "turnoff"
}
}
function moveright() {
imgIndex = imgIndex + 1
if (imgIndex > (images.length - 1)) {
imgIndex = 0
document.getElementById(images[imgIndex]).className = "turnon"
document.getElementById(images[images.length - 1]).className = "turnoff"
}
else {
document.getElementById(images[imgIndex]).className = "turnon"
document.getElementById(images[imgIndex - 1]).className = "turnoff"
}
}
</script>
<style type="text/css">
.turnon
{
border: medium solid #FF0000
}
.turnoff
{
border: medium solid #FFCC00
}
</style>
</head>
<body onload="function1()">
<img src="1.jpg" id="img1" class="turnoff" />
<img src="2.jpg" id="img2" class="turnoff"/>
<img src="3.jpg" id="img3" class="turnoff"/>
<img src="4.jpg" id="img4" class="turnoff"/>
<p></p>
<a href="#" ><img src="left.jpg"onmouseover="moveleft()"/></a>
<a href="#" ><img src="right.jpg" onmouseover="moveright()" /></a>
</body>
</html>
3 Comments
Zach Saucier
You should edit your answer on a post instead of adding a new one, generally speaking. And why post an answer that doesn't work?
KonB
You are right, of course, but I couldn't get it in withing original post. Something about length. I am a new user and still learning how to use stackoverflow. As far as the why is concerned, why ask why instead of being constructive and maybe adding to my code. An answer that helps pointing in the right direction is better than no answer at all. What prevented me from pointing out that your answer was about 90 degrees to the side of what was being asked?
Zach Saucier
I asked why because this is not what the OP is looking for. This doesn't prevent default scrolling at all, is completely dependent on the page being full of
imgs, and ultimately gets nothing done besides toggling a border color. Adding to your code would mean removing nearly all you have and writing it myself. As for my solution dealing with vertical scrolling, it's an example that can be edited, not the final product