[Super Tip!] How to loop or iterate over an object’s key/value pair.

| No Comments »

Problem: Help! Is it possible to loop or iterate through each object’s key/value pair like an array? Answer: A very useful trick for iterating over objects is the use of (for x in object), with this you can completely use objects as array!

myObject = {
“this” : “value1”,
“is” : “value2”,
“awesome” : “value3”
}

for (x in myObject)
alert(‘key : ‘ + x + ‘ / value : ‘ + myObject[x]);


Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code

| 25 Comments »

One very important usability feature of a website is to have the menu or links highlight the current page the visitor is currently in. Here’s a trick I do with jquery to do just about that. For educational purposes, i’ve split it to 3 lines of code to make it more understandable.

Simply add the following to your header (don’t forget to include jquery first!).

$(document).ready(function()   {     var loc = window.location.toString().split("/")     loc = loc[loc.length – 1]     $("#navigation li a[href=\""+loc+"\"]").addClass("selected");   });

Of course, jquery isn’t really needed to do this. If you prefer to have it done _without_ jquery, here’s a native way of doing things:

   window.onload = function()    {      var current_page = window.location.toString().split("/")[window.location.toString().split("/").length – 1]      var links = document.getElementsByTagName("a");      for (x in links)      {        var link = (links[x].href != undefined) ? links[x].href.toString().split("/")[links[x].href.toString().split("/").length – 1] : ""        if (link == current_page)          links[x].className = (links[x].className == "") ? "selected" : links[x].className + " selected"      }    }

_Important_: The above code takes use of the .selected class. Simply add the class to your a:hover classes.

#navigation ul li a:hover { color: #ff0; }

Should be written as:

#navigation ul li a:hover, #navigation ul li a.selected { color: #ff0 !important; }

_Don’t Forget!_, this works for menu/links with background images as well.

and that’s all there is to it! Don’t forget to thumb this up and share!


How to: Fix OCUpload/One-Click Upload clicking bug in IE7 & IE8 (jquery)

| 1 Comment »

Problem: Help! I’m using the OCUpload, or One Click Upload Plugin for Jquery. IE7 and IE8 is requiring me to do a double click to display the upload dialog box!

Solution: The one-click upload technique uses a trick that sets the file input’s browse button directly in front of your mouse cursor. This is misbehaving in IE7/IE8 due to how they handle CSS, this can be resolved by directly setting the cursor position through javascript instead. You can fix the problem by editting the script and updating the following lines (highlighted in bold):

Somewhere on line 87:

/** Move the input with the mouse to make sure it get clicked! */ container.mousemove(function(e){    input.css({        top: e.pageY-container.offset().top+’px’,        left: e.pageX-container.offset().left-175+’px’    }); });

Finally, we need to set the margin css property to 0, you can find it somewhere on line 63:

/** File Input */ var input = $(        ‘<input ‘+        ‘name=”‘+options.name+'” ‘+        ‘type=”file” ‘+        ‘hidefocus=”true” ‘+      ‘/>’ ).css({      background: ‘#ffffff’,      position: ‘relative’,      display: ‘block’,      marginLeft: 0+’px’,      opacity: 0 });

That’s it! Hope this helped!