64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

Build a Web 2.0 Document Search Site

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

In this article, we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google. We'll learn many jQuery tips and skills through the process. A gray box plugin called "ColorBox", and a toolTip plugin called "SimpleTip" will also be introduced in this article. Let's get started.


Introduction

Nowadays, the most useful tools for surfing the web are search engines like Google, Yahoo and MSN live. Unfortunately, not everyone knows how to use these tools efficiently and properly.

In this article, we will use one small Google search trick to create a Web 2.0 style website. From this site, the user can search the documents by entering a keyword and selecting a specific file type. I will pay more attention to the jQuery usage in this site build process. Once completed, our completed project should look like the following.

Step 0: Resources: Logos and Icons

Of course, if you want, you can create your own logos or icons with Photoshop. But, if you are a lazy man, like me, you can download them online. However, please pay attention to the license, because some of these resources are not allowed for commercial use.

creatr is a great site which provides a service to create Web 2.0 style logo online. Most importantly, it's free and easy to use! There are many styles you can choose to create your logo. I chose something like the following.

The icons used in this article are all from the Windows operation system. If you'd rather use other icons, review iconza and weloveicons to find beautiful icons. Also, you can use an icon search engine to find icons on the internet. Go to iconfinder or iconlook to have a try.

Step 1: Page Layout

Our front page will be similar to Google.com. A brief initial sketch looks like the following:

The HTML code for this page is as follows.

Next, we should add some styles to the page, to make it more readable and beautiful. We create a new file called style.css to save the styles used in this example.

Let's not forget to reference our external CSS file.

Now your page should look like the following:

Pay attention to this piece of styling, which forces the content on the page to stay centered.

Step 2: Implement the Search Function with jQuery and Google

The main function of this site is to search documents with specified file types, such as "PDF", and "DOC". If you're well-versed in search engines, you might already know how to accomplish this. If we want to search for PDF documents about "jQuery", we can enter the following text in the search text box:

jQuery is a great Javascript framework which provides an easy-to-use JavaScript freamework. If you are reading this article, I think you should have basic jQuery skills by now. But if not, that's also fine. We will start our work from the beginning.

We create a new file to save the Javascript/jQuery codes used in this example. The name of this file is main.js, which will be put in directory js. The reference code used in HTML file is...

The first two lines are used to import the jQuery library file from Google's CDN. If you'd rather, you can instead use your local jQuery library file.

Within main.js, add the following script, which will be run after the DOM is ready.

We want to add the file type icons before the file type texts above the search box.

The icons are placed in our "icons" directory, and the name of icons are set as (filetype).gif. So in the above code, we can use the selector $(this).attr("value") to get the file type name, such as "pdf", "doc", etc. Then we can grab the icon file name, which can be used to set the background image of the element. In the above code, function css() is used to set the CSS style of the element $("#types a").

Now the file type above the search box should look like:

But, as you can see, when the page is reloaded, we can't distinguish which file type we have selected.

We'll change the styles every time a user click on an icon. The onClick event will be triggered after the user click on one link.

Here, we use different background color to make the selected file type appear differently. Now, the selected file type link looks like:

But, the problem is, after the page is reloaded, any file type will be selected. We need to give a default selected file type after the page has been refreshed.

Every time the page is reloaded, the first link in within file types section will perform a "click" operation.

Search Function

Next, we will implement the search function. When a user click on the "Seach Docs" button, he will be redirected to the result page, which is provided by Google. A function called updateLink() is used to update the link on this search button when user inputs his keywords.

In the above code, we use attr() function to update the href attribute of the search button (link). $("#word").val() is used to grab the key words in the search box. $("#types").data("filetype") is used to get the file type, which will be set in $("#types a").click() function. And also in this function, updateLink function will be called, which means, the href attribute of the search button will be updated each time that the file type is changed.

We're almost finished. But wait, now, if a user changes the search keyword after selecting file type, what will happen? The href attribute of the search box will not be updated. That's not what we want. So we also need to compensate for this possibility.

In the above code, everytime the $("#word") is changed, e.g, the user changed the key words in search box, the function updateLink will be called to update the link of the search button. Let's also add one more convenience. When a user presses "Enter", we'll assume that the user means to mimic the functionality of the "Search" button. We know that the keycode is 13, which means the "Enter" key has is pressed -- we will trigger the onClick event of the search button.

Now, when we type something into the search box, the result will be displayed as the following picture. It will redirect to Google's search result page.

Step 3: Display the Search Results with the jQuery ColorBox Plugin

ColorBox is a great jQuery plugin which can be used to make a light-box effect. For detailed usage of this plugin, you can refer to its website.

First of all, we should download the ColorBox plugin from the offical website. The latest version is 1.2.4, at the time of this writing. Before we can use it, we need to link to the Javascript file.

  • colorbox.css and colorbox-custom.css are used to control the appearance of the light-box.
  • colorbox-custom-ie.css contains some hacks only for Internet Explorer.
  • jquery.colorbox.js is the ColorBox plugin file.

The ColorBox plugin can be instantiated like so:

The id of the search button is "google", so we can use the selector "$("#google")" to get this element. The ColorBox plugin can be used as follows:

We've set the content width to 800px and the height to 500px.

Step 4: Add Tooltips with the SimpleTip Plugin

SimpleTip is a simple jQuery tooltips plugin. It's lightweight and easy to use. We can download it from its official site.

Once again, let's reference the script.

We should also define the tooltip's appearence with CSS.

We can add this style definition into our style.css file.

Now we want to add the tooltip to these file type links. The tooltip will appear when the user hovers over each file type link. The tooltips will display more detailed file type information.

Simpletips has many parameters to create the effect. In the above code, the show and hide effect are set as "slide", and also the tooltips contents are set as the same with the "title" attribute of each file type link.

Step 5: Add Bookmarkets to the Footer with the addThis Widget.

To share with your friend via some social networking sites, such as del.icio.us, digg, myspace, facebook, twitter and so on, Addthis provides a great, and free, service.

We can use the code from the official site, and normally, it looks like like the following:

You also can set some styles for what these buttons display. Here we put the code into the footer of our example page. The result should look like:

Step 6: Animate the Footer Content.

The last step of this example is to create the animation when a user click on the footer links, like "About", "Contact" and "Thanks".

This code will be placed in the div tag which has an id of "footer". Then we can add a bit of jQuery to control the display.

slideDown and slideUp function are used to create the animation effect. The footer of this page will be displayed as the following picture.

We Are Done!

We've now created a complete Web 2.0 site document search portal. What are your thoughts? Thanks so much for reading.


Advertisement