Category Archives: JQuery

Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet
May19

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’.

?View Code HTML
<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).

Share

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins
May18

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 →

Share

Mobile Theme Generator for WordPress and Tumblr

Ajax, Django, Javascript, JQuery, Mobile
May18

A few months ago, I downloaded a mobile theme for WordPress in order to create a mobile site for GrasshopperPebbles. While updating the template, I thought about automating the development process so that future releases would be easier. So I decided to create an open source project – the mobile theme generator. The generator displays mobile sites using jQuery Mobile. In fact, the generator itself was developed using Django and jQuery Mobile (the original theme used jQuery Mobile). I did think that it an odd solution to create PHP files using Python, but it turned out to be a great solution.

Continue reading →

Share

jQuery Plugin: gpImageRotate – Create Portfolios, Carousels, Galleries, and more

Ajax, JQuery, plugins
Oct14

A few years ago, I created the jQuery plugin imBannerRotater. I have tweaked this plugin for various projects over the years, but I recently made so many changes to the plugin that I decided to create a new plugin: gpImageRotate. The code in the new plugin is more optimized than the original. And, not only did I enhance the existing functionality, I added 4-5 additional image rotation options. Lastly, one of the major reasons that I decided to create a new plugin is that I am working on a Drupal module based upon the plugin and so I changed the code so that the Drupal module could easily interact with it – so the naming convention for many of the styles is more verbose than the original imBannerRotater plugin.

Continue reading →

Share

jQuery: Dynamic Form Creation/Submission – IE8 Bug

Ajax, JQuery
Jun27

I noticed a problem with IE8 today. I dynamically created a form and submitted it with jQuery. The form did not submit in IE8, but worked in all the other browsers that were tested (Firefox, Chrome, Safari). The code is quite simple:

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var id = jQuery('#product_id').val();
	jQuery('#content').append(
		jQuery('<form></form').attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
			jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	));
});

Again, this worked fine in other browsers. Upon further inspection, I found that the IE8 seemed to strip the quotes from around the form attributes:

?View Code HTML
<form name=frmReturnToProductPages id=frmReturnToProductPages action=/provisioning/product-pages />

To fix the problem, I decided to add the form attributes after appending the form to the page.

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var frm = jQuery('<form></form>').appendTo(jQuery('#content'));
	jQuery(frm).attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
		jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	).submit();
});

I tested this with the IE8 developer tools and the form submitted successfully. Enjoy.

Share

jQuery Plugin: imMultiLineList – A Multi-Line ListBox plugin.

Ajax, JQuery, plugins
Dec29

I have been working on a project where I needed a ListBox that displays multiple lines of information per row. The user must select from a list of offices, but many of the office names are the same and the only way to distinguish one office from the other is by the office address. Because a ListBox does not allow multiple lines in each row, I decided to create the imMultiLineList jQuery plugin. This plugin will turn any div into a multi-line multi-select list. And because I need to interact with the plugin, I decided to create it using an Object Oriented approach.

The imMultiLIneList plugin is fairly simple to use. Multiple items can be added to the list ajaxally using a JSON object, but the plugin will also allow single items to be manually added.

Continue reading →

Share

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets
Jul05

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Continue reading →

Share

ActionScript: Using Lightbox With Flash

Actionscript, Flash, JQuery
May10

I’m working on a portfolio site where I’m using Flash to display my work. When a user clicks on a link for a website that I designed, they will be taken to the actual website. But when the user clicks on the link for book cover or magazine, I want the large image to be displayed using lightbox (A JQuery Plugin). The primary reason is that I want to use lightbox is because the Flash movie has a height of 225 pixels – not nearly enough to display a large image. Surprisingly, with the help of ActionScript’s ExternalInterface Class and JQuery, creating this functionality was easier than I thought.

Continue reading →

Share

Drupal, JQuery: Dropdown Menus

Ajax, Drupal, JQuery
Mar18

I needed to add Dropdown menus to a site that a designed using Drupal. I found a few modules (Nice Menus, etc) that would enable me to easily add dropdown menus to my site, but I wanted to use the CSS Drop-Down Menu Framework that I discussed in a previous post. With a little help from JQuery, I was able to add dropdown menus to my site without having to use a Drupal module.

Continue reading →

Share