PDA

View Full Version : Scrollable Content III text dropping to bottom



TicTacWoe
01-01-2010, 02:32 AM
1) Script Title: Scrollable Content III

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm (couldnt find link to third version on DD)

3) Describe problem: When I have just a little bit of text in the scroller the text drops to the bottom of the div when the page loads

heres an example of the problem

http://clockworkorchestra.com/sS.html

jscheuer1
01-01-2010, 04:51 AM
Why would you setup a scroller for content that isn't large enough to warrant using a scroller? And just what should happen if you do?

Anyways, you can try this, add the highlighted as shown:


function bottomwrite(){
if (iens6){
document.write('<\/div><\/div>\n');
if(document.getElementsByTagName('div')[document.getElementsByTagName('div').length - 1].offsetHeight < scrollerheight){
return;
}
if(sidecontrols){
document.write('<\/td><td s . . .

TicTacWoe
01-01-2010, 03:16 PM
thanks for the reply I'll try that out! The reason I asked is because on the site I will be adding text to the scroller over time so eventually it will just behave as a scroller but initially there won't be enough text in it to function as such.

jscheuer1
01-01-2010, 03:50 PM
I played around with it a bit more. This is invalid (from your demo's source code):


<div style="font-family:sans-serif;font-size:90%;margin-left:.5ex;margin-top:-.8em!important;margin-top:.2em;"><p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum. Pellentesque quis purus vitae risus cursus aliquet.
</p>

No closing div tag. Also, even correcting that will give problems (when applying my fix) in IE because of the margin-top:-.8em!important; bit. However, if one replaces the p with a nested div, margin-top:-.8em!important; is not required, so you can end up with:


<div style="font-family:sans-serif;font-size:90%;margin-left:.5ex;margin-top:.2em;"><div>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum. Pellentesque quis purus vitae risus cursus aliquet.
</div>
</div>

and it should work out fine.