...

View Full Version : Big First letter help



mortonmoore
11-02-2011, 06:21 AM
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

Insanesniiperz
11-02-2011, 07:39 AM
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 :)

Mr.
11-02-2011, 08:28 AM
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.





<!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>

VIPStephan
11-02-2011, 01:41 PM
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! :eek: 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. :D I should have left it at that.

Rowsdower!
11-02-2011, 02:22 PM
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/advancedcss/a/aa090307.htm


So, essentially:

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).

Insanesniiperz
11-02-2011, 06:51 PM
WOW, thatís got to be the worst advice Iíve seen in years! :eek: 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. :D 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.

teedoff
11-02-2011, 07:11 PM
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.

VIPStephan
11-02-2011, 07:32 PM
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 (http://bancomicsans.com/main/?page_id=2) from your repertoire.

Insanesniiperz
11-02-2011, 07:33 PM
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
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

Rowsdower!
11-02-2011, 09:23 PM
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
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:


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)
You used a method that requires manually updating each entry in the javascript array - this would require continual updates whenever quotes were changed/added
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...

VIPStephan
11-03-2011, 12:26 AM
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.

alykins
11-03-2011, 03:14 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum