Tumblr variables in jquery script

Question

I am trying to make my own custom theme for Tumblr (actually trying to create some kind of a portfolio with a blog on it's base) and have faced a problem:

I am using jQuery and want to insert Tumblr variables into that script to be able to change colors from the Appearance panel on Tumblr site. But it doesn't seem to work. Maybe there is something special about syntax that I don't consider. Here's the script with inserted variables.

<script>
    $("#Home").hover(
        function(over){
            $("#Home").css('background-color','{color:Home-hover}');
            $("#title").css('color','{color:Home-hover}');
        },
        function(out){
            $("#Home").css('background-color','{color:Buttons}');
            $("#title").css('color','{color:Buttons}');
        }
    );
</script>

Thank you in advance.

Answer 1

When you place {color:buttons} in single quotes, you're putting exactly those characters into the CSS. Did you want to access the value stored in an object on the page? Maybe there's a color object that has a key Buttons, which you could pass to jQuery's css handler like:

$("#title").css('color',document.color.Buttons)

or:

 $("#title").css('color',document.color["Buttons"])

That is, assuming those Tumblr variables exist in the document global scope. If they are created inside a closure like (function() { ... }), then you won't be able to access them outside the closure.

Edit

The true power of jQuery is that you can access and manipulate just about everything on the page, including meta data. Play around with my jsfiddle here. The basic idea is to store your {color:Buttons} variable in a javascript variable and then set your css based on that.

Inside $(document).ready()

$("#Home").on("mouseenter", function() {
   var metaColorButtons = $("meta[name='color:Buttons']").prop("content");
   $("#title").css('color', metaColorButtons);
 });

$("#Home").on("mouseleave", function() {
  $("#title").css('color', '#000');
});