using FontJazz in dropdown list menu

fullmoon2 · Apr 6, 2010

I'm trying to replace an ordinary font in my dropdownlist menu, with another none standard font with FontJazz.
But I have some problems to make it work..
The dropdownlist menu is in a Template in Dreamweaver.

I've tried the example:

http://fontjazz.com/help

in an ordinary index.html in <h1></h1>.

It works perfect, but when I try to use it in my template in:

<ul>
<li><a href="#"><h4>Contact</h4></a></li>
</ul>

and change h1 in the example to h4
<script type="text/javascript">
FontJazz.apply("h4", "font");
</script>

it doesn't help at all. I put the <script type="...FontJazz.apply..</script> inside the <ul></ul>.

The <script> tags in <head> are pointing to where I placed the "fontjazz.js" (src="../js/fontjazz.js" in the folder "js") and my generated "font.js"(src="../js/fonts.js") file.

Please ask if you need further explanation.
THANKS FOR ANY HELP!

...or if you think another font-generator would be better.

vacunita · Apr 6, 2010

Looking at the Help section in FontJazz's page, it would seem, you need to place the <script> at the bottom of your page, just before the </body> tag.

I assume its because the selected tags must be fully rendered for the JS to be able to find them and modify them. So the JS must be run after the page and all the tags that need changing have loaded.

Alternatively I guess sticking it in the Onload event of the <body> tag may work as well.

Code:

<body onLoad="FontJazz.apply("h4", "font");">
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

fullmoon2 · Apr 7, 2010

Hm... no response on that..

I tried to write
<script type="text/javascript">
FontJazz.apply("li", "font");
</script>

and it kind of work.. but instead of the right word("contact"), it says "null".. maybe a errormessage or someting.. But the font works..
and the "float:left;" doesn't work, so all the <li></li> goes below like this:
null
null
null

Thanks again for helping me!

vacunita · Apr 7, 2010

Where did you place the fontjazz.apply call? Did you try the onload version? It works for me.

I messed up there, it should look like this:

Code:

<body onLoad=[red]'[/red]FontJazz.apply("h4", "font");[red]'[/red]>

Notice the single quote instead of the double quote.

As far as the floating and other stylings go, the FontJazz script changes the selected tags to a very complex barrage of divs and spans so your rules are no longer applied, so you would need to apply the float and other specific CSS stylings directly to it. Add this rule to your CSS for the float:

Code:

.FontJazz-font{
float:left !important;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

using FontJazz in dropdown list menu

fullmoon2

Technical User

vacunita

Programmer

fullmoon2

Technical User

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor