Thanks, Karl! This is a chance, too, for me to find out what the "expander" plug-in is! Haven't heard of that one, yet...
Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Karl > Swedberg > Sent: Wednesday, January 16, 2008 8:46 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > Hey Rick, > > Glad to hear that you're making progress! I'll take a look at the page > again tonight and offer a suggestion (and possibly a demo) for getting > the content to slide down with that details div. > > Only because you asked ... you can find a link to my amazon.com wish > list on my Expander plugin page: > > http://plugins.learningjquery.com/expander/ > > (wow, I just shamelessly promoted my plugin AND publicly announced > where my wish list could be found. Brazen!) > > > --Karl > _________________ > Karl Swedberg > www.englishrules.com > www.learningjquery.com > > > > On Jan 16, 2008, at 7:56 PM, Rick Faircloth wrote: > > > > > 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:jquery- > >> [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:jquery- > >>> [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 > >>>>>> > >>>>>> > >>>> > >>>> > >>>> > > > > > >
