Tag: prototypejs

JQuery equivalent to Element.identify(el)

Migrating between various javascript frameworks can often prove difficult, especially when developers become comfortable with the specific features of one library. Here is a feature that I’ve seen used in PrototypeJS that does not exist in jQuery, but can easily be added with a new function.

PrototypeJS provides an identify(el);function … Element.identify(el);. This is powerful in the sense that it returns the ‘id’ of an element, or automatically generates and assigns one when it is empty.

For jQuery the following can be added to emulate the functionality.

jQuery.fn.identify = function(prefix) {
var i = 0;
return this.each(function() {
if($(this).attr('id')) return;
do {
i++;
var id = prefix + '_' + i;
} while(document.getElementById(id) != null);
$(this).attr('id', id);
});
};

(function($) {// Compliant with jquery.noConflict()
$('span').identify('test');
})(jQuery);

No JavaScript support

There are still a measurable number of internet users that browse without the use of JavaScript, use the NoScript plugin, or have disabled it for security purposes. In those cases, as well as for SEO. It’s often a good idea to manipulate the display to better accomodate these users. One of the most common methods is shown below, as we can toggle a CSS class on the HTML tag easily and use CSS “cascade” to hide or show alternate content.

NOTE: this example currently requires PrototypeJS, but can easily be changed to not do so.


<!DOCTYPE html>
<html class="no-js">
<head>
<script type="text/javascript">
var ar = document.getElementsByTagName('html');
var i = ar.length;// should only be one!
while(i--){
Element.removeClassName(ar[i],'no-js');
}
</script>
<style type="text/css>
html .no-js-show { display:none; }
html.no-js .no-js-show { display:block; }
html.no-js .no-js-hide { display:none; }
</style>
</head>
<body>
JavaScript is:
<p class="no-js-hide">enabled</p>
<p class="no-js-show">JavaScript is disabled</p>
</body>
</html>