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

Installing Mezzanine on Webfaction with Apache and WSGI

Apache, Django, Mezzanine, Python

When I first created MobilePebbles , the Mobile Theme Generator was installed on the primary domain. I soon decided to place the generator on a sub-domain and install Mezzanine on the primary. The site is hosted by Webfaction. Although Webfaction has install scripts for quite a few apps (Drupal, Django, etc), they do not currently have one for Mezzanine. But, without too much trouble (thanks to the tools that are availed to Webfaction customers), I was able to install Mezzanine on Webfaction.

Much of the information in this post I found by installing Mezzanine On Ubuntu (and from documentation that I found in Webfactions docs.

Continue reading

Checkout My New Site - T-shirts For Geeks

Installing Mezzanine on Ubuntu with Apache and mod_wsgi

Apache, Django, Mezzanine, Python, Ubuntu

Although there are many advantages to installing Mezzanine using Python’s virtual environment, I decided against it. I already have Django installed on Apache using mod_wsgi, so my Ubuntu install is already primed. Although I followed the basic steps as discussed in a previous post (Setting up Django with Apache and mod_wsgi on Ubuntu 11.10), there were a bit more steps involved with setting up Mezzanine – especially as it relates to how and where to serve static files.

Continue reading

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

Mobile Theme Generator for WordPress and Tumblr

Ajax, Django, Javascript, JQuery, Mobile

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

Checkout My New Site - T-shirts For Geeks

WordPress: Sharing database content between primary and sub-domains

Wordpress

After I created my mobile WordPress theme using the the Mobile Theme Generator that I created on MobilePebbles.com, I had to figure out the best way to share the database between my primary domain and the mobile sub-domain (m.grasshopperpebbles.com). There are a couple of strategies for switching between a desktop view and a mobile view. I decided that I didn’t want to do an automatic switch to the mobile sub-domain by using a mobile device sniffing method. I think that it is a better strategy to let the user decide whether they want to switch to a mobile view. So I set up a sub-domain and created a link at the top of my site that points to my mobile view.

Continue reading

Checkout My New Site - T-shirts For Geeks