That looks great, Karl! And I see the changing content, also!
Where's your wish list? :o) Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Karl > Swedberg > Sent: Wednesday, January 16, 2008 3:18 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > > On Jan 16, 2008, at 7:21 AM, Rick Faircloth wrote: > > > > @Karl: > > > > Hi, Karl... and thanks for the reply! > > > > I appreciate the work you did on the site. > > > > The problem I noticed right away is that when the > > link is moused-off, then the corresponding details div slides up. > > The details for each menu link will need to stay down until a user > > mouses over it and then back off or until the user moves horizontally > > to a new menu link. The details div is not just for information, but > > will contain more links for users to click. > > Hey Rick, > > No problem. > > Let me guess: you're using Internet Explorer, right? ;-) > > It was working fine for me in FF, but because of a minute difference > in where the browsers were positioning the top of each li's div, and > because of a weird z-index issue in IE, it was borking in IE. > > Take a look again. It should be working fine now. You'll want to grab > the style rule out of the <head> and put it in c21ar-ie7.css and c21ar- > ie6.css instead: > #image-wrapper { > z-index: -1; > } > > Again, you can see the test page here: > http://test.learningjquery.com/c21.html > > > --Karl > _________________ > Karl Swedberg > www.englishrules.com > www.learningjquery.com > > > > > > > Hamish attempted to overcome that problem, but with his version, if a > > user moves across the menu horizontally, then the details div that > > is on display does slide up when a new one appears, so they just > > stack up. > > > > btw, generating the details div with jQuery was a nice touch. Once > > I get > > past the operational problems of the setup, I'll have to see about how > > to get the content into each div. Perhaps some sort of "include" > > inside > > each div that pulls in external HTML content. > > > > Any ideas on how to keep that menu div open if a user is mousing > > over it, > > letting it slide up if a user mouses off of it or letting it slide up > > if the user mouses over link horizontally without mousing over the > > details div? > > > > @Hamish > > > > Thanks for the reply and the code, Hamish! > > > > You can see from my remarks to Karl above, that while your version > > of the > > code does keep the details div open until a user mouses off of it, > > it also > > allows a details div to stay open when a user mouses over the menu > > links > > horizontally. > > > > There's no trigger to cause the div to slide back up if the user never > > mouses over the details div. > > > > Any ideas? > > > > Rick > > > > > > > >> -----Original Message----- > >> From: jquery-en@googlegroups.com [mailto:jquery- > >> [EMAIL PROTECTED] On Behalf Of Karl > >> Swedberg > >> Sent: Wednesday, January 16, 2008 12:52 AM > >> To: jquery-en@googlegroups.com > >> Subject: [jQuery] Re: Still working out "drop-down div menu"... > >> > >> > >> Hey Rick, > >> > >> I did a little overhaul on your page and got something working. > >> Changed a bit of HTML and CSS along with the jQuery code. CSS could > >> use some tweaking still, probably increase the top and bottom padding > >> on the links (and then you might have to adjust the top of div > >> class="menu-details" > >> > >> By putting the divs inside each li, it made it a lot easier to get > >> each one to show when it should. Since the menu-details div is now in > >> the page only for the visual effect, I pulled it out of the HTML and > >> created it via jQuery. > >> > >> Here is the code: > >> > >> $(document).ready(function() { > >> $('<div class="menu-details"></div>').appendTo('#image- > >> wrapper') > >> .add('#ul-index div').hide(); > >> > >> $('#menu-index').hover(function() { > >> $('div.menu-details').slideDown(); > >> }, function() { > >> $('div.menu-details').slideUp(); > >> }) > >> .find('li').hover(function() { > >> $(this).find('div').show(); > >> }, function() { > >> $('div', this).hide(); > >> }); > >> }); > >> > >> And here is the page: > >> > >> http://test.learningjquery.com/c21.html > >> > >> > >> --Karl > >> _________________ > >> Karl Swedberg > >> www.englishrules.com > >> www.learningjquery.com > >> > >> > >> > >> On Jan 15, 2008, at 10:46 PM, Rick Faircloth wrote: > >> > >>> > >>> Hi, all. > >>> > >>> I'm still trying to work out a drop-down div > >>> for my horizontal menu. > >>> > >>> I've tried various approaches and the closest I've > >>> been able to come to the proper animation so far > >>> (which still isn't correct) is with this code > >>> (written in long-form for now and just > >>> for the first two menu items): > >>> > >>> $(document).ready(function() { > >>> > >>> $('.menu-details').hide(); > >>> > >>> $('#a-index').mouseover(function() { > >>> var answer = $('#menu-details-index'); > >>> if (answer.is(':not visible')) > >>> answer.slideDown(); > >>> > >>> $('#a-index').mouseout(function() { > >>> var answer = $('#menu-details-index'); > >>> if (answer.is(':visible')) > >>> answer.slideUp(); > >>> > >>> $('#a-buyers').mouseover(function() { > >>> var answer = $('#menu-details-buyers'); > >>> if (answer.is(':not visible')) > >>> answer.slideDown(); > >>> > >>> $('#a-buyers').mouseout(function() { > >>> var answer = $('#menu-details-buyers'); > >>> if (answer.is(':visible')) > >>> answer.slideUp(); > >>> }) > >>> }); > >>> }); > >>> }); > >>> }); > >>> > >>> You can see the results of my efforts so far at http://c21ar.wsm-dev.com > >>> . > >>> > >>> The problems I'm trying to overcome: > >>> > >>> - the 'drop-down div' works only if the first menu item "Home" is > >>> mouse-over first > >>> > >>> - once the div drops, and I mouse-off the link, the div closes...of > >>> course I need it to stay open > >>> unless I mouse-off the link or the corresponding drop-down div > >>> > >>> - after I mouse-over the first two links quite a few times, even > >>> slowly, I get an alert error > >>> that states "Stack overflow at line: 1" What does that mean and > >>> can this be overcome or is > >>> my 'drop-down div' menu inherently flawed? I have to refresh the > >>> page to get the menu working > >>> again > >>> > >>> - lastly, but my significantly, I've got to figure out a way to have > >>> the system realize what > >>> content should be displayed in the drop-down div based on the menu > >>> link that is moused-over > >>> > >>> Would someone care to show me some code that would help with any of > >>> these problems? > >>> If this is going to take someone too much time to help out "vacuus > >>> persolvo", I'm willing to > >>> purchase something off a wish-list or even to pay for some hand- > >>> holding. > >>> > >>> The problem I face is time... I'm working on a fairly extensive Real > >>> Estate site and I need to > >>> get past this piece of the puzzle. If I can't solve it soon, I'll > >>> just have to go to a regular > >>> drop-down menu, which I'd rather avoid. > >>> > >>> I just haven't come far enough with jQuery to code this > >>> myself...it's too complex for me at this > >>> point. > >>> > >>> Thanks! > >>> > >>> Rick > >>> > >>> > > > > > >
