Grow your CSS skills. Land your dream job.

add a javascript variable as a class

  • # March 3, 2013 at 9:08 pm

    Hi Guys,

    I am working on a site where I want to query the location and then pass that as a class to a UL.

    The location API I am using returns the variable I want as geoplugin_countryCode()

    and the moment I am just hardcoding it in:

    document.write(“

      “);

      What I would like to do is something like this:





      That doesn’t seem to work, but not sure what I am doing wrong?

      Thanks for any help.

    # March 3, 2013 at 9:54 pm

    Should work, if you’re loading jQuery and the plugin before using that JavaScript and the `ul` element you want to add that class to already has the `sidebar` class. If you make a codepen or give a link to a live site, I or some one else can help further.

    # March 3, 2013 at 10:01 pm

    I would suggest making a CodePen just like @CrocoDillon said, but are you sure that `geoplugin_countrycode()` returns a string? If not, then that might be your problem because you need to pass in a string for the `addClass()` method. I’m pretty sure that you know this already, but your program may have manipulated the `location` variable somehow in your code and it is hard to tell if it has done this without a live site or demo.

    # March 3, 2013 at 10:13 pm

    Thanks Guys,

    I will whip up a codepen.

    # March 4, 2013 at 4:11 am

    @mtedwards,

    Going towards what srig99 was saying, what kind of data type does that function return? You may have to parse it before adding it.

    I took a look at that geoplugin, and im wondering… Do you have to set your own values for each function? I brought up the javascript.gp file and all the functions are blank? I don’t dabble with geolocation though so maybe im wrong.

    Am i missing something?

    function geoplugin_request() { return '174.50.237.221';}
    function geoplugin_status() { return '403';}
    function geoplugin_city() { return '';}
    function geoplugin_region() { return '';}
    function geoplugin_regionCode() { return '';}
    function geoplugin_regionName() { return '';}
    function geoplugin_areaCode() { return '';}
    function geoplugin_dmaCode() { return '';}
    function geoplugin_countryCode() { return '';}
    function geoplugin_countryName() { return '';}
    function geoplugin_continentCode() { return '';}
    function geoplugin_latitude() { return '';}
    function geoplugin_longitude() { return '';}
    function geoplugin_currencyCode() { return '';}
    function geoplugin_currencySymbol() { return '';}
    function geoplugin_currencySymbol_UTF8() { return '';}
    function geoplugin_currencyConverter(amt, symbol) { return false; }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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