CFPro - ColdFusion Developer

ColdFusion Contractor, West Midlands, UK

jQuery Mobile and Mobile Detection

March 23, 2011 · By Paul Ruck ·

For the last couple of days I have been playing around with and getting to know jQuery Mobile. What an awesome tool for adding a mobile version of your website.

I built the mobile version of my company website as a completely separate version, so the data passed to the users could be tailored more for mobile devices. The mobile version now sits in the sub-domain m.interactive-info.co.uk.

Using jQuery Mobile is very simple using the documentation and demonstrations on their own website. In fact their documents are so good I am not going to go into how I built the mobile site.

The mobile detection was the main issue when setting up a mobile specific site. I needed to detect that the user is visiting the site with a smartphone and redirect them off to a nice small screen friendly version of our site. To do the detection I used the regular expression supplied here: detectmobilebrowser.com and put it into my Application.cfm file.

For all my tests, the mobile detection worked great and didn’t get any false positives when visited with a desktop browser.

The next job was to let mobile users specify that they would rather see the full site. To allow them to do this I pass the url variable ?version=full to the homepage. The Application file then writes a client variable to the database to remember their choice, so they can browse around the main website. We also supplied a “Mobile version” link on the main site, so mobile users could get back to the mobile website. It sets a client variable so that visitors that were not detected correctly can stay on their site of choice.

Smartphones are being used more and more these days and people are becoming more lazy when it comes to finding information, so if you don’t want to lose out on a massive market place then check out jQuery Mobile and get mobile version of your website.

Tags: ColdFusion · jQuery Mobile

Google Maps Plugin for Mango Blog Release!

March 11, 2011 · By Paul Ruck ·

I think it is at a point where I can let people have a play with this plugin. I don't think it is 100% complete but it is pretty good as it is.

Download gmap.zip here

Download the plugin and activate it in Mango Blog. * Requires the jQuery Plugin!

In Posts or Pages you can use the tag [ gmap] and [/gmap ] (Without the spaces) to wrap the variables for your map.

The allowed variables are:

  • Address: *REQUIRED* Can be an Address, Town, Postcode or Geocode
    • Address is the location of the marker and the centre of the map
  • Zoom: Can be an integer between 1 and 20
    • Zoom is the zoom level of the map
    • Defaults to 12
  • MapType: Can be ROADMAP, SATELLITE, HYBRID or TERRAIN
    • MapType is the type of map that is displayed first
    • Defaults to ROADMAP
  • Label: Can be contain any text other than a |
    • Label is the Text shown in the infowindow when the user clicks on the marker (HTML cannot be used!)
    • Defaults to the Address Variable
  • Height: Can be declared as px or a %
    • Height is the height of the div the map is contained in
    • Defaults to 400px
  • Width: Can be declared as px or a %
    • Width is the width of the div the map is contained in
    • Defaults to 90%

Variables should be defined with a semicolon e.g. Zoom:12

Variables should be seperated with a | (pipe) e.g. Zoom:12|MapType:ROADMAP

Only the Address variable is required to display a map! An example of the simplest form the gmap tag can take would be

[ gmap]Address:SY45JD[/gmap ]

An example of the full tag could be

[ gmap]Address:SY43RR|Zoom:8|MapType:TERRAIN|Height:500px|Width:95%|Label:The office in Myddle![/gmap ]

* All examples have an additional space in the [ gmap] tag which will need to be removed to show the map!

Tags: ColdFusion · Mango Blog

Google Maps Plugin for Mango Blog (Opinions)

March 9, 2011 · By Paul Ruck ·

 

After seeing how useful and powerful a full Google Maps plugin could be I decided to spend a bit of time on improving the code over the basic setup I had a few days ago.

I have now changed the format of the code required in the post so I could separate up all the possible variables. I have decided on a [ gmap] opening tag and a [/gmap ] closing tag. All the variables are going to be listed within these tags  in a | separated list.

So far the variables I am accepting are:

 

  • Address: *REQUIRED* Can be an Address, Town, Postcode or Geocode
  • Zoom: Can be an integer between 1 and 20
  • MapType: Can be ROADMAP, SATELLITE, HYBRID or TERRAIN
  • Label: Can be contain any text other than a |
  • Height: Can be declared as px or a %
  • Width: Can be declared as px or a %

 

Can anyone suggest anything else I should add to make this a very usable plugin for Mango Blog?

 

Tags: ColdFusion · Mango Blog

960 Grid with Mango Blog

March 8, 2011 · By Paul Ruck ·

I have been asked to show how I have used the 960Grid CSS framework in my Mango Blog skin. If you understand the 960Grid principles then it is really quite easy.
960Grid is only a framework for laying out content, it is not going to style your site or blog for you.

Here are the basics.

You start with a container Div, give it the class of the grid columns you want. You can choose from 12, 16 or 24. For a 12 column grid (like I am using here), the class you would use is be "container_12". The container Div is always made to 960px wide which is perfect for 1024 screen or bigger. If you want a fluid design then I am afraid you are going to have to look elsewhere! I believe there are a few around but may not be as quick and easy as 960Grid.

Anything contained within the container Div can now be put into the grid format.

To get a 2 column layout you would use something like:

<div class='container_12'>
  <div class="grid_9">...</div>
  <div class="grid_3">....</div>
  <div class="clear"></div>
</div>

Where “grid_9” sits on the left and is 9 columns and 700px wide. “grid_3” is next (and last) as is 3 columns and 220px wide. Each grid has a 10px margin on the left and right.
Take a look at http://960.gs/demo.html for a better idea of how the columns work. When you reach the end of the grid row you must clear all floating elements to start the next row.

To put the framework into my Mango Blog skin I added the stylesheets that are downloadable from their site and have used the code below:

Link to the stylesheets:

<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/960.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/text.css" type="text/css" media="screen" />

Add the classes to your layout:

<mango:Event name="beforeHtmlBodyStart" />
<div id="container" class="container_12">

    <cfinclude template="header.cfm">

    <div id="content_box">
    
     <div id="content" class="posts grid_9">
        <!--- Mango Blog code for the page --->
     </div>

     <div id="sidebar" class="grid_3">
       <ul class="sidebar_list">
          <!--- Mango Blog code for the sidebar. --->
       </ul>
     </div>    


    </div>
    <!--- footer.cfm includes a <div class="clear"></div> to start a new row --->
    <cfinclude template="footer.cfm">
</div>
<mango:Event name="beforeHtmlBodyEnd" />

At some point I may release the skin, but until then I hope this helps some people start building their own skins with 960Grid.

Tags: 960 Grid · ColdFusion · Mango Blog

Google Maps Plugin for Mango Blog

March 7, 2011 · By Paul Ruck ·

After looking around the web I couldn't find a Google Maps plugin for Mango Blog for easily putting maps into pages and posts. So for my first Mango Blog plugin I have started putting together a basic Google maps plugin, which I will release once I have got it working how I want it.

The initial idea is to accept the command

[gmap:(latitude,longitude)]

in the content and embed the map to replace it. (Similar to the youTube Plugin)

I am using the regular expresion:

refindnocase("\[gmap:((\+|-)?[1-9][0-9]*(\.[0-9]*)?),((\+|-)?[1-9][0-9]*(\.[0-9]*)?\])", 
   data.content, 1, true)

So far it is working quite nicely to show my home town of Bridgnorth:

I have used this example to learn how some of the Mango Blog plugin architecture works. I may make this plugin more complex as and when I need it.

Tags: ColdFusion · Mango Blog

Welcome to CFPro

March 3, 2011 · By Paul Ruck ·

I would like to start off by saying that I am a coder, not a blogger. So if the content of this blog gets a bit sparse as time goes on then is it not because I have stopped coding in ColdFusion, it will either be that I got bored of blogging or I was too busy working to put any time into writing posts.

I really set up this blog for a record of what I am working on or any little tricks or bits of code I discover.

The first thing to say in the blog is how good I think Mango Blog is! It's really easy to work with, set up new themes and add/edit and create plugins. This site has been set up using lots of the existing plugins out there. This is really just to demonstrate what it can do.

I have started the skin pretty much from scratch. The theme is set up using the 960Grid CSS Framework which I have only just started getting into using and I can't believe I haven't tried it out before! 

The 960Grid layout code is so simple, this site is basically just:

<div class='container_12'>
  <div class="grid_9">...</div>
  <div class="grid_3">....</div>
  <div class="clear"></div>
</div>

And thats all there is to it!

Tags: 960 Grid · ColdFusion · Mango Blog