This sliding thing is not working. What am I doing wrong?


HTML


This post has been edited by jackfranklin: Jun 21 2008, 12:04 PM

*Sigh* I knew it would be a stupid mistake! Working code:

Missed out a bracket and semi-colon.

Don't forget you can use Firefox to check for javascript errors.

Just errors, mind you -- don't check for warnings, because jquery.js has hairy code that will throw warnings by the bucketload. But then, so does Google Analytics.

How do I do that? Just via the Source?

Tools -> Error Console

Or, you can download the FireBug plugin. You have to be careful with the latter because it will not always pick up onload errors, you have to get them from the Firefox error console. Firebug is worth the download for its myriad of other features though.

Cool cheers. BTW, I know there is click(function... but is there a one for hover? like hover(function...)?

yes $(element).mouseover()

:hover is a css pseudo class, onmouseover is the javascript equal (use $(element).mouseout() to turn any effect off)

Actually, there's a hover() event too.

Why write two lines when you can write one? *pets jQuery*

LOL. Well, you learn something jQuery new everyday. ** Imagines Mike filing adoption papers to take jQuery and show off the 'talented boy' at family functions **

Just a question, why for the Hover are they using:

That extra $ after the append? Surely they could just use:


And what does this bit do?


I get that it finds the span and then gets rid of it, but what is the :last all about?

They are using that option so that there is a DOM Node created before being apended to the element being hovered over. so

$(this).append ( /*create new node */ $('<span> ***</span>') );

The last part finds the last <span> tag inside the element (just in case that element already has a span in it.

Ok, excuse my newbieness, but what advantage does the node have, and if I removed the $ and have:
append("<span> ***</span>");

Would it work?

Yes it would work but if you take a look at the other jQuery thread (the one Mike started) you will see that there is a difference between appending a text string and appending a DOM node. It just comes down to complying or otherwise with the W3's reccomendations.

So if you want to append something, you should try to append a document node (which $("<span> ***</span>") creates ) rather than just append the text string which is sometimes added as element.innerHTML which is not a DOM property.

It's semantics really but best practices are that for a reason

Ok thanks

BTW = if you check any post with comments on my blog, check out the effect

6 Lines of JQuery...

6 lines? A bit bloated isn't it? LOL

I would just use $('#element').slideToggle('fast');, which I assume you are already using.

Also, don't forget to prevent the default behaviour for the element (in your case a link) so you don't get taken to the top or bottom of the page when you click a link

I'm using slideToggle, but I had it on Slow. And I forgot the Preventing Default. Uploading now.

Hold on. Does that mean that, in general, I should use .append($(...)) rather than .append(...), assuming that I want the DOM and not innerHTML?

From reading the docs this was my understanding however after the discussion with you in the other jQuery thread and further examination of the source, it appears jQuery attemps to create DOM nodes regardless of which method is used.

If the append($(..)) method is used, a jQuery object of the created DOM nodes is created before it is appended -- assumably to increase speed if this element is referenced later in the script.

Using straight up append('..') does not change the behavior whereby the string is converted to DOM nodes first. I think some things may have changed since the docs were written or they haven't worded them as clearly so as to eliminate the confusion.

Their regex is pretty impressive but I'm sure there's quite a few occasions where it doesn't match which is why they have to have the innerHTML fallback.

Ah. Thanks for that -- a good explanation.

Now I just have to work out why IE is choking on my jQuery. Perhaps it's not quite as cross-browser as it claims.

Moved to Frameworks > Javascript