SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please Read, Feedback Appreciated, font-family selector

    Hello,
    I've been entertaining the idea of a font family selector
    for users to be able to select/change the font-family. I don't
    know the best way to do it, but I ended up using javascript with
    a small script which adds css styling to div classes. Well, of coarse,
    it's outdated and discontinued javascript, with other snags....
    requires internal css stylesheet with the class, and I never did
    figure out how to cookie the SOB. I am wondering how to go about
    it, how you would go about it, the best possible way to achive a
    cookied font-family selector. I've looked, and there is no such
    animal out there except for this one.

    Please advise, please make a suggestion here, and you can see it
    in action here: http://tinyurl.com/55klxr

    Here is the pasted code, naked and plain to see, requires internal
    css stylesheet with class, and I no cookie yet.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Font-Family EasyCook</title>

    <!-- 
    REQUIRED CSS CLASS -->
    <
    style type="text/css"><!-- 
    .
    wrap /** THIS GOES WITH add-css.js **/ }
    --></
    style>

    <
    script type="text/javascript"><!--//--><![CDATA[//><!--
    // Sample: <a onclick="getStyleClass('wrap').style.color = 'blue';" href="#" title="
    // Home">Switch blue</a>
    // DOES NOT WORK IF IT CANT FIND STYLESHEET & CLASSES, APPLIES ONLY TO CERTAIN OBJECTS
    function getStyleClass (className) {
        for (var 
    0document.styleSheets.lengths++)
        {
            if(
    document.styleSheets[s].rules)
            {
                for (var 
    0document.styleSheets[s].rules.lengthr++)
                {
                    if (
    document.styleSheets[s].rules[r].selectorText == '.' className)
                    {
                        return 
    document.styleSheets[s].rules[r];
                    }
                }
            }
            else if(
    document.styleSheets[s].cssRules)
            {
                for (var 
    0document.styleSheets[s].cssRules.lengthr++)
                {
                    if (
    document.styleSheets[s].cssRules[r].selectorText == '.' className)
                        return 
    document.styleSheets[s].cssRules[r];
                }
            }
        }
        
        return 
    null;
    }
    //--><!]]></script>

    </head>
    <
    body>

    <
    div class="wrap">
    <
    div class="font-family_black">
      <
    form action="#" id="familyform">
      <!-- 
    Requires Javascript and CSS Defined -->
        <
    select name="#" class="pullfamily" onchange="getStyleClass('wrap').style.fontFamily = this.options[this.selectedIndex].value;">
    <
    option id="f1" value="Verdana, Arial, Helvetica" selected="selected">Select Font Family</option>
          <
    option id="f2" value="Times, serif">Times</option>
          <
    option id="f3" value="Arial, Helvetica, sans-serif">Arial</option>
          <
    option id="f4" value="Georgia, Times, serif">Georgia</option>
          <
    option id="f5" value="Geneva, Arial, Helvetica, sans-serif">Geneva</option>
          <
    option id="f6" value="Helvetica, Arial, Geneva">Helvetica</option>
          <
    option id="f7" value="Verdana, Arial, Helvetica">Verdana</option>
          <
    option id="f8" value="Courier, monospace">Courier</option>
          <
    option id="f9" value="monospace, courier">Monospace</option>
        </
    select></form></div><!-- close font_family -->

    <
    p>This Text will see font family changes...</p>

    </
    div><!-- close wrap -->
    </
    body>
    </
    html

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The font face can be selected in the browser, so you are merely duplicating an already existing service. You are writing a web page, not a browser after all. Leave the browsers to do what browsers do and stop trying to re-engineer them.

    Of course, you are always free to write your own browser and put it out there if you like. Or you could write a browser extension that would give users a font-family dropdown box.

    But trying to make a web page do it is inappropriate, out of place, and a waste of effort in my opinion.
    Ed Seedhouse

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Ed. I do like the translation ability. It is a good tool for international users.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •