Hi, Now, I feel this is the right way to do this (and the most simple, also):
The menu caption (e.g. Add an Item (ยป)) and the menu itself should be in the same container (ul, div, whatever). Then you bind the hover event (http://docs.jquery.com/Events#hover.28_over.2C_out_.29) $('#mymenu').hover( function () { // When the mouse enters $(this).addClass('showElements'); }, function () { // When the mouse leaves $(this).removeClass('showElements'); }); By default the styling will be: #mymenu li { display: none; } And the class .showElements li { display: block; } I believe this will fix the flickering when mouse move in and out. About the part with showing different divs on a anchor click I would do it like this: <a href="#" divToShow="correspondingDivId">show div1</a> <!-- Remember, in XHTML - X stands for eXtensible --> Then in jquery: $(#mymenu a).click(function () { $('some class or some other rule to select all the divs').hide(); $('#' + $(this).attr('correspondingDivId')).show(); }); About the ajax it's also easy: $('div to load data to').load(url); (http://docs.jquery.com/Ajax) ---- The previous 2 steps together: $(#mymenu a).click(function () { var anchorTag = $(this).attr('someTag'); // This you can pass to the server $('the ajax div').load(url + '?tag=' + anchorTag); }); Regards, Emil Ivanov On May 16, 10:20 pm, "[EMAIL PROTECTED] d" <[EMAIL PROTECTED]> wrote: > *Not sure why my prev message isn't showing up, so posting again. > > Thanks Karl, I tried using the functions you suggested, but now I > think using id's is the best approach... Earlier I wasn't keen on > using them because I want to dynamically generate/delete list items... > > Any way.. All I have is a dropdown with a list that changes the div > container below.http://cattails.biz/js/jq/try.html > > Problems I'm having now: > 1. Need the dropdown to appear on hover instead of click > 2. The hover needs to have a lag after the mouseout. Some stickyness > that is.. > > Also how can I load forms via Ajax, is it easy enough..? > > Hints are good too.. Just show me the right way and I will do my > research. > > Thank you for reading the problem.. > > Harsh > > On May 15, 7:01 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote: > > > Why don't you want do this "without naming ids and classes"? > > > My recommendation would be to use something like this: > > > $(function() { > > var targets = $('[EMAIL PROTECTED]'); > > if ( !targets.length ) return; > > > var firstTarget = targets[0]; > > var pageLinks = $('[EMAIL PROTECTED]"#"]'); > > > targets > > .hide() > > .each( function() { > > var target = $(this); > > function showTarget() { > > targets.hide(); > > target.show(); > > return false; > > } > > $(pageLinks) > > .filter('[EMAIL PROTECTED]"#' + this.id + > > '"]') > > .click( showTarget ); > > > if ( this == firstTarget ) > > showTarget.apply( firstTarget ); > > }); > > > }); > > > You use it like this: > > > <html> > > <head> > > <script type="text/javascript" src="jquery.js"></script> > > <script type="text/javascript" src="hashShow.js"></script> > > <title>Test</title> > > </head> > > <body> > > <p><a href="#section1">Show "Section 1"</a></p> > > <p><a href="#section2">Show "Section 2"</a></p> > > <div class="hashShow" id="section1"> > > <h1>Section 1</h2> > > </div> > > <div class="hashShow" id="section2"> > > <h1>Section 2</h2> > > </div> > > </body> > > </html> > > > There's also an added advantage that should JavaScript be not > > available the links will still "work". > > > I'll be putting this into a more flexible plugin format a little > > later. If anyone's interested let me know. > > > Karl Rudd > > > On 5/16/07, [EMAIL PROTECTED] d <[EMAIL PROTECTED]> wrote: > > > > Hi there, I just started to working on jQuery and am finding it > > > extremely easy to use. However I've been trying to find a solution to > > > a simple navigation problem here.. > > > > My markup has a list with a few 'li' items. So for each click on a > > > list item it would show the respective div container and hide the > > > rest... > > > > <!-- List Menu --> > > > > <div id="dropbox"> > > > <ul> > > > <li>Cash</li> > > > <li>Personal Assets</li> > > > <li>Certificates of Deposit</li> > > > </ul> > > > </div> > > > > <!-- Div Containers --> > > > > <div class="formcash"> > > > <h2>Cash</h2> > > > </div> > > > > <div class="formpersonal"> > > > <h2>Personal Assets</h2> > > > </div> > > > > <div class="formdeposit"> > > > <h2>Certificates of Deposit </h2> > > > </div> > > > > Can I some how do the toggle without naming ids and classes? > > > > Any ideas people?
