I have recently been updating the JQuery imGoogleMaps Plugin that I created earlier this year. The new version of the plugin will display multiple addresses on a Google Map. I’ll discuss the updated version of the imGoogleMaps plugin in another post. In this post, I’ll discuss how to use JQuery to load multiple addresses from Json data.

Read the rest of this entry »

Although Prototype is the default Javascript Framework for CakePHP, using JQuery (or any other Ajax Framework) with Cake could not be easier. Perhaps the most difficult aspect of integrating JQuery with Cake was trying to find documentation on some of those little things that are necessary to return a result set without an error (see my post, CakePHP and Ajax: Missing View).

Note: I purposely wrote this post as if I were speaking to someone who has never used CakePHP. So some parts of this post may be common knowledge to the more experienced Bakers.

Read the rest of this entry »

I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.

Note: Version 1.0 of the imBookFlip plugin has been released (12-28-2011). The primary change was to re-create the plugin using an Object Oriented approach. Please read the bottom of this post to view the changes.

Read the rest of this entry »

I created simple JQuery plugin that rotates images on a page. Actually, there are three modes: random, rotate, carousel, and portfolio. In the default mode, random, the plugin will display a randomly selected image. In the rotate mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. In the carousel mode, the images will move to the left in a carousel effect. I recently added a portfolio mode that using the same carousel effect, but the images are displayed differently. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image. You can also set the image title and set whether the url will appear in a separate window (target = ‘_blank’) or in the same window (target = ‘_self’).

Read the rest of this entry »

Ran into an interesting problem today when trying to access iframe content using JQuery. I kept getting an uncaught exception error when trying access style attributes for content within the iframe.

JQuery makes accessing iframe content quite a simple process. Let’s say I have a div (id=’myBook’) in a file named thisbook.html.

<div id="myBook"></div>

In a parent file (index.html), we create an iframe:

To access the myBook div from the index.html page:

var book = $('#bookFrame').contents().find('#myBook');

Read the rest of this entry »

In Part 1 of using the JQuery UI, I discussed how to customize and download all the compenents. In Part 2, I will discuss the using the UI widgets, specifically the UI dialog. Before you can use the UI dialog, you must first download the necessary files. Read Part 1 to learn more about downloading the file. I’m using a minified version of the JQuery UI widgets, to include a custom Theme. Remember from Part 1, that the customized build includes ui.core.js and other relevant files:

<link rel="stylesheet" type="text/css" href="js/jquery/jquery-ui/css/jquery-ui-1.7.2.css"><script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>

Initializing the UI dialog is simple. First create a container to hold the dialog:

<div id="container" title="My Title">

Then add code in the header section of your web page:

$(document).ready(function() {
       $('#container').dialog();
});

I can also add options to the dialog:

$('#container').dialog(
       autoOpen: false,
       modal: true,
       width: 600,
       buttons: {
             "OK": function() {
                 //do something;
                 $(this).dialog("close");
              },
             "Cancel": function() {
                 $(this).dialog("close");
             }
       },
       show: 'drop',
       bgiframe: true
);

autoOpen: When set to true (the default), the dialog will appear when it is initialized. When set to false, the dialog will appear when dialog(‘open’) is called.

modal: If set to true, the all items below the dialog will be disabled. Modal dialogs create an overlay below the dialog but above other page elements.

buttons: Use the buttons option to add buttons to the dialog and create events for each.

show: There are many effects that can be applied to the dialog. In the example above, the ‘drop’ effect has been added. This will caused the dialog to drop into place on open. To view other effects, go to the UI Demo page.

bgiframe: When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

Click here to view more options for the UI dialog.

As you can see, the UI Dialog is quite easy to use.

Note: Make sure that you initialize dialog button outside the button’s click event. In other words, don’t do this:

$('#button').click(function() {
      $('#container').dialog();
})

While this will display the dialog, it will not display again after it has been closed. So do this instead:

$('#container').dialog({autoOpen: false});
$('#button').click(function() {
      $('#container').dialog(open);
})

Enjoy.

Although I have used some of the JQuery UI widgets in the past, I really began to explore the JQuery UI in a recent project. One of the reasons that I like using the UI widgets is that I can standardize on a set of components (plugins) that have a consistent look and feel as well as a consistent coding standard.

Read the rest of this entry »

Using JQuery with CodeIgniter is simple. In fact, using most Ajax frameworks with CodeIgniter is easy. I created a simple JQuery plugin that displays randomly selected images (imBannerRotater).

First I use CodeIgniter’s ‘base_url’ function to link the necessary Javascript files in a main view of my application:

<script type="text/javascript" src="js/jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.imBannerRotater-0.5.js"></script>

Next, I define a Javascript variable to be used with by the plugin:

<script type="text/javascript">
//<![CDATA[
base_url = '<?= base_url();?>';
//]]>
</script>

I then use this variable in my JQuery Plugin:

$(document).ready(function(){
     $(".randPic").imBannerRotater({
	data_url: base_url + 'assets/sidebar/sidebar.php',
	base_path: base_url + 'assets/sidebar/'
     });
});

That’s about it. While this is a simple example, using CodeIgniter’s base_url function is the key to using JQuery or any other Ajax Framework.

Not long after I begin learning a new Javascript Framework, I find a need to create a plugin (or widget). I have created quite a few JQuery plugins (see previous posts) and have recently created a my 4th Dojo Widget (I have also created a few YUI widgets). I recently began working on a  JQuery photogallery plugin (I know, why re-create the wheel). I actually created this photogallery quite a few years ago, but not as a JQuery Plugin, but as a Javascript object (class). I am now converting it into a JQuery plugin.

While working on a different project (that uses Dojo), I also had to create a photogallery. While I enjoyed the benefits of using both JQuery and Dojo to re-create the photogallery, I have to say that the ability to create a template (Dojo Widgets) can significanly decrease the time it takes to create a plugin or widget.

When I initially read about Dojo widget templates, I didn’t really understand the need. My perception was that if a developer was fairly proficient with creating and manipulating DOM elements, then what is the need for a template? Well, creating this plugin using both JQuery and Dojo gave me a more favorable perception of using templates – a tremendous advantage.

Although the requirements for the JQuery photogallery plugin was a bit more complex (and although I still find it easier in general to develop using JQuery), I have to say that having the ability to create a template gives Dojo a real advantage over JQuery when creating widgets or plugins.  Advantage: Dojo.

The JQuery $.each object accessor is probably the best method since the invention of the wheel (or at least, since Stargate SG1 was first conceived). It completely replaces the ‘for’ loop to iterate over an object. The power of this method is that it can iterate over any collection (Dom collections, associative arrays, JSON objects, etc). In general, using JQuery can make Javascript development so much easier.

Read the rest of this entry »