JQuery creating custom plug -in css

Question

What I'm try to accomplish is create a jqyery plug in that will control the CSS on targeted paragraph.

I have done some research on the custom plug-in's and have not found any article explaining what i need. I tried creating the bottom code snipped but it didn't work, am i missing something or incorrect all together.

When creating a plugin does it follow the conventional jquery setting ? Books or url is also appreciated

(function($){
$.fn.changeletter= function(options){



var setting = $.extend({
color:"white",
backgroundColor:"red",
font-size:"15px"},options);


return this.css({
color:setting.color,
backgroundColor:setting.backgroundColor,
font-size:setting.front,
    });


};

}(jQuery));


//Code

 $("p").changeletter({
color:"red",
backgroundColor:"black",
font-size:"100px",
});

i would suggest you go through Addy Osmani article on jQuery plugin structure its quite easy and simple to start on: smashingmagazine.com/2011/10/11/… — Mukesh
– Mukesh, Commented Apr 13, 2014 at 8:15
You need to camelCase, or quote, font-size (fontSize or 'font-size'). Have you checked your browser's JavaScript console? Because that should have raised an error. — David Thomas
– David Thomas, Commented Apr 13, 2014 at 8:18

David Thomas · Accepted Answer · 2014-04-13 09:03:58Z

1

Hey I have modified your plugin like this.This is working

(function($) {
        $.fn.changeletter = function(options) {
            debugger;
            var setting = $.extend({
                color: "white",
                backgroundColor: "red",
                fontSize: "15px"
            }, options);
            return this.css({
                'color': setting.color,
                'background-color': setting.backgroundColor,
                'font-size': setting.front,
            });
        };
}(jQuery));

I guess you got now where you missing.

edited Apr 13, 2014 at 9:03

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Apr 13, 2014 at 8:47

surajRahel

2661 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

surajRahel Over a year ago

ahh i got one mistake . instead of setting.fontSize i wrote setting.front. So if u replace variable with right name then it will be working

Hugo Over a year ago

It worked !!!! follow up question..... would you happen to have a great resources website to improve my plugins?

surajRahel Over a year ago

i didnt get your question? please elaborate your question.

Hugo Over a year ago

Is there a web(besides Jquery.com) where i can acquire additional information on how to create plug - ins for jquery.

surajRahel Over a year ago

This is my recommendation for quick start gist.github.com/addyosmani/1184226 .

Collectives™ on Stack Overflow

JQuery creating custom plug -in css

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related