Tag Archive: jQuery

My Latest Project

I have been volunteering at ICAF (International Child Art Foundation) since April of this year. When I first started off, I was assigned to be a video editor to edit pre-recorded videos for some international festivals. The reason why I selected this position is probably because I put the video editing skill on my resume :) I used Kdenlive and Openshot interchangeably to edit these videos. Sometimes I also used Audacity to sync between left and right channel of the videos.

After three months of video editing, I was just beginning to love to edit videos. However, I assigned to redesign the gallery page on the ICAF website two weeks ago. This is my second web development challenge. My first challenge was to build the first website for another non-profit organization. Although that project was abandoned long time ago because the interruption of school work, I learned the existence of server-side scripting at that time and wrote the first PHP application, the contact form on my website. This time I need to place thousands of children’s artworks and some other pictures to the gallery page in an organized layout.

I know that I have to use pagination for this project. It’s my first time to create pagination pages using PHP. The original design shown below was using JqPageFlow jQuery plugin to implement the pagination as the user scroll down the page.

ICAF Gallery Original Desgin

ICAF Gallery page original design

After some more research, I thought that the infinite scrolling is not good for bookmarking since the manager specifically pointed out that he wants to have a back button for each page. Therefore I revised the design to use the traditional pagination method similar to Google:

ICAF revised gallery layout

Revised ICAF Gallery page layout

Note: The next three linked pages are no longer available as I’ve lost them. Sorry for the disappointment.

Based on the above design, I wrote a test page to test my pagination code. This page is still under development. I will integrate the code into the original page once I completed the testing stage. You can download the source code for this page here (I didn’t include the image files since these images are over 1.5 GB). Note that I used exec PHP function to execute ‘ls’ Linux command to output the image file names to an array rather than use a loop or a database table to process file names. This page also contains a script to split different parts of the file name since these names followed a specific pattern: “country-firstNam_lastName-age-thumb.png” as well as some knowledge I got from the C for loop tutorial. Also note that this is the test code, meaning that I haven’t added extensive comments to the code yet.

http://php.net/manual/en/function.exec.phphttp://php.net/manual/en/function.exec.php

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:

window.addEvent("domready", function() {
         $('hori').setStyle('opacity','0');
         $("change").addEvent("click", function() {
             $('change').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start('width','50px')
                 .chain(function() {
                     changeMenu.start('height','400px');
                 })
                 .chain(function() {
                     changeMenu.start("left", "10px");
                 })
                 .chain(function() {
                     changeMenu.start("top", "40px");
                 })
                 .chain(function() {
                     $('hori').fade('in');
                 });
             return false;
         });
          $("hori").addEvent("click", function() {
             $('hori').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start("top", "50px")
                 .chain(function() {
                     changeMenu.start("left", "100px");
                 })
                 .chain(function() {
                     changeMenu.start('height','50px');
                 })
                 .chain(function() {
                     changeMenu.start('width','600px');
                 })
                 .chain(function() {
                     $('change').fade('in');
                 });
             return false;
         });
      });

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.

HTML Template PHP class

This is my first fully-written PHP class to ease my HTML page creation process by pre-set the DOCTYPE and other required tags in a normal HTML page. The class is inspired by this article where it talks about wp_header and wp_footer of WordPress. I thought that this is a great exercise to increase my OOP (Object-Oriented Programming) skill. Therefore I wrote the following code based on my creation habit for HTML pages:

<?php
    class template {
        public $title;
        public $style;

        function header($headerContent="") {
            echo "<!doctype html>n";
            echo "<html>n";
            echo "<head>n";
            echo "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />";
            echo "<title>";
            echo $this->title;
            echo "</title>n";
            if (isset($this->style) || !empty($this->style)) {
                echo "<link href='{$this->style}' rel='stylesheet' type='text/css' />n";
            }
                // Output additional header content if available
            if (function_exists($headerContent)) {
                $headerContent();
            }
            echo "</head>n";
        }

        function body($bodyContent="") {
            echo "<body>n";
                // Output body content
            if (function_exists($bodyContent)) {
                $bodyContent();
            }
        }

        function script($script='') {
            if (strstr($script, ".js") || strstr($script, "://")) {
                echo "<script type='text/javascript' src='{$script}'></script>n";
            }
            else {
                if (strstr($script, "()")) {
                    $function = str_replace("()", "", $script);
                    if (function_exists($function)) {
                        $function();
                    }
                }
                else {
                    echo "<script type='text/javascript'>n";
                    echo $script;
                    echo "</script>n";
                }
            }
        }

        function footer($footerContent="") {
            if (function_exists($footerContent)) {
                $footerContent();
            }
            echo "</body>n";
            echo "</html>n";
        }
    }
?>

The header, body, and footer methods include an optional string variable. As you can see in the code above, this variable needs to be a function name. The function name in these three methods doesn’t require parentheses. However, the function name needs to have parentheses in the script method. The script method is different from the above three methods as it can be reused in the same HTML page. For example, the following is a simple page with the class applied:

<?php
    $ca282 = new template();
    $ca282->title = "Robby Chen CA 282";
    $ca282->style = "styles/global.css";
    $ca282->header("headerContent");
    $ca282->body("bodyContent");
    $ca282->script("http://www.google.com/jsapi");
    $ca282->script("google.load('jquery','1')");
    $ca282->script("jquery()");
    $ca282->footer();
?>

Notice that the script method has three formats in the above example, external JS, on-line code, and a function. I didn’t pre-set the script tag between function because I need the syntax highlighting and auto-completion features in NetBeans. The following is my jquery() function in case you don’t know how to activate these two features within a PHP function:

<?php
    function jquery() {
?>
<script type="text/javascript">
    $(document).ready(function() {
        $("#logo").html("Logo");
    });
</script>
<?php
    }
?>

Basically, the JavaScript code is outside the php tag but inside the PHP function. This way the script content will only appear after the jquery function is called.

You can download the class file here.

<?php
class template {
public $title;
public $style;

function header($headerContent=””) {
echo “<!doctype html>n”;
echo “<html>n”;
echo “<head>n”;
echo “<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ />”;
echo “<title>”;
echo $this->title;
echo “</title>n”;
if (isset($this->style) || !empty($this->style)) {
echo “<link href='{$this->style}’ rel=’stylesheet’ type=’text/css’ />n”;
}
// Output additional header content if available
if (function_exists($headerContent)) {
$headerContent();
}
echo “</head>n”;
}

function body($bodyContent=””) {
echo “<body>n”;
// Output body content
if (function_exists($bodyContent)) {
$bodyContent();
}
}

function script($script=”) {
if (strstr($script, “.js”) || strstr($script, “://”)) {
echo “<script type=’text/javascript’ src='{$script}’></script>n”;
}
else {
if (strstr($script, “()”)) {
$function = str_replace(“()”, “”, $script);
if (function_exists($function)) {
$function();
}
}
else {
echo “<script type=’text/javascript’>n”;
echo $script;
echo “</script>n”;
}
}
}

function footer($footerContent=””) {
if (function_exists($footerContent)) {
$footerContent();
}
echo “</body>n”;
echo “</html>n”;
}
}
?>

My hatred of Microsoft and Adobe as a GNU/Linux user and a web developer

I had used Dreamweaver, Flash, Fireworks, and other Adobe products long before Adobe acquired Macromedia. At that time, I didn’t know the existence of GNU/Linux and open source communities. I didn’t even decide on my career as a web developer yet. Thanks to Microsoft’s announcement of Windows Vista, I decided to look for other Operating Systems beyond Windows that are able to run on the older hardware eternally (by the way, I didn’t know other OSes besides Windows back then), meaning that the future version of OS will still be able to work on old hardware. I found GNU/Linux, specifically Ubuntu.

After one year of switching back and forth between GNU/Linux and Windows, I finally made the decision to stick to GNU/Linux. However, I still would test the browser compatibility in IE through VirtualBox. And here comes my hatred of MSIE. During the course of my web development, I’ve read numerous articles about how Microsoft doesn’t follow the W3C standards for their Internet Explorer to make web developers suffer from browser incompatibility issue. I had enough struggle for the Internet Explorer, I decided to use some jQuery to encourage those who view my website to ditch their Internet Explorer.

I have become to hate Adobe since the day I switched to the Eclipse and NetBeans IDE to develop my projects. After Adobe announced that Flash Builder and ColdFusion Builder are based on the Eclipse, I was excited to know that Adobe finally makes their development tools available on all of the major OSes. It disappointed me when I went to download the beta version of these two builders, it only offers Windows and Mac versions, no GNU/Linux version anywhere. Since Eclipse uses its own EPL license instead of GPL license to govern the use of Eclipse, Adobe can make modification to its code and sell it as their own products. This doesn’t mean that Adobe can discriminate against GNU/Linux users from using their products since Adobe uses Linux on their Adobe.com website.

As an opposite effect, these hatreds actually make me become more involved with open source technologies, such as HTML 5 and Ogg theora. I use open source ColdFusion engine Railo to develop ColdFusion websites as well. I think that ActionScript will be replaced by jQuery and other JavaScript frameworks and FLV will be replaced by either H264 or Ogg Theora depending on which side will win the online video wars.

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.

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

Different browsers require different CSS property syntax, especially in CSS 3. In CSS 2, 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:

$("#thing").css({
   opacity: 0.5
});

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

However, since the new CSS 3 is in the draft mode right now, jQuery has not implemented CSS 3 standard yet. It means that border-radius and other properties that are different from each browser needs to write all of the possible style properties into the CSS file.

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