[jQuery] Re: jQuery becomes Unresponsive
You should have a look at event delegation, currently you are attaching 2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
On Tue, Dec 16, 2008 at 11:52 AM, stephen barto...@gmail.com wrote:
Hi,
I have a table of data made from divs, and the mouse roll-over
highlighting is done using jQuery. But now I have added real data,
the data table (about a thousand rows) is a lot bigger. The problem
is, jQuery becomes unresponsive and Firefox throws the error:
A script on this page may be busy, or it may have stopped responding.
You can stop the script now, open the script in the debugger, or let
the script continue.
Script: /views/js/jquery.js:19
My code for the row highlighting is:
$(document).ready(function(){
// Row highlighting
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
// Remove the highlight when the mouse leaves the row.
$(.row).mouseout(function() {
$(this).removeClass(row_highlight);
});
});
Am I doing something wrong? Is there a better way of doing this which
will not cause an error to be thrown?
Thanks,
Stephen
[jQuery] Re: jQuery becomes Unresponsive
Hi,
Actually this did work!! I did the same for the mouseout:
$('div.datarows').mouseout(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.removeClass(row_highlight);
});
and it works like a dream with no errors. Thanks for your help.
Stephen
On Dec 16, 1:33 pm, stephen barto...@gmail.com wrote:
Thanks guys for the pointer. I had never actually heard of event
delegation before. Every day is a school day. So, I read the article
and I was keen to implement it to try and solve my problem. But I
think I have a couple of conceptual leaps I need help with.
For my row highlighting to work, I need two events (mouseover and
mouseout), so I thinking I am still going to need two functions? So I
had a go at the mouseover one (see below), but it did not work. You
guys who have a little more experience of this than me, can you see
what I am doing wrong?
From this:
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
To this:
$('div.datarows').mouseover(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.addClass(row_highlight);
});
Thanks in advance,
Stephen
On Dec 16, 12:43 pm, Mike Alsup mal...@gmail.com wrote:
You should have a look at event delegation, currently you are attaching 2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
I agree with Olivier. Here's a resource to get you started:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: jQuery becomes Unresponsive
btw, hovers should be done with CSS unless there is some (necessary)
special efffect involved. Certainly would give you better performance.
On Dec 16, 11:57 am, stephen barto...@gmail.com wrote:
Hi,
Actually this did work!! I did the same for the mouseout:
$('div.datarows').mouseout(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.removeClass(row_highlight);
});
and it works like a dream with no errors. Thanks for your help.
Stephen
On Dec 16, 1:33 pm, stephen barto...@gmail.com wrote:
Thanks guys for the pointer. I had never actually heard of event
delegation before. Every day is a school day. So, I read the article
and I was keen to implement it to try and solve my problem. But I
think I have a couple of conceptual leaps I need help with.
For my row highlighting to work, I need two events (mouseover and
mouseout), so I thinking I am still going to need two functions? So I
had a go at the mouseover one (see below), but it did not work. You
guys who have a little more experience of this than me, can you see
what I am doing wrong?
From this:
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
To this:
$('div.datarows').mouseover(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.addClass(row_highlight);
});
Thanks in advance,
Stephen
On Dec 16, 12:43 pm, Mike Alsup mal...@gmail.com wrote:
You should have a look at event delegation, currently you are attaching
2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
I agree with Olivier. Here's a resource to get you started:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: jQuery becomes Unresponsive
You should have a look at event delegation, currently you are attaching 2 event on each row. So if you have a lot of rows, its memory/cpu heavy. I agree with Olivier. Here's a resource to get you started: http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: jQuery becomes Unresponsive
Thanks guys for the pointer. I had never actually heard of event
delegation before. Every day is a school day. So, I read the article
and I was keen to implement it to try and solve my problem. But I
think I have a couple of conceptual leaps I need help with.
For my row highlighting to work, I need two events (mouseover and
mouseout), so I thinking I am still going to need two functions? So I
had a go at the mouseover one (see below), but it did not work. You
guys who have a little more experience of this than me, can you see
what I am doing wrong?
From this:
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
To this:
$('div.datarows').mouseover(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.addClass(row_highlight);
});
Thanks in advance,
Stephen
On Dec 16, 12:43 pm, Mike Alsup mal...@gmail.com wrote:
You should have a look at event delegation, currently you are attaching 2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
I agree with Olivier. Here's a resource to get you started:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: jQuery becomes Unresponsive
use a tables
it's ridiculous to use divs to replace a table, when you are showing a
table.
tableless designs doesn't mean not using tables at all, just not using
it to structure the site layout.
If you have tabular data, use a table.
thousands of divs is going to slowdown any browser and dom manipulation.
stephen wrote:
Hi,
I have a table of data made from divs, and the mouse roll-over
highlighting is done using jQuery. But now I have added real data,
the data table (about a thousand rows) is a lot bigger. The problem
is, jQuery becomes unresponsive and Firefox throws the error:
A script on this page may be busy, or it may have stopped responding.
You can stop the script now, open the script in the debugger, or let
the script continue.
Script: /views/js/jquery.js:19
My code for the row highlighting is:
$(document).ready(function(){
// Row highlighting
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
// Remove the highlight when the mouse leaves the row.
$(.row).mouseout(function() {
$(this).removeClass(row_highlight);
});
});
Am I doing something wrong? Is there a better way of doing this which
will not cause an error to be thrown?
Thanks,
Stephen
