A Dropdown Widget for your blog

Couple of years back when I launched my food blog "Thenu's Kitchen" , I had the need to organise my recipes in an easy to search way. 


Obviously, a dropdown menu box was what came to my mind. With some simple html coding, there it was my menu box to the rescue. What it does:
It lists all the recipes by their titles in a drop down box.
When a user slects any recipe, he will be automatically taken to that page. 
This is a compact way to organise your multiple links that fall in a category.
I like this instead of the archives where each recipe is a link by itself and it takes a lot of side bar space..
I have now organised all 150+ recipes in a small space. 


Offlate, many fellow food bloggers keep requesting me to explain how to add such a menu item to their blogs too. For techies, it is a no-brainer but for those beginners, I hope this post will meet their needs and save their time. 


At first I thought of just giving out the html code that does the job.
Now that I m hooked onto widgets, it occured to me that I have an easy way to port this simple yet useful dropdown element as a widget straight from my blog to yours! Just click on the "Add to Blogger" button below and you will be all set. 
To change the select box options, just replace my urls with yours. 


Non-coder folks,customise as follows:
Log into your blog account first.
Then visit this page and click the "Add to Blogger" button below.
You will be taken to 'Add Page Element' window.
Click 'Add Widget'

Now you will be taken to your layout tab and you will see a page element "Recipe Index" being
added to your blog layout.
Now edit that page element to customise it.
For example, to change the option "Broccoli Egg Fried Rice" to "My Own Link Name"
and link it to your own page, replace
option value="http://thenuskitchen.blogspot.com/2008/02/thai-fried-rice-with-eggs.html"/>Broccoli Egg Fried Rice
as
option value="http://myserver/mypage.html"/>My Own Link Name
Any questions, drop me a line. Happy improvising your blog!








Drag and Drop From List Control

This is a sample that demonstrates how to drag/drop items from a list. I have taken a scenario where one wants to add items to a list and to delete or remove item from the list by simply dragging the unwanted item and drop it in the bin. The bin image indicates if the bin is empty or not. View source enabled.




Sticky Search

Supposing you have a long search form with numerous filter fields, the user has to scroll up/down the page to hit the search button. Instead if the search button would magically move along with the cursor and stay in the proximity of the search field in focus, how convenient is that! That is what my next demo is all about. As always, view source is enabled.



Rummy Tracker

Rummy is one of the favorite card games among our friends' circle. We used to keep track of the scores in an excel or on paper. I developed a Flex application to keep track of the points. I have uploaded my thus born RummyTracks so it can be accessed and used online. I plan to improvise the tool by providing support for data persistence and charting/reporting when time permits. Till then, here is the basic flavor of my RummyTracks.



Open/Close Flex pop up using F2 & Esc Keys

I wanted to open a pop up using the function key and close it using 'Esc'. I originally tried to use F1 but when I uploaded the swf to my website, pressing F1 triggered the browser help page along with my pop up. From what I researched, I believe the IE help can't be suppressed (unless mucking around the registry..). So I made this compromise: Use F2 to open the pop up.
Here is the demo. Right click the application to see the source.

Sliding Panels in Flex

I just created a sliding Panel sample. I have enabled the viewsource for you to take a look at. View Demo in new window here
Sliding Panel

SQL Server and Case Sensitivity

SQL Server - default installation is case insensitive.

While case insensitive searches are good when your database serves an online catalog, we need case sensitive matches in some particular cases, like say, username/password match.

So how do you perform case sensitive searches in SQL server?

Well, SQL Server 2000/2005 lets you specify collation(sort order) at the database as well as column level. If you want to perform it at the query level rather, use the following collate clause to your query expression: COLLATE SQL_Latin1_General_CP1_CS_AS

Sample Query:
select * from USERS where USERNAME = 'Thenu' COLLATE SQL_Latin1_General_CP1_CS_AS
and PASSWORD='tHeNu' COLLATE SQL_Latin1_General_CP1_CS_AS

Note: For non English Data use appropriate collation.

AJAX in 10 minutes

Wanting a break after a long tiring day, we (family) went to Frys and I stumbled upon "AJAX in 10 minutes". Although it took me more than 10 min to finish the book, I would say time well spent. It is worth a reading if you are looking for a quick intro to AJAX. A coffee and this book kept me busy for an hour.

Print sections of a page

Have you ever come across an usecase where you need to display a page in one way but while printing, part of the sections got to print in a new page? Well I did. I had to display a page with many coupons that the end user would be printing. To print each coupon in a separate page is my requirement. And thats when this style attribute "page-break-after:always" came in handy.
Enclosing the section with a div tag and setting the style like this,
<div style="PAGE-BREAK-AFTER: always">
will make the rest of the section after this div to print in a separate page. Neat huh?!
What you see is not what you get, after all.