JavaScript and CSS

Adding CSS to a JavaScript function

Page 1 of 1

5 Replies - 900 Views - Last Post: 21 January 2009 - 09:49 PM

#1 tstave  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 09-January 09

JavaScript and CSS

Post icon  Posted 20 January 2009 - 01:57 PM

I recently made a javascript program that generates a random quote for my website
the code for the program and the webpage is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html>
<style type="text/css">
h1 {
  color: red;
}
#quote {
  position: absolute;
  top: 50px;
  left: 50px;
  color: black;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}



</style>
<head>
  <title>Timothy Stave</title>
</head>

<body>
<h1>Random Quote Generator</h1>

<div id="quote">
The random quote that you recieve now is:<br />
<script language="Javascript">

var Quotation=new Array()

Quotation[0] = "Time is of the essence! Comb your hair.";
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.";
Quotation[9] = "Invention is the mother of too many useless toys.";


var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
<br /> Thanks for comming to my website!
</div>



<!--============================================================-->

</body>

</html>


My question is how would i add a CSS to the quote so that when i add authors i could add a class to the authors so that when it comes up the author would be bold and the text could be a different color.

If my question is unclear just let me know and i will try again. lol.

thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript and CSS

#2 JohnWaters  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 130
  • Joined: 28-November 08

Re: JavaScript and CSS

Posted 20 January 2009 - 02:42 PM

I hope I understand the question.

Can you not just add...

...
#author {
	color: red;
}
...
<div id="quote">
The random quote that you recieve now is:<br />
<div id="author">
Author Name Here
</div>
...
</div>

...

Was This Post Helpful? 0
  • +
  • -

#3 tstave  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 09-January 09

Re: JavaScript and CSS

Posted 20 January 2009 - 09:53 PM

that would work, but the author would not change with the quote... so unless i have the same author for every quote i dont think that would work :/
Was This Post Helpful? 0
  • +
  • -

#4 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 38
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: JavaScript and CSS

Posted 21 January 2009 - 04:46 PM

Hey, tstave, I whipped a little something up using two arrays and the getElementById() function, take a look, refreshing the page will bring up a new random quote, I'm sure there's an easier and more efficient way of doing this, though:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title>JS Random quote example by Chris Elison</title>
		<link rel="stylesheet" type="text/css" href="tstave.css" />
		<script type="text/javascript">
			function doQuote () {
				var quotes = new Array(
					"It's wonderful to be here in the great state of Chicago!",
					"You don't pay taxes - they take taxes!",
					"I can believe anything, provided that it is quite incredible.",
					"The girls of the internet. Ooh, I'd go online with them anyday!",
					"I've been so worried I haven't buffed my shoes in my two days."
					);
				
				var authors = new Array(
					"Dan Quayle",
					"Chris Rock",
					"Oscar Wilde",
					"Homer J. Simpson",
					"The Cat (Red Dwarf)"
					);
			
				var totalquotes = quotes.length;
				var x = Math.round(Math.random()*(totalquotes-1));
			
				document.getElementById("divquote").innerHTML = "\"" + quotes[x] + "\"";
				document.getElementById("divauthor").innerHTML = authors[x];
			}
		</script>
	</head>
	<body onload="doQuote()">
		<div id="divquote">Here is a quote</div>
		<div id="divauthor">Author name</div>
	</body>
</html>




body {
	margin: 4em auto auto auto;
	width: 550px;
}

#divquote {
	color: #000;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 2.5em;
	font-style: italic;
	margin: 0px;
}

#divauthor{
	font-family: "Tahoma",sans-serif;
	font-size: 12pt;
	margin: 0px;
}


Try that and see how it goes :)

Edit: Woohoo, I'm now a forum 'DIC Head'! :pirate:

This post has been edited by Christopher Elison: 21 January 2009 - 04:48 PM

Was This Post Helpful? 0
  • +
  • -

#5 tstave  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 09-January 09

Re: JavaScript and CSS

Posted 21 January 2009 - 04:53 PM

wow, that works wonderfully.
I wont copy what u put but i will definately integrate it into the program. Thanks a bunch man.
Was This Post Helpful? 0
  • +
  • -

#6 teampoop  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 140
  • Joined: 19-June 08

Re: JavaScript and CSS

Posted 21 January 2009 - 09:49 PM

You can edit the CSS directly with javascript. Every DOM object has a style property. The style property has many other properties resembling valid CSS statements with a few issues.

1) Instead of using dash cases.. the properties are camelCased.. IE: font-size: 8pt would be fontSize='8pt';
2) as noted.. properties are STRINGS.. just setting the font to 8 will confuse and irritate your browsers.

So given:
<div id="bob">Content here</div>


To change the color of bob to red, one would
b = document.getElementByID("bob");
b.style.color = "red";


Use firebug's DOM feature to drill down on the full list of style properties, but anything you see in CSS will have an equal.

PS if you use jQuery, you could easily do this with 
$("#bob").css("color", "red");

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1