Friday, August 31, 2012

jQuery has ruined my Javascript - here are some fallbacks

It's true. Using jQuery is likely to make you forget how to do fundamental things in javascript. Some people get all riled up about this because jQuery is just a library, meaning its only javascript anyway.  The way jQuery allows selectors to be written is reason enough to utilize it. Compare these examples:

A) $("#first_paragraph").text("Booya");
B) document.getElementbyId("first_paragraph").innerHTML = "Booya";

jQuery accomplishes the same thing in half as many characters.

There are times when a customer wants something written in pure javascript. I suppose they're trying to avoid licensing and compatibility issues that might come with using libraries.

Anyway, long story short, here are the javascript equivalents of some of my favorite jQuery functions:

// works like the $(".classname") selector
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

// same as $.inArray()
function contains (needle,haystack) {
   for (var i=0; i < haystack.length; i++) {
      if (needle == haystack[i]) {
         return true;
      }
   }
   return false;
}

// counts the frequency of identical indices in an array
// I'm not sure if there is a jQuery equivalent of this but I love the function in PHP!
function arrayFreq(myArray) {
   var myBlocks = new Object ;

   for (var i=0; i<myArray.length; i++) {
      var aBlock = myArray[i] ;
      if (myBlocks.hasOwnProperty(aBlock)) {
         myBlocks[aBlock]++ ;
      } else {
         myBlocks[aBlock] = 1 ;
      }
   }
   return(myBlocks);
}

Thursday, August 23, 2012

CSS rounding X-Browser


I've probably visited this guy's site 40 times to get this syntax:
http://css-tricks.com/snippets/css/rounded-corners/  - and a great resources for all other things CSS.

"
Standard Rounding:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

Individual Corners:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
"

Tuesday, August 21, 2012

Javascript fallback for jQuery $.inArray

Sometimes, for whatever reason, someone doesn't want you to use jQuery.  It helps to know this from the beginning, so ask first.

Here is the javascript fallback for one of my favorite jQuery methods, $.inArray();

function contains (needle,haystack) {
   for (var i=0; i < haystack.length; i++) {
      if (needle == haystack[i]) {
         return true;
      }
   }
   return false;
}

Sending your two values, needle and haystack, to this function will return true on success ( the value is in the array ) or false if it is not.

Example

var favBeers = ["Laguinitas IPA", "Bear Republic Racer 5 IPA", "Deschutes Mirror Pond Pale Ale"];
var aBeer = "Corona";

if  (contains(aBeer, favBeers)) {
   //   nothing happens here because Corona sucks.
}