Tag Archive: jQuery plugins

A Small Fancybox Tip – Show scrollbar when viewing Large Images

Intro

I use Fancybox jQuery plugin to view large/original size of images. However, its default settings don’t setup to view the large size images. It auto resizes based on the browser window size instead. According to the documentation, the options “autoScale” and “scrolling” disables the automatic scaling and enables the scrollbar to be visible respectively. However, I couldn’t figure out the scrolling option since the horizontal scrollbar is missing when viewing a large image that is bigger than the browser width. After looked into the code generated by Fancybox, I noticed that the scrolling option is applied to other than the body element, which is what I want the scrollbars to be at (edges of the browser window). So I used onStart option to write a callback function that set the overflow property for the body element to be visible.

The Code

$("element").fancybox({
 transitionIn: "elastic",
 transitionOut: "elastic",
 autoScale: false,
 onStart: function() {
  $("body").css({overflow:"visible"});
 }
});

Below is the difference between use the scrolling option and use the onStart callback function:

Scrolling

Scrolling Option

onStart callback function

onStart Callback Function

 

Questions

All of the above options are explained in the Fancybox document page. If you still have questions, feel free to ask them below.

My First Regular Expression Statement

regex

Sorry for not posting any updates for the past week. I have been very busy with the schoolwork lately. For this post, I will discuss about the first basic regular expression statement that I wrote.

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:

$(document).ready(function() {

 function ajax404(page) {
   $("#content").load(page + ".php");
   $("#content").ajaxError(function(e, xhr) {
     if (xhr.status == 404) {
       page = page.replace(/^.*//, "");
       $("#content").html("Page " + page + " not found.");
     }
   });
 }

 $.history.init(function(url) {
   if (url == "") {
     $("#content").load("home.php");
   }
   else {
     ajax404(url);
   }
  });

 $("#products a").hover(function() {
   $("#products ul").css("visibility", "visible");
  }, function() {
   $("#products ul").css("visibility", "hidden");
  });

 $("#menu a").click(function() {
   var menuLink = $(this).context.href;
   menuLink = menuLink.replace(/^.*#/, "");
   ajax404(menuLink);
  });
});

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,

http://localhost/index.php#products/juice
(Note that the following examples are based on this URL)

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

products/juice

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:

juice

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:

Page juice not found

instead of

Page products/juice not found

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.

By the way, I will continue to post C programming tutorials later today.

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.

9 jQuery Plugins to Enhance Web Design Creativity

Note: Some of the links in this post no longer exists. They have been crossed out.

I just read an article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) about 10 jQuery plugins that can help to increase the creativity of web design (noted that there are actually 9 jQuery Plugins instead of 10 jQuery plugins mentioned on the article title) Some of these plugins have cool animation and some have nice styles. And since these plugins are open source, you can study their source code and create your own animations and effects. Here is the list of these plugins:

  1. Coda Bubble (http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php)
  2. DivCorners
  3. Facebook Style Wall Post
  4. Create an Interactive, Filterable Portfolio
  5. How to Make a Slideshow with a Transparent PNG Frame
  6. Simple Toggle with CSS & jQuery (http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/)
  7. Captify (http://thirdroute.com/projects/captify/)
  8. Flickr Horizontal Menu (http://www.candesprojects.com/download/flickr-horizontal-menu/)
  9. EncyPlayer – jQuery Fancybox and Flowplayer Intergration

Also noted that in the article, each link to the jQuery plugin web page seems to be directed to jqueryplugins.com, which is a jQuery plugins directory . Right now this website is currently in beta. Therefore, it doesn’t have a RSS feed to track of what are the newest jQuery plugins.

For more information about each plugin, visit the corresponding plugin homepage. Please read the original article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) for an overview for all of the above plugins.

6 Cool jQuery Animation Plugins

Here is a list of jQuery 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.