ShinyLight Development » JavaScript

Quick Simple Way to Show/Hide with a Checkbox using jQuery

Dan — Fri, 02 Apr 2010 23:52:49 +0000

Here’s a quick and simple way to do this. I often have to show and hide set of panels based on whether something is checked or not. jQuery code is pretty straightforward and it comes in handy.

$( function() {    
 
  function toggleCheckbox( trigger, hidethese )
  {
    if ( $( trigger ).attr("checked") )
    {
      $( hidethese ).hide();
    }
    else
    {
      $( hidethese ).show();
    }
  }
 
  // jQuery object that has your checkbox
  var triggerCheckbox = $( "#showPreonDescription" );
 
  // jQuery object for collection of elements you want to hide
  // For this example, I could've also just done #panel by itself
  // to hide everything
  var panelsToHide = $("#subpanel,#maincontent,#nav");  
 
  // Call the function on click.
  triggerCheckbox.click(
    function ()
    {
      toggleCheckbox( triggerCheckbox, panelsToHide );
    }
  );
});

I have the demo if you want the source as well.

High Performance Websites

Dan — Mon, 11 Jan 2010 01:48:43 +0000

This was a great read. Certainly learned a lot of useful lessons on front-end optimizations. Written by Steve Souders (previously lead Optimization efforts at Yahoo!), who also developed YSlow! – a Firefox add-on (actually an add-on to the Firefox add-on called Firebug) that gives your web pages a grade from A through F and tells you how to make it better.

If you have a build script, you may be able to automate a lot of these things, like combining JS and CSS files, and optimize PNG files (check out http://www.phpied.com/give-png-a-chance/ to see how to optimize from the command line). If you’re going to optimize JavaScript, I would recommend YUI Compressor (http://developer.yahoo.com/yui/compressor/) since it’s not as greedy as Google’s Closure Compiler for JavaScript. The Closure compiler (http://code.google.com/closure/compiler/) is relatively new and you may get even smaller files, but if your JavaScript is complex, it may have bugs because it’s a greedy compiler.

Anywhoot, here’s what I got from it:

Reduce as many HTTP requests as possible.
Minify JavaScript (don’t obfuscate, because it’s more trouble than it’s worth for the benefits you get)
Minify CSS and optimize it (reduce duplication).
Future-expire resources for caching (PNG, JPG, GIF, JavaScript and CSS).
Minify HTML (get away from tables)
Put CSS at the top, put JavaScript at the bottom.
For design components (background images, button images, nav images), use CSS sprites.
Use PNG for design components (they compress better than GIF, have partial transparency, and can have greater color palettes).
Gzip non-binary data like HTML.
Combine CSS and JavaScript into single files to reduce HTTP requests.

A summary of his optimization rules are found here, but of course, it’s not as detailed as the book: http://stevesouders.com/hpws/rules.php .

Stoyan Stefanov, another prominent developer who’s written tons on JavaScript and optimization, published 24 articles this month on optimization. I find these articles invaluable. It’s recent and he does actual optimization tests and tells you what tools he uses. Here’s the site: http://www.phpied.com/performance-advent-calendar-2009/

Assigning Handlers on Load

Dan — Tue, 08 Dec 2009 01:15:24 +0000

Rather than assigning event handlers to elements inline from within HTML, like so:

Go to my site!

You can assign the event handler programmatically via the onload event of the window object. Like so, in the script element:

window.onload = function() 
{
  document.getElementById("linkcontent").onmouseover = Show;   
}
 
function Show( )
{  
  alert( "Hey there, how are you?" + this.href );
}

Here’s the HTML:


 

  This is pretty cool

This is just a great way to keep HTML code away from JavaScript. In this case, the handler for window.load will run when all web page resources have finished loading (the full HTML and JavaScript files).

Head First AJAX

Dan — Mon, 07 Dec 2009 06:37:57 +0000

Currently reading a great AJAX book, Head First AJAX, by Rebecca Riordan. I was a little skeptical at first by the format of these “Head First” books. I had heard so much about these books that I decided to give it a shot. I have to say I’m very pleased. It makes the material very easy to understand, and I certainly need a good book to review my AJAX.

So what is AJAX?

At its core, AJAX is just making a part of the page do something else while not refreshing the entire page. So for example, you can press a button, and just the button alone would load data from the server and display it on another part of the page (maybe right above it) while not loading the entire page. This is benefit one. It uses the JavaScript XmlHttpRequest (XHR) object .

Benefit two, is that with that XHR object, you can make HTTP requests that traditional HTML pages cannot. An HTML page can make a GET or POST request (e.g. via a form). With an XHR object, you have all HTTP request methods available.

When AJAX first came out, it used just XML – the server side script (e.g. ASP page) would generate XML data and the XHR object would retrieve it. Now, you can use JSON (a native JavaScript data structure) or any form of data structure you want. So the “X” in AJAX really is any type of data structure you want to pass the data from the ASP page to the XHR object.

Some JavaScript frameworks make AJAX extremely easy to use. jQuery can make a GET request using one line of code (compared to the many in the example code from my site). Also, jQuery is part of the .NET framework (last I heard MS announcing it) and should be integrated into Visual Studio.NET.

Here’s a great snippet that bundles the logic to return an XmlHttpRequest object if the browser can in fact create the object. I find it quiet useful.

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }	
  return request;
}

Some additional code, wrapped in functions, that sends the request object to the server, and fires the showUsernameStatus function. This is grabbed from the book site. Posting it here for my own benefit.

window.onload = initPage;
 
function initPage() {
  document.getElementById("username").onblur = checkUsername;
  document.getElementById("register").disabled = true;
}
 
function checkUsername() {
  document.getElementById("username").className = "thinking";
  request = createRequest();
  if (request == null)
    alert("Unable to create request");
  else {
    var theName = document.getElementById("username").value;
    var username = escape(theName);
    var url= "checkName.php?username=" + username;
    request.onreadystatechange = showUsernameStatus;
    request.open("GET", url, true);
    request.send(null);
  }
}
 
function showUsernameStatus() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      if (request.responseText == "okay") {
        document.getElementById("username").className = "approved";
        document.getElementById("register").disabled = false;
      } else {
        document.getElementById("username").className = "denied";
        document.getElementById("username").focus();
        document.getElementById("username").select();
        document.getElementById("register").disabled = true;
      }
    }
  }
}

Here’s a simple way to read a text file (data.txt), barebones, on Firefox, without checking if XMLHttpRequest object exists or not.

<html>
<head>
<script language="JavaScript">  
ajax = new XMLHttpRequest();
 
function ShowData()
{  
  ajax.open( "GET", "data.txt", true );  
  ajax.onreadystatechange = function() 
  {
    if ( ajax.readyState == 4 ) 
    {      
      document.getElementById("DataPanel").innerHTML = ajax.responseText;
    }
  }    
  ajax.send(null);
}  
</script>
 
<title>hey!</title>
</head>
<body>
  <button onclick="ShowData()">Show Data</button>   
  <div id="DataPanel"></div>  
</body>
</html>

This is data.txt, which is in the same directory as the html page above:

05/12/2009  10:32 PM             1,024 .rnd
10/03/2009  12:55 AM               428 1.txt
05/11/2009  10:37 PM                 0 AUTOEXEC.BAT
09/29/2009  09:56 PM             5,256 bar.emf
05/11/2009  10:37 PM                 0 CONFIG.SYS
12/06/2009  12:43 AM              Dan
12/06/2009  12:45 AM                 0 data.txt
05/11/2009  11:00 PM              DELL
05/11/2009  10:40 PM              Documents and Settings
05/11/2009  11:28 PM              Intel
11/24/2009  11:53 PM              Program Files
07/18/2009  12:21 AM              temp
11/24/2009  11:57 PM              WINDOWS

Use PHP Functions in JavaScript

Dan — Thu, 15 Oct 2009 03:14:00 +0000

PHP.JS is a great JavaScript library that I don’t often see in overwhelming lists of JS Libraries out there. A few folks decided to port many PHP functions to JavaScript. Wicked cool! I suggest you take a look at what’s ported so far – there’s a whole bunch. Definitely check it out!

Google Code Playground

Dan — Sat, 10 Oct 2009 20:54:00 +0000

Don’t know how long Google Code Playground has been around, but it’s a mini-editor that will let you code in JavaScript (with color coding!), interpret it on a bottom panel, and even show you results from various Google API snippets. Awesome tool.

JSDB from Aptana Studio

Dan — Thu, 08 Oct 2009 23:55:47 +0000

Aptana Studio is a great free IDE for JavaScript. By default, you can use the its Jaxer engine to interpret your JavaScript code. However, if you prefer to use JSDB, a more console-oriented interpreted based on Mozilla SpiderMonkey, keep reading. This will set you up so that from Aptana Studio, you can write JS code, and interpret it by hitting F5 and seeing results in the bottom panel.

1. Select External Tools

2. Enter the following in the textboxes:

Make sure the path to your project doesn’t have spaces! (bug with Eclipse)

3. Set the hotkey to F5 so it runs the external tool:

JavaScript for the Windows Command Console

Dan — Sat, 26 Sep 2009 02:33:06 +0000

JSDB is a great JavaScript interpreter based on Mozilla’s Spidermonkey JavaScript engine. If you like working off the command console, I suggest you give it a go. Of course, not everything is supported, as there is no HTML/DOM context in the console. To compensate for it, the author of this tool has added some great features, like being able to connect to databases, use includes ( easily via the load(“file.js”) function ), and other network facilities, like fetching HTML content from other websites.

jQuery JavaScript Encryption

Dan — Sun, 20 Sep 2009 06:27:10 +0000

This is a neat way to encrypt form fields on the fly when submitting. Good way to add another layer of security. This is a jQuery plugin that uses the public-key algorithm of RSA.

NES Emulator in JavaScript

Dan — Thu, 17 Sep 2009 22:44:57 +0000

This is pretty impressive. It’s an emulator in JavaScript. I’ll have to see how many instructions get run through the profiler and how it reads the binary ROM file (perhaps it was converted beforehand).