PDA

View Full Version : Some Help?



Nanopy
09-16-2005, 03:32 AM
I am a PHP guy, Javascript confuses me to an extreme.

I was wondering if anyone knew a way where I could do the following:

Have multiple chained select forms, the values of which are combined and displayed.

I'm trying to use Javascript to change the style of text based on the items selected. So if someone had the color red, and a border selected, the script would dynamically change the style of some text to display that.

Sorry if this sounds a bit confusing, it's hard for me to explain. If anyone could be of any help it would be much appreciated.

Thanks

Twey
09-16-2005, 10:13 AM
CSS is the easiest way to do this.
<script type="text/javascript">
var e = document.getElementById('changeable').style;
</script>
Font weight:
<select onchange="e.fontWeight = this.value;">
<option value="lighter">Lighter</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="bolder">Bolder</option>
</select>
Colour: <!-- I'm British, before you ask -->
<select onchange="e.color = this.value;">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Background colour:
<select onchange="e.backgroundColor = this.value;">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Text decoration:
<select onchange="e.textDecoration = this.value;">
<option value="underline">Underline</option>
<option value="overline">Overline</option>
<option value="line-through">Strikethrough</option>
<option value="none">None</option>
</select>
<p id="changeable">
Blah de blah.
</p>

jscheuer1
09-16-2005, 03:59 PM
That's ingenious! But, to work, the script needs to be at the end or executed onload. It would also be a nice touch to set the initial style properties of the element (paragraph) to the initial selections.

Twey
09-16-2005, 07:30 PM
That's ingenious!
Why thank you! :)

But, to work, the script needs to be at the end or executed onload.
I don't quite understand. The script (if you mean the <script> element [all one line of it]) should be executed when the browser parses it. This is perfectly fine for the purposes. Am I missing something?

It would also be a nice touch to set the initial style properties of the element (paragraph) to the initial selections.You're right. Add:

<script type="text/javascript">
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++) if(s[i].onchange.indexOf("e.") > -1) s[i].onchange();
</script>
to the end of the script.

jscheuer1
09-16-2005, 08:13 PM
But, to work, the script needs to be at the end or executed onload.

I don't quite understand. The script (if you mean the <script> element [all one line of it]) should be executed when the browser parses it. This is perfectly fine for the purposes. Am I missing something?Well, I tried it and the script (all one line of it) needed to be after the element it references, at least. I cannot understand your code for setting the initial properties but will give it a shot. I was playing around with the script and settled on just adding the selected attribute to the options that described the default state of the text, adding options if needed. It is a fine point of the select element but, you are supposed to designate a selected option anyway because some browsers will default select differently from one another otherwise, unless this is unimportant to the page's design.

jscheuer1
09-16-2005, 08:34 PM
I understand the additions now but needed to convert toString() before evaluating:

<script type="text/javascript">
<!--
var e = document.getElementById('changeable').style;
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++)
if(s[i].onchange.toString().indexOf("e.") > -1)
s[i].onchange();
//-->
</script>

mwinter
09-18-2005, 02:19 PM
I understand the additions now but needed to convert toString() before evaluating:Checking for the occurance of 'e.' is far from a robust solution, particularly when you consider that something as common as '.style.' would match.

Checking the class attribute is the most common solution:


if(/(^|\s+)...(\s+|$)/.test(s[i].className)) {replacing the ellipsis with whatever class name you choose.

Mike

jscheuer1
09-18-2005, 02:52 PM
Agreed but, I was just making Twey's code work. He seems to have a love of short, nondescript variable names.

Twey
09-18-2005, 02:57 PM
Oh, I see.
Final revised code:

<p id="changeable">
Blah de blah.
</p>
Font weight:
<select class="pchanger" onchange="document.getElementById('changeable').style.fontWeight = this.value;">
<option value="lighter">Lighter</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="bolder">Bolder</option>
</select>
Colour:
<select class="pchanger" onchange="document.getElementById('changeable').style.color = this.value;">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Background colour:
<select class="pchanger" onchange="document.getElementById('changeable').style.backgroundColor = this.value;">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Text decoration:
<select class="pchanger" onchange="document.getElementById('changeable').style.textDecoration = this.value;">
<option value="underline">Underline</option>
<option value="overline">Overline</option>
<option value="line-through">Strikethrough</option>
<option value="none">None</option>
</select>
<script type="text/javascript">
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++) if(/(^|\s+)pchanger(\s+|$)/.test(s[i].className)) s[i].onchange();
</script>

/EDIT: Mike also loves short, non-descriptive variable names (http://www.dynamicdrive.com/forums/showpost.php?p=17661&postcount=7) ;) There's a difference between the way I'd name a real variable and the way I'd name a quick alias masquerading as a variable, especially when they're defined in the very last line. Not a long reference.

jscheuer1
09-18-2005, 03:19 PM
I got that but, I'm begining to wonder if you test your own code very often. This latest doesn't work either, you left 'style' out of the onchange events. Here is a working version:

Font weight:
<select class="pchanger" onchange="pchange.fontWeight = this.value;">
<option value="lighter">Lighter</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="bolder">Bolder</option>
</select>
Colour: <!-- I'm British, before you ask -->
<select class="pchanger" onchange="pchange.color = this.value;">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select>
Background colour:
<select class="pchanger" onchange="pchange.backgroundColor = this.value;">
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Text decoration:
<select class="pchanger" onchange="pchange.textDecoration = this.value;">
<option value="underline">Underline</option>
<option value="overline">Overline</option>
<option value="line-through">Strikethrough</option>
<option value="none">None</option>
</select>
<p id="changeable">
Blah de blah.
</p>
<script type="text/javascript">
<!--
var pchange = document.getElementById('changeable').style;
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++)
if(s[i].className=='pchanger')
s[i].onchange();
//-->
</script>

Twey
09-18-2005, 03:26 PM
Whoops, sorry, my mistake. Copy and paste, y'know.

if(s[i].className=='pchanger')
The reason Mike used regex was because the OP might also want to use another class, which would need to be added to the list of classes seperated by a space. I've edited in the missing property.

mwinter
09-18-2005, 05:19 PM
/EDIT: Mike also loves short, non-descriptive variable names (http://www.dynamicdrive.com/forums/showpost.php?p=17661&postcount=7) ;):p I don't love them, but I do tend to use them in code that is more functional than instructive. I could have used variables like nameStart, queryStart and fragmentStart, but the standard index variables were just as suitable.

Mike

Twey
09-18-2005, 07:07 PM
Likewise. In this case I could have called it "selects" or something similar, but, as the whole point of creating the variable was to save typing, it didn't seem a particularly attractive possibility.