Modifying the jQuery dump plugin to not open in a new window


I have been using the jQuery version of the javascript dump for a while now and it is invaluable especially when debugging JSON objects.  The one down side to the plugin is it tries to display the dump contents in a new window, but I prefer to just get the html contents and stuff it into a div.

As it turns out it was pretty easy to modify the plugin to work how I wanted. To make the collapse/expand feature work I had to make the functions global but it is cool as long as you don’t have any functions on the page with the same name.

Here is an example page:

The dump results:

If you would like check out the dump plugin, here is my modified jqDump.js file.

Advertisements

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;
Some test text in here
$(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 + '%'); } }); });

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.

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

CF Free Chat


Last year I wrote a simple chat system for ColdFusion as a demo for a friend of mine.  It was very simple; a component on the backend acted as the main controller for storing the “message cache” and on the front end jQuery code polls the cfc at a set interval and updates the chat window.  Simple stuff.

I never really got much further than the proof-of-concept code because of time constraints and also not long after that Railo introduced messaging websocket gateways with push notification.   Needless to say, I started playing around with that an the original project just fell to the wayside and I really just forgot about the simple CFChat app.

Fast-forward to yesterday.  Jessica pinged me letting me know she had released a free chat app based loosely on my code called CF Free Chat.  Her version is much more polished with private messaging, user warns and user kicks, all easily configured through a settings file.  With a few CSS tweaks you can easily have a customized version up and running in no time.

This was originally the direction I was intending on going with the application if I had the time to write it.  If you are looking for something along these lines I would definitely suggest checking it out.

cfMud is now up at GitHub


I thought it would be pretty cool to create a MUD based on ColdFusion and jQuery so I thought I would give it a shot and see what I could come up with.  This was my first project that would rely heaving on jQuery and using AJAX calls to push data to the server and back to the client.  The code is still in EARLY in development, but I am putting it up on my public repo.

The main feature is a clickable map that allows you to move your character around the world.  It was designed to be pretty lightweight and caches a large chunk of the map at a time.  I don’t the the multi-user part down either, currently it works for one person.  Also, the NPC system leaves a lot to be desired, the movement is slow and clunky due to the nature of how it is handled (jQuery sends a heartbeat to the server which handles all the server side NPC management).

I don’t have access to my database server to include schema at the moment, but I will update the repo later on this afternoon with the schema in place.

jqDesktop demo app now at GitHub


A few months ago I was playing around with jQuery quite a bit.  I came out with a jQuery desktop-esq demo (which can probably be found here in a download link somewhere) and created a new repository for it at GitHub.

Unfortunately, things happen and both fell by the wayside.  I have a few new projects that will be coming up in the near future and GitHub will be used extensively and a buddy told me about a very nice front end for Git called SmartGit.  Playing around with it was a good excuse to finally get the repo updated.

If you are looking for a nice GUI for Git I highly recommend it.  It is free for non-commercial use and reasonably priced otherwise. It is not open-sourced, but you still cannot beat the price.

If you are interested in checking out the little jQuery Desktop application you can find it here:

http://github.com/robertz/jqDesktop

Recreating your jQuery Sortable() sort order


A reader pinged me with an interesting question.  He was using jQuery the jQuery sortable behavior to allow users to order widgets on a page and then save their layout.  The issue he was having was figuring out how to recreate the layout when the user reloaded the page.

As always there is more than one way to skin a cat, but I came up with a quick demo to illustrate one way to do this.  If we have the user defined sort order it should be easy enough to recreate the view.  I can think of several other ways to accomplish this, but this was the most straight forward way of handling the problem.

For my example I created a div representing my sortable container.  Within the container I created four divs repesenting my sortable children named “div1” through “div4” (I am very creative first thing in the morning).  I then hard-coded a “user defined” sort order that sorts them from “div4” down to “div1”.  Since I know the sort order it is just a matter of looping through my child elements and putting them in their proper place.  This is done by looking at the sort order array and inserting the selected element after the previous element in the sort order.  We skip the first element in the sort order since it obviously will not have a previous element.  The end result being all the divs nicely ordered, just as the user saved them.

Easy jQuery multifile uploader


I needed a quick and dirty multi-file uploader for a site, but I did not want to install another plugin or a flash uploader.  I am using the jQuery form plugin already to handle AJAX form submissions so I will hook to that to upload my files to the site.

My method basically uses jQuery to inject a form with a filefield into the DOM.  I bind to the onchange event of the filefield so when a file is added the current file field is hidden, insert a new blank file field, and update a list of queued files waiting to be uploaded.  When the user hits the “Upload Files” button, I iterate through all the “input:file” elements using jQuery and submit the form using the jQuery form plugin with ajaxForm().  Of course, you can remove a file from queue as well by clicking on the X in the queue list.

It is an inelegant solution, but it does work.  Here is the code if you want to give it a try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi-file upload</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
</head>

<body>
 <div id="uploadContainer"></div>
 <input id="btnSubmit" type="button" value="Submit Files" onclick="submitLoop();" />
 <div id="fileInfo"/>

 <script language="javascript">
  $(document).ready(function(){
   $container = $('#uploadContainer');
   $info = $('#fileInfo');
   count=0;                            
   addUpload();
  });
 function addUpload(){
  count++;
  $('form').hide();
  $container.append('<form id="uploadForm-' + count +'" action="ajaxProxy.cfc?method=upload" enctype="multipart/form-data"><input id="file-' + count + '" name="filename" type="file" onchange="addUpload();" /></form>');
  showFileInfo();
 }
 function removeItem(id){
  if( $('#' + id).length){
   $('#' + id).remove();  
   showFileInfo();
  }
 }
 function showFileInfo(){
  $info.html('');
  $('input:file').each(function(){
   if( $(this).val().length ){
    $info.append('<div id="display-' + $(this).attr('id') + '"><a href="#" onclick="removeItem(\'' + $(this).parent().attr('id') +'\')">X</a> '  + $(this).val() + '</div>');
   }
  });
 }
 function submitLoop(){
  $('input:file').each(function(){
   var currItem = $(this).attr('id');
   if($(this).val()){
    $(this).parent().ajaxForm({
     async: false,
     success: function(data){
      var incoming = $.parseJSON(data);
      $('#display-' + currItem).append(' <strong>' + incoming.svrMessage + '</strong>');
     }
    }).submit();
   }
  });
 }
 </script>
</body>
</html>