Hi Ricardo,
Thanks for that, quite clear and I follow what you wrote.
My issue is that the hoverintent function runs on the menu tabs, not
on the submenu panels.
So, the mouse hovers over one of the menu tabs, i.e. .nav_company, and
that should then trigger the display of the content panel below it
(.nav_sub_company in this case).
I'm not entirely sure how to modify the code you supplied to achieve
this?
If you can help, that would be great!
Cheers,
Rob
Ricardo Tomasi wrote:
> This way you'll have to repeat it for each element anyway. The
> important thing is to have access to all of them at once, doesn't
> matter if by a common class or doing it manually:
>
> var $submenus = $
> ('.nav_sub_default, .nav_sub_products, .nav_sub_markets,
> .nav_sub_tools_support, .nav_sub_news_events, .nav_sub_company');
> $submenus.hoverIntent(function(){
> $submenus.removeClass('onscreen').addClass('offscreen');
> $(this).removeClass('offscreen').addClass('onscreen');
> }, function(){ return false });
>
> And that's it. If you create a common class you can shorten the first
> line. Note that it's generally faster to redundantly add and remove a
> class than to filter the current element to save that operation.
>
> - ricardo
>
> On Jan 13, 7:06�pm, Kean <shenan...@gmail.com> wrote:
> > Try this if you can't change your html
> >
> > (function($) {
> > � $.fn.replaceClass = function(class1, class2){
> > � � � � � � � � $(this).removeClass(class1).addClass(class2);
> > � }
> >
> > })(jQuery);
> >
> > $('.nav_company').hoverIntent(function() {
> > � � // toggle display of company sub menu content panel
> > � � $
> > ('.nav_sub_default, .nav_sub_products, .nav_sub_markets,
> > .nav_sub_tools_support, .nav_sub_news_events').replaceClass
> > ('onscreen', 'offscreen');
> > � � $('.nav_sub_company').replaceClass('offscreen', 'onscreen');
> >
> > � },
> >
> > � function(){
> > � � return false;
> > � }
> > );
> >
> > On Jan 13, 8:36�am, "r...@lighthouseuk.net" <r...@50-tuning.com>
> > wrote:
> >
> > > Hi,
> > > I'm new to jQuery and liking what I've seen so far.
> >
> > > I'm curious as to whether I can reduce my code, using chaining
> > > perhaps?
> >
> > > Example...
> >
> > > $('.nav_company').hoverIntent(function() { // toggle display of
> > > company sub menu content panel
> > > � � � � $('.nav_sub_default').removeClass('onscreen').addClass
> > > ('offscreen');
> > > � � � � $('.nav_sub_company').removeClass('offscreen').addClass
> > > ('onscreen');
> > > � � � � $('.nav_sub_products').removeClass('onscreen').addClass
> > > ('offscreen');
> > > � � � � $('.nav_sub_markets').removeClass('onscreen').addClass
> > > ('offscreen');
> > > � � � � $('.nav_sub_tools_support').removeClass('onscreen').addClass
> > > ('offscreen');
> > > � � � � $('.nav_sub_news_events').removeClass('onscreen').addClass
> > > ('offscreen');
> > > � � � },function(){
> > > � � � � return false;
> >
> > > });
> >
> > > Based on the fact that there are 6 menu items (nav_sub_x) - I
> > > currently have the above code entered 6 times to add and remove the
> > > necessary classes from each of the relevant DIVs on the page.
> >
> > > Is there a cleaner way to do this?
> > > Many thanks in advance.
> > > Cheers,
> > > Rob
