How to set horizonal scrollbar position?

JavaScript
1

Greetings,

I have a <div> element which contains a chain of auto-popullating dropdown boxes that grows horizontally towards the right as more boxes are created. When enough are created, I have a scrollbar that forms so the boxes don’t go of the page.

As the scrollbar appears, I would like it to default on the right side instead of the left side, that way members don’t have to keep manually moving the scrollbar in order to see the next box.

Let me know how this can be done.

Thanks

2

You should be able to set the scrollLeft property to the clientWidth value.

3

Greetings Paul,

Under my main <div> box, I use this javascript:

<script>$("div.main").scrollLeft(document.body.clientWidth);</script>

This seems to work initially when it loads, but when I start selecting sub-categories and the “tree” grows longer, the scrollbar does not move to the right side.

When I select a sub-category, there is an AJAX script that opens up sub-category2.php, which displays the next box list of sub-categories (then sub-category3.php opens the next and so on). This whole “tree” is inside of <div class=“main”></div>

I tried to add the above code in the individual sub-category2.php, sub-category3.php files as well but the <div> scrollbar does not move to the right when the tree grows.

4

Have you tried from within the success function of the ajax call?

5

My skills are limited in ajax so I’m not sure where the success function is and how I can apply this code into the success function.

Here is my ajax code though:

<script type="text/javascript">
function GetSubcategory2(str)
{
if (str=="")
  {
  document.getElementById("ShowSubcategory2").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ShowSubcategory2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET"," subcategory2.php?q="+str,true);
xmlhttp.send();
}
</script>

My HTML has code like this:


<div class="main">
  <form action="" method="post" >
    <select size="10" name="level1" onchange="GetSubcategory2(this.value)">
    <?php php code and functions to load categories..... ?>
    </select>
  </form>
  <div id="ShowSubcategory2"></div>
</div>
6

The areas that ai was meaning is within this if statement:


if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    ...
}
7

Awesome! I’ve just added that code in there like this:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“ShowSubcategory2”).innerHTML=xmlhttp.responseText;
$(“div.demo”).scrollLeft(document.body.clientWidth);
}
}

This seems to be working great. I was fiddling around with that area of the ajax earlier but never placed this code in there. Thanks a lot Paul for the hints and guiding me through the process.

Kind regards

8

You’re welcome. I’m glad that you appreciate that type of assistance. It’s one I’ll try to do more of around here.