Hi,
I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.How can i achieve this?
It would be very nice of you if you can provide a link to the article or blog where solution is provided to my problem.
Thanks in advance,
Saad Alam
15  33611 
I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.
If that can be done it would likely have to be done with an iFrame instead of a div tag. As far as I know div tags do not use scroll bars. IFrame tags will have scroll bars any time their content is longer or wider than the the dimensions of the iFrame.
You would have to check the DOM references to see if there are any attributes you can set to modify the scroll position.
 gits 5,390
Expert Mod 4TB
hi ...
you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls: - <html>
-
<script type="text/javascript">
-
var scrolling = null;
-
-
function scroll_up() {
-
var d = document.getElementById('scroller');
-
-
d.scrollTop = d.scrollTop - 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_up();
-
}, 100);
-
}
-
-
function scroll_down() {
-
var d = document.getElementById('scroller');
-
-
d.scrollTop = d.scrollTop + 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_down();
-
}, 100);
-
}
-
-
function stop_scroll() {
-
window.clearTimeout(scrolling);
-
}
-
</script>
-
<body>
-
<div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
-
<div id="scroller" style="width:100px; height:70px; overflow:hidden;">
-
Hi,
-
-
I am using a menu inside a div tag.
-
What i want to do is to add scroll buttons
-
(up and down ) along side div which move
-
the div up and down on mouse over.
-
How can i achieve this?
-
-
It would be very nice of you if you can
-
provide a link to the article or blog
-
where solution is provided to my problem.
-
-
Thanks in advance,
-
Saad Alam
-
</div>
-
<div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
-
</body>
-
</html>
-
kind regards
hi ...
you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:
- <html>
-
<script type="text/javascript">
-
var scrolling = null;
-
-
function scroll_up() {
-
var d = document.getElementById('scroller');
-
-
d.scrollTop = d.scrollTop - 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_up();
-
}, 100);
-
}
-
-
function scroll_down() {
-
var d = document.getElementById('scroller');
-
-
d.scrollTop = d.scrollTop + 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_down();
-
}, 100);
-
}
-
-
function stop_scroll() {
-
window.clearTimeout(scrolling);
-
}
-
</script>
-
<body>
-
<div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
-
<div id="scroller" style="width:100px; height:70px; overflow:hidden;">
-
Hi,
-
-
I am using a menu inside a div tag.
-
What i want to do is to add scroll buttons
-
(up and down ) along side div which move
-
the div up and down on mouse over.
-
How can i achieve this?
-
-
It would be very nice of you if you can
-
provide a link to the article or blog
-
where solution is provided to my problem.
-
-
Thanks in advance,
-
Saad Alam
-
</div>
-
<div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
-
</body>
-
</html>
-
kind regards
Thank you so much gits.
gits 5,390
Expert Mod 4TB
no problem ;) ... thats why this forum is here :) ... post back to the forum in case you have more questions ...
kind regards
Is there any way to be able to be aware of when the div content "bottom" has been reached so that I can hide the "DOWN" button, and same for top? Is there javascript that can tell when a certain element of the div (last line, a spacer image) is on the screen and then report this state back so I can then hide the "DOWN" button? THANKS!
The top is easy: if it's 0, it's at the top. For the bottom, check that it's equal to the scrollHeight.
That makes sense. Thanks.
One thing (a big one!) -- I'm enough of a novice that I'm not sure what syntax I need to read the scrollHeight and have an IF statement (I'm guessing) to then change the element's display property. Anyone want to hook a self-taught novice up?
And while we're at it, the effect I'd really like to have is one without an explicit up and down "button" but instead for scrolling to work like this: http://deluxe-menu.com/scrollable-submenus-sample.html
(hover over Samples I and you'll see it "smart scroll").
Any help is appreciated. Thanks.
Add an ID to the 'link', e.g. - <div id="scrollup" style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
and then add a little snippet to the scroll_up() function: - if (d.scrollTop == 0) {
-
document.getElementById("scrollup").style.display = "none";
-
else {
-
...
In scroll_down(), it'd be: - if (d.scrollTop == d.scrollHeight) {
-
document.getElementById("scrolldown").style.display = "none";
-
Of course, you'd need to add code to display them again.
However, you mention that you want "smart" scrolling. For that you'd need to see the mouse position within the div. If it's below a certain point, start scrolling. Once it goes above that point, scroll back up.
@acoder
GREAT! I'm gonna try it. Mil Gracias.
edit: never mind! figured it out! crisis begets creativity :D
Hi, thank you for posting this code. I was able to implement it and get it to work. Is there a way to have more than one instance of this on a page? I have three separate divs with text in them on one page that I would like to have scroll like this.
I'm sorry if this is has an obvious answer, but I'm a javascript newbie. Thanks in advance for any help! @gits gits 5,390
Expert Mod 4TB
just adapt the scroll_up() and scroll_down() methods with a parameter that allows you to retrieve the corresponding 'instance' ... you might pass the id of the node and use it in the functions ... and don't forget to update the onmouseover-calls :)
kind regards
Hello!
Very good joob, thanks a lot!
I have just one question. Is there any possibility that it would be possible to scroll content with mouse wheel?
THANKS A LOT AGAIN!
gits 5,390
Expert Mod 4TB
you might add a mousewheel listener ... you might have a look here for a start ...
Can this solution be easily adjusted to scroll left and right instead of up and down?
thanks
- <script type="text/javascript">
-
var scrolling = null;
-
-
function scroll_left() {
-
var d = document.getElementById('scroller');
-
-
d.scrollLeft = d.scrollLeft - 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_left();
-
}, 20);
-
}
-
-
function scroll_right() {
-
var d = document.getElementById('scroller');
-
-
d.scrollLeft = d.scrollLeft + 5;
-
-
scrolling = window.setTimeout(function() {
-
scroll_right();
-
}, 20);
-
}
-
-
function stop_scroll() {
-
window.clearTimeout(scrolling);
-
}
-
</script>
this worked for me!
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Michael Hill |
last post by:
I'm trying to implement a scrolling div. Here is a test page that was
created:
http://www.hulenbend.net/test2.html
When I mouseover the down arrow I want to be able to move the div up showing...
|
by: J. Makela |
last post by:
Hallo.
This should be a pretty entertaining question for you *real* javascript
writers.. I, being the lowly photoshop guy at an ad agency made the
mistake of actually saying "HTML" in a...
|
by: Alex |
last post by:
On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span...
|
by: xleonard |
last post by:
Hoping someone can help me figure out why some code I'm trying to learn
isn't working. I found a javascript scroll effect that I really like
on this page:...
|
by: Annette Acquaire |
last post by:
I have and image map with a dozen hotspot links on it that I'm trying to
get to open a new image over existing one on mouseover of each COORD. The
only thing I was able to do was swap image on...
|
by: Schannah |
last post by:
I'm trying to create a design which mimics the Radiohead website in the action on this page, but the problem is that they use PHP for the effect and I have no idea about PHP. I'm very amateur: fairly...
|
by: dave345 |
last post by:
This javascript issue is in an app using C# / .Net 2.0 running on XP.
First post, please mention if I mess up any conventions of this forum.
I’ve got a mouseover event that only works properly...
|
by: Saad Alam |
last post by:
Hi,
I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.How can i achieve this?
It would...
|
by: PrabodhanP |
last post by:
I have CSS based mouseover scrolling for divContent embeded in my webpage.It works fine in IE,but not working in mozilla-FF.
It is located at the location.....
|
by: Claus Mygind |
last post by:
I have a <div> tag in my app that I minimize on the screen thereby only showing the top line of the content in that division.
The user activates the content (maximizes the content) with the...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
