Entries Tagged 'jQuery' ↓

Using jQuery and JSONP to Get AIM Status

January 25th, 2008 — jQuery

For a new site, I wanted to have a DIV’s background image be dependent on the online status of an AIM user. jQuery and the AIM Presence API make it easy.

First, the code:

  1. $.getJSON("http://api.oscar.aol.com/presence/get?k=key&f=json&t=aimuser&c=?",
  2.    function(result){
  3.       if (result.response.data.users[0].state == ‘online’) {
  4.          $("#status").css("background-image", "url(’online.jpg’)");
  5.            }
  6.       }
  7. );

Using the getJSON() method of jQuery, we pass in the URL of the AIM Presence service with the parameters needed.

The f parameter tells the service what format to return the results in–JSON in our case. The c parameter specifies the JSON callback to use–this is important! The k and t parameters specify the AIM key to authorize the request and the user to query the prescense for. Note that key and aimuser need to be replaced with your AIM key and the user you want to query if you’re playing along at home.

The second parameter we pass in to getJSON() is the function we want to use to process the JSON data that gets returned. In this case, my CSS rule for the #status DIV specifies the background image used by default which is the offline status. This way, if there is a problem with the service or API, we default to it being offline. So, the function here just checks the first member of the returned users array in the response and compares their state to the string 'online'. We only need to worry about the first user returned since we’re querying the status for only one user.

The important part of this is setting c=? in the parameters passed to the AIM Presence service. This tells jQuery to replace the ? with the correct method name to call and passes it in to the service. Without this, you’ll get 'invalid label' errors in Firefox and it just won’t work in other browsers. The jQuery getJSON() docs note this but it wasn’t clear to me from the example at first how to use it.

That’s all there is to it. One more reason to love jQuery!

5 Comments

Using jQuery to Skip the TinyMCE Editor Toolbar When Using the Tab Key

June 20th, 2007 — jQuery

Problem: When using TinyMCE, the toolbar buttons (as well as one A tag w/no content used for a tooltip) are part of the tab order of the page so tabbing out of one control into the editor means tabbing through all the buttons before you get to the content.

Solution: Use jQuery to set the tabindex on these elements to -1 so they are skipped.

Things That Don't Work Like You First Expect:

  1. Using jQuery as you normally would so it fires on document ready won't work since your TinyMCE instance isn't done initializing yet.
  2. IE sucks.

Workarounds: 

To work around the first problem, we set a callback in TinyMCE's init() function to do our thing after it is done doing it's thing:

  1. tinyMCE.init({
  2.                 mode : "exact",
  3.                 elements : "about",
  4.                 theme: "advanced",
  5.                 …all your advanced options…
  6.                 init_instance_callback : "setTabIndex"
  7.             });

The last line is where we set our callback. So, now we need to create a function named setTabIndex to do our jQuery magic:

  1. function setTabIndex()
  2.             {
  3.                 $(".mceToolbarContainer > *").attr("tabIndex", "-1");
  4.             }

This selects all children of any element with the class mceToolbarContainer which is the class of the SPAN containing the toolbar and sets the tabindex attribute to -1. On my toolbar, the only items I need to set the tabindex on are A and INPUT elements. However, since I'm not sure what elements the other toolbar buttons use I'm just going to set the tabindex on everything. 

For the second problem, those of you with a keen eye (or that have been bitten by IE too many times) may have noticed in the jQuery code, I used "tabIndex" (camel case) instead of "tabindex". (lowercase). Firefox is just fine with lowercase attributes but IE needs camel case.

Now, when you load up your page, you should see your TinyMCE init and then if you tab into the editor, you should be taken directly to the content and not have to tab through the toolbar buttons.

If you have any feedback or corrections, let me know in the comments. 

2 Comments

Using jQuery to Show Flash on First Page Load in a Session and Show an Image on Successive Loads

January 15th, 2007 — jQuery

This may be the longest title of a blog post I've ever written. Anyway, a friend of mine is designing a site and wants to show a Flash header/menu on the first load of a page within a site but then show an image on successive page loads. This is a nice balance between Flash and images. I told him jQuery should let me do this easily. Luckily, I was right!

First, the code:

  1. <script type="text/javascript" src="jquery-latest.pack.js"></script>
  2.     <script type="text/javascript" src="jquery.flash.minified.js"></script>
  3.     <script type="text/javascript" src="cookie.js"></script>
  4.     <script type="text/javascript">
  5.     $(document).ready(function(){
  6.    
  7.         // Rename headerimg to be the id of your image to show when flash is hidden
  8.         var flashImg = $("#headerimg");
  9.         // OPTIONAL: Rename the name of the session cookie to use
  10.         var cookieName = ‘dontshowflash’;
  11.         // VERY OPTIONAL: Rename the value of the session cookie - any value will work
  12.         var cookieValue = 1;
  13.            
  14.         if (!$.cookie(cookieName)) {
  15.                                        
  16.             // Get flash attribs from rel attrib of image
  17.             var params = flashImg.attr(‘rel’).split(‘:’);
  18.             var flaSrc = params[0];
  19.             var flaWidth = params[1];
  20.             var flaHeight = params[2];
  21.            
  22.             var imgParent = flashImg.parent(0);
  23.            
  24.             // Remove the image
  25.             flashImg.remove();
  26.            
  27.             // Show the flash
  28.             imgParent.flash({
  29.                 src: flaSrc,
  30.                 width: flaWidth,
  31.                 height: flaHeight
  32.             }); // end .flash
  33.            
  34.             // Set a session cookie so it isn’t shown again
  35.             $.cookie(cookieName, cookieValue);
  36.         }
  37.     }); // end .ready
  38.     </script>
  39.     <style type="text/css">
  40.     <!–
  41.     –>
  42.     </style>

  1.     <div id="header" style="width: 500px;">
  2.         <img id="headerimg" src="swap-pic.jpg" width="332" height="297" rel="intro.swf:332:297">
  3.     </div>

We use a couple jQuery plugins to make this easier:

This can be used as-is with no changes. If you change the id of the IMG you use, you’ll need to make one script change (see the code comments for more details). Other than that, the rest is all done in HTML. The rel attribute of the img element is used to store an array containing the Flash source file name, width, and height.

You can change the name of the cookie and the value stored if needed. If this code is used on multiple pages it would only show Flash on the first load of any page within the session. If you want to make it so that the first load of every page shows the Flash, you’ll need to use a unique cookie name for each page.

Here’s the demo

Technorati Tags:

No Comments