Is it waves ahead of Flash?

NOTE: Stick through to the end of the article, and I’ll give you a cool link for a reward!
No, but it can still do a lot of cool crap. Today I was noodling around and somehow this idea popped into my head. Normally, at my current place of employment, we build animations using Flash. Butterflies fluttering around, fades and what-not, hell I even did a water ripple effect once. I thought, what if we could do some of the simple banners that are just plain fades and use jQuery instead of Flash to do everything. My initial idea was, what if a client has a photo of a beach, and he wants the stupid water to move. Could I do something in jQuery instead of having to rely on Flash?

The set up

My HTML for the demo is easy: a container div, 1 div with the original image, and 2 additional divs with only the water section of the image. 3 divs, 2 seperate images. The images are pretty large, because in this demo I was going for a rough effect rather than bringing the size down.

(more…)

THAT’S why we do that

There are times that we learn to do something in web development, and we do them without really knowing the reason why we do it. For instance. I learned a couple of things today about jQuery. The first thing was about return false; versus preventDefault (which I learned here). Now, I know the difference. The return false; kills event bubbling. That’s great, right? We don’t want that crap going up through the DOM. But what if you did? An example would be if you wanted to prevent a link from actually doing what the browser expects a link to do, AND have the parent div do something as well.

(more…)

Thinking it through

I can’t claim anything new with this, but I would like to show you how to use jQuery to build a very simple image gallery. This one really hit home on how important it is to think your way through what you want jQuery to do BEFORE you start writing the code. You will find that you get into trouble if you don’t.

Click here to see the demo.

Binary Solo!

Ten points if you can comment and tell me what HBO show that heading is from. Anyway, on to the code! I will leave out the css because it is really irrelevant. You can style your gallery however you want. This is just for demo purposes.

(more…)

What the hell is Ext?

That is what you are asking yourself, right? It’s another javacsript library, which I have gotten into many an argument over why one would use it over another library. Personally, I find it to be more like writing straight javacsript (which I suck at). My point isn’t to get you to use it, because I don’t care. I love jQuery, and that is that. I’ll show you the difference in this post/article between how jQuery would do something versus how Ext would do it, because I HAD to do it in Ext. On to what I had to accomplish.

The Problem

Here is the set up: I have a hard-coded div with two links in it, I am not allowed to touch the actual HTML page itself (meaning the myPage.html), but I do have to change the href of the first link, and the text that displays in it.

For you jQuery newbies, I’m going to be using first() and replaceWith() to do this, and you will be amazed by the simplicity of it. Because I am not all that familiar with Ext Core javascript library, I actually had to write this in jQuery first and then translate it over. This though is much easier than when I tried doing that with my slider.

(more…)