Stereo Interactive & Design » Javascript

IE 6 getElementsById() and prototype $() function return dom elements by name

Scott Meves — Mon, 27 Jul 2009 16:07:29 +0000

I can’t believe I had not run into this yet, but today I had a page that had an element (an anchor) with a name attribute (“floorplans”), and further down the page a div with that id (“floorplans”). When I tried to dynamically load content into my div using $(‘floorplans’), things were getting all out of control on IE 6. Turns out IE6’s document.getElementById returns the first element whose id OR name matches the string, and of course Prototype’s $() function relies on the browser’s own getElementById(). Lesson learned!

Symfony: return javascript response

Scott Meves — Fri, 03 Jul 2009 18:11:47 +0000

This is an old trick, but I still find it useful and will post it here in case it will help other symfony developers out there. If you are using the prototype.js library for your ajax requests, the Ajax.Request (and similar) utility methods will automatically evaluate the server’s response as javascript if the response has the ‘text/javascript’ content-type header. You can do this by setting your response headers like so:

// from within a template:
sfContext::getInstance()->getResponse()->setContentType('text/javascript');
 
// from your action
$this->getResponse()->setContentType('text/javascript');
 
// as an action that returns some javascript directly
$this->getResponse()->setContentType('text/javascript');
return $this->renderText("alert('This is a javascript alert')");

This proves useful when you want to open up a modal window, show an alert, update multiple areas on a page, or just about anything else with javascript returned from your ajax request.

Javascript get window hash/anchor, get link target

Scott Meves — Fri, 21 Nov 2008 22:39:21 +0000

There are two functions I find myself using all the time. They are very useful for javascript events that read the link href attribute to determine an action’s target.

function getHash() {
  var hash = window.location.hash;
  return hash.substring(1); // remove #
}
 
function getLinkTarget(link) {
  return link.href.substring(link.href.indexOf('#')+1);
}

IE6 mouseover event not firing, png filter

Scott Meves — Fri, 24 Oct 2008 22:01:29 +0000

This took me way too long to figure out. I had a series of div tags that had mousover and mouseout events attached to them using prototype. I couldn’t get these events to fire in IE6 no matter what I tried! Events worked on links, but not any other element.

First thing to check: Are you using the png filter trick?
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='/images/white_bg.png');

If so, make sure your mouseover elements have “position:relative” or else the event won’t fire on any element inside another element with the png filter.

This post along got me on the right track.

Get value of radio button group using prototype

Scott Meves — Thu, 05 Jun 2008 17:50:06 +0000

If you want to get the value of the selected element of a radio group, prototype makes this easy. There is more than one way to do it. I’ll update this post as better methods surface. Check out code after the jump.

$$('input:checked[type="radio"][name="my_radio_group"]').pluck('value');

What this does is use css selectors to pull out an input element with the attribute “checked” of type “radio” and with the name”my_radio_group”. The $$ function returns an array, although in this case it is only one element long. “pluck” returns the given attribute (in our case we want the value attribute) for the elements in the array.

Stereolabels released: updated labels.js for Prototype

Scott Meves — Wed, 15 Aug 2007 08:25:42 +0000

Stereolabels unobtrusively places form input labels inside the form inputs themselves. Upon page load, the script crawls the DOM for labels with the specified class name (default is ‘inside’) and places the label text inside the input field. Upon clicking the field, the label is removed. When the element loses focus, if there is no input the label returns. This behavior is only applied to text, textarea, and password input fields.

Information and a download are available in our code section: Stereolabels

sfCombineFilterPlugin released: Combine js and css requests into single compressed files

Scott Meves — Thu, 26 Jul 2007 16:31:26 +0000

The sfCombineFilter plugin automatically combines included js and css files in your web response into one request each, passing the string of file names to a special php file that concatenates them and compresses them for faster delivery. This file is then cached for future use.

Information and download instructions are available in our code section: sfCombineFilter

Prototype Tabs Script released, Scriptaculous Optional

Scott Meves — Tue, 24 Jul 2007 01:45:10 +0000

We just released a small script that allows you to easily create tabbed content on your web sites with a nice fade effect. Having searched for a decent script that uses prototype.js and scriptaculous to quickly create tabbed inline content and not having found one, we were inspired to create our own, much as stickmanlabs did with the accordion script. Check out the prototype tabs demo.

Javascript Array Merge: array_merge

Scott Meves — Thu, 19 Jul 2007 07:36:31 +0000

Using protoype.js I discovered a quick way to merge to arrays in javascript:

function array_merge(one, two) {
  one.push(two);
  return one.flatten();
}

This definitely beats the alternative of iterating through the second array by hand and adding it to the first. Any comments or suggestions are welcome.

javascript urlencode

Scott Meves — Mon, 14 May 2007 07:14:21 +0000

In doing a google search for javascript urlencode, I realized I was using that terminology just because I was familiar with the PHP function of the same name. Javascript’s method is actually called encodeURI() which will encode all characters except:

, / ? : @ & = + $ #

But what I really wanted to do was get javascript to convert a string that would be okay to put into a query string of a URL. For this, use encodeURIComponent(). This will convert all characters except alphabetic, decimal digits, and:

- _ . ! ~ * ' ( )

That’s more like it. You can view the complete reference at mozilla or w3schools.