Simple Form Design

Arvind — Sun, 29 Nov 2009 14:58:41 +0000

Designing form is quite fun, it always makes me think how the user will use it, my colleague developer and I have been doing a new project and that includes their registration form with admin interface. I wanted to share this simple form design. I used style from blueprint css framework. I took some of what I really need, edit some of it and adjust their value. In every project I start I always use blueprint and craft the css I need, this speeds up the time of my development.

When I say simple, it’s really simple. This is just a form layout with a stupid validation.I actually wanted to use some validation plugin but there is no use for this example because I will only show a simple form anyway.

Demo | Download

Primary Care Conference 2009

Arvind — Fri, 20 Nov 2009 05:29:14 +0000

Horizontal scroll using jquery scrollTo

Arvind — Fri, 18 Sep 2009 10:59:57 +0000

You may already saw this in some other website scrolling horizontal and vertical smoothly with easing. I will show you how to do this using jquery scrollTo plugin. I’m not going show you the full details about this plugin. You can visit Ariel Flesler : jquery.ScrollTo to see detailed instruction and more settings.

Demo Download

First download the easing and scrollTo plugins.

Add scrollTo and the easing plugins

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

For the style of the page

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
 
body{background:url(images/bg_pattern.jpg) repeat;}
.wrapper{width:5500px; height:300px; padding-top:150px; position:relative;z-index:0;}
.f_box{padding:0 500px 0 500px; width:390px; float:left}
.f_box_inner{background:url(images/html.jpg) no-repeat; width:336; height:246px; display:block;}
 
.s_box{padding:0 500px 0 500px; width:390px; float:left}
.s_box_inner{background:url(images/css.jpg) no-repeat; width:336; height:246px; display:block;}
 
.t_box{padding:0 0 0 500px; width:390px; float:left}
.t_box_inner{background:url(images/jquery.jpg) no-repeat; width:336; height:246px; display:block;}
 
.nav{height:32px;padding:200px 0 0 556px;width:250px; z-index:1; position:fixed}
 
#btn_one, #btn_two, #btn_three{display:block; text-indent:-2000px; overflow:hidden; float:left;margin:0 5px;}
 
#btn_one{width:63px; height:24px; background:url(images/html_btn.gif);}
#btn_one:hover{background:url(images/html_btn_hover.gif);}
 
#btn_two{width:43px; height:24px; background:url(images/css_btn.gif);}
#btn_two:hover{background:url(images/css_btn_hover.gif);}
 
#btn_three{width:90px; height:24px; background:url(images/jquery_btn.gif);}
#btn_three:hover{background:url(images/jquery_btn_hover.gif);}

Structure of our page

<div>
  <div>
     <a id="btn_one" href="#first">html</a>
     <a id="btn_two" href="#second">css</a>
     <a id="btn_three" href="#third">jquery</a>
 </div>
</div>

Now add the easing function

// easing function
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a &lt; Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

Reset the scroll page and add the click event function for the buttons

//resets the page
$('div.wrapper').scrollTo( 0 );
$.scrollTo( 0 );
 
// click function
$('#btn_one').click(function(){
$('.nav').fadeOut("slow").fadeIn("slow");
$.scrollTo(this.hash, 1500);
});
 
$('#btn_two').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});
 
$('#btn_three').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});

arvindandrion.com » Jquery

Simple Form Design

Primary Care Conference 2009

Horizontal scroll using jquery scrollTo