OK, I tried your suggestion, and the performance is about the same as
it was using the second revision in 1.3.1. The hovers execute about
quarter to a half second after you move your mouse over it. On the
plus side, when I am using 1.2.6, it is extremely fast and performance
has improved significantly do to your help. Thanks to your input, it
is much appreciated.
Here is the revised code:
function setDetail()
{
$('.detailShowIcon').hide(); // hide all of the detail show icons
$('.detailShowIcon').parent().addClass('arrowHidden').css
({width:'20px', height:'18px'});
// for the arrow detail toggles
$('table tbody tr').bind("mouseover",function(event)
{
var row = getRow(event, 'tr'); // insurance to make sure that we
have the row
var imageCellDiv = '#arrow-' + $(row).attr('id') + " div";
//alert($(row).attr('id').match('detail'));
if(!$(row).attr('id').match('detail'))
{
if($(row).attr('class') != 'text2')
{
$(row).attr('class','text4');
$(imageCellDiv).removeClass('arrowHidden');
}
else
{
$(imageCellDiv).removeClass('arrowShow');
}
$(imageCellDiv).addClass('arrowActive');
}
})
.bind('mouseout',function(event)
{
var row = getRow(event, 'tr'); // insurance to make sure that we
have the row
var imageCellDiv = '#arrow-' + $(row).attr('id') + " div";
if(!$(row).attr('id').match('detail'))
{
if($(row).attr('class') != 'text2')
{
$(row).attr('class','text3');
$(imageCellDiv).removeClass('arrowActive');
$(imageCellDiv).addClass('arrowHidden');
}
else
{
$(imageCellDiv).removeClass('arrowActive');
$(imageCellDiv).addClass('arrowShow');
}
}
})
.bind('click',function(event)
{
var td = getRow(event, 'td'); // insurance to make sure that we
have
the row
if($(td).attr('id').match('arrow'))
{
var row = '#' + $(td).parent('tr').attr('id');
var detailDiv = '#detail-' +
$(td).parent('tr').attr('id');
//alert(row);
if($(row).attr('class') == 'text2')
{
$(row).attr('class','text4');
$(detailDiv).hide();
}
else
{
$(row).attr('class','text2');
$(detailDiv).show();
}
}
setFooter(); // re-calculate the footer possition
});
}
/**
* Gets the element that we want out of an event
* @param event The event
* @param element The element to isolate
* @return
*/
function getRow(event, element)
{
var thisRow;
var target = $(event.target);
if(target.is(element))
{
thisRow = target;
}
else if(target.parents(element).length)
{
thisRow = target.parents(element + ':first');
}
return thisRow;
}
Again, thanks for your input and time.
On Feb 18, 3:32 pm, zenbaida <zenba...@gmail.com> wrote:
> Will try it out, thanks!
>
> On Feb 18, 1:15 pm, James <james.gp....@gmail.com> wrote:
>
> > How about doing it this way:
>
> > $("table tbody tr")
> > .bind("mouseover", function(e) {
> > $(e.target).parent().children("td").addClass("row_on");
> > })
> > .bind("mouseout", function(e) {
> > $(e.target).parent().children("td").removeClass("row_on");
> > })
> > .bind("click", function(e) {
> > var target = $(e.target); // <td> is clicked on
> > if (target.parent().parent().parent().is("table")) {
> > var tr_id = target.parent().attr("id");
> > alert(tr_id);
> > });
>
> > I'm fairly sure that would work. I have something similar setup such
> > that when you hover over each row, it'll highlight the row, and un-
> > highlight when you leave the row. It'll highlight the other rows also
> > if you hover over them without the mouse leaving each table. Each row
> > also performs an action when clicked. You can also replace 'bind' with
> > 'live' if you have to eventually add more rows dynamically.
> > Just don't use the .each() for each <tr>.
>
> > On Feb 18, 9:30 am, zenbaida <zenba...@gmail.com> wrote:
>
> > > The issue that I am having with doing it that way is that the hover
> > > action is only triggered when a person mouses over the table. You can
> > > move all around the table, but it won't trigger again until the mouse
> > > is moved off and then back on the table. I need the over to be
> > > triggered for every row. Is there a way to get around this?
>
> > > On Feb 17, 2:52 pm, James <james.gp....@gmail.com> wrote:
>
> > > > It seems you're still binding several events to every <tr> and not
> > > > using event delegation.
> > > > Your goal is to make events like click and hover attached to the table
> > > > instead of on each row, such that your very top-level statements look
> > > > like:
>
> > > > $(table).click(function() {});
>
> > > > $(table).hover(
> > > > function() {},
> > > > function() {}
> > > > );
>
> > > > --> 2 events attached (well, technically it's 3, since hover is
> > > > onmouseover and onmouseout)
>
> > > > Rather than:
>
> > > > $('table').find('tr').each(
> > > > $(row).click(function() {});
> > > > $(row).hover(...);
> > > > );
>
> > > > --> 2 x #ofRows events attached (640 events attached, if you have 320
> > > > rows)
>
> > > > When you use event delegation, you bind a click on the table itself.
> > > > When a user clicks anywhere on the table, you act on what was clicked.
> > > > When a user clicks on a table, it'll most likely be a <td> that they
> > > > clicked on. event.target will give you reference to that element. So
> > > > if you use, something like:
> > > > tr = $(event.target).parent();
> > > > you can get the <tr> that the clicked <td> is in.
>
> > > > Then you can do something with the <tr>, such as getting the ID of it.
> > > > myID = tr.attr("id");
>
> > > > On Feb 16, 9:58 am, zenbaida <zenba...@gmail.com> wrote:
>
> > > > > OK, I rewrote the code, and the page loads a lot faster, but I ran
> > > > > into another problem. Now the performance of the script slows down as
> > > > > the length of the table increases. As I hover over a cell in the above
> > > > > table that triggers the event, it may take a half second or so to
> > > > > trigger. I tested the same script with version 1.2.6, and there is no
> > > > > delay issue.
>
> > > > > Here is the new code:
> > > > > function setDetail()
> > > > > {
> > > > > $('.detailShowIcon').hide(); // hide all of the detail show
> > > > > icons
> > > > > $('.detailShowIcon').parent().addClass('arrowHidden').css
> > > > > ({width:'20px', height:'18px'});
> > > > > $('#subject .row').after('<div
> > > > > id="hoverPrinter"><code></code></
> > > > > div>');
>
> > > > > // for the arrow detail toggles
> > > > > $('table').find('tr').each(function(i)
> > > > > {
> > > > > var rowId = $(this).attr('id');
> > > > > if(rowId && !rowId.match('detail'))
> > > > > {
> > > > > var hoverArea = '#' + rowId + " " +
> > > > > 'td#arrow-' + rowId;
>
> > > > > $(hoverArea).click(function(event)
> > > > > {
> > > > > var thisParent =
> > > > > $(this).parent().attr('id');
> > > > > var imageRow = '#' + thisParent;
> > > > > var detailDiv = '#detail-' +
> > > > > thisParent;
> > > > >
> > > > > //alert($(event.target).is(imageCellDiv));
> > > > > if($(imageRow).attr('class') ==
> > > > > 'text2')
> > > > > {
> > > > >
> > > > > $(imageRow).attr('class','text4');
> > > > > $(detailDiv).hide();
> > > > > }
> > > > > else
> > > > > {
> > > > >
> > > > > $(imageRow).attr('class','text2');
> > > > > $(detailDiv).show();
> > > > > }
>
> > > > > setFooter(); // re-calculate the
> > > > > footer possition
> > > > > });
>
> > > > > $(hoverArea).hover(function(event)
> > > > > {
> > > > > var imageRow = '#' +
> > > > > $(this).parent().attr('id');
> > > > > var imageCellDiv = '#' +
> > > > > $(this).attr('id') + ' div';
> > > > > if($(imageRow).attr('class') !=
> > > > > 'text2')
> > > > > {
> > > > >
> > > > > $(imageRow).attr('class','text4');
> > > > >
> > > > > $(imageCellDiv).removeClass('arrowHidden');
> > > > > }
> > > > > else
> > > > > {
> > > > >
> > > > > $(imageCellDiv).removeClass('arrowShow');
> > > > > }
> > > > >
> > > > > $(imageCellDiv).addClass('arrowActive');
> > > > > },
> > > > > function(event)
> > > > > {
> > > > > var imageRow = '#' +
> > > > > $(this).parent().attr('id');
> > > > > var imageCellDiv = '#' +
> > > > > $(this).attr('id') + ' div';
> > > > > if($(imageRow).attr('class') !=
> > > > > 'text2')
> > > > > {
> > > > >
> > > > > $(imageRow).attr('class','text3');
> > > > >
> > > > > $(imageCellDiv).removeClass('arrowActive');
> > > > >
> > > > > $(imageCellDiv).addClass('arrowHidden');
> > > > > }
> > > > > else
> > > > > {
> > > > >
> > > > > $(imageCellDiv).removeClass('arrowActive');
> > > > >
> > > > > $(imageCellDiv).addClass('arrowShow');
> > > > > }
> > > > > });
> > > > > }
> > > > > });
>
> > > > > }
>
> > > > > On Feb 12, 3:23 pm, zenbaida <zenba...@gmail.com> wrote:
>
> > > > > > Thanks for the reply. I will try it and let you know how it goes.
>
> > > > > > On Feb 12, 2:02 pm, James <james.gp....@gmail.com> wrote:
>
> > > > > > > Try looking into using Event Delegation for managing your events.
> > > > > > > This
> > > > > > > means, instead of attaching events to a specific elements (thus,
> > > > > > > many
> > > > > > > attachments and more processing time), you're attaching just a
> > > > > > > single
> > > > > > > event to the parent element and take actions for the children's
> > > > > > > events. Here are some links to
> > > > > > > help:http://www.learningjquery.com/2008/03/working-with-events-part-1http:...
>
> > > > > > > On Feb 12, 10:30 am, zenbaida <zenba...@gmail.com> wrote:
>
> > > > > > > > I have a table that I am parsing with jQuery. The table is used
> > > > > > > > to
> > > > > > > > show data related to various objects. It alternates between a
> > > > > > > > row with
> > > > > > > > applicable data, and a hidden row that contains other details.
> > > > > > > > The
> > > > > > > > main body of the table is built with multiple html blocks like
> > > > > > > > so:
>
> > > > > > > > <tr class="text3" valign="top" id="row01">
> > > > > > > > <td id="arrow-row01"><div><img
> > > > > > > > src="/d-elearn/intranet/inv2/themes/
> > > > > > > > default/icons/general/disabled_arrow.png" alt="Detail Toggle
> > > > > > > > Icons
> > > > > > > > Column" width="16" height="16" /></div></td>
> > > > > > > > <td><div class="inUse">In Use</div></td>
> > > > > > > > <td>{some data}</td>
> > > > > > > > <td>{more data}</td>
> > > > > > > >
>
> ...
>
> read more »
