[jQuery] Need help building a jQuery dropdown menu
Hi folks
I'm just starting out with jQuery. I want to make a simple 'ul'
dropdown menu to improve my understanding. The basic flow is this:
'ul.menu li ul' has display:none on hover of li, get store height
of 'this' hidden ul set height of 'this' ul to 0 set display to
block animate height to original stored height
I know there are already some great plugins for dropdowns, but I
really want to roll my own to get a better understanding of jQuery.
So far I have managed the following, very badly done (see live version
here - http://jsbin.com/eduvi):
var $j = jQuery.noConflict();
$j(document).ready(function(){
// Get height of current hidden ul
$j(ul.menu li).hover(function() {
getHeight($j(ul, this).height());
});
// Set height to 0px
$j('ul.menu li').hover(function() {
$j(ul, this).css({height:0px});
});
// Set display to block
$j('ul.menu li').hover(function() {
$j(ul, this).css({display:block});
});
// Animate height to stored height
$j('ul.menu li').hover(function getHeight(h) {
$j('ul:first', this).stop().animate({ height : 100% } , 400 );
});
// Display height of current hidden ul
function getHeight(h) {
$j(div.test).text(The height for the hidden ul is + h +
px.); }
});
I'd like to know how do I get it to use the stored original height, in
place of that 100%.
And secondly, I'm sure this can all be condensed down to just a few
lines, but don't really have a clue how to do that yet.
Any help very much appreciated!
[jQuery] Re: Need E-Book
These tutorials are a great way to get started: http://www.youtube.com/watch?v=Hk5oXFtYLwEfeature=related http://www.youtube.com/watch?v=J64Pmi_jEiQfeature=related On Aug 12, 1:50 pm, naresh karankal nkaran...@gmail.com wrote: Sir, I beginner of J query, so I need complete e_book of j query. Thank You -- Naresh Karankal Life is the art of drawing sufficient conclusions from insufficient premises
[jQuery] Change bg image on hover
Hi guys
I have a dropdown menu. When the dropdown is hovered, I need a bg
image to show, then slowly fade out when the mouse leaves. I wrote
this little script for it:
var $j = jQuery.noConflict();
$j(function(){
$j(#dropdown-nav li ul li).mouseover(function(){
$j(this).stop().before('li class=hoverbg/li');
}),
$j(#dropdown-nav li ul li)
.mouseleave(function(){
$j(#dropdown-nav li ul
li.hoverbg).stop().fadeOut(300, function()
{
$j(this).remove();
});
})
});
So it adds an extra li above the one being hovered (which via css is
positioned absolutely so the next li displays over the top). Anyways,
it works fine, but sometimes when hovering it adds 2 or 3 li's in
there. I thought the stop() would sort that, but it hasn't.
Any ideas why that's happening? And could this be written better? It's
one of my first attempts with jQuery so go easy on me!
[jQuery] Re: Change bg image on hover
I should add that if I use mouseenter, it fixes the problem, but then
for some reason my dropdowns parent won't stay active, whereas it will
on mouseover.
On Aug 11, 10:08 pm, sammahoney samom...@gmail.com wrote:
Hi guys
I have a dropdown menu. When the dropdown is hovered, I need a bg
image to show, then slowly fade out when the mouse leaves. I wrote
this little script for it:
var $j = jQuery.noConflict();
$j(function(){
$j(#dropdown-nav li ul li).mouseover(function(){
$j(this).stop().before('li class=hoverbg/li');
}),
$j(#dropdown-nav li ul li)
.mouseleave(function(){
$j(#dropdown-nav li ul
li.hoverbg).stop().fadeOut(300, function()
{
$j(this).remove();
});
})
});
So it adds an extra li above the one being hovered (which via css is
positioned absolutely so the next li displays over the top). Anyways,
it works fine, but sometimes when hovering it adds 2 or 3 li's in
there. I thought the stop() would sort that, but it hasn't.
Any ideas why that's happening? And could this be written better? It's
one of my first attempts with jQuery so go easy on me!
[jQuery] Re: Need a jQuery 'equal height columns' script
Apparently, this is how the script I have works - I guess it's possible to do the same thing with jQuery? The script accepts a list of elements, then creates an array of their heights + top position. It then needs to sort that array numerically using the sortNumeric() function and then will set the eventual lowest baseline. It should then loop through each of the elements and set their heights to be the baseline (i.e. the lowest point) minus their top position, using a simultaneous equation: bottom = height + top, therefore height = bottom - top. On Apr 2, 10:15 pm, sammahoney samom...@gmail.com wrote: Well, I found the original, so here it is -http://v3.thewatchmakerproject.com/journal/354/equalising-box-baselin... Anyone know of anything similar for jQuery?
[jQuery] Equalize baseline script needs converting to jQuery
Hi All Posted this under a different title but I think 'equalizing baseline' is a better description than 'equalizing columns'. Basically, I need this script converted to jQuery - http://v3.thewatchmakerproject.com/journal/354/equalising-box-baselines-with-javascript I'm more than happy to pay for this if someone can do it for me (25USD via PayPal). Here's an example of it working - http://jsbin.com/ofehi Sam
[jQuery] Need a jQuery 'equal height columns' script
Hi All I have an old script for equalizing columns. Can't remember where I got it, but I need something similar in jQuery - I've found a few so far, but they all equalize columns that start on the same row on a page - I need something that can equalize columns that start at different heights... You can see a basic example of it here - http://jsbin.com/ofehi - you can view the source to see the script. Any links to jQuery scripts that can do something similar would be much appreciated. Cheers Sam
[jQuery] Re: Need a jQuery 'equal height columns' script
Thanks for the reply, but unfortunately neither of them are what I need - I've already tested both. They both only work if the elements to be equalized are starting on the same row. These two scripts work by basically finding the height of the tallest column, then applying it to the shorter columns. But in my case, I need something exactly like the script I showed in my example - http://jsbin.com/ofehi - where the 3 boxes are being given different heights so the baseline of each is on the same row, as opposed to being given all the same height. I guess it's like an inverted version of the scripts you listed! On Apr 2, 6:00 pm, Jack Killpatrick j...@ihwy.com wrote: http://www.cssnewbie.com/equalheights-jquery-plugin/ http://www.tomdeater.com/jquery/equalize_columns/ - Jack sammahoney wrote: Hi All I have an old script for equalizing columns. Can't remember where I got it, but I need something similar in jQuery - I've found a few so far, but they all equalize columns that start on the same row on a page - I need something that can equalize columns that start at different heights... You can see a basic example of it here -http://jsbin.com/ofehi- you can view the source to see the script. Any links to jQuery scripts that can do something similar would be much appreciated. Cheers Sam
[jQuery] Re: Need a jQuery 'equal height columns' script
Here's how my example looks without any script, just so you can see. I need to go from this - http://jsbin.com/eguze - to this - http://jsbin.com/ofehi On Apr 2, 7:11 pm, sammahoney samom...@gmail.com wrote: Thanks for the reply, but unfortunately neither of them are what I need - I've already tested both. They both only work if the elements to be equalized are starting on the same row. These two scripts work by basically finding the height of the tallest column, then applying it to the shorter columns. But in my case, I need something exactly like the script I showed in my example -http://jsbin.com/ofehi- where the 3 boxes are being given different heights so the baseline of each is on the same row, as opposed to being given all the same height. I guess it's like an inverted version of the scripts you listed! On Apr 2, 6:00 pm, Jack Killpatrick j...@ihwy.com wrote: http://www.cssnewbie.com/equalheights-jquery-plugin/ http://www.tomdeater.com/jquery/equalize_columns/ - Jack sammahoney wrote: Hi All I have an old script for equalizing columns. Can't remember where I got it, but I need something similar in jQuery - I've found a few so far, but they all equalize columns that start on the same row on a page - I need something that can equalize columns that start at different heights... You can see a basic example of it here -http://jsbin.com/ofehi-you can view the source to see the script. Any links to jQuery scripts that can do something similar would be much appreciated. Cheers Sam
[jQuery] Re: Need a jQuery 'equal height columns' script
Well, I found the original, so here it is - http://v3.thewatchmakerproject.com/journal/354/equalising-box-baselines-with-javascript Anyone know of anything similar for jQuery?
