Google Maps: Using JQuery to Display Multiple Addresses

Ajax, API's, Google Maps, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Google Closure

Ajax, Google Closure

I just read an interesting article on Ajaxian.com that discussed Google Closure. I began to look at the API documentation this afternoon and found it to be a quite robust Javascript Library. I was especially geeked with the number of ui widgets available with this Library (currently 138).

Some the names of the ui widgets are interesting (AnimatedZippy, AbstractImagelessRoundedCorner, DimensionPickerRenderer). But the documentation and demos seem to be adequate enough to quickly learn how to use each widget.

The library also comes with a Closure Compiler – a JavaScript optimizer that compiles web apps down into compact, high-performance JavaScript code.

I can’t wait to use it.

Checkout My New Site - T-shirts For Geeks

CakePHP and YUI: CSS File Location

Ajax, CakePHP, YUI

I recently started converting an existing PHP project to CakePHP and YUI 2.8. The first decision that I had to make was where to place the YUI CSS files. I tried to find a quick, yet elegant solution, but I ended up with solution that was not so quick (or elegant).

I copied all of my YUI files from webroot/js/yui/ to webroot/css/yui/. I then opened each folder under webroot/css/yui/ and removed all of the js files (leaving the assets folder). If a folder contained js files only, then I deleted the folder.

I opened each folder under webroot/js/yui/ and removed all asset folders and css files. If a folder contained css files only, then I deleted the folder.

I spent about an hour trying to find another solution, so I guess the few minutes it took to remove the files/folders was worth it.

Checkout My New Site - T-shirts For Geeks

CakePHP and JQuery

Ajax, CakePHP, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imBookFlip. Page Turning without Flash

Ajax, plugins

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imBannerRotater

Ajax, plugins

Note: The imBannerRotater has been replaced with gpImageRotate.
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’).

Continue reading

Checkout My New Site - T-shirts For Geeks

Using JQuery to Access Iframe Content

Ajax, JQuery

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:

?View Code JAVASCRIPT
var book = $('#bookFrame').contents().find('#myBook');

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI Dependency Configurator

Ajax, YUI

The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.

Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.

So instead of:

<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> 
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> 
<link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css">
 
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="lib/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="lib/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="lib/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="lib/yui/selector/selector-min.js"></script>

You can use the YUI Dependency Configurator to create::

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>

Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.

You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.

Checkout My New Site - T-shirts For Geeks

JQuery UI Part 2: UI Dialog

Ajax, JQuery

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:

?View Code JAVASCRIPT
$(document).ready(function() {
       $('#container').dialog();
});

I can also add options to the dialog:

?View Code JAVASCRIPT
$('#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:

?View Code JAVASCRIPT
$('#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:

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

Enjoy.

Checkout My New Site - T-shirts For Geeks

Using The JQuery UI – Part 1

Ajax, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks