freelance84 Posted May 3, 2011 Share Posted May 3, 2011 The following div with a scoll on the y-axis may display up to 100 items. It is a list of links with an indicating image next to the link which is currently being displayed on the rest of the screen. The list is created bia a loop by php. The printed html may look a little like this: <div style="overflow-x:hidden; overflow-y:auto; width:15em; min-height:25em; height:25em; max-height:25em;"> <a>Plug1</a><br/> <a>Plug2</a><br/> <a>Plug3</a><br/> <a>Plug4</a><br/> <a>Plug5</a><br/> ...etc <img src="png/youAreHere.png" alt="here"/><a>Plug38</a><br/> ...etc </div> The problem i am having is... The containing div with the scroll can only display 20 or so links at a time, and upon page load it automatically display the first 20. If the user wishes to see any from 20 onward they must use the scroll bar on the div and scroll down. What i need is for the page to load with the "active" link (the one with the indicating image next to it) visible straight away. I've tried using a simple internal page anchor but this doesn'd scroll the div down. I also can't use and sort of "onload="focus here"" as the page already loads with the focus on a text box. Does anyone have any ideas how i can get around this problem?? Quote Link to comment Share on other sites More sharing options...
Adam Posted May 4, 2011 Share Posted May 4, 2011 Unfortunately I don't know of a way to do this with CSS, however you can set the .scrollTop JavaScript property: window.onload = function() { document.getElementById('items').scrollTop = 100; } You'll need to add the "items" ID to your DIV for the above to work. Quote Link to comment Share on other sites More sharing options...
freelance84 Posted May 4, 2011 Author Share Posted May 4, 2011 Cool. So i've got the scrolltop working in a basic example: <body> <div id="container" style="overflow:scroll;width:150px;height:100px; white-space:nowrap background-color:#e0f0e0;"> Start <br /> 2. line with a long content <br /> 3. line with a long content <br /> 4. line with a long content <br /> 5. line with a long content<br /> 6. line with a long content <br /> <p id="jumpHere">7. line with a long content <br /></p> end </div> <script type="text/javascript"> window.onload = function Scroll () { var myCont = document.getElementById ("container"); myCont.scrollTop = 40; //how can this value be set dynamically? } </script> </body> The scrollTop value above is fixed at 40. To get the "<p id="jumpHere">7. line with a long content <br /></p>" to the top which is the best way.... 1. Calculate with js the distance in the y-axis between the top of the container div and the top of the "<p>" tag, place this in a var then drop that in place of the fixed value of 40 (and if this is the best way... any pointers ) 2. As the list is driven by php, i could say "this iteration is loop run 7, therefore the scrollTop value should equal 7x(what ever constant looks best) Quote Link to comment Share on other sites More sharing options...
freelance84 Posted May 4, 2011 Author Share Posted May 4, 2011 Well i've got it working with php and the magic constant was 7. If there is a simple and neat way of doing this with just js i would love to know. Although i suppose at the moment there isn't much code being used. $scrollVal = $curVal * 7; echo <<<_END </table></div> <script type="text/javascript"> window.onload = function Scroll () { var myCont = document.getElementById ("namesContainer"); myCont.scrollTop = $scrollVal; } </script> _END; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.