Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Big First letter help

    Hi I have javascript making a quote appear and change each week to another quote. I want to make the first letter of the quote large with some type of style. I have done it before within a <p> but adding it to a javascript function i have no idea, can someone please help me.
    (similar to this goodverse.com/)
    Im not amazing with code, html/css i understand intermediate.

    code attached as txt format.

    thanks
    Attached Files Attached Files

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here this should work, I'm going to use your first quotation as an example.

    Quotation[1] = "<font size="7" face="Comic Sans MS">S</font>anity is a golden apple with no shoelaces.";

    By adding the html <font tags> on either side of your first letter, it should alter that first letter by your choice. Here I used a font size of 7(Quite Large) and the style face of Comic Sans MS. You can also use pixels to change the size of the letter, but I'm sure by designating it at 1,2,3,4,5,6,or 7, there should be no problem. Best of Luck

  • #3
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Here... this is a much better way of doing it... you had several errors inside your code. You should keep your JavaScript in the head section.


    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    
    <head>
    <!--link href="style.css" rel="stylesheet" type="text/css" /-->
    <title>verse test</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style>
        p.bigFirst:first-letter { font-size: 3em; }
    </style>
    
    <script type = "text/javascript">
    //<div id = "quoteOfWeek"> must be loaded before script runs
    //therefore place script just before closing </body> tag
    //or in an onload function
    window.onload=function() {
    
    Date.prototype.getWeek = function() {
    var onejan = new Date(this.getFullYear(),0,1); // month 0 is January
    return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    }
    
    var today = new Date();
    var weekno = today.getWeek();
    
    var Quotation = [];
    Quotation[1] = "Sanity is a golden apple with no shoelaces.";
    Quotation[2] = "Repent! The end is coming, $9.95 at Amazon.";
    Quotation[3] = "Honesty blurts where deception sneezes.";
    Quotation[4] = "Pastry satisfies where art is unavailable.";
    Quotation[5] = "Delete not, lest you, too, be deleted.";
    Quotation[6] = "O! Youth! What a pain in the backside.";
    Quotation[7] = "Wishes are like goldfish with propellors.";
    Quotation[8] = "Love the river's \"beauty\", but live on a hill.";  // note escape quotes
    Quotation[9] = "Invention is the mother of too many useless toys.";
    Quotation[10] = "Time is of the essence! Comb your hair.";
    //Quotation[11] =
    //Quotation[12] =
    // and so on for 53 weeks
    document.getElementById("quoteOfWeek").innerHTML="<p class=\"bigFirst\">" + Quotation[1] + "</p>"; //change num to test
    //once you have defined ALL 53 weeks, change Quotation[1] to Quotation[weekno]
    }
    
    </script>
    
    
    </head>
    <body>
    <div id = "quoteOfWeek">
    </div>
    </body>
    </html>
    Last edited by Mr.; 11-02-2011 at 07:44 AM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by Insanesniiperz View Post
    Here this should work, I'm going to use your first quotation as an example.

    […]
    WOW, that’s got to be the worst advice I’ve seen in years! Using the long deprecated font element, and then even with Comic Sans as example. *shudder* I’m wondering if there is a bad advice filter in place that set this post to “moderated” initially. I should have left it at that.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Yikes... Why use javascript at all for the styling when CSS can (and should) handle this on its own? What you're looking for is the first-letter pseudo-class:

    http://webdesign.about.com/od/advanc...a/aa090307.htm


    So, essentially:
    Code:
    p.quote_section:first-letter{font-size:200%;/*and so on and so forth...*/}
    I don't care to download an attachment so you'll have to rename the class above to work for your paragraph, but this is the basic approach that can be used and it is entirely independent of javascript and without bloat to your markup (no extra <span> tags or the like).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    WOW, that’s got to be the worst advice I’ve seen in years! Using the long deprecated font element, and then even with Comic Sans as example. *shudder* I’m wondering if there is a bad advice filter in place that set this post to “moderated” initially. I should have left it at that.
    Horrible advice? LOL Troll, simply put. He asked for a fix and I gave him the Simplest fix there is. No need to get all fancy. Sometimes the easiest fixes work just as best as the rest. Rude people on this forum for damn sure. Learn some damn manners, no matter your status on this forum.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Insanesniiperz View Post
    Horrible advice? LOL Troll, simply put. He asked for a fix and I gave him the Simplest fix there is. No need to get all fancy. Sometimes the easiest fixes work just as best as the rest. Rude people on this forum for damn sure. Learn some damn manners, no matter your status on this forum.
    Rudeness aside, you DO know that the font tag indeed has been deprecated for years and EVENTUALLY will no longer be supported in most current browsers. So to say "I gave him the easiest fix", thats like saying well your radiator hose was busted, so we wrapped it with dyucktape since that was the easiest fix.

    and btw: not sure a moderator can be a troll...lol but then again I may not know the full definition of the word.
    Teed

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Insanesniiperz, I’m known to speak out what I think sometimes. When you try to help you should be aware that whatever you write on the internet will be stored forever and other people might come across your “fix”, too, some time in the future. So, the goal – and this applies to the entire life, in my opinion – should not be to give the quickest and most simple fixes but to provide the best possible answer and quality advice of which others could learn from, too. So please help to make the internet a better place and don’t add junk that we can already read on old websites that haven’t been updated in years.

    Oh and please ban Comic Sans from your repertoire.

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Rudeness aside, you DO know that the font tag indeed has been deprecated for years and EVENTUALLY will no longer be supported in most current browsers. So to say "I gave him the easiest fix", thats like saying well your radiator hose was busted, so we wrapped it with dyucktape since that was the easiest fix.

    and btw: not sure a moderator can be a troll...lol but then again I may not know the full definition of the word.
    He's part troll for this simple reason: He gives people bad reputation for a "horrible" fix, yet that "horrible" fix would work in this situation. How can any advice be deemed as horrible if it would work? And as far as to say the
    PHP Code:
    font 
    tag won't be supported in in the near future in most current browsers, nonsense. They've been saying that for years as well as other basic HTML Tags. Do they still work? Yes, and they will continue to work, in my opinion, until HTML dies completely. Yes it is obviously easier to code in CSS, but why forget the basics if they still work? I'm sure he's gotten his problem fixed so there should be no need for me to respond anymore on this thread about silly things.

    @Stephan: I just used the first font face that came to my mind . It wasn't meant for him to actually use it. To be quite honest, I don't even know what the font looks like

    He asked a question, I gave him an answer that would fix that problem. Enough said.

    InSaNeSniiperz

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Insanesniiperz View Post
    He's part troll for this simple reason: He gives people bad reputation for a "horrible" fix, yet that "horrible" fix would work in this situation. How can any advice be deemed as horrible if it would work? And as far as to say the
    PHP Code:
    font 
    tag won't be supported in in the near future in most current browsers, nonsense. They've been saying that for years as well as other basic HTML Tags. Do they still work? Yes, and they will continue to work, in my opinion, until HTML dies completely. Yes it is obviously easier to code in CSS, but why forget the basics if they still work? I'm sure he's gotten his problem fixed so there should be no need for me to respond anymore on this thread about silly things.

    @Stephan: I just used the first font face that came to my mind . It wasn't meant for him to actually use it. To be quite honest, I don't even know what the font looks like

    He asked a question, I gave him an answer that would fix that problem. Enough said.

    InSaNeSniiperz
    To be objective about it, your suggestion had three fairly obvious things about it that were problematic:

    1. You used deprecated markup (the "font" tag itself as well as the attributes used within the tag) that would not pass a validator under strict doctypes (which are meant to be the ones to shoot for) - this would require further tweaking before use by anyone who codes to standards, or who intends to code to standards in future (hint: this should be everyone)
    2. You used a method that requires manually updating each entry in the javascript array - this would require continual updates whenever quotes were changed/added
    3. You used additional HTML markup to get this done - this is not optimized for cacheability or (though minor in this case) for bandwidth use


    And as for your earlier comment that yours is the "simplest fix there is" - that's patently false. It is bloated, sloppy, and out of date advice. Frankly, I would have de-repped you for that, too. I'm just too lazy and disinterested to bother since I'm not a moderator. That's not trolling; it's quality control.

    Anyway, read up on CSS and web standards and you'll begin to understand the ire...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Yeah, OK, I didn’t want to start an endless discussion, actually. I’ve made my point, the insane sniper made his point and I think we both felt (and he even said) that enough has been said about it, so I’m cool with it. Please don’t let this get out of hand.

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by VIPStephan View Post
    Yeah, OK, I didn’t want to start an endless discussion, actually. I’ve made my point, the insane sniper made his point and I think we both felt (and he even said) that enough has been said about it, so I’m cool with it. Please don’t let this get out of hand.
    let the out-of-hand wagon begin
    I'm sorry I couldn't resist
    I will refrain from commenting

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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