Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2010
    Location
    Washington State
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    this.value not working?

    Hi,

    I have this form:
    Code:
            <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:
    Code:
    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?

    Best,
    DG Kim

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Please look at this call
    Code:
    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

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

  • #4
    New Coder
    Join Date
    Dec 2010
    Location
    Washington State
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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/themiz...er.php?style=1

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    Use your JavaScript debugger.

    *CLEARLY* you are getting to this line:
    Code:
    $(element).css(aspect, option)
    with
    Code:
    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
    Code:
    alert( body.style.fontFamily );
    I get an error!

    *BUT* if I do
    Code:
    alert( document.body.style.fontFamily );
    all is fine. And same is true if I use
    Code:
    document.body.style.fontFamily = "...whatever...";
    So maybe the fault is that you are using 'body'??

    Maybe you should be using
    Code:
    updateCSS(1, 'document.body', 'font-family', this.value)
    ??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Dec 2010
    Location
    Washington State
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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!
    Last edited by DG Kim; 07-19-2012 at 12:12 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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