April 18th, 2010
There may be special CSS properties you want to be able to check or modify in Javascript. For example, the special -moz-border-radius CSS property in Firefox. You can do so with the following code (used for IE’s filter and Gecko/Webkit’s transform):
if (document.body.style.filter !== undefined) alert("IE-specific filter property");
if (document.body.style.MozTransform !== undefined) alert("Gecko-specific transform property");
if (document.body.style.webkitTransform !== undefined) alert("Webkit-specific transform property");
Gecko would include the Firefox family of browsers, and WebKit will include the Safari and Chrome line of web browsers.
As you’ll notice, WebKit is using camelCase with “webkit” being all lowercase. Gecko is using uppercase on all first letters (i.e. “MozTransform”).
Tags: CSS, filter, Firefox, ie, internet explorer, moz, mozilla, safari, webkit
Posted in CSS, Javascript | No Comments »
April 17th, 2010
Converting from a string to integer or number is very easy in Javascript. The simplest way is to use the + operator:
var myString = "10";
var myNumber = +myString
“typeof myNumber” will return “Number”
Tags: conversion, convert, integers, Javascript, js, numbers, variables
Posted in Javascript | No Comments »
April 17th, 2010
Copying one array to a new array is easy in Javascript. The code can be done in one line using:
var newArray = oldArray.slice(0);
Tags: arrays, Javascript, js
Posted in Javascript | No Comments »
April 6th, 2010
Wondering how you can access the DOM when using Windows Script Host and JScript? Here’s a simple trick to help you:
var ie = WScript.CreateObject("InternetExplorer.Application");
ie.Navigate("about:blank");
var dom = objIE.document;
ie.Quit;
WScript.Echo(typeof dom)
And there you have it!
Tags: dom, ie, internet explorer, jscript, windows script host, wsh
Posted in Javascript | No Comments »
March 28th, 2010
Sometimes you may have two JSON objects you want to combine. For example:
var window = {clean:true};
var engine = {horsepower:500};
If you want to combine the two JSON objects, ideally it should come out as:
var car = {clean:true, horsepower:500};
Unfortunately, JSON.js and native browser JSON functions do not currently provide a method to combine or join two or more JSON objects.
Luckily, we have a function for you…
Read the rest of this entry »
Tags: array comprehensions, arrays, combine, functions, Javascript, javascript 1.7, json, snippet
Posted in Javascript | No Comments »
March 27th, 2010
Here’s a quick cross-browser code snippet that will create a new instance of an existing JSON object. This will stop the new JSON object from being a “pointer” to its parent and have its own properties:
var myNewJsonObject = (function() {var _f=function(){};_f.prototype=OBJECT_TO_CLONE;return new _f;})();
Replace “myNewJsonObject” with any variable name you want. The code is on the right hand side of the equal (=) sign.
This same code can also be used to copy the __proto__ object property to Internet Explorer (IE).
In Firefox and KHTML engines (WebKit, Chrome, etc.), this function would be the same as __proto__.
For example, if you wanted to clone a JSON object for use in Firefox/KHTML engines only, the code can be further simplified to:
myNewJsonObject.__proto__ = parentObject;
Tags: closures, inheritance, instance, Javascript, json, object, prototype, __proto__
Posted in Javascript | No Comments »
March 23rd, 2010
Interested in a cross-browser function to grab the style and CSS attributes of a DOM element such as div, span, etc.?
Well, we’ve written a very short, very clean, and very elegant cross-browser CSS style attribute Javascript function.
Javascript code available after the jump.
Read the rest of this entry »
Tags: attributes, cross-browser, CSS, dom, functions, Javascript, properties, property, snippet, style
Posted in CSS, Javascript | No Comments »
March 22nd, 2010
While moving DOM objects and nodes sounds like a trivial question, it becomes quite more complex with event listeners. Node.cloneNode() does not clone the event listeners attached to a DOM object; they only clone the DOM elements themselves.
There is no W3C standard function that will allow us to move a node or DOM element from one parent node to another.
However, there is still one easy way to accomplish moving DOM objects…
Read the rest of this entry »
Tags: cloneNode, dhtml, dom, elements, how to, Javascript, move, nodes, objects, snippet, tutorial
Posted in Javascript | No Comments »
March 21st, 2010
There is a nasty bug in Firefox when using the CSS overflow property. If a container div is set to overflow:hidden, and a child node is set to overflow:auto, there will be a graphical glitch in Firefox. The part of the child node with overflow:auto that was chopped off by the parent’s overflow:hidden will show the chopped off part in a glitchy graphical way when moved via Javascript.
This bug does not occur in IE or Safari. The best solution at this time (as of Firefox 3.5) would be to just remove the overflow property from child elements.
Tags: auto, bug, bugs, CSS, Firefox, glitch, hidden, overflow
Posted in CSS | No Comments »
March 21st, 2010
A lot of CSS snippets will often use both cursor:pointer and cursor:hand like so:
p {
cursor:pointer;
cursor:hand;
}
Both will show the “hand” cursor icon so why the confusion?
Read on…
Read the rest of this entry »
Tags: CSS, cursor, hand, pointer, standard, standards, w3c
Posted in CSS | No Comments »