Daniel Nitsikopoulos.

Author Archives: Daniel Nitsikopoulos

The deprecation of jQuery live

Posted on

AS of jQuery 1.7 the .live method is deprecated.

For a while, I used to interchange the .live method method with .delegate. It wasn’t until I delved deeper into javascript did I realise the error of my ways.

So what is .live anyway?

Description: Attach an event handler for all elements which match the current selector, now and in the future.

Straight from the jQuery docs. Essentially it lets you attach a handler to an element even though it’s not in the DOM yet.

In essence it sounds like a really simple function, when an element comes in existence, bind something to it. In actuality, it’s a computational nightmare because it requires your browser to look for an element whether or not it exists (and in some cases it may never be created). This as well as a handful of other issues that arose from the use of .live (mainly to do with events not reacting properly to e.stopPropagation() and iOS troubles) is what caused the team to stop supporting it past 1.7.

However! It’s not all bad news, we still have the .delegate (or .on for jQuery 1.7+) method which works a hell of a lot better even though it piggy backs off of live, but one of its main advantages is that it forces you to specify a scope for which you’d like to watch for elements …

Super simple panning background

Posted on

A client came into work today and wanted a section of his site to have a full screen background image that pans left or right depending on the side of the screen your mouse was hovering. It was something something I had never done before but was pretty sure I could come up with a technique to get the effect working rather quickly. So a few lines of jQuery later and hey presto a super cool panning background image!

You can check out the Demo here or keep on reading to pick up “teh codes”.

1. The Setup!

Grab yourself a div, any div and let’s give it some basic properties:


#background-thing{
  background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll;
  background-size: cover;
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

2. Make some magic of the javascript variety

Don’t forget to include jQuery.


$(document).ready(function(){
$('#background-thing').mousemove(function(e){
  var mousePos = (e.pageX/$(window).width())*100;
  $('#background-thing').css('backgroundPosition', mousePos+'% 0');
});
});

And voila! A nifty panning background image!

Switch design in iOS UI

Posted on

There has been a rather strong interface design trend lately in the form of the on/off switch that has replaced two radio buttons. For example rather than picking a box to alter the state of a particular option, we now have a single switch or button that can be slid left or right, up or down or depressed/raised to select the state of the particular option it represents.

At first I thought this was a great idea, especially because it was executed so well by Apple in their first iPhone OS. The options were clear and the UI design was definite. As of late, however, I have seen a rather large handful of mobile apps that have used this same concept but executed it rather poorly. Call me stupid, but the other day I was checking in with Foursquare and couldn’t figure out which state of their “share on Twitter” button meant “off”.

I get that space is limited, and I love this concept as a solution, however the ambiguous nature of the visual had me thinking (and that’s not a good thing!).

Comparing this to something like Roamz:

We have the same deal, a small space to …