Databases
StackOverflow2013
Postsdbo
POneed suggestions on jquery plugin for rounded corners
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POneed suggestions on jquery plugin for rounded corners
    text
    copied!<p>I wanted to learn about jquery plugins, so I decided to try to make a simple rounded corner box. I know there are already some rounded corner plugins out there, but this is more of a learning exercise for me than a job requirement. </p> <p>The rounded corners I took from <a href="http://www.cssplay.co.uk/boxes/snazzy.html" rel="nofollow noreferrer">here</a>. I like this sample since it doesn't use images, it will be easy to change the color of the boxes.</p> <p>I guess I'm having trouble wrapping my brain around the best way to do this. I have a very rough sample that's kind of working, but it just doesn't feel right. The part that's hanging me up is building the rounded corners around the content area. Right now it takes the "content" box and appends the corners around it. What are the better ways to do this? </p> <p>Here is the call to make the box - $('#content').roundbox();</p> <p>If this is not enough information let me know. </p> <pre><code>// (function($) { jQuery.fn.roundbox = function(options) { var opts = $.extend({}, $.fn.roundbox.defaults, options); var outer = $("&lt;div&gt;"); var topBorder = $("&lt;b class='xtop'&gt;&lt;b class='xb1'&gt;&lt;/b&gt;&lt;b class='xb2'&gt;&lt;/b&gt;&lt;b class='xb3'&gt;&lt;/b&gt;&lt;b class='xb4'&gt;&lt;/b&gt;&lt;/b&gt;"); var bottomBorder = $("&lt;b class='xbottom'&gt;&lt;b class='xb4'&gt;&lt;/b&gt;&lt;b class='xb3'&gt;&lt;/b&gt;&lt;b class='xb2'&gt;&lt;/b&gt;&lt;b class='xb1'&gt;&lt;/b&gt;&lt;/b&gt;"); var title = $("&lt;h1&gt;Select Funding&lt;/h1&gt;"); var separator = $("&lt;div&gt;&lt;/div&gt;"); $(this).append(title); $(this).append(separator); var firstElement = $(this).children()[0]; if (firstElement != null) { title.insertBefore(firstElement); separator.insertBefore(firstElement); } outer.append(topBorder); outer.append($(this)); outer.append(bottomBorder); $("#fundingAdminContainer").append(outer); //Add classes outer.addClass(opts.outerClass); //outer container $(this).addClass(opts.contentClass); //inner content title.addClass(opts.titleClass); //roundbox title separator.addClass(opts.lineClass); //line below title }; $.fn.roundbox.defaults = { outerClass: 'roundbox', contentClass: 'roundboxContent', titleClass: 'roundboxTitle', lineClass: 'roundboxLine' }; })(jQuery); //CSS .roundbox { float:left; width:400px; margin-right:20px; } .roundboxContent { display:block; background:#ffffff; border:0 solid #D4E2FE; border-width:0 1px; height:180px; padding:10px; } .roundboxLine { background: url(../images/fundingAdmin_line.gif); background-repeat:no-repeat; height:5px; } .roundboxTitle { font-size:1.3em; color:#17A2D3; } .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #D4E2FE; border-right:1px solid #D4E2FE;} .xb1 {margin:0 5px; background:#D4E2FE;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} </code></pre> <p>Final structure of the box should be:</p> <pre><code>&lt;div id="fundingAdminContainer"&gt;&lt;!-- Not part of rounded box, just serves as a container. --&gt; &lt;div class="roundbox"&gt; &lt;b class="xtop"&gt;&lt;b class="xb1"&gt;&lt;/b&gt;&lt;b class="xb2"&gt;&lt;/b&gt;&lt;b class="xb3"&gt;&lt;/b&gt;&lt;b class="xb4"&gt;&lt;/b&gt;&lt;/b&gt; &lt;div id="content" class="roundboxContent"&gt; &lt;h1 class="roundboxTitle"&gt;Title&lt;/h1&gt; &lt;div class="roundboxLine"&gt;&lt;/div&gt; //CONTENT &lt;/div&gt; &lt;b class="xbottom"&gt;&lt;b class="xb4"&gt;&lt;/b&gt;&lt;b class="xb3"&gt;&lt;/b&gt;&lt;b class="xb2"&gt;&lt;/b&gt;&lt;b class="xb1"&gt;&lt;/b&gt;&lt;/b&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload