Dynamic HTML style tag with JavaScript

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:

Open Source Image Editing Software

I’m usually a considered by most to be just a “programmer”, but occasionally the need comes up for someone to edit or create an image for a project. I might not be a designer, but I still need similar tools to accomplish this, but can’t justify the cost of Adobe Photoshop & Illustrator.

Here are some great (if not better) alternatives that are FREE and available on a variety of operating systems, not just Windows and Apple Macintosh.

GIMP – is an acronym for GNU Image Manipulation Program. It is suitable for a variety of image manipulation tasks, including photo retouching, image composition, and image construction.

Currently Supports:

  • GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP and many others.

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

Inkscape – is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets it apart is it’s native use of Scalable Vector Graphics (SVG), an open XML-based W3C standard.

Currently supports:

  • opening only SVG and SVGZ (gzipped SVG) formats.
  • save as SVG, SVGZ, Postscript/EPS/EPSi, Adobe Illustrator (*.ai), LaTeX (*.tex), and POVRay (*.pov).
  • import most raster formats (JPG, PNG, GIF, etc.) as bitmap images, but it can only export PNG bitmaps.
  • With the help of extensions, Inkscape can open/save as PDF, EPS, AI, Dia, Sketch and some others.

Together this suite can tackle most work that previously required costly software that isn’t available on many Operating Systems.

Happy drawing!