Scrollable Menu Links causes horizontal scrollbar

[reaperxt]

1) Script Title: Scrollable Menu Links

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rollerlink.htm

3) Describe problem: When the amount of links increases it causes a horizontal scrollbar in the browser window. This is because the script calculates the actual width of the amount of links you desire by first writing them to a <span></span>, and the span causes the horizontal scrollbar.

Is there any work-around for this? Or is there a similiar script that does not have this problem?

Any help is very much appreciated.

[jscheuer1]

You are referring to this line:

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')

left:-5000 should be more than enough to prevent this problem. However, with a valid DOCTYPE most browsers will ignore both the top and left coordinates because no units are specified.

The line should be:

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-5000px">'+menucontents+'</span>');

If you have more than 5000px worth of links, the number 5000 may be increased. If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[reaperxt]

Thanks very much!, It works like a charm now. I did find it weird that the browser was ignoring the -5000, but i completley overlooked that it did not have the px .

Thanks again for the fast and very helpful reply!

[webwonder]

hi

i had this same problem in IE and the above fixed it thanks, but when i checked in opera the same problem occurs it causes the horizontal scroll bar. Any ideas?

thanks

[jscheuer1]

hi

i had this same problem in IE and the above fixed it thanks, but when i checked in opera the same problem occurs it causes the horizontal scroll bar. Any ideas?

thanks

The demo page in Opera doesn't do that for me. Does it for you? I recall older versions of Opera sometimes needing a container with overflow hidden to prevent the horizontal scrollbar in similar situations, what version of Opera are you using? In any case, I would have to see it to tell for sure what the problem is and what might be done about it:

Please post a link to the page on your site that contains the problematic code so we can check it out.

But please be sure to tell me what version of Opera you are using.

Edit: I just tried in Opera 9.52, even with a scrolling menu that caused a horizontal scrollbar, with the fix there was no problem.

[webwonder]

the site is at http://nbyrne.co.uk/geddes/index.html version of Opera 8.52.

i also have noticed that in firefox and ie the menu lines ups but in opera it didnt i just tried taking padding of the links and this does alter the width of the menu so i guess i will have to put spaces in the menu itself, but this does not stop the horizontal scroll bar,

thanks

[jscheuer1]

Why are you using such an old version of Opera? Anyone who uses Opera as their primary browser would be using a more recent version. I said I had 9.52, but it is actually 9.51. Anyways, your page is just fine in it.

You could try doing:

document.write('<div style="visibility:hidden;overflow:hidden;width:100px;position:absolute;"><span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-5000px;">'+menucontents+'</span></div>')

But it might mess things up in other browsers, even in Opera 8.52. My advice would be to stick with the current fix outlined earlier in this thread and just upgrade to a later Opera version, as I say - folks using it as their primary browser will have the latest, or at least a more recent version that doesn't have this problem.

[webwonder]

ok thanks, i dont use opera as primary browser thats firefox 3, i test in others and have latest opera at work as im at home and only tested here - i keep the older versions of browsers so i can test on different versions - if that makes sense.

thanks for your help

nikki