Question

163

How to hide scroll bars until they are needed then remove if not needed

rated 0 times [ 165] [ 2] / answers: 1 / hits: 15220 / 13 Years ago, sat, february 18, 2012, 12:00:00

I have an example here.

Basically i have a scroll bar that is always present, even if it is not currently needed.
Problem: I want a scroll bar to appear if the height of my div exceeds 300 pix.

<fieldset id=typography>

<ul>

    <li><label for=Poll Question>Header</label></li>

    <li><input type=text id=formheader value=Header></input></li>

     <div class=scroll>           

        <li><label>Answers</label></li>

        <li id=formanswer1 class=clonedInput><input type=text id=formanswer1 value= /></li>

        <li id=formanswer2 class=clonedInput><input type=text id=formanswer2 value= /></li>

        <li id=formanswer3 class=clonedInput><input type=text id=formanswer3 value= /></li>

    </div>      

    <li><input type=button id=btnAdd value=Add Answer />

    <input type=button id=btnDel value=Remove Answer /></li>

</ul>

I would appriciate any help. i know i need to use JS but im not even sure where to begin.

Question 2: Is there a easy command that i can use that when i push the add button it scrolls to the very bottom of the scroller?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janiajohnnad

Add To Favorites

Follow

Total Points: 146

Total Questions: 92

Total Answers: 107

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 13 Years ago albert · Accepted Answer

In your CSS just set the height rather than max-height and set overflow : auto, as per this update to your demo: http://jsfiddle.net/nnnnnn/83659/4/

div.scroll {

  background-color:#00FFFF;

  width:190px;

  height:90px;

  overflow:auto;

}

Question 2: if you call .focus() on your newly added input it should bring it into view and put the cursor into the field: http://jsfiddle.net/nnnnnn/83659/4/

Alternatively you can use the (non-jQuery) .scrollIntoView() function to scroll the element into view without giving it focus.