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  33660  pronerd 392
Recognized Expert Contributor
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
Recognized Expert Moderator Expert
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
Recognized Expert Moderator Expert
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!
acoder 16,027
Recognized Expert Moderator MVP
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.
acoder 16,027
Recognized Expert Moderator MVP
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.
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
more of the content.
Any ideas how to expose the content?
|
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 conversation once.. and now I
have been tasked with building a big website with LOTS of fancy
javascripting. Image rollovers mostly. Only problem is that I...
|
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 onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>
How can I...
|
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:
http://www.blocparty.com/go.php?object=music
Particularly I'm focusing on the scroll for the "LYRICS" section. My
javascript knowledge is pretty limited, but the code seems really...
|
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 mouseover entire image, I want
it on each hotspot only, so an image pertaining to each link shows up.
I have done it in JavaScript, but the website I'm...
| | |
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 confident with HTML and can scrape together codes with JavaScript with a lot of research and cursing, but for the life of me I can't see how to...
|
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 the second time it fires if the page has been scrolled a lot. The mouseover displays an image in a div that is placed near the mouse cursor. When the...
|
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 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
|
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..
http://www.integrityads.net/fashions/collection.htm
Also it is not resolution compatible,i.e. alignment totally messed up when i increased the resolution.Please suggest.
Code is as...
|
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 mouseover event.
When active the user can scroll down through the content and mouseout minimizes it again.
My problem is this - when the content is...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
