Solved

How can I scroll a div field using javascript?

Posted on 2008-10-17
5
980 Views
Last Modified: 2009-12-16
Hello experts, I have a web page with a large amount of information in a div field.  This page will be displayed on a small touch screen hand held and the default scroll buttons that come when you assign the property of overflow to a div tag are too small.  I am trying to use two buttons one to scroll up and the other to scroll down.  I have only been successful in scrolling to the top, I thought by substracting or adding to the scroll height would allow me to scroll using buttons.  Any ideas?


I know this still needs work, i will need to keep track of the current position.
function scroll_up()
{
  var div = document.getElementById('div-fork');
  h = div.scrollHeight;
  div.scrollTop = h-10;
}

function scroll_down()
{
  var div = document.getElementById('div-fork');
  h = div.scrollHeight;
  div.scrollTop = h+10;
}

<a onclick ="scroll_up();"><IMG alt="" src="images\arrowup.gif"></a><BR>
                                                      <BR>&nbsp;
                                                      <a onclick="scroll_down();"><IMG alt="" src="images\arrowdown.gif"></a></td>
                                    
0
Comment
Question by:tentavarious
  • 2
  • 2
5 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 22742537
use css   overflow:auto;
0
 
LVL 21

Expert Comment

by:silemone
ID: 22742554
or place anchors in page where when you click the button, it takes you to page anchor
0
 

Author Comment

by:tentavarious
ID: 22742595
I explained that overlow gives you a default scroll bar that is too small, this web page will be running on a touch screen and they want buttons to be able to scroll up or down through the list within the div tags.  Anchors will not work either.
0
 

Author Comment

by:tentavarious
ID: 22744628
What I want to happens is just like pressing the up and down arrow keys.  If I click on the div and press the down key it scrolls just like what I need.  Instead of actually pressing the arrow key I need a button on the form to do the same thing.  If I could send the the arrow key press to IE via javascript that would be perfect.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 250 total points
ID: 22745755
http://germ.wordpress.com/2006/04/10/scroll-div-contents-with-javascript/
ub2.underblob.com/research/js/scroll_btn.php
orums.digitalpoint.com/showthread.php?t=945898
codingforums.com/archive/index.php?t-93997.html

Those should all help, but remember, small displays are a challenge any way you do it.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now