asked on

overflow:auto, move scrollbar via javascript

I have a javascript shopping cart, which uses overflow:auto to add vertical scrollbars after the user has added so many items to their cart.

1. How do I use javascript to move the scrollbar to the bottom when they add a new item?

2. I have an onmouseup and onmousedown event on the outerbox of the shopping cart. The mousedown event fires when clicking on the scrollbar, but the mouseup event does not fire when you let go of the mouse on the scrollbar. I either want the mousedown event to NOT fire on the scrollbar or get the mouseup event to be able to fire on the scrollbar. This problem only occurs in IE. It works as expected in firefox.

Let me know if that is too confusing.

dbritt

You use the div.scrollIntoView(false) method:

===========================================

<html>
<head>
      <title>Test Page</title>

      <script language="JavaScript" type="text/javascript">

      function runTest()
      {
            var input = document.createElement("INPUT");
            var br = document.createElement("BR");

            var divBottom = document.getElementById("myDivBottom");

            divBottom.insertBefore(input);
            divBottom.insertBefore(br);

            divBottom.scrollIntoView(false);
      }

      </script>
</head>

<body>
      <div id="myDiv" style="height:100px; width:200px; overflow:auto;">
            <input type="text" id="text1" name="text1">

            <br>

            <input type="text" id="text2" name="text2">

            <br>

            <input type="text" id="text3" name="text3">

            <br>

            <input type="text" id="text4" name="text4">

            <br>

            <div id="myDivBottom"></div>
      </div>

      <br><br>

      <input type="button" value="Run Test" onclick="javascript:runTest();">
</body>
</html>

dbritt

>> 2. I have an onmouseup and onmousedown event on the outerbox of the shopping cart. The mousedown event fires when clicking on the scrollbar, but the mouseup event does not fire when you let go of the mouse on the scrollbar. I either want the mousedown event to NOT fire on the scrollbar or get the mouseup event to be able to fire on the scrollbar. This problem only occurs in IE. It works as expected in firefox.

In your mousedown function, check if the (window.event.clientX > document.body.scrollWidth) and break out. That will keep it from processing when clicked on the scrollbar.

See:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp

itcdr

ASKER

1. That did work, but it not only moved the overflow:auto scrollbar, it also moved the scrollbar for the window. How do I make it only move the overflow:auto scrollbar?

2. I'll try your suggestion to fix problem 2

itcdr

ASKER

2. I tried adding onMouseDown="if(window.event.clientX > document.body.scrollWidth) alert('test');" to test and the alert('test') never fired.

dbritt

It shouldn't fire unless you click on the right scroll bar, it worked fine for me using the exact code you just used.

<script>
      function md()
      {
            if(window.event.clientX > document.body.scrollWidth) alert('test');
      }
</script>

<body onmousedown="javascript:md();">

itcdr

ASKER

I tried this on ie 6.0 and the alert never came:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function md() { if(window.event.clientX > document.body.scrollWidth) alert('test'); }
</script>
</head>
<body onmousedown="javascript:md();">
<div style="height:75px;overflow:auto;width:100px">
here<br>is<br>test<br>content<br>for<br>scrolling
</div>
</body>
</html>

dbritt

It's the DTD you have at the top, remove it and it works.

itcdr

ASKER

My entire site has that DTD. Any other ideas?

dbritt

Nope. onmousedown isn't defined out there with that DTD. The only way to get that to work is to remove the DTD from pages that care if it's clicked out there.

itcdr

ASKER

I don't understand. The onmousedown function is triggered when clicking on the scrollbar. The if statement just never returns true. It's the onmouseup event that does not trigger on the scrollbar. Is there anyway to get that to work?

Also, back to the first problem. scrollIntoView(false) moves both the autoflow:auto scrollbar and the window scrollbar. Is there anyway to only move the autoflow:auto scrollbar? Can't scrollbars be moved by points via javascript?

dbritt

Here's the latest:

It does a page down scroll in the DIV 100 times (should be more than enough, but you can always increase if you like):

===========================================

<html>
<head>
      <title>Test Page</title>

      <script language="JavaScript" type="text/javascript">

      function runTest()
      {
            var input = document.createElement("INPUT");
            var br = document.createElement("BR");

            var divBottom = document.getElementById("myDivBottom");

            divBottom.insertBefore(input);
            divBottom.insertBefore(br);

            for(var i = 0; i < 100; i++)
            {
                  document.getElementById("myDiv").doScroll("scrollbarPageDown");
            }
      }

      function md()
      {
            if(window.event.clientX > document.body.scrollWidth) alert('test');
      }

      </script>
</head>

<body onmousedown="javascript:md();">
      <div id="myDiv" style="height:100px; width:200px; overflow:auto;">
            <input type="text" id="text1" name="text1">

            <br>

            <input type="text" id="text2" name="text2">

            <br>

            <input type="text" id="text3" name="text3">

            <br>

            <input type="text" id="text4" name="text4">

            <br>

            <div id="myDivBottom"></div>
      </div>

      <br><br>

      <input type="button" value="Run Test" onclick="javascript:runTest();">
</body>
</html>

dbritt

>> The onmousedown function is triggered when clicking on the scrollbar.

Not with that DTD it's not. Use that exact code that you posted for me to see and remove the "if" part in the md() function. You'll see that the alert never fires when clicking on the scrollbar.

itcdr

ASKER

>> Not with that DTD it's not. Use that exact code that you posted for me to see and remove the "if" part in the md() function. You'll see that the alert never fires when clicking on the scrollbar.

This code does trigger the alert when clicking on the scrollbar in ie 6.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function md() { alert('test'); }
</script>
</head>
<body onmousedown="javascript:md();">
<div style="height:100px;overflow:auto;width:100px">
here<br>is<br>test<br>content<br>for<br>scrolling
</div>
</body>

1. I'll try the doScroll method

dbritt

I'm using IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

And the code that you just posted does not cause an alert when I click on the page's right scroll bar.

itcdr

ASKER

Are you clicking on the scrollbar created from the overflow:auto? That's what I am talking about

itcdr

ASKER

I found the solution to problem #1:

var obj=document.getElementById('box_name');
obj.scrollTop=obj.scrollHeight;

This moves the scrollbar to the bottom.

Now on to problem #1. I need to accomplish one of two things:

a) get the onmouseup event to fire when on the scrollbar

or

b) check if the mouse is on the scrollbar for the onmousedown event and if so return

ASKER CERTIFIED SOLUTION

dbritt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

itcdr

ASKER

It works! Can you explain the divMD function?

dbritt

Well, the magic comes from
if(from.componentFromPoint(x, y) != "")

It looks at the coordinates and tells you what kind of scrollbar piece is under them. If there is nothing, then it's not a scrollbar, similarly if there is something then it is.

So I check if there is a scrollbar under your mouse and if there is, don't bubble the mousedown to the rest of the page.

Sounds like you're all set. Glad to help. :)

itcdr

ASKER

What does "bubble the mousdown to the rest of the page" mean?

dbritt

When an event occurs (like onmousedown), it happens to a particular object (the div, for instance). After the event has happened there, it travels up the object hierarchy to the parent node (body, in this case) and fires for that object. It does this for every parent node. If I don't want the body to see the div's mousedown events, I can "cancel the bubble" ("bubbling" up the hierarchy) so that the body element doesn't receive the event also (thus preventing the body.onmousedown). Make sense?

itcdr

ASKER

Thanks. That makes perfect sense. Good job!

dbritt

Any time :)