Posts Tagged ‘jQuery’

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

FREAKIN’ AWESOME UPDATE – 08/24/11: It appears this problem is now fixed (mostly?). HUGE shout-out to Micah Topping (a commenter below) for giving the link for this. If you now look at my cog animation above in IE7/8, this now works as I want it to, with no apparent differences. I did have to place the images within the divs rather than use a CSS background.

<div id="myWrapper"><img src="images/myImage.png" /></div>

And the CSS:

#myWrapper img {
background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;
}

One finaly note….I DID have to take this out of my script that I am using or it wouldn’t work. It was overwriting the filter being put on by the CSS (full script shown further down):

'filter': ''

Even more applause goes to Dan Tello who gave the solution here. I tried the jquery script that was provided there, but I could not get that to work.

END OF UPDATE!

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

Explaining my method of skinning the jQuery

Tuesday, June 15th, 2010

Well, if you haven’t been reading the comments on my last post. We’ve had a nice discussion, which had me misinterpreting what Joseph was saying, not once, but twice. He was NOT planning on writting a plugin, but had to come up with a way to get the delay to work so that it would go in sequence instead of all appearing at the same time. I’ll let him write a post on his blog if he wants, explaining what he did, since he can do a better job of that than I can. But it occurred to me that some developers new to jQuery, might not have understaood what I was doing. Therefore, I will explain it in this one.

Oh and a small rant, too, on some things I’ve been seeing going around the well known blogs…but we’ll save that till the end of the post.

First, onto what the hell I did. If you recall, and you should, since it was in my last post, I was showing that there was more than one way to accomplish a task in jQuery. Again, one of the many things I love about it. But I heavily favor its motto: “Write less, do more.” Here again is the code (if you need to see the html I was using, please refer to the post before this):

(more…)