Styling data added via JavaScript

Forum Moderators: not2easy

Message Too Old, No Replies

Styling data added via JavaScript

Changing color of on-screen items

Adam5000

4:56 pm on Jun 24, 2007 (gmt 0)

I know this looks like javascript and it is. But I think this is a style thing. The code below works good and the default color is black. If it's not a big issue, I'd like to change it to a lighter color like red or white so it shows up better on my background. Help!

<html>
<head>
<title>Color</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello to all those good people at Webmaster World.")
</script>
</body>
</html>

DrDoc

8:58 pm on Jun 24, 2007 (gmt 0)

Have you tried using HTML in your document.write statement? ;)

Adam5000

9:42 pm on Jun 24, 2007 (gmt 0)

Yes, and html tags work good in the example I gave, and my example was a little oversimplified.

The item I'm trying to style is a variable that's been modified by a function. Below is a better example. When I use the paragraph tags in the document.write(a), the screen goes blank. I can write the letter a by using the quotation marks, but not the variable (in this case the number 2).

<html>
<head>
<title>Color</title>

<style>

p {color: #990000; font-size: 20pt;}

</style>

var a=1

function addOne()
{a++}

addOne()

</script>

</head>
<body>

document.write(a)

</script>

</body>
</html>

lavazza

2:01 am on Jun 25, 2007 (gmt 0)

Maybe this will help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-GB">
<head>
<title>Color</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
p.myOrdinaryText {color: #000066; background-color:#FFFFFF; font-size: large;}
p.mySpecialText {color: #00FF00; background-color:#FFFFFF; font-size: large;}
.myVariable{color: #990000; background-color:#FFFFFF;font-size: large;}
</style>
<script type="text/javascript">
var a=1;
function addOne(){
a=a+a;
}
</script>
</head>
<body>
<form name="myForm" method="get" action="http://www.yoursite.com">
<p class="myOrdinaryText">
A paragraph of 'ordinary' here
<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor ligula, sollicitudin in, suscipit non, faucibus ut, quam. Duis metus risus, fermentum vitae, rutrum quis, eleifend in, diam. Curabitur ullamcorper felis vel nisi. In in enim. Nullam faucibus vehicula nulla. Etiam odio. Praesent mauris. Donec in leo vitae pede consectetuer gravida. Quisque suscipit quam non nulla. Etiam in diam. Suspendisse tortor.
</p>
<script type="text/javascript">
addOne();
document.write('<p class="mySpecialText">Some \'special\' text before the variable   <span class="myVariable">'+ a + '<\/span>   and some more \'special\' text after the variable<\/p>');
document.write('<p class="myOrdinaryText">And another paragraph of \'ordinary\' text here '
+ '<br\/> Phasellus dolor neque, placerat cursus, molestie pharetra, condimentum non, lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque velit massa, tempus sit amet, tempor eu, vulputate sit amet, nisi. Maecenas ut neque.<\/p>');
</script>
</form>
</body>
</html>

Note: you should end every js line with a semi-colon

Bernard Marx

12:14 am on Jun 25, 2007 (gmt 0)

The following 2 messages were spliced on to this thread from a duplicate thread in the JavaScript forum. -- DrDoc

Perhaps like this ..?

document.write("<p>"+a+"</p>");

[edited by: DrDoc at 3:36 am (utc) on June 25, 2007]

DrDoc

3:23 am on Jun 25, 2007 (gmt 0)

Or ..

<p><script type="text/javascript">  
document.write(a)  
</script></p>

Adam5000

2:35 pm on Jun 26, 2007 (gmt 0)

Thanks to all, Dr, Lava, Bernard, All of those things work good.

Adam5000

2:53 pm on Jun 26, 2007 (gmt 0)

Here's what I'm trying to do. I'm trying to style the timer that Andy did in the javascript forum. He did a great job on it. It works fabulous, and it does just what I need it to do. I've got it all styled except for the timer output (the numbers on the screen that count down). I'd like the numbers to be white and a little bigger. Something like #ffffff and font-size: 20pt. I've tried several different ways with several of the variables with no luck. Help!

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT type="text/javascript">
var photo=new Array("000.jpg","001.jpg","002.jpg","003.jpg");
var interval=new Array(2,4,6,1);
var idx=0;
var secs=interval[idx];
var timed;
var msg='';

function stopClock()
{
clearTimeout(timed);
var bdiv=document.getElementById('start');
bdiv.style.cssText="display:block;";
var bdiv=document.getElementById('stop');
bdiv.style.cssText="display:none;";
var mdiv=document.getElementById('test');
if(msg=="The End")
{
mdiv.setAttribute('src','Ending.jpg');
}
else
{
mdiv.setAttribute('src','');
}

var mdiv=document.getElementById('timer');
mdiv.innerHTML=msg;
idx=0;
secs=interval[idx];
}
</SCRIPT>
</HEAD>
<BODY>
<img id="test">
<div id="timer"> </div>
<div id="start"><input type="button" onClick="javascript:startClock();" value="Start"></div>
<div id="stop" style="display:none;"><input type="button" onClick="javascript:stopClock();" value="Stop"></div>
</BODY>
</HTML>

SuzyUK

8:35 am on Jun 27, 2007 (gmt 0)

Any alterations to the text can be made by styling the timer div e.g.

#timer {background: #000; color: #fff; font-size: 24px; width: 100px; text-align: center;}

Adam5000

3:05 pm on Jun 27, 2007 (gmt 0)

Suzy. You're brilliant. That styled the numbers and text all in one swoop. Long live SuzyUK.