jquery slide

[wesmck20]

I tried putting an image link inside the box, but when I hover over it the image shows up in the div before the box actually slides down. Any suggestions?

[MrMaestro14231]

you should get notepad++ (unless you already have)

[optikalefxx]

@MrMaestro14231 i use textwrangler on the mac. It blows notepad++ out of the water

[csyicker]

3:26 Wrong..... border-radius:12px; works in all versions of IE.(maybe not all, but you get me).

[calctmnt]

I don't know if any one has pointed this out, but the CSS for rounding corners in Firefox is wrong. It's supposed to be -moz-border-radius-topleft: -moz-border-radius-topright: and so on and so on. Other than that, great stuff. Thanks for the tut. :)

[BopjoWebDesign]

This looks cool but there's gotta be a better way to do it. You're using slideToggle() twice and it's already a toggle, so using it twice seems redundant. I would think it would be better to have slideDown() for the first hover function argument then slideUp() for the second. It does the same thing but seems more correct in terms of the jquery method used.

[FreddieBambino]

wow, cool video. Thanks alot

[pbsallad]

I don't know if any one has pointed this out, but the CSS for rounding corners in Firefox is wrong. It's supposed to be -moz-border-radius-topleft: -moz-border-radius-topright: and so on and so on. Other than that, great stuff. Thanks for the tut. :)

[calctmnt]

@pbsallad Youre right

[Thealedela]

Nice Tut optikalefxx. WHY?  Because it is done at a good flowing pace, and yet informative. Nice narration to. I know all the stuff in this tut, but i wish I had seen it when I was learning. Good effort!!!

[pstap92]

Could you please help with this, I was able to change it so that instead of when you hover over it and it slides down, you have to click it. I achieved this by changing .hover() to .click(). However how could I make the header change to a different color when the box is showing, and back to orange when the tab isn't. Please help, I'm new to JQuery.

[optikalefxx]

@pstap92 So what you need to do is in the click, select the tab with jquery and run .css("background-color","blue"­)

and then for making it go back, whenever it slides back up, also have it select the tab and do .css("background-color","orang­e")

If you send me code I can show you with your code.

[pstap92]

@optikalefxx  I can make it change color, however I can't get it to change back.

[optikalefxx]

@pstap92 your hover must not be right. make sure you have the right syntax for the hover method.

you can always use mouseover and mouseout as separate functions instead of hover.

[c532869]

Just a note that this video uses code which is *not* supported in all the major browsers - for instance, the rounded corners code that is used is not support in the latest version of IE which is version 8.

[optikalefxx]

@c532869 This makes me smile.

Screw microsoft.

[D3w10n]

@optikalefxx Amin

[xyn333]

@optikalefxx yeah truly, i agree with u fully, i mean dear Gawd,, if u can program jquery why would u use IE8.. or IE in any universe or for any reason even as an end user... most people are finally adapting to firefox atleast and samsung is pushing the google browsing concept... so im sure 2 years from now everything will be a ok for any scripts.. screw IE9 aswell... go chrome or go home.. yay for safari and dnt run with the flocks get firefox... lol.. thanks for the awesome tut.

[TheSuwage23]

ic.. im kinda new to jquery.. anyway to show a quick clip on how to make the boxes go upwards instead? :D

[TheSuwage23]

hey.. just wondering.. how do you make the bars slide upwards instead of downwards? many thanks.. please reply asap.. :D

[optikalefxx]

@TheSuwage23 you would need to custom animate the height.

first setup your html so that as you adjust the height manually you get the effect you want. Then setup a .animate() to follow what you did manually.

[nickwyatt123]

could you make an onclick on onmousedown I am new to using jquery.

[nickwyatt123]

How do you do that big space? Like I have to press the space bar 5 or 6 times to get that lenght, when you press it once.

[optikalefxx]

@nickwyatt123 in the code? im using the TAB key.

[johnprattchristian]

That's sweet dude! :) Thank you so much for this video; it made it really simple for me, and launched me into the world of jquery. Bless you

[saintdo]

cool thx

[conillusionist]

thanks, cool tutorial

[intense7]

You made a slight mistake with your rounded edges.

For mozilla you need to use this "-moz-border-radius-bottomleft­:10px;" format or else it won't work.

[jlseijof]

hi nice job!, it only works whit mozilla? or it can be used by any explorer?

[optikalefxx]

you should test it, but since im using jQuery it should work all the way down to IE6. Although i don't recommend using IE6 because you will inevitably get a virus.

[zigzag1234567890]

i will send you a private message of my complete code

[natelake1nate]

@zigzag1234567890

Totally innovative... nice job!

Would you mind giving me your code as well...

Thanks

[zigzag1234567890]

um hey, how do you put a video as the content

[trtlpwr80s]

Thanks a lot for this tutorial. It works great on my website! I would really like to use the mouseover and mouseout commands instead of the hover, but I am not too familiar with javascript (the "if" statement you are discussing above). If you have any time, could I get that code from you (or anyone)? I would appreciate it a lot.

[optikalefxx]

send me a message with details

[giantsfan245]

Nice job. But this would not work to well for a menu since with the hover action, once you hover away from the .header, the displayed .box toggles back. Is there a away to keep the displayed box open until you hover away from BOTH the .header and .box?

[optikalefxx]

what you mean to say, is can we keep the displayed box opne until you hover away from both the .header OR the .box. If you say it like that, you can almost see how the if statement will look. So, ill leave it to you, use mouseover and mouseout instead of hover, and use that if condition that you almost wrote already. Let me know if you need help.

[BopjoWebDesign]

@giantsfan245 - using a click handler instead of hover seems more user-friendly to me. Then the code would be shortened to just:

$('.header').click(function () {

$('.box').slideToggle();

});

[codeCola196]

awesome job, can't wait to see more

[optikalefxx]

By the way, in the video, when I refer to ($this) im referring to the Header div, and you see in the HTML how "box" is next to "header"

Thats why i am animated $(this).next() which is equivelant to $(".header").next() and equivelant to $(".box").slide

The trick is that I want to use next() so I dont need to refer to each element individually.

[optikalefxx]

Ok, and which element specifically do you want to slide?

[optikalefxx]

Can you post the HTML too? When you use ($this) you are referring to the element that has $(".class") when you $(this).next() you are referring to its sibling. You may be trying to get to its CHILD instead. If i see the HTML i can tell you what you gotta do.

[NikkexD]

Alright. I'll post the url on the forum. Thnx for the help.

[NikkexD]

I posted it in the wrong category on the forum, so they asked me to re-post it.

codingforums com/showthread php?p=812701#post812701

(add the dots)

[optikalefxx]

if it has a class then you do $(".className")

if it has an id then yo do $("#idname")

[NikkexD]

I just tried it. It does slide, but it doesn't slide the right element. It slides the element below.

I posted it on a forum. Please take a look. :)

codingforums com/showthread php?t=165439

(add the dots)

[NikkexD]

Is there a way to tell the jquery to slide a certain div tag? Because i've watched this video three times now and i can't see you entering anything about the "box" div in the jquery.

[NikkexD]

Awesome! Thnx dude :D