Posts Tagged ‘jQuery’

Using jQuery’s hover() event to the fullest

Tuesday, July 20th, 2010
Using jQuery’s hover() event to the fullest

The problem

Today at work I was given the task of using jQuery to create a very specific effect. I have an unordered list with three list items. When the user rolls over one of them, the item gets a class which sets the background to a new color, while any other item that has that class, has it removed. On top of that, if the container the list is in loses focus (meaning the cursor leaves the container), the last list item hovered on should retain the background changing class. On top of THAT, whenever one of those said list items is hovered over, one of three content divs below it should go from hidden to visible. Oh, and I have to have the second item started off as looking like the hover state. This one took me a while to figure out. I could get the normal rollover, but the keeping the class thing when the list item lost focus through me for a loop.

Click here to take a look at the final working jQuery. You’ll see what I was trying to do if you roll over and out and what not.

(more…)

Real example of jQuery’s replaceWith()…and Ext’s method

Wednesday, July 14th, 2010

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…)

IE PNG problem when used with jQuery animate()

Friday, July 2nd, 2010

Before I go into what I want to talk about tonight, I need to first toot my own horn a little. I received an email from one of the editors over at onextrapixel.com, inviting me to be a guest writer. Now who knows what will happen with that, but I am extremely excited and honored that they would ask me. I put a lot of work into The Web Machine, so I am just a little bit proud that they would ask me. I am nervous, but in a good way. Here, I can write how I want because its my blog. There, I just hope I don’t embarrass myself. Wish me luck, and I’ll keep you informed of what happens. Seriously, thanks to onextrapixel.com for asking. You made this blogger/web developer very happy just by doing so.

Now…FORWARD! Onto the meat of the post! I should warn you though, that it is partly a story too.

If you have been paying attention here, and reading my posts, you will notice I implemented an animation on my logo using jQuery. I’m quite proud that I got this to work with so little code. Or, at least that was what I thought. The main goal was to fade in the cogs one at a time in sequential order while moving them a certain distance to the left. Just for a refresher, here is the code again:

var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css({'opacity' : 0});
	i=0;
	leftAmount = 0;
 
	function cogMovement () {
		$(cogs[i++]).animate({
				'left': 63 * leftAmount++,
				'opacity': 1,
				'filter': ''
			}, 800, arguments.callee);
 
	};
	cogMovement();

(more…)

jQuery Sequential animations revisited…real world example

Wednesday, June 23rd, 2010

I am thinking of redesigning my main website using my JC Designs cog logo that you see at the top of this blog. I thought to myself, wouldn’t it be cool if I animated it a little? In fact, why not do something that I did a few posts ago (can view post here), and move each cog left while fading in. Whatever I come up with for the design, won’t look like this blog, but I do want to keep the logo. So I did a test run to see if it would work.

Click here to see what I came up with.

(more…)

Testing out jQuery Tools…pure awesome

Thursday, June 17th, 2010

jQuery Tools 1.2I’ve seen this site before, jQuery Tools – The missing UI Library for the Web, and I got a tweet about it again this morning. I was sick of getting links to it, so I decided what the hell, lets try this thing out and see what it does. It does some cool ass stuff, THAT is what it does!

And to make it even better, it is extremely easy to get things up and running. I tried out the Tabs – UI Tool, and the Tooltip (which you will see on the second pane). I have created a demo just to show you how easy it really is. They have demos of all of their tools on their site, with really easy to follow instructions for each to get them going. Go to the link above to check out all that it has available. But just to show you how freakin’ simple it is, here is a demo I did with the Tabs tool…took me less than 5 minutes.

Click here for the demo.

(more…)