MSIE5 added support for CSS expressions or “Dynamic Properties”, however MSIE8 ‘deprecated’ their use and prevents their use in Standards Mode.
While powerful because this allowed you to script your CSS dynamically, there were two primary problems.
REFERENCES:
Ideally all JavaScript and CSS definitions should be external to the content of an HTML page, in some cases it’s simply not practical. If you’ve migrated to XHTML markup of your page, this can often lead to XML validation errors. The use of a CDATA escape can fix most issues, though you may have to cleanup some of the actual code to resolve other issues, particularly with some special characters that are expected to be encoded.
Here are a few examples of CDATA implementation in HTML tags:
<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>
<script type="text/javascript">// <![CDATA[
...
// ]]>
</script>
<style type="text/css">
/* <![CDATA[ */
...
/* ]]> */
</style>
I recently got into some heavy refactoring of legacy code and in an effort to “fix” some JavaScript that was directly manipulating ‘style’ attributes on a DOM element and thus introducing maintenance and specificity issues I found that it would be “easier” to add a CSS class that I would write dynamically… leading to many headaches along the way and this bit of knowledge.
“For MSIE, you cannot simply write a ‘textNode’ into the DOM for HTML STYLE tags, you must use ‘cssText'”
function createClass(cls,txt){
var obj = document.createElement('style');
if(obj){
var head = document.getElementsByTagName('head')[0];
if(head){
obj.setAttribute('type','text/css');
obj.setAttribute('media','all');
var val = '.' + cls + '{' + txt + '}';
var nod = document.createTextNode(val);
if(obj.styleSheet){// MSIE
obj.styleSheet.cssText = nod.nodeValue;
} else {
obj.appendChild(nod);
}
head.appendChild(obj);
}
}
USAGE:
createClass('noshow','display:none;');
REFERENCES:
It can be difficult to create or output some characters as JavaScript TextNodes. Typically you might try to use the ampersand notation, unfortunately the ampersand itself gets escaped to & as such becomes Use of the Unicode notation can easily resolve this issue.
Example for NBSP:
var nsbptextnode = document.createTextNode('\u00A0');
I’ve recently run into a problem when attempting to create a CSS file for print media because some local JavaScript on the page was manipulating the style attributes on the page. Due to specificity issues, it can be very difficult to “correct” the elements to provide proper output. Here’s a new (to me) trick that I just found.
You can override the local style attribute (and any manipulated at runtime with JavaScript) by adding the the [style] modifier to your CSS declaration.
div#someid[style] {
/* your CSS here */
}
One of the great improvements for forms in HTML5 is the ability to display placeholder text in your INPUT fields. Traditionally, this has required developers to add a variety of JavaScript methods to dynamically update the field, now (for browsers that support it) you can use a simple attribute on your tag elements.
OLD:
<input type="text" value="Search" onfocus="if(this.value == 'Search'){this.value = '';}" onblur="if(this.value == ''){this.value = 'Search';}" />
NEW:
<input type="text" value="" placeholder="Search" />
REFERENCES:
If you run a secure server, you often have some non-secure content prior to authentication of a secure session. To provide a mechanism to show a page prior to authentication, you can “sniff” for the clients capability with a small bit of JavaScript.
First establish a global variable on the page:
<script type="text/javascript">
var sslok = 0;
</script>
Then, include a JavaScript file that is ONLY available via a secure
<script type="text/javascript" src="https://www.giantgeek.com.com/secure/sniff.js"></script>
The ‘sniff.js’ file should contain (at a minimum):
sslok = 1;
Finally, check and act on the value:
<script type="text/javascript">
if (sslok === 1) {
window.location.href = 'https://www.giantgeek.com/secure/';
}
</script>
Done!
About a year ago I wrote a post regarding JSLint usage for code quality of JavaScript. There is now,for a while actually, an open-source fork of that code that allows for greater configuration.
Oddly, there are two separate sites, but I believe that they have the same content:
Due to various security models, it can be difficult to create a simple way to copy data from a browser application into the OS’es “clipboard” with simple javascript. There are several libraries out there to assist in making this work across various platforms, most utilize Flash.
Here are a few notable methods:
I’ve found that many developers (including myself) that have been coding javascript for some time don’t realize that javascript added the try/catch pattern from Java quite a while ago and that all modern browsers support it.
Here’s the standard pattern, the ‘finally’ of course is optional for when you require it.
try{
// put your code here that may experience a runtime error/exception, i will show division by zero in this example
var x = 1;
alert(x/0);
}
catch(e){
if(e instanceof Error){
alert(‘an error has occurred:name=’ + e.name + ‘|message=’ + e.message);
} else {
alert(‘an unknown exception has occurred’);
}
}
finally{
alert(‘now we are done’);
}
A little more on this… like in Java, there are types of Errors, and you can rely upon ‘instanceof’ to determine them appropriately, here are a few of the common types in JavaScript 1.5:
REFERENCE:
http://www.devarticles.com/c/a/JavaScript/Exception-Handling-in-JavaScript-Using-Multiple-Exception-Handlers/
Cheers