I got the changes implemented that you made, Karl and things are working very well! I've still got to study just what you did to see if I understand it.
About the last issue I'm facing is how the details div and content for that div is displaying. If you'll go to http://c21ar.wsm-dev.com and mouse over the "Buyers" menu link, you'll see what I'm talking about. The div slides in perfectly, but the content, actually being outside the div (I've got to check that...) is being displayed before the div completely drops down. Ideally, the content would drop down with the div. Any way to modify things so the content slides down with the div? I will look at the code, but without understanding how it's all working, I'm afraid to make many changes. Any ideas? I really appreciate your help! Rick PS - And I'm still looking for that wish list! You've gone "above and beyond" helping on this project with the coding and rebuilding the site demoing your changes and I want to show my appreciation! :o) Got a wish list on Amazon? > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick > Faircloth > Sent: Wednesday, January 16, 2008 3:53 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > 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 > > >>> > > >>> > > > > > > > > >
