-
Setting the name attribute in IE's DOM
An old problem with IE is that you can't set the name attribute on form elements in the DOM directly. Fortunately there is a workaround to this issue using IE's mergeAttributes method. By creating a temporary named element acceptable by IE's createElement method, you can merge the name attribute into the element you desire, allowing you to name or rename an element. An example demo follows.
var setName = function(el, newName) { el = (typeof el === "string") ? document.getElementById(el) : el; el.name = newName; if (/*@cc_on!@*/0) { // Internet Explorer test (needs to be modified for IE8) el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false); } };In Mootools 1.2.1:
var setName = function(elementId, newName) { var el = (!!elementId) ? $(elementId) : null; if (!elementId || !newName || !el) return; el.set({ "name" : newName }); if (Browser.Engine.trident4 || Browser.Engine.trident5) { el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false); } }; -
Recent Activity
It's been a while since I've last posted anything so I thought I would mention a couple websites I've been working on recently. Both are puzzle sites - one in Flex: www.ideabo.com (pronounced eye-d-ah-bow) and one in HTML/CSS/JS: www.razzlechallenge.com.
I'll probably be posting some new things I've learned shortly. Stay tuned.
-
Tips for Web Developers
The following is a list of tips and bits of knowledge I've gathered over the past year or so and thought worth sharing:
-
The key to any successful website is how well it solves a need.
Going against big players is tough and competitive. One approach is finding (or creating) a niche need and from there growing the site until it's better able to move into the more competitive markets - that is if it's even worthwhile to do so.
-
The amount of text on your site (and more importantly keywords), may help your site get off the ground.
This tip deals with search engine optimization, and how making your site seo friendly can help with search engine rankings. In my experience, having pages with specific keywords and/or lots of relevant text can improve traffic to your site. This is an especially useful practice if your site is new or has little marketing as it's a way to help your site list well in search engine rankings without having to accumulate numerous inbound links which normally takes a while to do.
-
Try developing your site in Firefox with the Firebug extension,
and the YSlow and
Hammerhead Firebug extensions
Although Firebug has many features, one that I find myself using the most is the Net feature. This feature gives you visual representations of how your site's javascript, html, css and image files (etc, etc) are downloaded by the browser. When coupled with Yahoo's YSlow Firebug extension and Steve Souders' Hammerhead extension, optimizing your site's page load times becomes easier, and it helps in all browsers beyond just Firefox.
-
Minimize DOM styling on page load
This tip applies especially to Internet Explorer. If you are setting a lot of styling (via javascript) on various DOM nodes during page load, the page will render significantly slower in many cases than if you forgo or keep the styling to a minimum. Applying display, width, or height properties on DIV's with lots of inner HTML can take upwards of 5-10 seconds (in IE at least) depending on the amount of HTML code. Worse still, the browser (again in IE at least) will wait until that styling is finished before showing the contents of the page!
-
The key to any successful website is how well it solves a need.
-
Delaying Javascript Event Execution
If you're looking to execute javascript code whenever someone finishes (or stops temporary) scrolling, moving the mouse, or resizing the page, you may find the following code segment useful.
var onFooEndFunc = function() { var delay = 50; // Vary for effect var executionTimer; return function() { if (!!executionTimer) { clearTimeout(executionTimer); } executionTimer = setTimeout(function() { // YOUR CODE HERE }, delay); }; }(); -
Auto Selecting HTML Text with Javascript
Here is a function that when called on a particular HTML element will auto-select all of its inner text. The function works on elements such as INPUT (text), TEXTAREA, DIV, SPAN, TD, and PRE. It is also cross browser compatible.
var autoSelect = function (el) { if (/textarea/i.test(el.tagName) || (/input/i.test(el.tagName) && /text/i.test(el.type))) { el.select(); } else if (!!window.getSelection) { // FF, Safari, Chrome, Opera var sel = window.getSelection(); var range = document.createRange(); range.selectNodeContents(el); sel.removeAllRanges(); sel.addRange(range); } else if (!!document.selection) { // IE document.selection.empty(); var range = document.body.createTextRange(); range.moveToElementText(el); range.select(); } };
