jQuery.css() not applying to element

Question

Recently I have been trying to delve into advanced (well for me) programming concepts like abstraction and functional programming etc. This has led me to experimenting w/ anon functions.

I have a situation where dynamically generated values are not being applied to a targeted element via an anonymous function using .css({}) . I think it has something to do with false translations w/ object literals from my research.

Neither Chrome nor FF consoles are throwing any errors so here I am to ask the experts.

I made a fiddle, but it was not working very well. I am just going to link the resources involved on the dev site.

This is my dev site that I use to play/experiment and try out new things.

http://dev/kenstowell.net

The js file: http://dev.kenstowell.net/scripts/scripts.js

Everything can be found through the debugger console, of course.

Ok, so here is what the intended behavior is:

1. On the (window).load , initDOM() is called.

   $(window).load(function(){ //Style Initial Dom Elements initDOM(); });

2. Inside of initDom() , I attempt to set the top margin in relation to the parent container by calling setElemMargin() and supplying it with the appropriate params.

   setElemMarg("#main-content-one", "#intro-text", "#intro-text", "margin-top");

3. setElemMarg() gets the height of the supplied args and uses them to calculate the margin to be set in the .css() map.

   var setElemMarg = function(elem1, elem2, elemTrgt, propName){
var margH = (getH(elem1) - getH(elem2)) / 2;
$(elemTrgt).css({propName : margH});
console.log(elem1, elem2, elemTrgt, propName, margH); }

   var getH = function(elem){ return $(elem).height(); console.log($(elem).height()); }

4. apply the calculated margin to margin-top . (from above method)

   $(elemTrgt).css({propName : margH});

Thanks to anyone who looks at this. Please feel free to give me some constructive critique. Maybe some that you wish you had when you were a budding developer. :)

Ken

Answer 1

The problem resides in your setElemMarg() function:

var setElemMarg = function(elem1, elem2, elemTrgt, propName) {
    var margH = (getH(elem1) - getH(elem2)) / 2;

    $(elemTrgt).css({propName : margH});  // <-- Here.

    console.log(elem1, elem2, elemTrgt, propName, margH);
}

The literal object syntax you're using in your call to css() results in jQuery trying to update a propName style property instead of the property whose name is stored in propName .

You can use bracket notation to work around this issue:

var styleProps = {};
styleProps[propName] = margH;
$(elemTrgt).css(styleProps);

Or simply call the two arguments form of css() :

$(elemTrgt).css(propName, margH);

Answer 2

Why not try to use $(element).attr('style','css_values'); ?

Answer 3

Since setElemMarg is called within initDOM in the window.load event, then jquery/dom is not guaranteed to be ready. You need to call this function in the document load event