www.webdeveloper.com
+ Reply to Thread
Results 1 to 3 of 3
  1. 08-11-2005 12:30 AM #1
    The Little Guy's Avatar
    The Little Guy
    The Little Guy is offline I have six words for you
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287

    CSS Generation Code

    This code is ment to generate a CSS style page, but for some reason when I press the Generate button it doesn't print the code in the textarea. Any Ideas?


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function View(form) {
msg=open("","DisplayWindow","status=1,scrollbars=1");
msg.document.write(form.Text2.value);
}
function Generate(form) {
"<style type="text/css">"
txt="{"
var txt="body {background-color: "+form.MainBackground.value+"}\r\n";
var txt+="{background-image: url"+form.MainBackgroundImage.value+"}\r\n";
var txt+="{font-family:"+form.PageFont.value+"}\r\n";
var txt+="{color:"+form.MainTextColor.value+"}\r\n";
var txt+="{font-size:"+form.MainTextSize.value+"}\r\n";
var txt="}"

var txt+="{font-size:"+form.Link.value+"}\r\n";
var txt+="{font-size:"+form.LinkHover.value+"}\r\n";
var txt+="{font-size:"+form.LinkVisited.value+"}\r\n";
var txt+="{font-size:"+form.LinkActive.value+"}\r\n";
form.Text2.value=txt;
}
function AddText(form, Action){
var AddTxt="";
var txt="";
if(Action==1){  
txt=prompt("Text for the level 1 header.","Text");      
if(txt!=null)           
AddTxt="<h1>"+txt+"</h1>\r\n";  
}
if(Action==2){  
txt=prompt("Text for the level 2 header.","Text");      
if(txt!=null)           
AddTxt="<h2>"+txt+"</h2>\r\n";  
}
if(Action==3){  
txt=prompt("Text for the level 3 header.","Text");      
if(txt!=null)           
AddTxt="<h3>"+txt+"</h3>\r\n";  
}
if(Action==4) {  
txt=prompt("Text to be made BOLD.","Text");     
if(txt!=null)           
AddTxt="<b>"+txt+"</b>";        
}
if(Action==5) {  
txt=prompt("Text to be italicized","Text");     
if(txt!=null)           
AddTxt="<i>"+txt+"</i>";        
}
if(Action==6) AddTxt="\r\n<p>";
if(Action==7) AddTxt="<BR>\r\n";
if(Action==8) AddTxt="<hr>\r\n";
if(Action==9) {  
txt=prompt("URL for the link.","http://");      
if(txt!=null){          
AddTxt="<a href="+txt+">";              
txt=prompt("Text to be show for the link","Text");              
AddTxt+=txt+"</a>\r\n";         
   }
}
if(Action==10) { 
txt=prompt("URL for graphic","URL");    
if(txt!=null)           
AddTxt="<img src="+txt+">\r\n"; 
}
form.Text1.value+=AddTxt;
}
function ResetPage(form) {
if(confirm("Reset the page?")) { 
form.MainBackground.value="";    
form.MainBackgroundImage.value="";    
form.PageFont.value="";     
form.MainTextColor.value="";    
form.MainTextSize.value="";  
form.Fav1Title.value="";        
form.Fav2URL.value="";  
form.Fav2Title.value="";        
form.Fav3URL.value="";  
form.Fav3Title.value="";        
form.Fav4URL.value="";  
form.Fav4Title.value="";        
form.Fav5URL.value="";  
form.Fav5Title.value="";        
form.Fav6URL.value="";  
form.Fav6Title.value="";        
   }
}

// End -->
</SCRIPT>


<title>Web Page Stylize</title>
<style type="text/css">
<!--
.style1 {
	color: #FFFFFF;
	font-weight: bold;
}
.style3 {font-size: 12px}
-->
</style>
</head>

<body>



<CENTER>
<font face="Verdana, Arial, Helvetica, sans-serif">
<FORM ACTION="">
<TABLE border=0 class="style3">
<TR bgcolor="#660000">
  <TD colspan="2">  
    <div align="center" class="style1">Stylize Your Page</div>
    <TR>
  <TD width="204">Page Background Color:
  <TD width="376"><input name="MainBackground" type="text" size=10 maxlength="6">  
    <TR>
      <TD>Page Background Image Url:     
      <TD><input name="MainBackgroundImage" type="text" size=30>
        Fixed:
          <input name="BackgroundImage1" type="radio" value="BackgroundImageFixed" checked>
        Scroll:
        <input name="BackgroundImage1" type="radio" value="BackgroundImageScroll">    
        <TR>
      <TD>Font Face: 
      <TD><input name="PageFont" type="text" size=30>    
    <TR><TD>Text Color:
<TD>
<input type="text" name="MainTextColor" size=10 maxlength="6">
    <TR>
      <TD>Text Size: (1 - 99)   
      <TD><input type="text" name="MainTextSize" size=10 maxlength="2">       
    <TR><TD><div align="left" class="style3">Link Color: </div>
  <TD>  <div align="left">
    <input type="text" name="Link" size=10 maxlength="6">
  None:<strong>
  <input type="checkbox" name="LinkNone" value="checkbox">
Bold:</strong>
  <input type="checkbox" name="LinkBold" value="checkbox">
  <em>Italic:</em>
  <input type="checkbox" name="LinkItalic" value="checkbox">
  <u>Underline:</u>
  <input type="checkbox" name="LinkUnderline" value="checkbox">
  </div>
<TR>
  <TD>Hover Link Color: 
  <TD><input type="text" name="LinkHover" size=10 maxlength="6">
    None:<strong>    <input type="checkbox" name="LinkHoverNone" value="checkbox">
    Bold:</strong>
    <input type="checkbox" name="LinkHoverBold" value="checkbox">
    <em>Italic:</em>
    <input type="checkbox" name="LinkHoverItalic" value="checkbox">
    <u>Underline:</u>
    <input type="checkbox" name="LinkHoverUnderline" value="checkbox">
<TR>
  <TD>Visited Link Color: 
  <TD><input type="text" name="LinkVisited" size=10 maxlength="6">
    None:<strong>    <input type="checkbox" name="LinkVisitedNone" value="checkbox">
    </strong>    <strong>Bold:</strong>
    <input type="checkbox" name="LinkVisitedBold" value="checkbox">
    <em>Italic:</em>
    <input type="checkbox" name="LinkVisitedItalic" value="checkbox">
    <u>Underline:</u>
    <input type="checkbox" name="LinkVisitedUnderline" value="checkbox">
<TR>
  <TD>Active Link Color: 
  <TD><input type="text" name="LinkActive" size=10 maxlength="6">
    None:<strong>    <input type="checkbox" name="LinkActiveNone" value="checkbox">
    Bold:</strong>
    <input type="checkbox" name="LinkActiveBold" value="checkbox">
    <em>Italic:</em>
    <input type="checkbox" name="LinkActiveItalic" value="checkbox">
    <u>Underline:</u>
    <input type="checkbox" name="LinkActiveUnderline" value="checkbox">
<TR bgcolor="#660000">
  <TD colspan="2"><div align="center" class="style1">Textarea Stylize</div>
<TR>
  <TD>Background Color: 
  <TD><input type="text" name="TextareaBg" size=10 maxlength="6">
<TR>
  <TD>Background Image URL:
  <TD><input name="TextareaBackgroundImage" type="text" size=30>  
<TR>
  <TD>Border Color: 
  <TD><input type="text" name="TextareaBorder" size=10 maxlength="6">
<TR>
  <TD>Border Size: (1 - 99) 
  <TD><input type="text" name="TextareaBorderSize" size=10 maxlength="2">  
<TR>
  <TD>Text Color:
  <TD><input type="text" name="TextareaTextColor" size=10 maxlength="6">
<TR>
  <TD>Font Size: (1 - 99)
  <TD><input type="text" name="TextareaFontSize" size=10 maxlength="2">  
<TR bgcolor="#660000">
  <TD colspan=2>  <div align="center" class="style1">Input Stylize</div>
  <TR>
  <TD>Background Color: 
  <TD><input type="text" name="InputBg" size=10 maxlength="6">  
<TR>
  <TD>Border Color: 
  <TD><input type="text" name="InputBorderColor" size=10 maxlength="6">  
<TR>
  <TD>Text Color:
  <TD><input type="text" name="InputTextColor" size=10 maxlength="6">  
<TR>
  <TD>Font Size: (1 - 99) <TD><input type="text" name="InputFontSize" size=10 maxlength="2">  
<TR bgcolor="#660000">
  <TD colspan=2>  <div align="center" class="style1">    Select, Option Stylize</div>
  <TR>
  <TD>Background Color:  
  <TD><input type="text" name="SelectBg" size=10 maxlength="6">  
<TR>
  <TD>Text Color:
  <TD><input type="text" name="SelectTextColor" size=10 maxlength="6">  
<TR>
  <TD>Font Size:
(1 - 99)  
    <TD><input type="text" name="SelectSize" size=10 maxlength="2">  
<TR bgcolor="#660000">
  <TD colspan="2">  <div align="center" class="style1">Scroll Bar Colors </div>
  <TR>
    <TD>Scrollbar Face Color: 
    <TD><input type="text" name="ScrollFace" size=10 maxlength="6">    
  <TR>
    <TD>Scrollbar Arrow Color:  
    <TD><input type="text" name="ScrollArrow" size=10 maxlength="6">    
  <TR>
    <TD>Scrollbar Track Color:  
    <TD><input type="text" name="ScrollTrack" size=10 maxlength="6">    
  <TR>
    <TD>Scrollbar Shadow Color:  
    <TD><input type="text" name="ScrollShadow" size=10 maxlength="6">    
  <TR>
    <TD>Scrollbar Highlight Color (RBG):
    <TD><input type="text" name="ScrollHighlightR" size=2 maxlength="3">
      <input type="text" name="ScrollHighlightB" size=2 maxlength="3">
      <input type="text" name="ScrollHighlightG" size=2 maxlength="3">    
  <TR>
    <TD>Scrollbar 3dlight Color: 
    <TD><input type="text" name="Scroll3D" size=10 maxlength="6">    
  <TR>
    <TD>Scrollbar Darkshadow Color:  
    <TD><input type="text" name="ScrollDarkShadow" size=10 maxlength="6">    
    <TD colspan="2">  
  <TR>
    <TD colspan="2">  
  <TR align=center><TD colspan=2><input type="button" value="Get Code" onClick="Generate(this.form);">
</TABLE>
<HR>
<input name="Reset" type="reset" onClick="ResetPage(this.form);" value="Reset"><BR>
<textarea name="Text2" rows=20 Cols=70></textarea>
</FORM>
</CENTER>
</font>
</body>
</html>
    Thanks for the help
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs
    Reply With Quote Reply With Quote
  2. 08-11-2005 03:03 AM #2
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    First at all I don't see the reson for you don't simply write the CSS code as a CSS code from the begining...

    Second, document.write() is a rather deprecated method to create elements. Try using DOM methods.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  3. 08-11-2005 08:39 AM #3
    Mongus
    Mongus is offline Registered User
    Join Date
    Mar 2005
    Location
    Gilbert, AZ
    Posts
    293
    He's trying to put text into a textarea so the user can copy it it looks like.

    I didn't test your code but just by looking at it you've got some serious problems in your Generate function. You should only use "var txt" once to declare the txt variable. Also, several times you put "txt=" instead of "txt+=". That would overwrite txt and you'd lose the existing contents of txt. When you embed quotes that are of the same type as the enclosing quotes you have to escape them with a backslash (\). Ending your statements with a semicolon is always a good idea.

    It should look more like this:

    Code:
    function Generate(form) {
var txt="<style type=\"text/css\">";
txt+="{";
txt+="body {background-color: "+form.MainBackground.value+"}\r\n";
txt+="{background-image: url"+form.MainBackgroundImage.value+"}\r\n";
txt+="{font-family:"+form.PageFont.value+"}\r\n";
txt+="{color:"+form.MainTextColor.value+"}\r\n";
txt+="{font-size:"+form.MainTextSize.value+"}\r\n";
txt+="}";

txt+="{font-size:"+form.Link.value+"}\r\n";
txt+="{font-size:"+form.LinkHover.value+"}\r\n";
txt+="{font-size:"+form.LinkVisited.value+"}\r\n";
txt+="{font-size:"+form.LinkActive.value+"}\r\n";
form.Text2.value=txt;
}
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles