Hi, Karl... Have we stalled out on this project? I've been concerned about asking too much of you. If you want to transition this to a paid project, just let me know!
Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick > Faircloth > Sent: Thursday, January 17, 2008 12:05 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > Well... my attempts to fix the details div showing with content > didn't work. At least I think I changed all the padding and line-heights > that I attempted to change back to the way they were. However, now the > issue seems to have "disappeared"! Whatever... as long as it works! > > The last issue I see now is that *sometimes* when I move the mouse between > menu items, especially the home and buyers menu items, the details-div slides > up > and the details content remains on the screen. It's not always that way, but > it > does happen in both IE and FF. Any ideas on that? > > From what I can tell, you've taken the route of separating the actual div > with the > details from the div that slides down. Is that part of what complicates the > synchronization of the "display div" and the "content" or "details" div? > > Would it be simpler to actually put the details *inside* the display div to > eliminate the possibility of details being left on the screen without the > background div? > > It would seem that placing the details actually in the display div would tied > them > together so that if the display div is visible, the details must be, too, and > vice versa. > > And, this is just minor at this point, the details would actually be sliding > up and down > with the display div. > > Looks like this may be a "two-wish-list-gift" assistance! :o) > > Thanks, > > Rick > > > -----Original Message----- > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick > > Faircloth > > Sent: Thursday, January 17, 2008 11:17 AM > > To: jquery-en@googlegroups.com > > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > > > > Ok... thanks, Karl. It seems to be working better. > > I'm going to make a change in the padding of the ul, #id="ul-index" > > because the bottom of the li's contained therein aren't currently > > reaching as far down as the #menu-index... there's a gap of about > > 6px at the bottom which allows the details div to expend without > > showing the menu content. > > > > My initial results show this solution will work. I'll make you mods > > first, then mine, then test on IE6, IE7, and FF2 (Windows All) and > > report back. > > > > Thanks, again for all the work! > > > > Rick > > > > > -----Original Message----- > > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of > > > Karl > > > Swedberg > > > Sent: Thursday, January 17, 2008 10:28 AM > > > To: jquery-en@googlegroups.com > > > Subject: [jQuery] Re: Still working out "drop-down div menu"... > > > > > > > > > Hi Rick, > > > > > > After several failed attempts, I think I have this working for you. I > > > had to set a flag for the menu-details div's visibility (I called it > > > "bVis"). It's initially set to false. In the mouseover argument of $ > > > ('#menu-index').hover(...), it gets set to true in the callback of $ > > > ('div.menu-details').slideDown(). It thengets reset to false on > > > mouseout. > > > > > > Then for the mouseover argument of ... .find('li').hover(), it does a > > > slide down of the corresponding div if bVis is false and a > > > simple .show() if it's true. Worked in my limited testing with FF 2 Mac. > > > > > > http://test.learningjquery.com/c21.html > > > > > > --Karl > > > _________________ > > > Karl Swedberg > > > www.englishrules.com > > > www.learningjquery.com > > > > > > > > > > > > On Jan 16, 2008, at 9:42 PM, Rick Faircloth wrote: > > > > > > > > > > > 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:jquery- > > > >> [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 > > > >>>>>>>> > > > >>>>>>>> > > > >>>>>> > > > >>>>>> > > > >>>>>> > > > >>> > > > >>> > > > >>> > > > > > > > > > > > >
