This is great if you have layout issues and want to simplify things. Just add a selector for the only element you want on your page. In the following its page header.
var theElement = $(".page-header");
$("body > *").remove();
$("body").append(theElement);
var ResetDefaultPasswordForm = function (options) {
var options = options || {},
editButton = options.EditButton || $(".edit-email-settings-button")[0],
collapsibleArea = options.CollapsibleArea || $(".email-settings .collapsible")[0];
$(collapsibleArea).hide();
}
Thanks to this post for the tip and all the other which I’m sure I’ll be posting examples of very soon.
Had to note this down somewhere. How to tell if an object is null or undefined.
if (!! foo) alert('foo is defined and not-null');
if (! foo) alert('foo is undefined or null');
or if you want to test an method or value that might return NaN, 0, zero-length string, or of course false is not null you can use
if (typeof(SomeObject)!="undefined")
if(typeof(SomeObject)!="unknown")
And there is nothing wrong with the following if you don’t want to distinguish between null and undefined.
if(SomeObject != null)
Thanks to this post and it’s comments for all the tips.
I’ve written some quick example code that takes a page containing HTML5 equivalent class names (ie. .nav) and replaces the node with a HTML5 node that matches (ie. ).
//Adapt page to HTML5
function changeNodeName(element, newNodeName) {
var oldNode = element,
newNode = document.createElement(newNodeName),
node,
nextNode;
node = oldNode.firstChild;
while (node) {
nextNode = node.nextSibling;
newNode.appendChild(node);
node = nextNode;
}
for (var i = 0; i < oldNode.attributes.length; i++) {
newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
}
oldNode.parentNode.replaceChild(newNode, oldNode);
}
try {
var theBody = document.getElementsByTagName("body")[0];
var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
for (var i = 0; i < classNames.length; i++) {
htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
for (var ii = 0; ii < htmlFourElements.length; ii++) {
changeNodeName(htmlFourElements[ii], classNames[i]);
}
}
} catch(e) {
console.error(e.message);
}
Quick guide to perfect tools for using SASS in Visual Studio
Syntax highlighting, creating new files and compiling all without Ruby can be done with Mindscape Web Workbench.
Converting CSS to SASS can be done with the sass-convert foo.css foo.scss command or this online tool. Of course the sass-convert command will always be more up to date as it’s part of SASS. But of course you will need SASS and Ruby install to run it.
Code formatting isn’t a problem if you’re used to Ruby. If you’re not the default formatting from any converter is horrible. To convert it to a more ECMAScript style first remove all whitespace (you can leave the line breaks if you like). I use Notepad++ and just remove the indents with shift + tab. Then you can use any CSS cleaning/formatting tool such as Tabifier.
Either Dotless or Combres for compiling the .less
http://www.dotlesscss.org/
http://combres.codeplex.com/
For syntax highlighting.
http://www.mindscapehq.com/products/web-workbench
If you use ReSharper then it’s best to disable it for .less files.
