Grow your CSS skills. Land your dream job.

jQuery: Passing argument to functions

  • von
    # January 27, 2009 at 10:54 pm

    What is the proper way to pass an argument to a function in jQuery?

    I want to pass a color to a function to update multiple css attributes

    I would think it would be something like below, but I can’t seem to get it to work.



    Calling the function and passing the color:

    Code:
    colorChange(#f00)

    jQuery:

    Code:
    function colorChange(passedcolor)

    $(“a, h2″).css(“color”,passedcolor);
    $(“#wrap, h3″).css(“border-color”,passedcolor);
    $(“#header, #footer”).css(“background-color”,passedcolor);

    });

    The final plan is to set the page "theme" based on time of day, but using a single function that I pass a color to.

    Here’s a concept model that changes based on what third of the minute it is (0-20,20-40,40-60) but it uses separate functions.
    http://home.comcast.net/~vonholdt/test/style_switch.htm

    Any help would be much appreciated. The jQuery bug has bit me of late.
    von

    von
    # January 28, 2009 at 9:44 pm

    Is it tacky to answer my own question?

    So, it looks like I needed a couple of "s to get the job done. Say I want to pass a color and two positions to a function I would do like so

    Code:
    colorTheme(“#f00″, “-100px”, “-40px”)

    and then read them within the function like so

    Code:
    function colorTheme(hex, pos1, pos2){
    $(“#top, #bot”).css(“background”,hex);
    $(“a, h2″).css(“color”,hex);
    $(“#wrap, h3″).css(“border-color”,hex);

    $(“#top”).css(“background-position”,”0 ” + pos1);
    $(“#bot”).css(“background-position”,”0 ” + pos2);
    };

    Seems to work like a charm.
    http://home.comcast.net/~vonholdt/test/style_switch_fix.htm

    I did notice something odd about .css in jQuery

    - you can .css("property","value")
    - or .css({ property: "value", property: "value" })
    but in the second instance the property names are not css standard.

    - Thus .css("margin-left","10px") has to be .css({ marginLeft: "10px" })
    - or .css("border-color","red") has to be .css({ borderColor: "red" })

    I suppose I much prefer chaining several with the right property name.

    # February 7, 2009 at 4:02 am

    it is not tacky to answer your own question, I used to do this over at javaranch when I was learning java.

    sometimes you just have to put your problem down and explain it to someone else to see exactly what your trying to do, this way you get a slightly better understanding of your problem.

    plus answering your own problem shows others, who might have that problem, the solution.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".