user007
user007

Reputation: 3243

jQuery - extend css()

As jQuery .css() dont work if I want to get css value of margin, padding.

I found a jquery code which solve this this bug.

Please help me to extednd jquery .css() by adding this code:

$.each(['border', 'margin', 'padding'], function (i, name) {
        $.fn[name] = function (value) {
            if (value) {
                if (value.top !== undefined) {
                    this.css(name + '-top' + (name === 'border' ? '-width' : ''), value.top);
                }
                if (value.bottom !== undefined) {
                    this.css(name + '-bottom' + (name === 'border' ? '-width' : ''), value.bottom);
                }
                if (value.left !== undefined) {
                    this.css(name + '-left' + (name === 'border' ? '-width' : ''), value.left);
                }
                if (value.right !== undefined) {
                    this.css(name + '-right' + (name === 'border' ? '-width' : ''), value.right);
                }
                return this;
            }
            else {
                return {top: num(this.css(name + '-top' + (name === 'border' ? '-width' : ''))),
                        bottom: num(this.css(name + '-bottom' + (name === 'border' ? '-width' : ''))),
                        left: num(this.css(name + '-left' + (name === 'border' ? '-width' : ''))),
                        right: num(this.css(name + '-right' + (name === 'border' ? '-width' : '')))};
            }
        };
    });

Hre is the fiddle which shows that jquery .css() fails getting value of padding and margin, in firefox browser

http://jsfiddle.net/howtoplease/fMTsW/4/

Upvotes: 0

Views: 431

Answers (1)

RONE
RONE

Reputation: 5485

i have a solution, have a look at this.

$(document).ready(function(){
       ....
           $('[name='+this.name+']').val(marginT);
           .....
       }else{         
        this.value = $('h3').css(this.name);
       }
    });
});

WORKING DEMO

The above code is my own logic, I have also implemented the code that you have provided.

Your Plugin function

This plugin also has issue, check the console.log displayed.

Upvotes: 1

Related Questions