By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,608 Members | 1,925 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,608 IT Pros & Developers. It's quick & easy.

Web Page Generator

Death Slaught
100+
P: 1,137
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
  1. function create() {
  2.  
  3.   var code;
  4.  
  5.   var backgroundColor;
  6.     for (i = 0; i < document.bgForm.bgColor.options.length; i++) {
  7.       if (document.bgForm.bgColor.options[i].selected) {
  8.         backgroundColor = document.bgForm.bgColor.options[i].value;
  9.       }
  10.     }
  11.   var backgroundImage = document.bgForm.bgImage.value;
  12.   var backgroundRepeat="";
  13.     for (i = 0; i < document.bgForm.repeat.length; i++) {
  14.       if (document.bgForm.repeat[i].checked) {
  15.         backgroundRepeat = document.bgForm.repeat[i].value;
  16.       }
  17.     }
  18.   var backgroundPosition;
  19.     for (i = 0; i < document.bgForm.bgPosition.options.length; i++) {
  20.       if (document.bgForm.bgPosition.options[i].selected) {
  21.         backgroundPosition = document.bgForm.bgPosition.options[i].value;
  22.       }
  23.     }
  24.  
  25.   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' />";
  26.  
  27.   code+="<style type='text/css'>*{margin:0;padding:0;}body{background-color:";
  28.   code+=backgroundColor + ";";
  29.   code+="background-image:url('";
  30.   code+=backgroundImage + "');";
  31.   code+="background-repeat:";
  32.   code+=backgroundRepeat + ";";
  33.   code+="background-position:";
  34.   code+=backgroundPosition + ";}";
  35.   code+="</style>";
  36.  
  37.   code+="</head><body></body></html>";
  38.  
  39.   var display = open('', 'Display', 'height=1000,width=1200');
  40.     display.document.write(code);
  41.     display.document.close();
  42.     display.focus();
  43.  
  44. }
I'll probably start using

Expand|Select|Wrap|Line Numbers
  1. document.getElementById("id")
instead of my longer version. I will be adding regular expressions to the text inputs at a later time.

Thanks, Death
May 13 '08 #1
Share this Question
Share on Google+
19 Replies


hsriat
Expert 100+
P: 1,654
Change the background repeat radio button to select, and add repeat-x, repeat-y too.

Btw.. is there any problem?
May 14 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Besides that, here are some more points:
  1. There's a shortcut for getting the selected values of select elements: selObj.value. It should work in all modern browsers.
  2. 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.
  3. Instead of document.write(), try using the DOM methods (document.createElement(), appendChild(), insertBefore(), etc.)
  4. 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.
  5. Move the onclick out to the JavaScript file to make the JavaScript code unobtrusive.
May 14 '08 #3

Death Slaught
100+
P: 1,137
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
May 14 '08 #4

Death Slaught
100+
P: 1,137
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?

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

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.

Move the onclick out to the JavaScript file to make the JavaScript code unobtrusive.
So something like:

Expand|Select|Wrap|Line Numbers
  1. 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
May 14 '08 #5

Death Slaught
100+
P: 1,137
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
  1. 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
May 14 '08 #6

acoder
Expert Mod 15k+
P: 16,027
So do I use that by itself or in the for loop? Could you provide a small example?
Expand|Select|Wrap|Line Numbers
  1. var backgroundColor = document.getElementById("bgColor").value;
Simple as you like!
So something like:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById("button").onClick = create();
Almost...
Expand|Select|Wrap|Line Numbers
  1. 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.
May 14 '08 #7

Death Slaught
100+
P: 1,137
Expand|Select|Wrap|Line Numbers
  1. var backgroundColor = document.getElementById("bgColor").value;
Simple as you like!
Almost...
Expand|Select|Wrap|Line Numbers
  1. 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
May 14 '08 #8

acoder
Expert Mod 15k+
P: 16,027
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.
May 14 '08 #9

Death Slaught
100+
P: 1,137
That makes sense thanks! ^_^

Thanks, Death
May 14 '08 #10

Death Slaught
100+
P: 1,137
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
  1. 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
  1. document.getElementById("submitButton").onclick = create;
  2.  
  3. function create() {
  4.  
  5.   var code;
  6.  
  7.   var backgroundColor = document.getElementById("bgColor").value;
  8.   var backgroundImage = document.getElementById("bgImage").value;
  9.   var backgroundRepeat = document.getElementById("bgRepeat").value;
  10.   var backgroundPosition = document.getElementById("bgPosition").value;
  11.  
  12.   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' />";
  13.  
  14.   code+="<style type='text/css'>*{margin:0;padding:0;}body{background-color:";
  15.   code+=backgroundColor + ";";
  16.   code+="background-image:url('";
  17.   code+=backgroundImage + "');";
  18.   code+="background-repeat:";
  19.   code+=backgroundRepeat + ";";
  20.   code+="background-position:";
  21.   code+=backgroundPosition + ";}";
  22.   code+="</style>";
  23.  
  24.   code+="</head><body></body></html>";
  25.  
  26.   var display = open('', 'Display', 'height=1000,width=1200');
  27.     display.document.write(code);
  28.     display.document.close();
  29.     display.focus();
  30.  
  31. }
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.
May 14 '08 #11

gits
Expert Mod 5K+
P: 5,390
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
  1. function init_page() {
  2.     document.getElementById("submitButton").onclick = create;
  3. }
[HTML]<body onload="init_page();">[/HTML]
that should work :)

kind regards
May 14 '08 #12

acoder
Expert Mod 15k+
P: 16,027
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.
May 15 '08 #13

acoder
Expert Mod 15k+
P: 16,027
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
  1. function init_page() {
  2.     document.getElementById("submitButton").onclick = create;
  3. }
[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
  1. window.onload=init_page;
May 15 '08 #14

hsriat
Expert 100+
P: 1,654
@ death
nice avatar... :D
May 15 '08 #15

Death Slaught
100+
P: 1,137
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 ^_^
May 16 '08 #16

Death Slaught
100+
P: 1,137
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
  1.  function newSection() { 
  2. var paragraphNode = document.createElement("textarea");
  3. if (!document.getElementById("t1")) {
  4. paragraphNode.setAttribute("id", "t1");
  5. paragraphNode.setAttribute("rows", "20");
  6. paragraphNode.setAttribute("cols", "50");
  7. }
  8. if (document.getElementById("t1")) {
  9. paragraphNode.setAttribute("id", "t2");
  10. paragraphNode.setAttribute("rows", "20");
  11. paragraphNode.setAttribute("cols", "50");
  12. }
  13. if (document.getElementById("t2")) {
  14. paragraphNode.setAttribute("id", "t3");
  15. paragraphNode.setAttribute("rows", "20");
  16. paragraphNode.setAttribute("cols", "50");
  17. }
  18. if (document.getElementById("t3")) {
  19. paragraphNode.setAttribute("id", "t4");
  20. paragraphNode.setAttribute("rows", "20");
  21. paragraphNode.setAttribute("cols", "50");
  22. }
  23. if (document.getElementById("t4")) {
  24. paragraphNode.setAttribute("id", "t5");
  25. paragraphNode.setAttribute("rows", "20");
  26. paragraphNode.setAttribute("cols", "50");
  27. }
  28. if (document.getElementById("t5")) {
  29. alert("We're sorry you have used all of your space.");
  30. return;
  31. }
  32. var emptyNode = document.createTextNode("");
  33. paragraphNode.appendChild(emptyNode);
  34. var nodePlacement = document.getElementById("holder");
  35. nodePlacement.appendChild(paragraphNode);
  36. }
  37.  
This is the code that retrieves the users input.
Expand|Select|Wrap|Line Numbers
  1.  
  2. code+="<div id='wrapper'>";
  3. code+="<p>" + mainContents + "</p>";
  4. if (document.getElementById("t1")) {
  5. code+="<p>" + document.getElementById("t1").value + "</p>";
  6. }
  7. if (document.getElementById("t2")) {
  8. code+="<p>" + document.getElementById("t2").value + "</p>";
  9. }
  10. if (document.getElementById("t3")) {
  11. code+="<p>" + document.getElementById("t3").value + "</p>";
  12. }
  13. if (document.getElementById("t4")) {
  14. code+="<p>" + document.getElementById("t4").value + "</p>";
  15. }
  16. if (document.getElementById("t5")) {
  17. code+="<p>" + document.getElementById("t5").value + "</p>";
  18. }
  19. code+="</div>";
  20.  
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).
Attached Files
File Type: zip Section 2.zip (2.4 KB, 86 views)
May 16 '08 #17

acoder
Expert Mod 15k+
P: 16,027
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
  1.  // currTextAreaNum contains the current number of textareas
  2. function newSection() { 
  3. var paragraphNode = document.createElement("textarea");
  4. currTextAreaNum++;
  5. if (currTextAreaNum == 5) {
  6.     alert("We're sorry you have used all of your space.");
  7.     return;
  8. }
  9. paragraphNode.setAttribute("id", "t"+currTextAreaNum);
  10. paragraphNode.setAttribute("rows", "20");
  11. paragraphNode.setAttribute("cols", "50");
  12.  
  13. var emptyNode = document.createTextNode("");
  14. paragraphNode.appendChild(emptyNode);
  15. var nodePlacement = document.getElementById("holder");
  16. nodePlacement.appendChild(paragraphNode);
  17. }
  18.  
May 16 '08 #18

Death Slaught
100+
P: 1,137
Awesome thanks! You make life so much more simple.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
May 16 '08 #19

acoder
Expert Mod 15k+
P: 16,027
No problem. I think you should add a delete/remove button to allow users to remove nodes too.
May 17 '08 #20

Post your reply

Sign in to post your reply or Sign up for a free account.