YUI

Hi,

Here I start with a wonderful method to create rounded corner divs with drop shadow. You no need to touch the HTML for this!!! 🙂 [You can see how it looks our final thing as shown in above image]

Here i have used Jquery to make this work. You need to specify one common class name for all the div’s which require rounded corners. In jQuery i am going to scan all these class names and append 4 <div>’s which create rounded corners. Also i am going to find out the width for all the divs and for each div i am going to insert another <div> which creates the drop shadow.

<div class="roundedCornerDiv">
	<div class="module-header">
		<h4>Title of the box 8</h4>
	</div>
	<div class="module-body">
		Aliquip luptatum concludaturque ad nam, qui eu quod vocibus, pri lorem graecis accommodare ne. Te sumo necessitatibus nec, sea cu virtute alterum, sed ad cibo posidonium. Ius postea tibique mnesarchum ad.
	</div>
</div>

Note the class name “roundedCornerDiv” which is our actual div for which we are going to make rounded corners and bottom shadow. This div contains two blocks header and body modules.

We are going to write a simple jQuery method to append 4 divs for rounded corner and one div for drop shadow. The code is as shown below

$(document).ready(function() {
	$('.roundedCornerDiv').each(
		function(){
			$(this).append('<div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>');
			$("<div class=\"dropShadow\"></div>").width($(this).outerWidth() - 7).appendTo($(this));
		}
	);
});

Befor doing all these things please include jQuery library and YUI grid library which makes our layout looks good and provide with jQuery pre defined functions


<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Create the rounded corner sprite image from any graphics editor like photoshp

Here is the CSS for our positioning rounded corners

.roundedCornerDiv {
	padding: 10px;
	border: 1px solid #f88907;
	background: #FFF;
	position: relative;
	margin-bottom: 16px;
}
.roundedCornerDiv .tl,
.roundedCornerDiv .tr,
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	position: absolute;
	width: 4px;
	height: 4px;
	overflow: hidden;
	background: url(../images/sprite.png) 0 0 no-repeat;
}
.roundedCornerDiv .tl {
	top: -1px;
	left: -1px;
}
.roundedCornerDiv .tr {
	top: -1px;
	right: -1px;
	background-position: -4px 0;
}
.roundedCornerDiv .bl {
	bottom: -1px;
	left: -1px;
	background-position: -12px 0;
}
.roundedCornerDiv .br {
	bottom: -1px;
	right: -1px;
	background-position: -8px 0;
}
.roundedCornerDiv .dropShadow {
	height: 10px;
	background: url(../images/dropshadow.png) 0 0 repeat-x;
	position: absolute;
	bottom: -11px;
	left: 3px;
	overflow: hidden;
}
.roundedCornerDiv .module-header {
	font-style: italic;
	border-bottom: 1px solid #333;
	font-size: 110%;
	margin-bottom: 8px;
}

/* Below things are for idiot IE6 only: WTF? */
.roundedCornerDiv .dropShadow {
	_bottom: -12px;
}
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	_bottom: -2px;
}
.yui-g .yui-g .roundedCornerDiv .tr,
.yui-g .yui-g .roundedCornerDiv .br ,
.yui-gb .roundedCornerDiv .tr,
.yui-gb .roundedCornerDiv .br  {
	_right: -2px;
}
.roundedCornerDiv  {
	_height: 1%;
	_zoom: 1;
}
.roundedCornerDiv .dropShadow {
	_zoom: 1;
}

I am a opensource guy. You can use the above code without any license. Happy coding 🙂

Demo

Download the source code

Hi,

I am here writing out a script for form validation using YUI. (yahoo user interface). YUI is a opensource javascript library from Yahoo. Which turely a good library for a webdev.

See the Demo here.

Form validatin screen1

Error showing mandatory fields are not entered

The files that you require for this are two javascript files. One is from YUI called yahoo-dom-event.js and the other is developed by me formValidator.js.

Main Key features of this code is

only you have to use one id for the form id=”loginForm”
only you have to use the class names password, email, input. No need of individual ids.
script will take care of the validation depending on the class names.

Here is the HTML.

<div class="loginArea">
  <form action="#" method="post" id="loginForm" >
    <fieldset>
    <div class="errorMsgCont"></div>
    <ul>
      <li>
        <label for="username">User name</label>
        <input type="text" name="username" class="username" />
      </li>
      <li>
        <label for="password">Password</label>
        <input type="password" name="password" class="password" />
      </li>
      <li>
        <label for="repassword">Re-Type Password</label>
        <input type="password" name="repassword" class="password" />
      </li>
      <li>
        <label for="email">email id</label>
        <input type="text" name="email" class="email" />
      </li>
      <li class="terms">
        <input type="checkbox" name="terms" class="terms" />
        <p>I here by agree to the terms and conditions of the Site</p>
        <div class="erroTerms">you have to agree</div>
      </li>
      <li class="buttons">
        <input type="submit" id="submit" name="submit" value="Register" />
        <input type="reset" id="reset" name="reset" value="Reset" />
      </li>
    </ul>
    </fieldset>
  </form>
</div>

Check the demo, if you find its usefull then leave me a comment.

JavaScript & PHP Experts

JavaScript, CSS and PHP Code samples

Create rounded corners and shadow without touching the HTML

FORM validation using YUI