PDA

Click to See Complete Forum and Search --> : modifiying text upon button click

gnomepower
09-29-2003, 07:36 PM
Hi everyone,
Right now I have been trying to script something for an InvisionFree skin generator and I have failed miserably.
What I need is for this to happen:
User Types in a few different hex colors and when they click the button it modifies some code that I have for the skin. I was woundering if this is scriptable, and if it if someone can maybe show me how or even better a little template to follow ^^
I hope this is possible and also I hope I could script it.
Thx
pyro
09-29-2003, 08:49 PM
How about something like this:

<script type="text/javascript">
function setCode(frm) {
document.getElementById("code").innerHTML = '&lt;span style="color: '+frm.input1.value+'; background-color: '+frm.input2.value+';"&gt;&lt;/span&gt;'
}
</script>
</head>
<body>
<form name="myform" action="">
<p>Hex value 1: <input type="text" name="input1" value="#"><br>
Hex value 2: <input type="text" name="input2" value="#"><br>
<input type="button" value="set" onclick="setCode(this.form);"></p>
</form>

<pre id="code">
&lt;span style="color: #000000; background-color: #ffffff;"&gt;&lt;/span&gt;
</pre>
gnomepower
09-30-2003, 04:35 PM
hmm I tried that and I'm not really sure what to edit in it
grr i hate being a JS newbie :(
pyro
09-30-2003, 10:57 PM
Maybe if you show us more what you need, we can guide you further. Until then, pick up yourself a copy of "JavaScript, The Definitive Guide" by David Flanagan -- it's excellent.
gnomepower
10-01-2003, 03:19 PM
something like what this does>>>
http://solidsnakedesigns.com/skin-css.html
pyro
10-01-2003, 03:32 PM
The code I originally posted is real close to that, but take a look at this one:

<script type="text/javascript">
function setCode(frm) {
document.getElementById("code").innerHTML = '&lt;span style="color: '+frm.input1.value+'; background-color: '+frm.input2.value+';"&gt;&lt;/span&gt;'
}
</script>
</head>
<body>
<form name="myform" action="">
<p>Hex value 1: <input type="text" name="input1" value="#"><br>
Hex value 2: <input type="text" name="input2" value="#"><br>
<input type="button" value="set" onclick="setCode(this.form);"></p>
<p><textarea id="code" rows="10" cols="50">&lt;span style="color: #000000; background-color: #ffffff;"&gt;&lt;/span&gt;</textarea></p>
</form>
gnomepower
10-02-2003, 07:22 AM
ok lemme try that
TY TY TY :D
pyro
10-02-2003, 07:31 AM
You bet... :)
gnomepower
10-02-2003, 07:47 PM
Ok, I know what to edit and I will work on this and see what happens. TY TY TY SO Much again :D
gnomepower
10-05-2003, 07:25 PM
really, really sorry for double post :(

Ok well its 'somewhat' created. I just need some help, it wont change the text.
here >>> http://gnomepower.net/lisa.php
pyro
10-05-2003, 07:45 PM
This isn't right:

<script type="text/javascript">
function setCode(frm) {

html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: '+frm.input1.value+' ; margin:0px 10px 0px 10px;background-color:'+frm.input2.value+' }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color:'+frm.input1.value+' ; }
a:link, a:visited, a:active { text-decoration: underline; color: '+frm.input2.value+'}
a:hover { color:'+frm.input1.value+' ; text-decoration:underline }

//
//your other code...
//

.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

}
</script>

Take a look at how I did it. Though, if you want to be able to change multiple things in the textarea with one function, it's going to take a bit more work.
gnomepower
10-06-2003, 04:23 PM
ok thx lemme try
gnomepower
10-11-2003, 01:09 PM
sry again for dbl post but again i cant find what to change in the code.
thx