Tag Archive: jQuery

My First Regular Expression Statement


During my quest searching for more AJAX tutorial using jQuery, I found the jQuery history plugin. It enables the back button and manipulate browser history for AJAX applications. What I loved about this plugin is that the page with a hash sign at the end of the URL will automatically go to the page specified after the hash sign. For example, the URL http://localhost/index.php#products normally would ignoring the hash sign and go to the home page instead of products page. With history, this URL will go to the products page directly once it is entered into the address bar.

On the demo page of history plugin, I noticed a regular expression embedded in the code. I didn’t care about the expression very much at first because I thought I didn’t need it. But after experimenting with it, I came up with this jQuery code:

The regular expression in the last click event is the same as the one in the history demo page. According to regular-expressions.info, it means to remove all the characters before the hash sign along with the hash sign. For example,

After the regular expression used with replace function, the new value will be

The ^ character in the expression means to start with. The .* characters means any character. In the above code, ^.*# means to start with any character until the hash sign.

In the function ajax404() of the above code, I used the regular expression ^.*/ to get rid of all the characters before the backslash (/) sign along with the backslash sign. This produced the following result:

As the function name implies, I used this expression to display the page name when the file is not found. The above expression would produce the following error message:

instead of

if not used with the expression, which is not a good error message.

As with PHP and C, the forward slash (\) represents the escape character. In the code above, the normal usage of backslash (/) character is the same as the use of quotation marks in PHP. If used with escape character, it would output a normal backslash character. For example,

would produce

To learn more about regular expression, visit regular-expressions.info. And if you have any tips on how to work with regular expression, please share them in the comment below.

Site Menu Animation Prototype

I have been playing around with MooTools recently and came up with an idea to allow users to change the orientation of the menu for my updated site with animation. MooTools is an Object Oriented JavaScript framework similar to jQuery. The main reason I chose this framework instead of jQuery is that it can easily create customized animations. Although I’m still learning how to use MooTools’ full features, I wrote a HTML page that toggles between vertical and horizontal menu with custom animations just by using MooTools framework. Note that this is a prototype to the upcoming updated site menu. It only contains the background color and doesn’t contain any content. Here is the MooTools code for the page:

Notice that I used CSS property names and MooTools functions to create animations. You can view the whole source code by right-click the prototype page since it is just a plain HTML and JavaScript page.

I created this prototype with the help of MooTools 1.2 Beginner’s Guide and MooTools Docs.

10 jQuery Code Snippets to use instead of using jQuery Plugins

There are lots of jQuery plugins available around the web that can simplify your coding. However, some of the plugins can easily implemented using only jQuery. This article lists the top 10 jQuery code snippets that uses only jQuery to achieve the same effect as using plugin including:

  • Disable right-click
  • Disappearing search field text
  • Opening links in a new window
  • Detect browser
  • Preloading images
  • CSS Styleswitcher
  • Columns of equal height
  • Font resizing
  • Get the mouse cursor x and y axis
  • Verify if an Element is empty

For the code snippets for the above effects, as well as their usage explanation, please read the original article.

6 Cool jQuery Animation Plugins

Here is a list of jQuery animation plugins that I found over here (each link below links to the demo page of the plugin):

  1. Blend (http://colorpowered.com/blend/)
  2. Sexy Curls (http://elliottkember.com/sexy_curls.html)
  3. Roundabout
  4. Flip
  5. Quicksand
  6. JQZoom

I personally think that Flip jQuery plugin is best to replace Flash with JavaScript. In the near future, there will be many creative animations written in jQuery. I believe that Flash will be replaced by jQuery and HTML 5 video.

For more information about each of the above plugins, please read the original article.

Animate Objects along Paths using jQuery Path Plugin

jQuery Path plugin animates an HTML element along a specified path, much like Flash motion guide layer. The path can be a curve or a line. You can see a demo on this page and checkout its source code. According to the source code, the syntax for this plugin is integrated to the jQuery animate function:

$(“#div”).stop().animate({path: pathType}, time_in_millisecond);

One disadvantage of using this plugin that I’ve found is that there is no pre-set path type. Fortunately, the plugin documentation explains how to create bezier and arc path, as well as custom path types.

jQuery CSS Browsers Compatibility

jQuery Tips

Different browsers require different CSS property syntax, especially in CSS3. In CSS2, the only property that I know of requires different syntax is opacity property. Firefox called opacity, and IE called filter. You need to set values for opacity and filter properties at the same time. Not only this is inefficient, but it also adds up the size of the CSS file.

Fortunately, jQuery has a css function to make the CSS cross-browser compatible. For example:

It will auto changed to filter CSS property if the user is running IE.

For more information about jQuery CSS and a jQuery plugin to support CSS3 syntax, please read original article.

Using jQuery UI with Google AJAX API

jQuery UI is an User Interface library based on jQuery JavaScript framework. It has cool effect such as make the layers on the web pages draggable and resizable, add dialogs to the page, and add auto-complete feature onto the page. Recently, I noticed that some websites use Google to get the jQuery framework and its UI library. After I googled it, I found out that it is included with Google AJAX API along with other JavaScript Framework such as Prototype and SWFObject. To use it, I need to set up an API key for my domain in order to use Google APIs. Then I added two google.load() functions between the script tag before the body tag.


Note that the second parameter is the version number. I placed version 1 since both jQuery and jQuery UI are at version 1 and it automatically gets the latest version of version 1. Unfortunately,when I’m testing out with this new import method using Google, the resizable() function of jQuery UI did not work. I found out that I need to either create my own stylesheet for the jQuery UI by using jQuery UI’s ThemeRoller, or import the CSS file from Google.

<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css” />

Note that you need to host your own CSS file if you want to customize the page style.

Google provides an easier way to integrate jQuery and jQuery UI to web pages. This allows me to have latest version of both frameworks without downloading needed files.

Found an Interesting jQuery Plugin

I found this (http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html) jQuery plugin which is interesting to me. It’s called Editable and it can convert any text on a web page to a form element. I think this is a very useful plugin for use with PHP or other server-side script languages since it enabled admin to change the content directly on the page and accept the changes to the database. In fact, I used innerHTML Javascript property before I found this plugin in order for me to edit directly onto a simple web app created during the PHP class. My first attempt was to replace text with input text filed after clicking the mouse and retain the value to the text field. It’s easy to copy the corresponding text into the newly created text field using PHP. After I clicked the text that was supposed to change to text field, it successfully changed but it didn’t focus on the text field. I wanted it to be auto-focused once the text was clicked and changed to the form element. This plugin solved this problem. It also provides an easier method to apply this effect, just like jQuery. This makes easy for me to develop web forms and web applications.

Web Application Link added to the Homepage

Update: I uploaded the source files mentioned in this post to GitHub. You can fork it and modify it in anyway you like, or you can download it to your local machine.

Note: This is an old post. Many links in this post may be different.

Update: Because some of the jQuery plugins’ download page no longer exists, I’ve included all the jQuery plugins used in this app to the zip source.

I have added the link to the web app to the robbychen.com homepage. In addition, I have also enabled the link to the CS 110 Computer Concepts homepage. Right now it only has one item, the assignment aid web application. Since I created this web app, I will make a copy of this application and modify it to connect it to the database to post my future assignments for this course. This weekend I will also enable the links for other courses I’m taking this semester.

Since I believe in open source, here is the source code for the web application (NOTE: The only files that are missing in the source code are jQuery Javascript files, you can find the download links for these scripts in my last post):