Category Archives: jQuery UI

Quick and easy text size adjustment with jQuery


Lately I have been working on a site that deals with quite a bit of text. When it comes to choosing the default text size for a web site, as a developer I try to pick a happy medium between what lays out well on the page but is still easily readable. It would be nice to give the user the ability to adjust the font size to their liking.

As it turns out, this is dead simple to accomplish and using the jQuery UI slider it even looks pretty good too. First we will create an empty div that will contain our slider element and a target div that will contain some test text. Next we add the jQuery code to adjust the font size as the slider is moved.

Font size:
<span id="fontSz">100%</span>&nbsp;&nbsp;
<div id="fontSlider" style="width: 60%; display: inline-block;"></div>
<div id="adjustableText">
 Some test text in here
</div>
<script type="text/javascript">
 $(document).ready(function(){
  $('#fontSlider').slider({
   range: "min",
   min: 50,
   max: 200,
   value: 100,
   slide: function(event, ui){
    fontSize = ui.value;
    $('#adjustableText').css('font-size', ui.value + '%');
    $('#fontSz').html(ui.value + '%');
   }
  });
 });
</script>

That pretty much covers the code. Basically we are allowing the user to scale the text in the adjustableText div from 50% up to 200% and the font will adjust as the slider is moved. You can see this in action here.

It has been a while since I have posted anything on jQuery so this was a fun little project.

Using jQuery sortable() to set display sort order


I am currently working on wrapping up a web site for a client that has quite a few image and video galleries each with 100+ images.  One of the biggest problems I have had with the galleries is being able to sort how they were displayed for the end users.  Initially I added in buttons to move the items up and down in the sort, but when you are dealing with a lot of items it can be tedious and aggravating work.

This weekend things came to a head because the client was getting annoyed.   They wanted a way to quickly update the item sort so I went about finding the best way to go about it because I love happy clients.  My main concern was having items in the database with the same sort order and possibly throwing off the sort.  As it turns out, the answer was surprisingly simple.

The web site in question is already using the jQueryUI so modifying the image administrator to use the UI sortable() option was really no hassle what-so-ever.  I am using AJAX pretty heavily on the site I just needed to do some editing to my file list page that is included on the page with an AJAX load call.

<cfscript>
 catObj = application.transfer.get("categories",url.id);
 base = '/path/to/web/root';
 filePath = base & catObj.getBaseDirectory();

 cq = application.transfer.createQuery("FROM images WHERE images.cat=:id ORDER BY images.sortorder");
 cq.setParam("id",url.id,"numeric");

 files = application.transfer.listByQuery(cq);
</cfscript>

<cfif files.recordcount>
 <div id="sortableContainer" style="margin-top: 48px;">
  <cfoutput query="files">
  <div id="#ID#" style="width: 600px; margin-bottom: 12px;">
   <div style="height: 20px; text-indent: 12px; padding-top: 4px;">Image Header</div>
   <div class="ui-widget-content">
    <table style="width: 600px;">
     <tr>
      <td width="75">
      <a href="/image_viewer.cfm?id=#ID#" target="_blank" style="color: blue;">
       <img src="/#catObj.getBaseDirectory()#/thumbs/#filename#" width="75" height="75"/>
      </a>        
     </td>
     <td>
      <form id="img#ID#" action="ajaxProxy.cfc" method="post">
       <input type="hidden" name="postType" value="updateImage" />
       <input type="hidden" name="id" value="#ID#" />
       <input type="text" name="Title" value="#Title#" style="width: 200px;" /><br />
       <input type="submit" name="Method" value="Update" />
       <input type="button" value="Delete" onClick="void(0);" />
       <input type="button" value="Set" onClick="void(0);" />
      </form>        
     </td>
    </tr>
   </table>
  </div>    
 </div>
 </cfoutput>
 </div>

 <div style="padding-bottom: 128px;"/>

<script type="text/javascript">
 $('#sortableContainer').sortable({
 stop    : function(event, ui){
 var result = $('#sortableContainer').sortable('toArray');
 var sortOrder = '';

 for(var i=0; i<result.length; i++){
 sortOrder += result[i];
 if(i < result.length - 1) sortOrder += ',';
 }
 setImageSortOrder(sortOrder);
 }
 });

 function setImageSortOrder(order){
 $.ajax({
 url            : 'ajaxProxy.cfc',
 data            : {
 method        : 'setImageSortOrder',
 sortOrder     : order
 },
 async        : false,
 success        : function(data){
 var incoming = $.parseJSON(data);
 if(incoming.svrStatus == "-1"){
 alert(incoming.svrMessage);
 }
 }
 });
 }
</script>
</cfif>

Basically this is just looping through the database and outputting all the images in divs in the div named sortableContainer which has the sortable() interaction applied to it.   I also bind to the stop event which will fire when a sortable child is released which will build a string containing the image id’s in the proper sort order.  I pass this value to the setImageSortOrder() function which makes an AJAX call to my remote proxy which will update the values in the database.

<cffunction name="setImageSortOrder" access="remote" returntype="struct" returnFormat="JSON">
 <cfargument name="sortOrder" type="string" required="yes"/>
  <cftry>
  <cfscript>
   var response = structNew();
   var imageObj = "";
   var sortCnt = listLen(arguments.sortOrder);
   var i = 0;

   for(i=1; i lte sortCnt; i++){
    imageObj = application.transfer.get("images", listGetAt(arguments.sortOrder, i));
    imageObj.setSortOrder(i);
    application.transfer.save(imageObj);
   }
   response['svrStatus'] = "0";
   response['svrMessage'] = "Video sort order updated successfully.";
  </cfscript>
  <cfcatch type="any">
   <cfscript>
    response['svrStatus'] = "-1";
    response['svrMessage'] = cfcatch.Message;
   </cfscript>
  </cfcatch>
 </cftry>
 <cfreturn response/>
</cffunction>

The function setting the sort order in the database is pretty straight forward.  I am using Transfer ORM for my database interactions, but it would be easy enough to covert the example into a query.  Since the jQuery function is passing a list of the image id’s in the correct order I loop through the list and set the sort order of each image to its index in the list.  No need to worry about items having the same sort order and displaying incorrectly.  It is pretty much fool proof.

Also of note, this code makes use of the $.parseJSON() function added in jQuery 1.4.1.  No more having to worry about whether or not a browser can support JSON.parse().  This in itself is a good reason to switch to a newer version of jQuery if you have not already.

jQuery source code up


For those of you who were interested in getting the source for my demo app, it can be found here:

http://dl.dropbox.com/u/868773/030510.rar

What can 150 lines of jQuery do?


Lately I have been working on a side project meaning to use it as a administration tool of sorts for some up and coming projects I have planned.  Basically the interface mimics a computer desktop.  You click on application links on the desktop and it opens a window.  You can drag it around, resize it, minimize it, etc.  You can drag the application links around on the desktop and arrange them however you like.

To be fair, I got the idea from a co-worker of mine, Aaron,  who wrote a similar application.  On the other hand, I wanted to leverage the power of the jQuery UI so changing a theme would just be a matter of changing which stylesheet to include.  I thought it would be an involved process getting everything working but actually it was deceptively easy.  It still doesn’t layout correctly in IE…  Imagine that.

cpanel

I don’t know if I will ever actually ever use it in a project but it was pretty fun to play around with.  I will probably put it up for download later if anyone is interested in playing around with it.