Font type changer script?

**llcoolj** · 01-03-2009, 02:06 PM

This is more just for testing purposes, say i have a horizintal nav menu with a set font type in the css(obvioulsy) well if i want to change that font type while running the page(live if you like) how would i do this, i would want to load all the fonts on my pc into a option(combo) box list and then which ever font i choose from this list then the menu font will change to that.

So without have to edit the css constanly to see the effect of a new font.

This isn't necessarily just for the menu font but you see what i mean.

thanks for any advice.

**Snookerman** · 01-03-2009, 02:14 PM

You can do this easily with jQuery.

**magicyte** · 01-03-2009, 02:28 PM

Use JavaScript. Here. Give your NavBar an id (<navbar id="w/e"></navbar> [w/e]). You can make an event handler as well. If your user, say, clicks on the navbar, the font will change. Example:

Code:

<html>
<head>
<title>None</title>
</head>
<body>
<input type="button" onclick="this.style.fontFamily = 'Courier New';" value="Change This Font">
</body>
</html>

You can do this with a function as well:

Code:

<html>
<head>
<title>None</title>
<script type="text/javascript">
function changeFont(elem, fonte) {
  elem.style.fontFamily = fonte;
}
</script>
</head>
<body>
<input type="button" value="changeFont(elem, fonte);" onclick="changeFont(this, 'Courier New');">
</body>
</html>

Now, this is a version of what you requested:

Code:

<html>
<head>
<title>None</title>
<script type="text/javascript">
function changeFont(elem, dropper) {
  document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value;
}
</script>
</head>
<body>
<div id="navver">This is supposed to be a nice little navbar. Select a new font to change this one's</div>
<select onchange="changeFont('navver', this);">
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Arial">Arial</option>
</select>
</body>
</html>

I'm sure you don't understand JavaScript at all (cuz you didn't ask about it or anything). Here is a good tutorial:

http://www.tizag.com/javascriptT/

That site also has a forum. Anyway, just ask anything you want to. By the way, if you have IE, it will display a yellow bar at the top of the screen. Click on it and select "Enable ActiveX Controls". This way, the script will work. It is suggested that you use this than jQuery. jQuery takes too much memory up for this fairly simple task (doing it this way will save perhaps 45kb, maybe 55kb...isn't much, but still

...). You can use it if you want, though. Again, feel free to ask any questions.

-magicyte

**Snookerman** · 01-03-2009, 02:55 PM

I see magicyte already posted but since I wrote this I might as well post it. jQuery actually takes less space than a normal .jpg and has so many powerful features that are really easy to use and don't require learning JavaScript. Anyways, here's the script:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Font change</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $('a[href="#"]').click(function(e){
                    e.preventDefault();
                });
                $('#fontselector a').click(function(){
                    $('#menu li').css({
                        'font-family': $(this).attr('name')
                    });
                });
            });
        </script>
        <style type="text/css">
            ul#menu li {
                display: inline;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                Home
            </li>
            <li>
                Downloads
            </li>
            <li>
                Gallery
            </li>
            <li>
                Contact
            </li>
        </ul>
        <ul id="fontselector">
            <li>
                <a href="#" name="Arial">Arial</a>
            </li>
            <li>
                <a href="#" name="Calibri">Calibri</a>
            </li>
            <li>
                <a href="#" name="Impact">Impact</a>
            </li>
            <li>
                <a href="#" name="monospace">Monospace</a>
            </li>
            <li>
                <a href="#" name="Tahoma">Tahoma</a>
            </li>
            <li>
                <a href="#" name="Times">Times New Roman</a>
            </li>
            <li>
                <a href="#" name="Verdana">Verdana</a>
            </li>
        </ul>
    </body>
</html>

What you need to do is give the links a name with the font you want. Good luck!

Thread: Font type changer script?

Thread Tools

Search Thread

Font type changer script?

Bookmarks

Bookmarks

Posting Permissions