Create div in plugin manager?

[cangrimen]

Hello i have one question:

Im trying to create a plugin:

I have a js code that points to 2 div ids:
<div id="marshmallow"></div>
and
<div id="cheese"></div>

But if i create the divs on the Header of the element code (it auto-sizes to entire page, and it doesn’t work properly).

Im trying to do, when i drag the element to the page, that element should carry the divs.

I tried this:
var div;
var div2;
div = $('<div>id="marshmallow</div>');
div2 = $('<div>id="cheese</div>');

But nothing. Do you have any idea/suggestion?

PS: Before of creating this topic, i tried on all the ways to do it, i checked like 30 plugins code for try understand and nothing, because anyone is similar to what im trying to do, the only one i could check, is not free plugin

Thanks.

[exception-rambler]

hi @cangrimen - have a go with the below within the Initialise function:

      var  newDiv = $('<div id="marshmallow"></div>');
      newDiv.css("width", "100%");
      newDiv.css("height", "100%");
      instance.canvas.append(newDiv);

You don’t want to be adding Divs or Canvass inside the Header. Instead you want to append them to the canvas object which is the outer container for your plugin on the page.

[cangrimen]

Thanks for your reply @exception-rambler i did this as you suggested:

>  var  toolbarDiv = $('<div id="marshmallow"></div>');
>      toolbarDiv.css("width", "100%");
>      toolbarDiv.css("height", "100%");
>      instance.canvas.append(toolbarDiv);

> var  editorDiv = $('<div id="cheese"></div>');
>      editorDiv.css("width", "100%");
>      editorDiv.css("height", "100%");
>      instance.canvas.append(editorDiv); 

But when i load the page, anything happens, i dragged the elemet to the page and should, appear inside the divs the js script, but blank/white screen.

Thanks!

[exception-rambler]

What JS are you expecting to see?
The code above will create blank boxes inside a blank box - so you will not see anything happen.

If you change:
var toolbarDiv = $('<div id="marshmallow"></div>');
to:
var toolbarDiv = $('<div id="marshmallow">Test</div>');

You should see the word test within your App (only when you Preview it).