JavaScript 'if' shorthand

I'm not generally a fan of shorthand but the code I'm working on at the minute has loads and loads of if... else statements and they're making the code look bloody ugly so I thought I'd look at the shorthand for if... else. Turns out that it involves a ternary operator.

Anyway the code I'm working on looks like this:

if($('#reverse').attr('checked')){
  newColour = red;
}else{
  newColour = red;
}

Which becomes:

newColour = $('#reverse').attr('checked') ? red : green;

One line instead of five is a big improvement. And it works like this: condition ? result1 : result2;

Shocking Ice Cream Commercials

Thanks to a post on Dvorak Uncensored:

I'm not sure about what message they're trying to give and I'm sorry about the ordering, I'm not sure what that's trying to say either...

M255 TMA 04 is in the bag!

Finally finished the latest and last TMA about half an hour ago thanks to insomnia and caffeine so today I get to play with maps of the RBWM. Yay!

As an aside there seemed to be an issue with the Bach/Chill interface (how often does one get to say that? (Twice now)).

JavaScript getBackgroundImage(myDiv)

function getBackgroundImage(myDiv){
  // string to be returned
  var returnString = "";
  // Grab the offending element by id
  obj = document.getElementById(myDiv);
  // IE Opera
  if(obj.currentStyle) {
    returnString = obj.currentStyle.backgroundImage;
  }else{ // Firefox 
    returnString = getComputedStyle(obj,'').getPropertyValue('background-image');
  }
  // this gives is something like: "url(someDomain.com/someImageDirectory/someImage.someFormat)"
  // so we get everything after the last "/" which leaves us with "someImage.someFormat)""
  returnString = returnString.substring(returnString.lastIndexOf('/') + 1);
  // so we get rid of the last 2 characters leaving us with:
  returnString = returnString.substring(0, returnString.length-2);
  // "someImage.someFormat"
  return returnString;
}

With thanks to this post on WebmasterWorld. So much for being a birdbrain!

JavaScript isEven(value)

Nice easy function to tell if a number is even:

function isEven(value){
  return value % 2 == 0;
}

Seperate and Different

I though I needed to split the functionality of some similar pages depending upon the name of the page... I should explain better! I have some pages that all do pretty much the same thing on a given set of data... but not all of the pages react in the same way to events. So I got to thinking about how I could branch the code depending upon which page was calling the JavaScript, so then I got to thinking about how to find the name of the page and came across this code:

var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

But then that got far too complex and the JavaScript kept getting bigger and bigger and uglier and uglier so instead I had a different version of the same basic file for each page... but that got far to complicated in terms of remembering what I'd updated and where as I was developing... so I got the thinking about PHPs include() but JavaScript doesn't have one, it does however have fantastic DOM support so, thanks to a little research, I found this code from the really rather excellent Stephen Chapman. Now I've still got the separate JavaScript files for each page - but these pages are far smaller and concentrate on the differences rather than having to keep abreast of the similarities - but all the common functionality is kept in a separate file so that I don't need to hunt down each function in each file and update with the latest version. Cool ehh?

createLink(text, uri, img, alt)

So I've been working on a breadcrumb navigation where I'm using JavaScript to generate a number of CSS styled HTML list elements. Each of these elements are made up of a text element and an image so that in terms of the DOM they look like this:

<li>
  <a href="someUrl.html">
    someText <img src="someImageLocation.png" alt="someAlternativeText"/>
  </a>
</li>

There were 3 of these links and the function was getting longer and longer, so I got to thinking about having to repeat so much redundant code so I pulled the 3 list items out of the function and created another function:

function createLink(text, uri, img, alt){
  var li = document.createElement("li");
  var a = document.createElement("a");
  a.setAttribute("href", uri);
  var liText = document.createTextNode(text);
  var liImg = document.createElement("img");
  liImg.setAttribute("src", img);
  liImg.setAttribute("alt", alt);
  a.appendChild(liImg);
  a.appendChild(document.createTextNode(" "));
  a.appendChild(liText);
  li.appendChild(a);
  return li;
}

Then I called that 3 times thus:

breadCrumb.appendChild(createLink("someText", "someUrl.html", "someImageLocation.png", "someAlternativeText"));

And Bob's your Uncle and Fanny's your...