Web Page Generator

Death Slaught · #1 May 13th, 2008, 08:48 PM

I got bored and decided to make a web page that makes web pages. Everything is working and the output is valid so I was just curious if there are easier or "better" ways to accomplish my desired output.

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">
Background Color :
<select name="bgColor" id="bgColor">
<option value="">None</option>
<option value="#000">Black</option>
<option value="#FFF">White</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="brown">Brown</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="grey">Grey</option>
</select>
<br />
<br />
Background Image :
<input type="text" name="bgImage" id="bgImage" value="" />
<br />
<br />
Background Repeat :
Repeat
<input type="radio" name="repeat" id="repeat1" value="repeat" />
No-Repeat
<input type="radio" name="repeat" id="repeat2" value="no-repeat" />
<br />
<br />
Background Position :
<select name="bgPosition" id="bgPosition">
<option value="top">Top</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="bottom">Bottom</option>
</select>
<br />
<br />
<input type="button" onclick="create()" value="Create" />
</form>

</body>

</html>[/HTML]

javascript:

Expand|Select|Wrap|Line Numbers

 function create() {
 
  var code;
 
  var backgroundColor;

    for (i = 0; i < document.bgForm.bgColor.options.length; i++) {

      if (document.bgForm.bgColor.options[i].selected) {

        backgroundColor = document.bgForm.bgColor.options[i].value;

      }

    }

  var backgroundImage = document.bgForm.bgImage.value;

  var backgroundRepeat="";

    for (i = 0; i < document.bgForm.repeat.length; i++) {

      if (document.bgForm.repeat[i].checked) {

        backgroundRepeat = document.bgForm.repeat[i].value;

      }

    }

  var backgroundPosition;

    for (i = 0; i < document.bgForm.bgPosition.options.length; i++) {

      if (document.bgForm.bgPosition.options[i].selected) {

        backgroundPosition = document.bgForm.bgPosition.options[i].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'><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' />";
 
  code+="<style type='text/css'>*{margin:0;padding:0;}body{background-color:";

  code+=backgroundColor + ";";

  code+="background-image:url('";

  code+=backgroundImage + "');";

  code+="background-repeat:";

  code+=backgroundRepeat + ";";

  code+="background-position:";

  code+=backgroundPosition + ";}";

  code+="</style>";
 
  code+="</head><body></body></html>";
 
  var display = open('', 'Display', 'height=1000,width=1200');

    display.document.write(code);

    display.document.close();

    display.focus();
 
}

I'll probably start using

Expand|Select|Wrap|Line Numbers

document.getElementById("id")

instead of my longer version. I will be adding regular expressions to the text inputs at a later time.

Thanks, Death

hsriat · #2 May 14th, 2008, 08:22 AM

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

Btw.. is there any problem?

acoder · #3 May 14th, 2008, 09: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.createElement(), 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 · #4 May 14th, 2008, 01:42 PM

Quote:

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 · #5 May 14th, 2008, 01:53 PM

Quote:

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?

Quote:

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.createElement(), 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 ^_^).

Quote:

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.

Quote:

Originally Posted by acoder

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

So something like:

Expand|Select|Wrap|Line Numbers

document.getElementById("button").onClick = create();

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 · #6 May 14th, 2008, 01:56 PM

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

Expand|Select|Wrap|Line Numbers

 code="<!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' />";
 

Thanks, Death

acoder · #7 May 14th, 2008, 02:37 PM

Quote:

Originally Posted by Death Slaught

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

Expand|Select|Wrap|Line Numbers

var backgroundColor = document.getElementById("bgColor").value;

Simple as you like!

Quote:

Originally Posted by Death

So something like:

Expand|Select|Wrap|Line Numbers

document.getElementById("button").onClick = create();

Almost...

Expand|Select|Wrap|Line Numbers

document.getElementById("button").onclick = create;

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 · #8 May 14th, 2008, 02:43 PM

Quote:

Originally Posted by acoder

Expand|Select|Wrap|Line Numbers

var backgroundColor = document.getElementById("bgColor").value;

Simple as you like!
Almost...

Expand|Select|Wrap|Line Numbers

document.getElementById("button").onclick = create;

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 · #9 May 14th, 2008, 06:50 PM

Quote:

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 · #10 May 14th, 2008, 08:38 PM

That makes sense thanks! ^_^

Thanks, Death

Death Slaught · #11 May 14th, 2008, 10: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:

Expand|Select|Wrap|Line Numbers

document.getElementById("submitButton").onclick = create;

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">Black</option>
<option value="#FFF">White</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="brown">Brown</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="grey">Grey</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="bgPosition" id="bgPosition">
<option value="">Default</option>
<option value="top">Top</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="bottm">Bottom</option>
<option value="center">Center</option>
</select>
<br />
<br />
<input type="button" id="submitButton" value="Create" />
</p>
</form>

</body>

</html>[/HTML]

javascript:

Expand|Select|Wrap|Line Numbers

 document.getElementById("submitButton").onclick = create;
 
function create() {
 
  var code;
 
  var backgroundColor = document.getElementById("bgColor").value;

  var backgroundImage = document.getElementById("bgImage").value;

  var backgroundRepeat = document.getElementById("bgRepeat").value;

  var backgroundPosition = document.getElementById("bgPosition").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'><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' />";
 
  code+="<style type='text/css'>*{margin:0;padding:0;}body{background-color:";

  code+=backgroundColor + ";";

  code+="background-image:url('";

  code+=backgroundImage + "');";

  code+="background-repeat:";

  code+=backgroundRepeat + ";";

  code+="background-position:";

  code+=backgroundPosition + ";}";

  code+="</style>";
 
  code+="</head><body></body></html>";
 
  var display = open('', 'Display', 'height=1000,width=1200');

    display.document.write(code);

    display.document.close();

    display.focus();
 
}

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 · #12 May 14th, 2008, 11:13 PM

when you use dom-methods like document.getElementById() 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:

Expand|Select|Wrap|Line Numbers

 function init_page() {

    document.getElementById("submitButton").onclick = create;

}

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

kind regards

acoder · #13 May 15th, 2008, 10:13 AM

Quote:

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: addEventListener/removeEventListener. 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 · #14 May 15th, 2008, 10:42 AM

Quote:

Originally Posted by gits

when you use dom-methods like document.getElementById() 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:

Expand|Select|Wrap|Line Numbers

 function init_page() {

    document.getElementById("submitButton").onclick = create;

}

[HTML]<body onload="init_page();">[/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:

Expand|Select|Wrap|Line Numbers

window.onload=init_page;

hsriat · #15 May 15th, 2008, 11:35 AM

@ death
nice avatar... :D

Death Slaught · #16 May 16th, 2008, 02:28 PM

Thanks for the info and the JavaScript lessons! I always enjoy posting here because everything you say makes sense (most of the time).

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")

PS - @ hsriat Thanks I got bored ^_^

Death Slaught · #17 May 16th, 2008, 02:38 PM

I have the second "section" completed I just have to make a few CSS adjustments but I was curious if there was an easier (but still user friendly) to accomplish what I'm doing with nodes.

[HTML]
<div id="holder"><textarea id="t0" rows="20" cols="50"></textarea></div>
[/HTML]

This creates the nodes when the user clicks the button.

Expand|Select|Wrap|Line Numbers

  function newSection() { 

var paragraphNode = document.createElement("textarea");

if (!document.getElementById("t1")) {

paragraphNode.setAttribute("id", "t1");

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");

}

if (document.getElementById("t1")) {

paragraphNode.setAttribute("id", "t2");

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");

}

if (document.getElementById("t2")) {

paragraphNode.setAttribute("id", "t3");

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");

}

if (document.getElementById("t3")) {

paragraphNode.setAttribute("id", "t4");

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");

}

if (document.getElementById("t4")) {

paragraphNode.setAttribute("id", "t5");

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");

}

if (document.getElementById("t5")) {

alert("We're sorry you have used all of your space.");

return;

}

var emptyNode = document.createTextNode("");

paragraphNode.appendChild(emptyNode);

var nodePlacement = document.getElementById("holder");

nodePlacement.appendChild(paragraphNode);

}

This is the code that retrieves the users input.

Expand|Select|Wrap|Line Numbers

  
code+="<div id='wrapper'>";

code+="<p>" + mainContents + "</p>";

if (document.getElementById("t1")) {

code+="<p>" + document.getElementById("t1").value + "</p>";

}

if (document.getElementById("t2")) {

code+="<p>" + document.getElementById("t2").value + "</p>";

}

if (document.getElementById("t3")) {

code+="<p>" + document.getElementById("t3").value + "</p>";

}

if (document.getElementById("t4")) {

code+="<p>" + document.getElementById("t4").value + "</p>";

}

if (document.getElementById("t5")) {

code+="<p>" + document.getElementById("t5").value + "</p>";

}

code+="</div>";

I could have the user input the paragraph tags them selves but I prefer this method. (The Complete code is attached).

Thanks,

{\_/}

(' . ')

(")[DEATH](")

(")(")

PS - I haven't switched the onclick to JavaScript yet but I'm doing that right now (thanks again).

acoder · #18 May 16th, 2008, 07:12 PM

Quote:

Originally Posted by Death Slaught

I have the second "section" completed I just have to make a few CSS adjustments but I was curious if there was an easier (but still user friendly) to accomplish what I'm doing with nodes.

Use a variable to store the current number, so you can remove the repetitive code:

Expand|Select|Wrap|Line Numbers

  // currTextAreaNum contains the current number of textareas

function newSection() { 

var paragraphNode = document.createElement("textarea");

currTextAreaNum++;

if (currTextAreaNum == 5) {

    alert("We're sorry you have used all of your space.");

    return;

}

paragraphNode.setAttribute("id", "t"+currTextAreaNum);

paragraphNode.setAttribute("rows", "20");

paragraphNode.setAttribute("cols", "50");
 
var emptyNode = document.createTextNode("");

paragraphNode.appendChild(emptyNode);

var nodePlacement = document.getElementById("holder");

nodePlacement.appendChild(paragraphNode);

}

Death Slaught · #19 May 16th, 2008, 07:17 PM

Awesome thanks! You make life so much more simple.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")

acoder · #20 May 17th, 2008, 10:24 AM

No problem. I think you should add a delete/remove button to allow users to remove nodes too.

What is Bytes?

Popular Articles