Web Page Generator

**hsriat** · May 14 '08, 07:22 AM

Change the background repeat radio button to select, and add repeat-x, repeat-y too.

Btw.. is there any problem?

**acoder** · May 14 '08, 08:28 AM

Besides that, here are some more points:

There's a shortcut for getting the selected values of select elements: selObj.value. It should work in all modern browsers.
Instead of opening a window, you could show the web page within the page in an iframe, though that wouldn't validate as XHTML strict.
Instead of document.write( ), try using the DOM methods (document.creat eElement(), appendChild(), insertBefore(), etc.)
It's a bit too simple so far, what about tables, forms, etc.? You'd need add/delete table/form buttons, followed by add/delete row/cell/elements buttons, etc.
Move the onclick out to the JavaScript file to make the JavaScript code unobtrusive.

**Death Slaught** · May 14 '08, 12:42 PM

Originally posted by hsriat

Change the background repeat radio button to select, and add repeat-x, repeat-y too.

Btw.. is there any problem?

I could but I find the radio buttons look better (there are a lot of text boxes as it is). I will be adding all properties in the final version but for now I'm keeping it simple. ^_^

Thanks, Death

**Death Slaught** · May 14 '08, 12:53 PM

Originally posted by acoder

There's a shortcut for getting the selected values of select elements: selObj.value. It should work in all modern browsers.

So do I use that by itself or in the for loop? Could you provide a small example?

Originally posted by acoder

Instead of opening a window, you could show the web page within the page in an iframe, though that wouldn't validate as XHTML strict.
Instead of document.write( ), try using the DOM methods (document.creat eElement(), appendChild(), insertBefore(), etc.)

The only reason I'm using document.write( ) is to write the code into the page, but I will look into those (haven't herd of them ^_^).

Originally posted by acoder

It's a bit too simple so far, what about tables, forms, etc.? You'd need add/delete table/form buttons, followed by add/delete row/cell/elements buttons, etc.

I have a list of things I'm going to be making and I'm almost finished with the second "section" (the main division holding the content). I'll be posting updates in this thread after I complete each section.

Originally posted by acoder

Move the onclick out to the JavaScript file to make the JavaScript code unobtrusive.

So something like:

[CODE=javascript]document.getEle mentById("butto n").onClick = create();[/CODE]

I know that code probably won't work, but if a working version of that is what you ment then just say so and I'll figure out how to make it work myself. ^_^

Thanks, Death

**Death Slaught** · May 14 '08, 12:56 PM

Also would it be better to escape the double qoutes for this line of code or leave the single quotes?

[CODE=javascript]code="<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd'><ht ml xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>< head><title></title><meta http-equiv='content-type' content='text/html; charset=ISO-8859-1' />";[/CODE]

Thanks, Death

**acoder** · May 14 '08, 01:37 PM

Originally posted by Death Slaught

So do I use that by itself or in the for loop? Could you provide a small example?

[code=javascript]var backgroundColor = document.getEle mentById("bgCol or").value;[/code]Simple as you like!

Originally posted by Death

So something like:

[CODE=javascript]document.getEle mentById("butto n").onClick = create();[/CODE]

Almost...
[CODE=javascript]document.getEle mentById("butto n").onclick = create;[/CODE]JavaScript is case-sensitive, so it's onclick, not onClick. Remove the parentheses when assigning functions to an event handler otherwise you get the result of executing the function assigned to the onclick.

**Death Slaught** · May 14 '08, 01:43 PM

Originally posted by acoder

[code=javascript]var backgroundColor = document.getEle mentById("bgCol or").value;[/code]Simple as you like!
Almost...
[CODE=javascript]document.getEle mentById("butto n").onclick = create;[/CODE]JavaScript is case-sensitive, so it's onclick, not onClick. Remove the parentheses when assigning functions to an event handler otherwise you get the result of executing the function assigned to the onclick.

I like that a lot better than the for loops (Thanks). I knew it was case-sensitive but I didn't know that it would give you the result of the function, but how can it give you the result of the function if the function isn't exicuted?

Thanks, Death

**acoder** · May 14 '08, 05:50 PM

Originally posted by Death Slaught

I knew it was case-sensitive but I didn't know that it would give you the result of the function, but how can it give you the result of the function if the function isn't exicuted?

It would be executed in this instance - see this link for a good explanation.

**Death Slaught** · May 14 '08, 07:38 PM

That makes sense thanks! ^_^

Thanks, Death

**Death Slaught** · May 14 '08, 09:45 PM

I have fixed everything in my code now (so much more simple with out the loops ^_^), but I keep getting an error with this line of code:

[CODE=javascript]document.getEle mentById("submi tButton").oncli ck = create;[/CODE]

It says that it has no properties? Here's is the complete code:

XHTML:

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet " href="style.css " />
<script type="text/javascript" src="script.js" ></script>
</head>

<body>

<form name="bgForm" id="bgForm" action="#" method="get">
<p>
Background Color :
<select name="bgColor" id="bgColor">
<option value="">None</option>
<option value="#000">Bl ack</option>
<option value="#FFF">Wh ite</option>
<option value="red">Red </option>
<option value="blue">Bl ue</option>
<option value="green">G reen</option>
<option value="yellow"> Yellow</option>
<option value="purple"> Purple</option>
<option value="brown">B rown</option>
<option value="orange"> Orange</option>
<option value="pink">Pi nk</option>
<option value="grey">Gr ey</option>
</select>
<br />
<br />
Background Image :
<input type="text" name="bgImage" id="bgImage" value="" />
<br />
<br />
Background Repeat :
<select name="bgRepeat" id="bgRepeat">
<option value="repeat"> Repeat</option>
<option value="no-repeat">No-Repeat</option>
<option value="repeat-x">Repeat-x</option>
<option value="repeat-y">Repeat-y</option>
</select>
<br />
<br />
Background Position :
<select name="bgPositio n" id="bgPosition" >
<option value="">Defaul t</option>
<option value="top">Top </option>
<option value="left">Le ft</option>
<option value="right">R ight</option>
<option value="bottm">B ottom</option>
<option value="center"> Center</option>
</select>
<br />
<br />
<input type="button" id="submitButto n" value="Create" />
</p>
</form>

</body>

</html>[/HTML]

JavaScript:

[CODE=javascript]document.getEle mentById("submi tButton").oncli ck = create;

function create() {

var code;

var backgroundColor = document.getEle mentById("bgCol or").value;
var backgroundImage = document.getEle mentById("bgIma ge").value;
var backgroundRepea t = document.getEle mentById("bgRep eat").value;
var backgroundPosit ion = document.getEle mentById("bgPos ition").value;

code="<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd'><ht ml xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>< head><title></title><meta http-equiv='content-type' content='text/html; charset=ISO-8859-1' />";

code+="<style type='text/css'>*{margin:0 ;padding:0;}bod y{background-color:";
code+=backgroun dColor + ";";
code+="backgrou nd-image:url('";
code+=backgroun dImage + "');";
code+="backgrou nd-repeat:";
code+=backgroun dRepeat + ";";
code+="backgrou nd-position:";
code+=backgroun dPosition + ";}";
code+="</style>";

code+="</head><body></body></html>";

var display = open('', 'Display', 'height=1000,wi dth=1200');
display.documen t.write(code);
display.documen t.close();
display.focus() ;

}[/CODE]

There's probably a syntax error or it's just stupidity on my part ^_^

Thanks, Death

PS - In the first sentence in this post I lied. ^_^ There's still one things I didn't fix but I'll do that later.

**gits** · May 14 '08, 10:13 PM

when you use dom-methods like document.getEle mentById() you have to wait for the page-load before ... since the dom must be ready to use first. just wrap the onclick-assignment into an init-function that you call onload of your page:

[CODE=javascript]function init_page() {
document.getEle mentById("submi tButton").oncli ck = create;
}[/CODE]

[HTML]<body onload="init_pa ge();">[/HTML]
that should work :)

kind regards

**acoder** · May 15 '08, 09:13 AM

Originally posted by Death Slaught

That makes sense thanks! ^_^

Thanks, Death

You're welcome. There's also another advanced event model that you should be aware of: addEventListene r/removeEventList ener. Unfortunately, IE doesn't support these methods, so you have to use their proprietary methods attachEvent/detachEvent. See this link and this one for more information.

**acoder** · May 15 '08, 09:42 AM

Originally posted by gits

when you use dom-methods like document.getEle mentById() you have to wait for the page-load before ... since the dom must be ready to use first. just wrap the onclick-assignment into an init-function that you call onload of your page:

[CODE=javascript]function init_page() {
document.getEle mentById("submi tButton").oncli ck = create;
}[/CODE]

[HTML]<body onload="init_pa ge();">[/HTML]
that should work :)

That would, but then so would the original code with the onclick declared inline on the button! To completely separate the JavaScript code, assign it to window.onload:
[code=javascript]window.onload=i nit_page;[/code]

**hsriat** · May 15 '08, 10:35 AM

@ death
nice avatar... :D

Web Page Generator

Web Page Generator

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment