Adding CSS settings to a new JQuery Plugin

Question

I'm new to this sort of thing but i've created a simple plugin which i hope to end up being a simple WSIWYG editor.

Here is my simple settings part of my plugin

$.fn.ap_wysiwyg = function(options){
        // extend the option with the default ones
        var settings = $.extend({
            width : "800px",
            height : "600px",
        },options);

Here is the inline script inside my HTML to call the plugin

$(document).ready(function(){
  $("#ap-wysiwyg").ap_wysiwyg({
    width : "600px",
    height : "400px",
    css : {
      'background-color' : '#000'
    }
  });
});

Quite simply the width and height from the inline html is overwriting the default settings from my main script which is fantastic but i'm attempting to add CSS such as background-color and margin but they dont seem to be applying in my html. As it stands my div inside html has a style of width: 600px; and height: 400px which is perfect but it's skipping my CSS styling that i wish to manually apply.

var containerDiv = $("<div/>",{
           css : {
               width : settings.width ,
               height : settings.height,
               border : "1px solid #ccc"
           }
       });

Here i go about creating a div on the go which applies my width and height but the idea is that the parsed settings into the plugin can be anything and i need this to pick up the parsed CSS and apply it.

For example it see's there is a margin or background so it adds margin : settings.margin and background-color : settings.background-color

How do i go about this? As my method is clearly not working.

Can we see the part of the plugin that applies the css to the element? — wrxsti
– wrxsti, Commented Sep 3, 2014 at 12:56
Just realised i submitted this too quickly and missed a bit i'll edit it quickly — mdixon18
– mdixon18, Commented Sep 3, 2014 at 12:58
can you try removing the single quotes around background-color? — Woodrow Barlow
– Woodrow Barlow, Commented Sep 3, 2014 at 13:06

wrxsti · Accepted Answer · 2014-09-03 13:07:24Z

1

Instead you could try something to the effect of:

var containerDiv = $("<div/>").width(settings.width).height(settings.height).css(settings.css);

That should apply your settings properly to any element. Let me know if that works for you. Hope it helps!

answered Sep 3, 2014 at 13:07

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

1 Comment

mdixon18 Over a year ago

Thanks that's perfect hope this helps any newbies with the same sort of issue :)

Collectives™ on Stack Overflow

Adding CSS settings to a new JQuery Plugin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related