9 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ramblingwood says
An ok post – but please find someone to proofread before you post. It would be much more easily followed if thoughts flowed from one subject to the other easily, subjects and objects of sentences were obvious and words were not overused in the same sentence and spelled correctly. Your otherwise good points were quite difficult for me to ferret out.

So, my information about jQuery was correct and useful, but it had many English errors, causing readability issues?

It was proofread. I must go speak with that proofreader. He has always served me well on my long essays, maybe this is over his head.

If you don’t mind, would you point out some of the issues, because I would love to revise it to make it more clear for others. I would like to say that for some reason, many linebreaks were randomly added, and in some cases removed, which for me is severely affecting readability. Also, some code snippets were not properly encoded.

@justinrains I agree, but that is browser specific and not jQuery.

32 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+7 more
andrew8088 says

Great article! And I had to chuckle at your bio, which describes me almost perfectly: I’m on Windows 7, prefer Notepad++, and studying hard for several courses!

23 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+2 more
duellsy says

I really like point #6, I didn’t know about that one… what a time saver!

Done once, and it’s just there for everything you need, love it :)

2 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 1+ items on Envato Market
aaronworks says

I think all of those points are covered in the book “JavaScript: The Missing Manual” by David Sawyer MacFarland.

I started out as a n00b dabbling in JavaScript without a clue, but this book quickly filled in the gaps for me. It also focuses on the jQuery framework in a thoughtful structured manner (meaning lots of great hands-on tutorials!) which have allowed me to get quickly up to speed.

While articles like this one are useful for presenting what we should know, books like McFarland’s get us there painlessly! Definitely worth adding to your library.

2 posts
  • Has been part of the Envato Community for over 5 years
brianarn says

Hello! I wanted to say thanks for writing an informative and useful article. I’ve shown that $(window).load trick to people before when they needed to wait for an image load.

I wanted to give some feedback though, to make a point a little more specifically correct. It’s a nit-pick, I suppose, but something worth noting.

In point four, talking about animations, it’s written “Notice how on line 21, I didn’t add .stop(), if I did, when the mouse would leave the link, it wouldn’t animate and it would just stick part of the way out.” That’s not entirely correct, I don’t believe, and my testing bears out my thinking so far.

In this example, the left padding is being adjusted, but in absolute ways. It’s being set to 24px and 12px specifically. Therefore, stopping the animation and animating back to one of those absolute positions is okay. I was unable to create this hanging issue with using absolute values.

A problem could occur in this case if one were using relative positions (setting it to +=12px or -=12px, which are legit options in jQuery for animation). If you had an example with it just hanging there when using .stop and absolute values for animating, I’d like to see it, since I can’t duplicate it. :)

Also, it looks like you’re disabling queuing of the animation. I suspect that the lack of queuing is what makes this code work without the stop, but it means that technically without the stop, the animation is working both directions during the overlapping milliseconds but because the animating to the left was the latter one, it’s the one that applies. It seems like it’d be a bit simpler in the code to use .stop rather than disabling queuing and such, and it does work well that way in my testing.

It’s a great article—I just am curious as to the reasoning behind adding in extra options and such, when the code doesn’t necessarily need them and it seems like it could be simplified a bit. :)

9 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ramblingwood says

@aaronworks I don’t see how a generic Javascript book would cover things specifically about jQuery.

@brainarn I have experienced the problem with the relative animations hanging also, and this article didn’t really cover that. It covered a build-up of animation experienced when the queue is followed (demo here: http://themeforest.s3.amazonaws.com/128_jquery/demo/demo_1.html ). The only way I have gotten around the relative animations hanging is finding the original left padding, and then on the animation back, use that absolute reference. It doesn’t really solve the problem, but it works and isn’t that hard to do.

I see what you are talking about on line 21. I had some good reason for that when I wrote this 5 weeks ago, but I can’t remember what that was.

2 posts
  • Has been part of the Envato Community for over 5 years
brianarn says

Using .stop on both sides seems to handle it okay though, without worrying about the queue, it seems. I just can’t seem to duplicate any hanging issue. :)

IMO , “It doesn’t really solve the problem, but it works” is an okay solution on occasion when you’re working on something internal, but seems like a bad thing to present in a tutorial. It’s teaching people “Just do this and it works” without any rationale.

I mean, it does work, and one of the beautiful things about jQuery is that it lets you approach things in a different way—just seems like it could have used a bit more reasoning for things. :)

9 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ramblingwood says

I completely agree, but unfortunately I wrote this so long ago, all I can imagine is that I changed two things and once and assumed that was the fix to whatever problem I was having.

One could write a whole tutorial on an in depth explanation of the finer workings of the animation method in jQuery, and I didn’t feel it was the time, the place and I didn’t really have much space because I didn’t want the tutorial to be too long.

128 posts
  • Has referred 200+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
GeertDD says

Good article. I remember to have learned a lot from this article too:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

3 posts
  • Has been part of the Envato Community for over 5 years
williamrouse says

I enjoyed the article. There is something that I lack understanding of in the Javascript. Could you point out what is the mechanical or programmatic connection when the pointer is moved off the links? I was expecting to see a function name like onHoverOff, or something of that nature. I don’t see how the script know what function to execute when the cursor moves off the links. Thanks!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by