SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set horizonal scrollbar position?

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You should be able to set the scrollLeft property to the clientWidth value.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greetings Paul,

    Under my main <div> box, I use this javascript:
    Code:
    <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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Have you tried from within the success function of the ajax call?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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:

    Code:
    <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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The areas that ai was meaning is within this if statement:

    Code javascript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by peppy View Post
    Thanks a lot Paul for the hints and guiding me through the process.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •