Be a Supporter!

Styling With Css & Javascript

  • 367 Views
  • 5 Replies
New Topic Respond to this Topic
« Return to Programming Forum Forum Index
deckheadtottie
deckheadtottie
  • Member since: Oct. 21, 2003
  • Offline.
Forum Stats
Supporter
Level 59
Programmer
Styling With Css & Javascript 2011-11-01 16:53:10 Reply

Hello all,

We've been doing some basic JavaScript in class recently and I'm stuck when it comes to styling the output from JavaScript.

Below is a shell of a document that where it's components are made up from an external JavaScript file (posted below the HTML).

The crux of this very basic project is that "hello world" is printed on screen and it increases in font size up to a certain size, while also alternating colour.

HTML:

<!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-US">
  <head>
    <title>IWP - Prac 7</title>
		<meta http-equiv="content-type"
				content="text/html; charset=utf-8" />

<style type="text/css">

p {
text-align: center;
color: blue;
padding: 0px;
margin: 0px;
}

.red {
color: red;
}
</style>
<script type="text/javascript" src="JavaScriptsIWP_prac_7.js"></script>				


</head>	
		<body>
		</body>
		
</html>

JavaScript:

var i = 8;
var intMaxFontSize = 24;
	 
	 while (i < intMaxFontSize)
	 {
		if (i % 2 == 0)
		{
		document.write("<p style = font-size:" + i + ";>Hello World</p>");
                } 
		else 
		{
		document.write("<p class='red' style = font-size:" + i + ";>Hello World</p>");
		}
		
		i++;
	}

The CSS styles the document, but the font size doesn't increase. (Non-deterministic looping was a requirement, I am aware a for loop will be better).

However, when I create a basic document with no external JavaScript file, I get the desired result.

<html>
	<head>
<style type="text/css">

p {
text-align: center;
color: blue;
padding: 0px;
margin: 0px;
}

.red {
color: red;
}

</style>
		<script type ="text/javascript">

	var i = 8;
	var intMaxFontSize = 96;
	 
	 while (i < intMaxFontSize)
	 {
		if (i % 2 == 0)
		{
		document.write("<p style = font-size:" + i + ";>Hello World</p>");
		} 
		else 
		{
		document.write("<p class='red' style = font-size:" + i + ";>Hello World</p>");
		}
		
		i++;
	}
	 </script>
	</head>
	<body>
	</body>
</html>

Is it possible to achieve what I'm after? No doubt I'm being an idiot about something.

#coys

BBS Signature
Diki
Diki
  • Member since: Jan. 31, 2004
  • Offline.
Forum Stats
Moderator
Level 13
Programmer
Response to Styling With Css & Javascript 2011-11-01 18:17:58 Reply

First and foremost I would advise you to use jQuery: http://www.jquery.com

Note:
While this does work it is not the most efficient way to do this.
I was trying to throw the least number of new concepts at you.

CSS

span.blue
{
	color: #0000FF;
}

span.red
{
	color: #FF0000;
}

This is pretty straight forward. Just defining the two different colours that you will be alternating between.

HTML/JavaScript

<!DOCTYPE HTML>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css">
		<script type="text/javascript" src="/custom_events/resources/js/jquery.js"></script>
		<script type="text/javascript">
		var maxFontSize = 24;
		var beginFontSize = 12;
		
		$(function()
		{
			for(i = 0; i < (maxFontSize-beginFontSize); i++)
			{
				var spanClass = (i%2) ? 'red' : 'blue';
				$('#content').append('<span class="'+spanClass+'" style="font-size:'+(beginFontSize+i)+'px">Hello World</span><br>');
			}
		});
		</script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

Probably the most important part of this is including jQuery.
For this to work you must include jQuery, and you must include it before the JavaScript which displays the "Hello World" text.

var maxFontSize = 24;
var beginFontSize = 12;

These simply define the font sizes to use. Self explanatory.

$(function()
{

This will definitely be the most confusing part for anyone who has not used jQuery before.
This is a short-hand version of the following:

$(document).ready(function()
{

Which is basically saying "wait for the document element to be ready". If the document isn't ready then you can't use jQuery with it.
The dollar sign is just an alias for "document.getElementById". jQuery uses this because typing that out is a pain in the ass.

for(i = 0; i < (maxFontSize-beginFontSize); i++)

This for loop will iterate the number of times defined by the range between "maxFontSize" and "beginFontSize".
If using the values that I did then this will be "12". Storing the difference in a variable would be a more optimal method.

var spanClass = (i%2) ? 'red' : 'blue';

This is what is called a "tertiary operator".
This is the same thing as: if(i%2) { 'red'; } else { 'blue'; }

And the % operator is the modulus operator. It divides "i" by the given number and returns the remainder.
Hopefully this isn't a new concept.

What this will end up doing is is switching toggling 'red' and 'blue'.

$('#content').append('<span class="'+spanClass+'" style="font-size:'+(beginFontSize+i)+'px ">Hello World</span><br>');

Again using the dollar sign alias here.
Calling append will append the "content" element with the given text. Which is just a simple <span></span>.

The span class (either 'red' or 'blue') is inserted, and the font size is set using inline styling. I wouldn't recommend using inline styling but it's the simplest way to explain this.

-----

And there you have it.
The words "Hello World" printed out in varying font sizes and toggling between red and blue font colours.

You should definitely read up on jQuery. Specifically its "toggle" features.

Diki
Diki
  • Member since: Jan. 31, 2004
  • Offline.
Forum Stats
Moderator
Level 13
Programmer
Response to Styling With Css & Javascript 2011-11-01 18:26:53 Reply

Whoops. I forgot to change the source path of jQuery in my code.
That's just the path for it on my server that I used to test that before posting it. So just ignore that. :)

polym
polym
  • Member since: Oct. 2, 2007
  • Offline.
Forum Stats
Member
Level 14
Audiophile
Response to Styling With Css & Javascript 2011-11-01 21:00:43 Reply

You forgot to specify pixels or EM is my guess.

gumOnShoe
gumOnShoe
  • Member since: May. 29, 2004
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to Styling With Css & Javascript 2011-11-01 21:08:07 Reply

After something is on the page you can do this:

document.getElementById("element id").style.fontSize = myInt + "em/px/whatever";

Here you are missing quotes if you are going to embed in a p tag.

"<p style = font-size:" + i +

Should be:

'<p style="font-size:' + i + 'em">text</p>

Or alternatively escape the quotes inside the string. It is generally worth taking advantage of the fact that javascript can have strings using single or double quotes as a delimeter.

Newgrounds Anthology? 20,000 Word Max. [Submit]

Music? Click Sig:

BBS Signature
deckheadtottie
deckheadtottie
  • Member since: Oct. 21, 2003
  • Offline.
Forum Stats
Supporter
Level 59
Programmer
Response to Styling With Css & Javascript 2011-11-02 04:41:46 Reply
At 11/1/11 06:17 PM, Diki wrote: First and foremost I would advise you to use jQuery: http://www.jquery.com

Sadly it had to be done in basic JavaScript (sad, I know), but your explanation was really useful as I am planning on teaching myself JQuery over Christmas and reading that made me feel a little better about it as I actually understood what was going on. Why our class isn't being taught JQuery when we're on JavaScript is another matter altogether...

Thanks for your help, though, as it did remind me that I had stupidly forgot to specify by what unit the font-size should have been.

I could get away with it with no doctype, but XHTML Strict (rightly) wasn't going to let me.

At 11/1/11 09:00 PM, polym wrote: You forgot to specify pixels or EM is my guess.

I sure did. D'oh!

At 11/1/11 09:08 PM, gumOnShoe wrote: '<p style="font-size:' + i + 'em">text</p>

Ah good catch. I usually use single quotes. Bad habits crept in there, though. All changed again.

Thanks all. I appreciate it.

#coys

BBS Signature