[jQuery] Re: hover question

2008-10-03 Thread Brad 

That doesn't work in my case, but thanks again for the
recommendation.  I should note that the code

// Insert HTML row into table
  var tbody = $('tbody').appendTo('#' + target_id + ' table');
  tbody.attr('id','id-' + row.shipment_id);

// This will highlight a tbody's rows on mouseEnter.
// The original row coloring will be restored on mouseLeave.
// A tbody may have numerous rows.

  tbody.hover(function () {  // -- tbody is a jQuery function
$(this).children('tr').addClass('hovered');
  }, function () {
$(this).children('tr').removeClass('hovered');
  });

is part of a larger loop. I'm binding the hover to each tbody as it is
dynamically inserted into the table.

My original example, does work. I was just looking for a way to make
the code smaller.

Thanks

On Oct 2, 2:01 pm, Leonardo K [EMAIL PROTECTED] wrote:
 Try this:

 $(tbody).find('tr').hover(function () {
       $(this).addClass('hovered');
    }, function () {
      $(this).removeClass('hovered');
    });

 On Thu, Oct 2, 2008 at 16:39, Brad [EMAIL PROTECTED] wrote:

  Leonardo,

  I should have shown some more code. In my original example, tbody is a
  reference to an jQuery object.
  I'm working with a page that has many tables. Each table can have many
  tbody elements. The number of rows in each tbody can vary, but in
  all case there is more than 1.  Unfortunately the site is behind a
  firewall or I'd give a page.

  // Insert HTML row into table
   var tbody = $('tbody').appendTo('#' + target_id + ' table');
   tbody.attr('id','id-' + row.shipment_id);

  // This will highlight a tbody's rows on mouseEnter.
  // The original row coloring will be restored on mouseLeave.
  // A tbody may have numerous rows.

    tbody.hover(function () {  // -- tbody is a jQuery function
      $(this).children('tr').addClass('hovered');
   }, function () {
     $(this).children('tr').removeClass('hovered');
   });

  What I was curious about is if I could do something like the
  following, which doesn't work.

     tbody.hover(function () {
           // over
           // wish rows will be exposed on 'out' (it won't)
           var rows = $(this).children('tr');
       tr.addClass('hovered');
     }, function () {
           // out
           rows.removeClass('hovered'); // this doesn't work
     });

  Your example inspired me to try

     $(tbody).children('tr').hover(function () {
        $(this).addClass('hovered');
     }, function () {
       $(this).removeClass('hovered');
     });

  but that doesn't work either.

  Thanks

  On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
   $('tbody tr').hover(function () {
      $(this).addClass('hovered');
    }, function () {
      $(this).removeClass('hovered');
    });

[jQuery] Re: hover question

2008-10-03 Thread Brad 

I'll check out livequery.

On Oct 2, 6:19 pm, ricardobeat [EMAIL PROTECTED] wrote:
 The livequery plugin (http://brandonaaron.net/docs/livequery/) might
 help you. You only bind the hover function once for a selector, and
 all TR's subsequently added to the tables will have the event covered
 with no need to bind it again.

 And just so you know, this
   tbody.hover(function () {
           // over
           // wish rows will be exposed on 'out' (it won't)
           var rows = $(this).children('tr');
       tr.addClass('hovered');
     }, function () {
           // out
           rows.removeClass('hovered'); // this doesn't work
     });

 doesn't work because the 'rows' var is only known inside the first
 function. You have to either declare it again on the other one or use
 the jquery object directly.

 - ricardo

 On Oct 2, 5:44 pm, Brad [EMAIL PROTECTED] wrote:

  Leonardo,

  I looked at my actual code again and wondered what would happen if I
  bound the hover at the end of the loop. Your recommendations partially
  work if I do that. Since each tbody can have a variable number of
  rows, my intent is to highlight all rows when hovered. Your examples
  only highlight the first row, which isn't the desired affect. I could
  simply style the whole tbody, but the results when doing that are
  undesirable.

  I'm most likely dealing with a special case here with some unusual
  requirements. In most cases I would expect your recommendations to
  work.

  Thanks Again

  On Oct 2, 2:25 pm, Brad [EMAIL PROTECTED] wrote:

   That doesn't work in my case, but thanks again for the
   recommendation.  I should note that the code

   // Insert HTML row into table
     var tbody = $('tbody').appendTo('#' + target_id + ' table');
     tbody.attr('id','id-' + row.shipment_id);

   // This will highlight a tbody's rows on mouseEnter.
   // The original row coloring will be restored on mouseLeave.
   // A tbody may have numerous rows.

     tbody.hover(function () {  // -- tbody is a jQuery function
       $(this).children('tr').addClass('hovered');
     }, function () {
       $(this).children('tr').removeClass('hovered');
     });

   is part of a larger loop. I'm binding the hover to each tbody as it is
   dynamically inserted into the table.

   My original example, does work. I was just looking for a way to make
   the code smaller.

   Thanks

   On Oct 2, 2:01 pm, Leonardo K [EMAIL PROTECTED] wrote:

Try this:

$(tbody).find('tr').hover(function () {
      $(this).addClass('hovered');
   }, function () {
     $(this).removeClass('hovered');
   });

On Thu, Oct 2, 2008 at 16:39, Brad [EMAIL PROTECTED] wrote:

 Leonardo,

 I should have shown some more code. In my original example, tbody is a
 reference to an jQuery object.
 I'm working with a page that has many tables. Each table can have many
 tbody elements. The number of rows in each tbody can vary, but in
 all case there is more than 1.  Unfortunately the site is behind a
 firewall or I'd give a page.

 // Insert HTML row into table
  var tbody = $('tbody').appendTo('#' + target_id + ' table');
  tbody.attr('id','id-' + row.shipment_id);

 // This will highlight a tbody's rows on mouseEnter.
 // The original row coloring will be restored on mouseLeave.
 // A tbody may have numerous rows.

   tbody.hover(function () {  // -- tbody is a jQuery function
     $(this).children('tr').addClass('hovered');
  }, function () {
    $(this).children('tr').removeClass('hovered');
  });

 What I was curious about is if I could do something like the
 following, which doesn't work.

    tbody.hover(function () {
          // over
          // wish rows will be exposed on 'out' (it won't)
          var rows = $(this).children('tr');
      tr.addClass('hovered');
    }, function () {
          // out
          rows.removeClass('hovered'); // this doesn't work
    });

 Your example inspired me to try

    $(tbody).children('tr').hover(function () {
       $(this).addClass('hovered');
    }, function () {
      $(this).removeClass('hovered');
    });

 but that doesn't work either.

 Thanks

 On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
  $('tbody tr').hover(function () {
     $(this).addClass('hovered');
   }, function () {
     $(this).removeClass('hovered');
   });

[jQuery] Re: hover question

2008-10-02 Thread Leonardo K 
$('tbody tr').hover(function () {
   $(this).addClass('hovered');
 }, function () {
   $(this).removeClass('hovered');
 });


On Thu, Oct 2, 2008 at 14:46, Brad [EMAIL PROTECTED] wrote:


 This isn't so much about hover, but about the selectors I've had to
 use within its 'over' and 'out' functions.

 Consider the following. I'm working on a project where I'll have to
 repeat this pattern often.
 I'll hover over a table's tbody, but will need to affect rows or even
 specific row cells within that tbody.

 // This will highlight a tbody's rows on mouseEnter.
 // The original row coloring will be restored on mouseLeave.
 // A tbody may have numerous rows.

  tbody.hover(function () {
$(this).children('tr').addClass('hovered');
  }, function () {
$(this).children('tr').removeClass('hovered');
  });

 In the above I had to repeatedly specify

$(this).children('tr')

 Is there a shorthand way to only specify it once in the over function
 and refer to that in the out?

 Similar patterns would apply to toggle, etc.

 Thanks!

[jQuery] Re: hover question

2008-10-02 Thread Brad 

Leonardo,

I should have shown some more code. In my original example, tbody is a
reference to an jQuery object.
I'm working with a page that has many tables. Each table can have many
tbody elements. The number of rows in each tbody can vary, but in
all case there is more than 1.  Unfortunately the site is behind a
firewall or I'd give a page.

// Insert HTML row into table
  var tbody = $('tbody').appendTo('#' + target_id + ' table');
  tbody.attr('id','id-' + row.shipment_id);

// This will highlight a tbody's rows on mouseEnter.
// The original row coloring will be restored on mouseLeave.
// A tbody may have numerous rows.

  tbody.hover(function () {  // -- tbody is a jQuery function
$(this).children('tr').addClass('hovered');
  }, function () {
$(this).children('tr').removeClass('hovered');
  });

What I was curious about is if I could do something like the
following, which doesn't work.

tbody.hover(function () {
  // over
  // wish rows will be exposed on 'out' (it won't)
  var rows = $(this).children('tr');
  tr.addClass('hovered');
}, function () {
  // out
  rows.removeClass('hovered'); // this doesn't work
});

Your example inspired me to try

$(tbody).children('tr').hover(function () {
  $(this).addClass('hovered');
}, function () {
  $(this).removeClass('hovered');
});

but that doesn't work either.

Thanks

On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
 $('tbody tr').hover(function () {
    $(this).addClass('hovered');
  }, function () {
    $(this).removeClass('hovered');
  });

[jQuery] Re: hover question

2008-10-02 Thread Leonardo K 
Try this:

$(tbody).find('tr').hover(function () {
  $(this).addClass('hovered');
   }, function () {
 $(this).removeClass('hovered');
   });

On Thu, Oct 2, 2008 at 16:39, Brad [EMAIL PROTECTED] wrote:


 Leonardo,

 I should have shown some more code. In my original example, tbody is a
 reference to an jQuery object.
 I'm working with a page that has many tables. Each table can have many
 tbody elements. The number of rows in each tbody can vary, but in
 all case there is more than 1.  Unfortunately the site is behind a
 firewall or I'd give a page.

 // Insert HTML row into table
  var tbody = $('tbody').appendTo('#' + target_id + ' table');
  tbody.attr('id','id-' + row.shipment_id);

 // This will highlight a tbody's rows on mouseEnter.
 // The original row coloring will be restored on mouseLeave.
 // A tbody may have numerous rows.

   tbody.hover(function () {  // -- tbody is a jQuery function
 $(this).children('tr').addClass('hovered');
  }, function () {
$(this).children('tr').removeClass('hovered');
  });

 What I was curious about is if I could do something like the
 following, which doesn't work.

tbody.hover(function () {
  // over
  // wish rows will be exposed on 'out' (it won't)
  var rows = $(this).children('tr');
  tr.addClass('hovered');
}, function () {
  // out
  rows.removeClass('hovered'); // this doesn't work
});

 Your example inspired me to try

$(tbody).children('tr').hover(function () {
   $(this).addClass('hovered');
}, function () {
  $(this).removeClass('hovered');
});

 but that doesn't work either.

 Thanks

 On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
  $('tbody tr').hover(function () {
 $(this).addClass('hovered');
   }, function () {
 $(this).removeClass('hovered');
   });

[jQuery] Re: hover question

2008-10-02 Thread Brad 

Leonardo,

I looked at my actual code again and wondered what would happen if I
bound the hover at the end of the loop. Your recommendations partially
work if I do that. Since each tbody can have a variable number of
rows, my intent is to highlight all rows when hovered. Your examples
only highlight the first row, which isn't the desired affect. I could
simply style the whole tbody, but the results when doing that are
undesirable.

I'm most likely dealing with a special case here with some unusual
requirements. In most cases I would expect your recommendations to
work.

Thanks Again

On Oct 2, 2:25 pm, Brad [EMAIL PROTECTED] wrote:
 That doesn't work in my case, but thanks again for the
 recommendation.  I should note that the code

 // Insert HTML row into table
   var tbody = $('tbody').appendTo('#' + target_id + ' table');
   tbody.attr('id','id-' + row.shipment_id);

 // This will highlight a tbody's rows on mouseEnter.
 // The original row coloring will be restored on mouseLeave.
 // A tbody may have numerous rows.

   tbody.hover(function () {  // -- tbody is a jQuery function
     $(this).children('tr').addClass('hovered');
   }, function () {
     $(this).children('tr').removeClass('hovered');
   });

 is part of a larger loop. I'm binding the hover to each tbody as it is
 dynamically inserted into the table.

 My original example, does work. I was just looking for a way to make
 the code smaller.

 Thanks

 On Oct 2, 2:01 pm, Leonardo K [EMAIL PROTECTED] wrote:

  Try this:

  $(tbody).find('tr').hover(function () {
        $(this).addClass('hovered');
     }, function () {
       $(this).removeClass('hovered');
     });

  On Thu, Oct 2, 2008 at 16:39, Brad [EMAIL PROTECTED] wrote:

   Leonardo,

   I should have shown some more code. In my original example, tbody is a
   reference to an jQuery object.
   I'm working with a page that has many tables. Each table can have many
   tbody elements. The number of rows in each tbody can vary, but in
   all case there is more than 1.  Unfortunately the site is behind a
   firewall or I'd give a page.

   // Insert HTML row into table
    var tbody = $('tbody').appendTo('#' + target_id + ' table');
    tbody.attr('id','id-' + row.shipment_id);

   // This will highlight a tbody's rows on mouseEnter.
   // The original row coloring will be restored on mouseLeave.
   // A tbody may have numerous rows.

     tbody.hover(function () {  // -- tbody is a jQuery function
       $(this).children('tr').addClass('hovered');
    }, function () {
      $(this).children('tr').removeClass('hovered');
    });

   What I was curious about is if I could do something like the
   following, which doesn't work.

      tbody.hover(function () {
            // over
            // wish rows will be exposed on 'out' (it won't)
            var rows = $(this).children('tr');
        tr.addClass('hovered');
      }, function () {
            // out
            rows.removeClass('hovered'); // this doesn't work
      });

   Your example inspired me to try

      $(tbody).children('tr').hover(function () {
         $(this).addClass('hovered');
      }, function () {
        $(this).removeClass('hovered');
      });

   but that doesn't work either.

   Thanks

   On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
$('tbody tr').hover(function () {
   $(this).addClass('hovered');
 }, function () {
   $(this).removeClass('hovered');
 });

[jQuery] Re: hover question

2008-10-02 Thread ricardobeat 

The livequery plugin (http://brandonaaron.net/docs/livequery/) might
help you. You only bind the hover function once for a selector, and
all TR's subsequently added to the tables will have the event covered
with no need to bind it again.

And just so you know, this
  tbody.hover(function () {
  // over
  // wish rows will be exposed on 'out' (it won't)
  var rows = $(this).children('tr');
  tr.addClass('hovered');
}, function () {
  // out
  rows.removeClass('hovered'); // this doesn't work
});

doesn't work because the 'rows' var is only known inside the first
function. You have to either declare it again on the other one or use
the jquery object directly.

- ricardo

On Oct 2, 5:44 pm, Brad [EMAIL PROTECTED] wrote:
 Leonardo,

 I looked at my actual code again and wondered what would happen if I
 bound the hover at the end of the loop. Your recommendations partially
 work if I do that. Since each tbody can have a variable number of
 rows, my intent is to highlight all rows when hovered. Your examples
 only highlight the first row, which isn't the desired affect. I could
 simply style the whole tbody, but the results when doing that are
 undesirable.

 I'm most likely dealing with a special case here with some unusual
 requirements. In most cases I would expect your recommendations to
 work.

 Thanks Again

 On Oct 2, 2:25 pm, Brad [EMAIL PROTECTED] wrote:

  That doesn't work in my case, but thanks again for the
  recommendation.  I should note that the code

  // Insert HTML row into table
    var tbody = $('tbody').appendTo('#' + target_id + ' table');
    tbody.attr('id','id-' + row.shipment_id);

  // This will highlight a tbody's rows on mouseEnter.
  // The original row coloring will be restored on mouseLeave.
  // A tbody may have numerous rows.

    tbody.hover(function () {  // -- tbody is a jQuery function
      $(this).children('tr').addClass('hovered');
    }, function () {
      $(this).children('tr').removeClass('hovered');
    });

  is part of a larger loop. I'm binding the hover to each tbody as it is
  dynamically inserted into the table.

  My original example, does work. I was just looking for a way to make
  the code smaller.

  Thanks

  On Oct 2, 2:01 pm, Leonardo K [EMAIL PROTECTED] wrote:

   Try this:

   $(tbody).find('tr').hover(function () {
         $(this).addClass('hovered');
      }, function () {
        $(this).removeClass('hovered');
      });

   On Thu, Oct 2, 2008 at 16:39, Brad [EMAIL PROTECTED] wrote:

Leonardo,

I should have shown some more code. In my original example, tbody is a
reference to an jQuery object.
I'm working with a page that has many tables. Each table can have many
tbody elements. The number of rows in each tbody can vary, but in
all case there is more than 1.  Unfortunately the site is behind a
firewall or I'd give a page.

// Insert HTML row into table
 var tbody = $('tbody').appendTo('#' + target_id + ' table');
 tbody.attr('id','id-' + row.shipment_id);

// This will highlight a tbody's rows on mouseEnter.
// The original row coloring will be restored on mouseLeave.
// A tbody may have numerous rows.

  tbody.hover(function () {  // -- tbody is a jQuery function
    $(this).children('tr').addClass('hovered');
 }, function () {
   $(this).children('tr').removeClass('hovered');
 });

What I was curious about is if I could do something like the
following, which doesn't work.

   tbody.hover(function () {
         // over
         // wish rows will be exposed on 'out' (it won't)
         var rows = $(this).children('tr');
     tr.addClass('hovered');
   }, function () {
         // out
         rows.removeClass('hovered'); // this doesn't work
   });

Your example inspired me to try

   $(tbody).children('tr').hover(function () {
      $(this).addClass('hovered');
   }, function () {
     $(this).removeClass('hovered');
   });

but that doesn't work either.

Thanks

On Oct 2, 11:56 am, Leonardo K [EMAIL PROTECTED] wrote:
 $('tbody tr').hover(function () {
    $(this).addClass('hovered');
  }, function () {
    $(this).removeClass('hovered');
  });