Drupal: Dependent dropdowns with jQuery

Ajax, Drupal, Javascript, JQuery, PHP

I have told my co-workers on many occasions that Drupal doesn’t do true Ajax. With true Ajax, elements change without a page refresh and only the relevant elements are affected. With Drupal, the elements change because the entire form is refreshed. For instance, if you use Drupal’s Ajax to make the values of one dropdown dependent upon the selected value of another, the entire form has to be refreshed in order for the second dropdown to be updated (See Ajax Example: Dependent Dropdown). Although, there are times when I do use Drupal’s Ajax in this scenario, I much prefer to use jQuery.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo Widgets: Converting to AMD

Ajax, Dojo, dojo-widgets, Javascript

A few years ago, I created gpDojoGallery – a Dojo image gallery widget. I was recently asked whether I had a AMD-ified version of the widget. I have been doing a lot of Drupal and Magento projects lately (with a heavy dose of jQuery) and I haven’t worked with Dojo in quite a while, so I had never heard of AMD (Asynchronous Module Definition). After some quick googling, I learned that Dojo is not the only library that uses AMD, so I decided to convert my gpDojoGallery widget to the AMD format in order to better understand it.

Continue reading

Checkout My New Site - T-shirts For Geeks

Standardizing jQuery in Magento Extensions and Themes

Ajax, E-commerce, JQuery, Magento

I’m not that familiar with Prototype (Magento’s default Javascript library), so I use jQuery with most of the Magento extensions that I create. Although I use $.noConflict to avoid conflicts with Prototype and other jQuery versions, there are times when multiple versions of jQuery are loaded. This generally causes Javascript errors with either my extension or another extension/theme that is loaded on the page (depending upon which is loaded first).

To avoid conflicts for future Magento theme and extension developers, I created the jQuery Update extension. Similar to Drupal’s jQuery Update module, this extension will standardize the use of jQuery and jQuery UI within Magento.

Continue reading

Checkout My New Site - T-shirts For Geeks

Creating a Magento Extension that uses a jQuery Plugin

Ajax, API's, E-commerce, JQuery, Magento, plugins

While developing the DevoutGeek.com site, I created a number of Magento extensions. The first extension that I created was Configurable Colors. This extension creates color swatches in place of the color drop-down for configurable products. I created a jQuery plugin to display the color swatches and make ajax calls to the extensions controller method to display the relevant images. Through a bit of trial and error, I learned a great deal about creating Magento extensions (and incorporating jQuery into them).

There are many articles that discuss how to create Magento extensions, so this post discusses how to incorporate a jQuery plugin into the extension. For information on how to create an extension, read this.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using Responsive Menus with CodeIgniter

Ajax, Codeigniter, JQuery, plugins

In a previous post (A jQuery Responsive Menu Plugin), I discussed how to use the gpResponsiveMenu jQuery plugin to create responsive menus. While developing the plugin, I tested the options with CodeIgniter (I use CodeIgniter for my demo site). I had to make minor changes to the CodeIgniter navigation in order to use the plugin.

Continue reading

Checkout My New Site - T-shirts For Geeks

A Responsive Menu jQuery Plugin

Ajax, JQuery, plugins

While doing the final testing of DevoutGeek.com, I found that I did not like the way the main menu displayed on smaller devices (Ipads, phones, etc). I took a good bit of time implementing a responsive design on DevoutGeek.com, but the main menu did not flow to my liking. So I decided to create a jQuery plugin. I have seen other responsive menu plugins, but most implement a single strategy (i.e, change the menu into a drop-down select). The plugin that I created, gpResponsiveMenu, has 6 options that are implemented based upon media queries. The plugin can be used with both primary and secondary navigation (simultaneously).

Continue reading

Checkout My New Site - T-shirts For Geeks

Creating a Photo Gallery with Django and jQuery

Ajax, Django, JQuery, Python

As part of the Mobile Theme Generator, I had to create a Photo Gallery in order to display the header images. As stated in previous post, I created the Mobile Theme Generator using Django and jQuery Mobile. Although there are probably plenty of Django-based Photo Gallery apps, I thought that it would be easier to integrate a custom Photo Gallery into a generator, so I decided to build it myself.

Continue reading

Checkout My New Site - T-shirts For Geeks

jQuery Mobile Plugin: gpMobileMenu

Ajax, JQuery, jQuery Mobile, Mobile

While developing the Mobile Theme Generator, I decided to allow the user to display a menu above the content. After the site was launched, I decided to create a plugin with the menu functionality. With the gpMobileMenu plugin, you have the ability to dynamically display menus on your site using jQuery Mobile’s Listview. I also enhanced the functionality so that the menus can be displayed above the content, split-view mode, or within a container.

gpMobileMenu Icon

When a user clicks on the menu icon, the menu will be displayed. The menu icon can be placed anywhere on the page. Although the menu icon uses jQuery Mobile’s data-theme, attribute, it is actually a 15-color sprite.

icon_data_theme option

Use the icon_data_theme option to set the color of the icon menu.

?View Code JAVASCRIPT
icon_data_theme: ‘c’

The data-themes colors are:
a – black
b – light blue
c – grey
d – white (default)
e – yellow
f – orange
g – red
h – navy blue
i – lime green
j – purple
k – pink
l – brown
m – gold
n – dark green
o – dark grey

icon_position option

Use the icon_position option to place the icon on the left or right.

?View Code JAVASCRIPT
icon_position: ‘right’

The default position is left. When this option is set, the plugin will add either the ui-btn-right or ui-btn-left class to the menu icon.

Menu Items

The menu items should be contained within a JSON object. Use either the menu_items (static) option or the menu_items_url (dynamic) option to load the menus. Use the menu_items_url to load the menu items ajaxally. The JSON object can contain a few options. The most common:

url: The url of the menu item (when clicked).
label: The display text.

?View Code JAVASCRIPT
{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}

In addition, you can set the following options:

isDivider: Use this option if you want the menu item to be a divider (not a link). The plugin will set the menu item with jQuery Mobile’s data-divider-theme attribute so that it can be style separately.

?View Code JAVASCRIPT
{"isDivider": "true", "label": "My Menu"}

In order to style the data-divider-theme, use the menu_data_divider_theme option. The default for this option is ‘b’.

?View Code JAVASCRIPT
menu_data_divider_theme: ‘a’

dataAjax: Use this option to set the data-ajax attribute for the menu item. The default is ‘false’.

?View Code JAVASCRIPT
{"url": "#mycontent", "label": "GrasshopperPebbles", “dataAjax”:true}

callFunc: Use this option if you want to call a Javascript function when user clicks on a menu item (The url option will not be used). To pass parameters to the function use the params option. The parameters will be sent to the Javascript function as an array.

?View Code JAVASCRIPT
{"callFunc": "bobMarley", "params": [{"param":"song"}, {"param": "jammin"}], "label": "Bob Marley Lyric"}

ajaxCall: Use this option to make an Ajax call when the menu item is clicked. When using this option, you must also supply an ajaxCallSuccess option. This is the Javascript function that should be called when the ajax call is successfully completed.

?View Code JAVASCRIPT
{"ajaxCall": true, "url": "/assets/js/jquerymobile/gpmobilemenu/get_data.php", "ajaxCallSuccess": "showLyric", "label": "Ajax Call"}

Menu Items Style

To style the menu items, use the menu_data_theme option. This will set jQuery Mobile’s data-theme attribute to the menu items. You can change the style using jQuery Mobile’s Theme Roller. The default value for this option is ‘a’.

?View Code JAVASCRIPT
menu_data_theme: 'c'

gpMobileMenu Modes

The gpMobileMenu will display menus using 3 separate modes:

Above Content: The menu will display above your content. This is the default option.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		icon_data_theme: 'e',
		menu_items: [{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, 
					 {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, 
					 {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}]
	}); 
});

Split View: The menu will display on the left of the content (the content will be pushed to the right, partially off of the screen). With the split-view option, you have the option of displaying the menu using animation by setting the animate_transition option. This option is set to false by default.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		mode: 'split-view',
		icon_position: 'right',
		menu_data_theme: 'c',
		animate_transition: true,
		menu_items: [{"isDivider": "true", "label": "My Menu"}, 
					 {"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, 
					 {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, 
					 {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}]
	}); 
});

Slide: The menu will slide into down into view. You control where the menu should display. Just create the menu container anywhere in your template and set the menu_cntnr option to the id
of you menu container. You don’t have to style the container because it will get replaced with another container.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		mode: 'slide',
		menu_cntnr:'my-slider',
		icon_position: 'right',
		menu_data_theme: 'b',
		menu_data_divider_theme: 'a',
		menu_items_url: '/assets/js/jquerymobile/gpmobilemenu/menu.php'
	}); 
});

Additional Menu Style Options

The menu items can be set with additional jQuery Mobile style attributes.

menu_inset: By default, the menu items will set with the data-inset attribute set to ‘true’.
menu_mini: By default, the menu items will be set with the data-mini attribute to set ‘true’.
menu_corners: By default, the menu items will be set with the data-corners attribute set to ‘false’ (no curved corners).

Using gpMobileMenu without jQuery Mobile.

Although the plugin was created to be used with jQuery Mobile, the plugin can be used without it by setting the jquery_mobile option to ‘false’. Without jQuery Mobile’s styling, you will have to style the menus yourself. The following are some basic styling:

#gp-mobile-menu-icon.ui-btn-right {
    float:right;
    margin-top: 6px;
    margin-right:10px;
}
#gp-mobile-menu-items li {
	height:30px;
	border-bottom:solid thin white;
}
#gp-mobile-menu-items li a {
	display:block;
	text-decoration:none;
	height:30px;
	background-color:#000000;
	color:#ffffff;
}

That’s it. The gpMobileMenu can be downloaded from github. Demos can be found on the demos section of my site. Enjoy.

Checkout My New Site - T-shirts For Geeks

Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet

I used jQuery Mobile to create the UI for the Mobile Theme Generator. One of the processes that had to be frequently coded was setting the state of the jQuery Mobile checkbox. Because of the many classes associated with displaying a mobile checkbox, the code was more involved that I first anticipated.

To set checkbox state to ‘on’:

?View Code JAVASCRIPT
var c = $('#mycheckbox');
$(c).attr({'checked': true, 'data-icon': 'checkbox-on'}).siblings('label').removeClass('ui-checkbox-off').addClass('ui-checkbox-on');
c = $(c).siblings('label').children('span').children('span')[1];
$(c).removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');

I first set the “checked” attribute to true and also set the “data-icon” attribute to ‘checkbox-on’.
I changed the class for the checkbox label from ‘ui-checkbox-off’ to ‘ui-checkbox-on’.
I then get the sibling label for the checkbox so that I can get the second ‘grand-child’ of the label. I change the class of the span from ‘ui-icon-checkbox-off’ to ‘ui-icon-checkbox-on’.

<div class="ui-checkbox">
    <label for="mycheckbox" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-off ui-btn-up-a">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Menu Items Mini:</span>
            <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">&nbsp;</span>
        </span>
    </label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" data-mini="true">
</div>

That’s it. Of course, to turn it back off, I just to change to classes back (and removed the ‘checked’ attribute).

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

Continue reading

Checkout My New Site - T-shirts For Geeks