[jQuery] Re: Code simplification?
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 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"
> > 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
[jQuery] Re: Code simplification?
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 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"
> 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
[jQuery] Re: Code simplification?
MorningZ is absolutely right, but if you notice that a certain class is used
only by a single element, you should make it an id, which is equally usable
by CSS and jQuery. For example, if those s are part of navigation menu
as they seem to be, I would have
On Tue, Jan 13, 2009 at 8:31 PM, MorningZ wrote:
>
> If you have control on the HTML, it would be a LOT easier/cleaner/make-
> more-sense if you separate classes
>
> for instance
>
>
>
>
>
>
> to
>
>
>
>
>
>
> That would make your jQuery life much easier, plus it makes the items
> actually have "common" class characteristics
>
> Now when you want to manipulate them all:
>
> $("li.nav_sub").doSomejQueryAction
>
> and yet they all still have their unique styles/characteristics
>
>
>
>
[jQuery] Re: Code simplification?
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"
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
[jQuery] Re: Code simplification?
If you have control on the HTML, it would be a LOT easier/cleaner/make-
more-sense if you separate classes
for instance
to
That would make your jQuery life much easier, plus it makes the items
actually have "common" class characteristics
Now when you want to manipulate them all:
$("li.nav_sub").doSomejQueryAction
and yet they all still have their unique styles/characteristics
On Jan 13, 12:01 pm, "Diane Nardozzi" wrote:
> You could add the offscreen class to the appropriate menu item and then
> remove the sibling classes all at once
> $(.nav_sub_products).siblings().removeClass('onscreen'); You would just have
> to be sure that all the menu items are true siblings.
>
> On Tue, Jan 13, 2009 at 11:36 AM, r...@lighthouseuk.net
> 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
[jQuery] Re: Code simplification?
You could add the offscreen class to the appropriate menu item and then
remove the sibling classes all at once
$(.nav_sub_products).siblings().removeClass('onscreen'); You would just have
to be sure that all the menu items are true siblings.
On Tue, Jan 13, 2009 at 11:36 AM, r...@lighthouseuk.net
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
>
