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

The js file: .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

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

The js file: http://dev.kenstowell/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

• javascript
• jquery
• css

Share Improve this question Follow edited Jan 12, 2012 at 9:04 Ken asked Jan 12, 2012 at 8:57 KenKen 54866 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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);

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

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