how to remove the borders in JQuery Layout?

Question

Hello I am using jquery layout plugin from http://layout.jquery-dev.net/ . my options are following:

 <script>
$(document).ready(function(){
 // create page layout
 pageLayout = $('body').layout(
   {applyDemoStyles:   true,
    spacing_open:0,
    spacing_closed: 0,
    slidable:  false,
    togglerLength_closed:  0

    });
 pageLayout.panes.north.css('backgroundColor','#A6f');

 // we need to remove the borders as well....

});
</script>

This removes sliders but: How to remove the pane borders as well?

thanks Arman.

Answer 1

Remove one border:

pageLayout.panes.north.css('border','none');

Remove all borders:

As you should be quite sure that each pageLayout.pane will have o as a property:

for(property in pageLayout.panes){
     pageLayout.panes[property].css('border', 'none');
}

How you should really do it - checks to make sure o is a property of pageLayout.pane before attempting to access it:

for(property in pageLayout.panes){
     if(pageLayout.panes.hasOwnProperty(property)){
          pageLayout.panes[property].css('border', 'none');
     }
}

Answer 2

I haven't tried this plugin yet but since your last line is pretty much like the usual css try this.

pageLayout.panes.north.css({'backgroundColor' : '#A6f', 'border' : 'none'});