this.value not working?

Hi,

I have this form:

<select name="font" onchange="updateCSS(1, body, font-family, this.options[this.selectedIndex].value)">
<option value="Calibri, Verdana, Arial, sans-serif">Calibri</option>
<option value="Georgia, 'Times New Roman', Times, serif">Georgia</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans</option>
<option value="'Trebuchet MS', Arial, Helvetica, sans-serif">Trebuchet MS</option>
<option value="'Courier New', Courier, monospace">Courier New</option>
</select>

and this updateCSS function:

function updateCSS(style, element, aspect, option){
if(aspect == "background-color"){
$(element).css("background-color", '#'+option);

if(element == "#wrapper" && style == 1){
$("li.row1").css("background-color", '#'+option);
$("li.row2").css("background-color", '#'+option);
}
}
else if(aspect == "background-image"){
$(element).css("background-image", 'url('+option+')');
$(element).css("background-repeat", 'repeat');
}
else{
$(element).css(aspect, option);
}
}

But for some reason it is not auto-updating the font family.... any ideas? :confused:

Best,
DG Kim

What is in the variables font and family and what do you expect the function to do with the value passed when fthe value in family is subtracted from the value in font?

font-family = value in font minus value in family.

Please look at this call

updateCSS(1, body, font-family, this.options[this.selectedIndex].value)

The first parameter is a number. Fine

The second parameter is a variable called "body". That is not what you wanted. You wanted to have the string 'body' instead. The same counts for font-family which on top of all would not be a valid variable name.

Finally, you can use the value on the select directly (if the select is not multiple) ... no need to check for the selectedIndex


updateCSS(1, 'body', 'font-family', this.value)

Thanks for the reply!

In fact, right after I posted this, I noticed that I had not set body and font-family as strings... however even after I had fixed that, it still would not immediately respond to a setting change... Is there anything else that could be the problem?

http://www.everythingdojo.com/themizer/themizer.php?style=1

Use your JavaScript debugger.

*CLEARLY* you are getting to this line:

$(element).css(aspect, option)

with
aspect = "font-family"
option = "'Lucida Sans Unicode', 'Lucida Grande', sans-serif"

(for example)

So equally clearly the jQuery library isn't handling that request properly.

*** HOWEVER ***

Note that if I use non jQuery to do

alert( body.style.fontFamily );

I get an error!

*BUT* if I do
alert( document.body.style.fontFamily );

all is fine. And same is true if I use
document.body.style.fontFamily = "...whatever...";


So maybe the fault is that you are using 'body'??

Maybe you should be using
updateCSS(1, 'document.body', 'font-family', this.value)

??

Hi Old Pedant,

Thanks for the response! I tried it out... but still no dice.

It doesn't make sense to me though why 'body' wouldn't work... I have a few other examples where I use body and it does, in fact, work.

Example:

<input class="color {hash:true}" value="FFFFFF" onchange="updateCSS(1, 'body', 'background-color', this.color.toString())" name="body-color" id="body-color" style="width: 70%;">

<input class="url" onchange="updateCSS(1, 'body', 'background-image', this.value)" name="bg-img" id="bg-img" style="width: 70%;" />


Does jQuery simply not edit the font-family in real time?

EDIT: It works if I use #wrapper instead of body... maybe it is a css issue...

EDIT2: Apologies, it was a CSS issue. Sorry about that. (A misplaced !important was causing the error).

Thanks guys!

So jQuery is smart enough to see "body" and then actually use document.body. Not surprising. If jQuery can see "#xxx" or ".zzz" and know to use document.getElementById or getElementsByClassName, it can surely recognize "body".

Good enough. Glad it turned out to be something simple.