FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

[*RESOLVED*] Please close for me.

   Frihost Forum Index -> Miscellaneous -> Marketplace
 


bladesage
I had this totally sweet idea, that I'd design a special applet to build CSS documents automatically using a form. I thought it was going okay, but I've hit some probs.

Here's the code I used:
Code:

<form name="thn" action="#">
<textarea name="bx0a" cols="80" rows="10">code here</textarea><br>
<button class="btn" onClick="document.thn.bx0a.value = ''">Clear</button><br>
<button class="btn" onClick="document.thing0.bx0a.value = fnltxt = 'body   \{\n' + bg + '\n' + maincr + '\n' + textclr + '\n \} \n \n' + 'a:link' + \{ + \n + lnkclr + \n + \} + \n + \n + 'a:hover   ' + \{ + \n + \n + hvrclr + '\n' + '\}' + '\n' + '\n' + 'a:active   ' + '\{' + '\n' + actclr + '\n' + '\}' + '\n' + '\n' + 'a:visited   \{\n' + vstclr + '\n\}\n'">Compose your CSS code!</button><br><hr><br>

</form><br><hr><br>

1) Choose your attributes:<br>
a) Set the background<br><hr><br>

i)

<form name="form1a">
Background color: <input type="textbox" name="color" size="60"><br>
<button class="btn" onClick="

document.form1a.color.value = ''

">Clear</button>


<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


ii)

<form name="form1b">
Background image: <input type="textbox" name="image" size="60"><br>
<button class="btn" onClick="

document.form1b.img.value = ''

">Clear</button><br><br>
</form>


iii)

<form name="form1c">
Repeat: <button class="btn" onClick="rpt = 'y'">Yes</button>  <button class="btn" onClick="rpt = 'n'">No</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


<button class="btn" onClick="

clr = document.form1a.color.value
img = document.form1b.image.value
if(rpt = 'y')
   {
   rpt = 'repeat'
   }
if(rpt = 'n')
   {
   rpt = ''
   }

bg = 'background: ' + clr + ' ' + 'url(' + img + ')' + rpt + ';'

">Set Background Properties</button><br><br>



b) Set the colors<br><hr><br>


i)

<form name="form2a">
Text color: <input type="textbox" name="textclr" size="60"><br>
<button class="btn" onClick="

document.form2a.textclr.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


ii)

<form name="form2b">
Link color: <input type="textbox" name="linkclr" size="60"><br>
<button class="btn" onClick="

document.form2b.linkclr.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


iii)

<form name="form2c">
Link hover color: <input type="textbox" name="hoverclr" size="60"><br>
<button class="btn" onClick="

document.form2c.hoverclr.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


iv)

<form name="form2d">
Link visited color: <input type="textbox" name="visitedclr" size="60"><br>
<button class="btn" onClick="

document.form2d.visitedclr.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


v)

<form name="form2e">
Active link color: <input type="textbox" name="activeclr" size="60"><br>
<button class="btn" onClick="

document.form2e.activeclr.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


<button class="btn" onClick="

txtclr = 'color: ' + document.form2a.textclr.value
lnkclr = 'color: ' + document.form2b.linkclr.value
hvrclr = 'color: ' + document.form2c.hoverclr.value
vstclr = 'color: ' + document.form2d.visitedclr.value
actclr = 'color: ' + document.form2e.activeclr.value

cl = txtclr + ' ' + lnkclr + ' ' + hvrclr + ' ' vstclr + ' ' + actclr + ' '

">Set Color Properties</button><br><br>


c) Set the cursors<br><hr><br>


i)
<form name="form3a">
Main: <input type="textbox" name="mncrs" size="60">
<button class="btn" onClick="

document.form3a.mncrs.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>



ii)
<form name="form3b">
Link: <input type="textbox" name="lkcrs" size="60">
<button class="btn" onClick="

document.form3b.lkcrs.value = ''

">Clear</button>
<button class="btn" onClick="

newwindow('csshelp.htm')

">[?]Help</button><br><br>
</form>


<button class="btn" onClick="

maincr = document.form3a.mncrs.value
linkcr = document.form3b.lkcrs.value

cr = maincr + ' ' + linkcr + ' '

">Set Cursor Properties</button><br><br><hr><br>


2) Compose the scripts<br><br>


<button class="btn" onClick="

fnltxt = 'body   \{\n' + bg + '\n' + maincr + '\n' + textclr + '\n \} \n \n' + 'a:link' + \{ + \n + lnkclr + \n + \} + \n + \n + 'a:hover   ' + \{ + \n + \n + hvrclr + '\n' + '\}' + '\n' + '\n' + 'a:active   ' + '\{' + '\n' + actclr + '\n' + '\}' + '\n' + '\n' + 'a:visited   \{\n' + vstclr + '\n\}\n'

document.thing0.bx0a.value = fnltxt

">Compose your CSS code!</button><br><hr><br>


By the way, I'm aware of the fact that in my rush I didn't include the style sheet the page uses. I'm also aware of the naming issues, but I need help with the script itself, not the page it's on.

ANYONE who can tell me what's wrong with it will get $60, if your help is useful. I have a link right here to see the applet in action, it is
http://rednecksushi.frih.net/orders/jsrequest/cssbuilder.html

HELP!!!

Last edited by bladesage on Thu Apr 06, 2006 11:52 pm; edited 1 time in total
Aredon
<button class="btn" onClick="document.thing0.bx0a.value = fnltxt = 'body \{\n' + bg + '\n' + maincr + '\n' + textclr + '\n \} \n \n' + 'a:link' + \{ + \n + lnkclr + \n + \} + \n + \n + 'a:hover ' + \{ + \n + \n + hvrclr + '\n' + '\}' + '\n' + '\n' + 'a:active ' + '\{' + '\n' + actclr + '\n' + '\}' + '\n' + '\n' + 'a:visited \{\n' + vstclr + '\n\}\n'">Compose your CSS code!</button>

Should be:
Code:

<button class="btn" onClick="document.thn.bx0a.value = fnltxt = 'body   \{\n' + bg + '\n' + maincr + '\n' + txtclr + '\n \} \n \n' + 'a:link' + '\{' + '\n' + lnkclr + '\n' + '\}' + '\n' + '\n' + 'a:hover   ' + '\{' + '\n' + '\n' + hvrclr + '\n' + '\}' + '\n' + '\n' + 'a:active   ' + '\{' + '\n' + actclr + '\n' + '\}' + '\n' + '\n' + 'a:visited   \{\n' + vstclr + '\n\}\n'">Compose your CSS code!</button>


thn is the name of the form not thing0 and there were some missing quotes in the string

Note: these changes apply to both "Compose your CSS code!" buttons in your code that repeated the same mistake.


Also another error:

<button class="btn" onClick="

txtclr = 'color: ' + document.form2a.textclr.value
lnkclr = 'color: ' + document.form2b.linkclr.value
hvrclr = 'color: ' + document.form2c.hoverclr.value
vstclr = 'color: ' + document.form2d.visitedclr.value
actclr = 'color: ' + document.form2e.activeclr.value

cl = txtclr + ' ' + lnkclr + ' ' + hvrclr + ' ' vstclr + ' ' + actclr + ' '

">Set Color Properties</button>

Should be:

Code:

<button class="btn" onClick="

txtclr = 'color: ' + document.form2a.textclr.value
lnkclr = 'color: ' + document.form2b.linkclr.value
hvrclr = 'color: ' + document.form2c.hoverclr.value
vstclr = 'color: ' + document.form2d.visitedclr.value
actclr = 'color: ' + document.form2e.activeclr.value

cl = txtclr + ' ' + lnkclr + ' ' + hvrclr + ' ' + vstclr + ' ' + actclr + ' '

">Set Color Properties</button>


Minor note: <input type="textbox"> works because the default is "text" but it should really read: <input type="text"> It won't make any difference in your code but it is the correct way to write it.

Also your document lacks a DOCTYPE and valid HTML 4.01 coding but it seems you are only worried about getting it to work in at least one browser before coding to standards.

Final code should look like this:
http://pastebin.com/644843
Assuming your user presses the Set Background Set Color and Set Cursor Properties prior to hitting the "Compose your CSS code!" button otherwise there will be a few JavaScript varaibles undefined which you really should be defining before hand.
bladesage
Error: Invalid character
Line: 164
URL:file://E:\cssbuilder\cssbuilder.html

That's what I get now.

Thanks for the help!

If this starts working I'll gladly pay you the 60 frih$
Aredon
When you hit the button you are taken to your old file on the web, upload it to the web first before testing it.
Or change your form's action to void like so or can return false to the ONSUBMIT event handler (as to not be take to the online version when hitting the BUTTON):
Code:

<form name="thn" action="javascript:void(0)" onsubmit="return false">

Note: do this for each FORM

The thing about the BUTTON tag is when it's pressed it ALSO submits the FORM it's in, while the INPUT TYPE="BUTTON" doesn't so you'd need to make sure you don't get submitted off the page.

Here, I added it in for you
http://pastebin.com/644976
This topic is locked: you cannot edit posts or make replies.    Frihost Forum Index -> Miscellaneous -> Marketplace

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.