First go grab a copy of the jquery framework and the jquery.borders.js plugin.

Let’s go and create an index.html file and add some basic markup and text to it. A div containing some text and a single paragraph. The “rounded” div is the one we are going to apply the rounded corners to.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The style is just to make the div visible.
It should look like this:

Next add the javascript files to the header between the head tags. Make sure the src is set to the path of the js files.

Now let’s add the javascript code that actually make the corners rounded. Just below the javascript src files in the header we add:

Now it should look like this:

Complete code listing.

// Doctype etc


	
	





Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Yupp, thats all. Easy isn’t it? You can specify the corner style and radius in the corner call. For example:

$("#rounded").corner("10px"); // 10px radius
$("#rounded").corner("tl tr 10px"); // Rounds top left and top right 10px

There’s loads more of styles, take a look at the demo page.

Have fun.

// The loop

		// Print the post if not in sidenotes category
		 // The category id noted earlier
			// code...
		
	
'

In the sidebar we only want the sidenotes category so we need to modify the loop here too.

// Rewind the loop so it can be used again

// The loop again

		// Print the post if in the sidenotes category
		 // The category id noted earlier
			// code...
		
	

To get the post heading linked to the site of the sidenote is a little bit more complicated. In every sidenote post I define the url within [url]www.site.com[/url]. To extract those links we need a little regular expressions.

preg_match('|[url](.*?)[/url]|ims', $post->post_content, $m);

Add this in the sidebar loop. The link can then be accessed like this:

The complete sidebar loop would be something like this.

// Rewind the loop so it can be used again

// The loop again

		// Print the post if in the sidenotes category
		 // The category id noted earlier
			// Exctract the link.
			preg_match('|[url](.*?)[/url]|ims',$post->post_content,$m);
			
			
			
	

A typical sidenotes post look like this.

[url]http://www.andydenton.com/2006/11/05/the-top-55-web-designers-in-the-world/[/url]
According to this site I’m number 19 of the top 55 web designers in the world. Flush…

Now we have sidenotes with the same functionallity as a regular blog post. This way of doing this is much like Asides, but I prefer doing things myself. By the way I imported all my fQuick sidenotes into this new category but that’s a different story and I leave that part to you.

To continue tha Ajax tutorials which was started with this simple one we now continue with a slight more complicated one.

For you who don’t know what Livesearch is we start with a small description. LiveSearch is a search function on wep pages allowing the visitor to search and the result is presented in “real time”, either as an animated drop down box or perhaps the search form is filled with the results and the visitior get the feeling it all happens “live”. An example can be seen by searching this site. The benefit with this is not only the cool feature but also a smaller bandwith usage as the whole page does not require reloading.

One drawback is that we need some javascript framework to be included on the pages which can be quite large at timesdepending on witch features are beeing used. For simpicity we are going to use the prototype and scriptaculous frame work. This can be achieved without these framworks too but it requiers more code, and besides we don’t need to invent the wheel again.

Besides the framwork we need three file for this to work:

• livesearch.php
  The file is the main search file from where the Ajax call is made.
• general.js
  Our javascript file which implement the features from the prototype framework
• results.php
  The external file called by with Ajax and are responsible for the database search.

To make it clear how the program flow goes we can illustrate this with simple chart.

Let’t start with the livessearch.php file. This is mainly a search form from where the search term is passed to the functions in general.js.

livesearch.php