Posts Tagged ‘Javascript’

jQuery Sprite Slideshow…because I wanted to see if I could do it with less

Wednesday, May 12th, 2010

So, a very cool guy, and one of my few posters, Joesph McCullough (a link to his site is in my blog roll on the right – Do It By Hand) is getting into jQuery. He posted a slideshow that he wrote, and I wanted to see if I could do it…but with less code. To be honest, his code looks daunting. I can read it and see what he is doing, but I can’t imagine writing that. Joe, when you read this, props to you for getting that to work. Basically, it is using 1 sprite image positioned using CSS, and then jQuery to move the wrapping div to the left so that it looks like it is showing a bunch of different images.

Click here for the demo.

Now on to the code!

(more…)

jQuery bind() and namespacing…oh, I get it!

Tuesday, April 27th, 2010

Sorry its been a few days since I made my last post, but a lot got in the way. Anyway, I have been reading this book: Learning jQuery 1.3 (I know 1.4 is out, but the book isn’t yet, so shush!). Its not meant for someone who doesn’t know anything about javascript. You at least need to know the basic syntax of jQuery to be able to get through it, and I’ll write a review of the book when I’m done. So far though, only 60 pages in, I have learned a lot.

In this case, it was the bind() method. I didn’t get what the purpose was, and I didn’t really look that hard. Why is that? Well, because I didn’t need to. The click() event apparently already has the bind method kind of built in. BUT…without using the bind() method, you can’t actually UNbind the event from something.

(more…)

jQuery 1.4′s Element Creation Syntax

Friday, April 2nd, 2010

I am really digging jQuery a lot. Mainly because I learn something new every day, mostly because I’m a newbie. I was reading through a tutorial over at css-tricks.com, and in it, there was a small chunk of code I saw that made it all the more cool. Adding elements to a page in 1.4 is very easy to implement because it is not hard to remember. Here is a sample of code to add an ‘a’ tag to a div with an id of container:

$('<a />', {
    'href': 'http://www.google.com',
    'target': '_blank',
    'text': 'This is a link',
    'class': 'myClassName',
    'css': {
        'top': '20px'
    }
           }).appendTo('#container');

Fairly simple, yes? Tell jQuery what element you want to add, in this case an ‘a’ tag, assign it the href, the target, the text that will display within the link, give it a class, and add some css. The last part adds it to the container div.

It is stuff like this that I find exciting learning jQuery. Once you have the hang of the syntax, everything starts falling into place.

jQuery .delegate()…and what it does

Thursday, April 1st, 2010

So the whole point of my messing around with the functions page, was to change the call to the google jQuery file, to 1.4.2 instead of 1.4.1. The latest version supports .delegate(), which I wanted to see how to use it.

I’ll give you a sample of the jQuery I am using for my slider:

$('#controlList li').click(function(evt) {

This is the section that controls the list in the slider, which moves the slides left and right. From what I have read, which has been quite a bit now, and COMPLETELY confusing until I read this post, the way I had it above (idiot terms here)…it attaches the click handler to each li when it is clicked.

This is what I have now:

$('#controlList').delegate("li", "click", function(evt) {

The click event is actually attached to #controlList, which then checks to see if an li within it was clicked, if so, it runs the function. Meaning only one handler on the #controlList because of .delegate();, instead of a handler on each li. Way better preformance and less waste on jQuery’s part.

And of course, because the Reference Guide I bought was written before 1.4.2 (only 1.4), delegate() is not covered. Bastards!

jQuery tip…Back to Top

Monday, March 29th, 2010

Ever have to do a page that has a lot of back to top links? Say, a staff page with a lot of bios and photos, and after each one you have a link that says Back to top. Well, this made my life much easier.

$('#top').click(function() {
    $(document).scrollTop(0);
});

The 0 could obviously be any value you need it to be, but this little bit of jQuery can come in handy.