PDA

View Full Version : Accordion Menu script (v1.3)



dpineda
06-12-2008, 08:10 PM
1) Script Title: Accordion Menu script (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

3) Describe problem: I tried generating a menu using the accordian script on my webpage. I seem to be having a problem to get the font / formatting to change to "Cabrili" size "13" on the menuheaders. The font on the objects benath the headers seem to be working fine. I also noticed that there is a font / formatting inconcistency between Mozilla Firefox and Apple Safari as compared to IE.

If you can help explain where the problem in my code is so the fonts remain consistent throughout Firefox, IE, and Safari. I would appreciate it.

Also, I had noticed when viewing the webpage on a computer with a smaller display (laptop), when the menu is fully expanded, you cannot see some of the choices as they fall off the screen. Is it possible to add a scroll bar?

Thank you!

My example: http://www.mccarthy-international.com/development/

ddadmin
06-12-2008, 09:33 PM
With regards to the font question, if you mean the font of the headers by default (and not dynamically when it's either expanded or contracted etc), this should just be a straight forward CSS issue. I know I have trouble getting a font to look the same across browsers, especially versus Safari. You may want to research this a bit more on Google.


Also, I had noticed when viewing the webpage on a computer with a smaller display (laptop), when the menu is fully expanded, you cannot see some of the choices as they fall off the screen. Is it possible to add a scroll bar?

The problem is because the menu is inside a frame with no scrollbars specified. Any content that exceeds the height of the window -not just the menu per say- will be hidden as a result. If you want cross browser compatibility, your best bet is to enable scrollbars on the left frame, which may look ugly as a result, however. Something like:


<html>
<frameset cols="30%,70%" frameborder=no border=no framespacing=no>
<frame src="page1.htm" scrolling="yes">
<frame src="page2.htm">
</frameset>
</html>

A good frames tutorial here (http://www.javascriptkit.com/frame1.shtml).