Easiest Datepicker Ever

There is a fast, easy way to add a date picker calendar to any form. jQuery! More specifically, jQueryUI.

Include this stuff:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" />

Then in your $(document).ready(function(){ add

$('.datepicker').datepicker();

and any text field with the datepicker class will make a beautiful awesome calendar.

jQuery is Fun!

I'm having fun with jQuery and Fancybox. Not only can I do lightbox style effect with images and galleries, but I can use it for other things too.

I have a client who wants a diagram and all the sections of it to have an explanation box. I'm using fancybox with the elastic transition for these explanations to pop out. The coolest part is they elastic out and back in in the shape of the link.

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script>
$(document).ready(function(){
$(".more").fancybox({
 'titlePosition'  : 'inside',
 'transitionIn'  : 'elastic',
 'transitionOut'  : 'elastic'
});
});
</script>

HTML:

<a class="more" href="#popup1">HTML Popup</a>
<div style="display:none">
 <div id="popup1" style="width:500px; height:220px; overflow:auto;">
     <h2>Title</h2>
     <p>Text text</p>
 </div>
</div>

Creating an Org Chart with CSS

The trick is to use LOTS of divs. Every box and every line is its own div... and the whole thing is in another div.

Another thing they wanted was some of the boxes to expand to show more details. This was really easy to do with javascript and I used jQuery for the animations

So here's my divs:

<div id="container">
<div id="box1">
 <h3 class="titles">Box 1</h3>
</div>
<div id="line1"></div>
<div id="box2">
 <h2 class="titles">Box 2</h2>
</div>
<div id="line2"></div>
<div id="box3">
<h3 class="titles">Box 3</h3>
</div>
<div class="clear"></div>
<div id="line3"></div>
<div id="box4">
<h2 class="titles"><a class="show" href="#">Expandable</a></h2>
<div id="expand">
 I am the contents of an expandable box
</div>
<p class="clear"></p>
</div>

<div id="box5">
 <h2 class="titles">Box 5 has a longer sentence</h2>
</div>
<div id="line4"></div>
<div id="box6">
 <strong>Box 6</strong>
</div>
<div id="line5"></div>
<div id="line6"></div>
<div class="clear"></div>
<div id="line7"></div>
<div id="line8"></div>
<div id="line9"></div>
<div class="clear"></div>
<div id="box7"><strong>Box 7</strong></div>
<div id="box8"><strong>Box 8</strong></div>
<div id="box9"><strong>Box 9</strong></div>
</div>

You'll notice box 4 is expandable. Script below the css.

The css:

* { padding:0; margin:0; }
body { font-family: Arial,Helvetica,sans-serif; font-size: 80%; color: #000;}
h1{ font-size: 133%;}
h2 { font-size: 116%;}
h3{ font-size: 108%;}
h4 { font-size: 104%;}

#expand{ display:none; text-align:center; }
#container{
width:950px;
text-align:center;
margin:auto;
margin-top: 10px;
}
.clear { clear:both;}
.titles { text-align:center; padding:10px; }
#box1,#box2,#box3{
display:inline;
border: 1px solid #000;
float:left;
height:55px;
width:250px;
}
#line1,#line2{
font-size:0;
display:inline;
width: 96px;
height:1px;
float:left;
margin-top:23px;
background-color:#000;
}
#line3,#line5{
font-size:0;
width:1px;
height:35px;
background-color:#000;
margin:auto;
}
#box4 {
border: 1px solid #000;
width:200px;
height:55px;
margin:auto;
margin-bottom:10px;
text-align:left
}
#box5{
border:1px solid #000;
width:760px;
height:30px;
margin:auto;
}
#line4{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin:auto;
}
#box6{
border:1px solid #000;
width:300px;
height:75px;
margin:auto;
background-color:#FF0;
}
#line6{
font-size:0;
height:1px;
width:599px;
background-color:#000;
margin:auto;
}
#line7{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin-left: 175px;
display:inline;
float:left;
}
#line8,#line9{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin-left: 298px;
display:inline;
float:left
}
#box7{
border:1px solid #000;
width:200px;
height:40px;
margin-left:100px;
display:inline;
float:left;
padding-top:15px;
}
#box8{
border:1px solid #000;
width:150px;
height:40px;
margin-left:100px;
display:inline;
float:left;
padding-top:15px;
}
#box9{
border:1px solid #000;
width:150px;
height:40px;
margin-left:130px;
display:inline;
float:left;
padding-top:15px;
}

And finally the JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// expandable
 $("a.show").toggle(function(){
  $("#box4").animate({width: '940px', height: '225px'});
  $("#expand").slideDown('medium');
 },function(){
  $("#box4").animate({width: '200px', height: '55px'});
  $("#expand").slideUp('medium');
 });
});
</script>

jQuery was great for this because of their toggle function so I could use the same link to expand and contract the box.

Now all I need to do is make a way to automate the whole thing!