Javascript coding seems to stall

Question

Sorry for the vague title but here is my problem :

I have an HTML table that I am generating from Javascript, this is fine and the table generates as expected with no problems.

When the user clicks on a cell it will highlight that cell (or un-highlight if the cell is highlighted), this again works fine.

We then needed the ability to drag over the cells (whilst the mouse is down) and highlight the cells they hovered, this I managed to do but it was not the best solution so it was asked if we could select a cell, then hover to another cell and all the cells in between become highlighted.

For example :

Start Cell = Row 1, Cell 1

End Cell = Row 3, Cell 3

Highlighted Cells = R1C1, R1C2, R1C3, R2C1, R2C2, R2C3, R3C1, R3C2, R3C3.

I have managed to sort of get this solution to work, here is a JSFiddle to show the solution, if you click on the first cell and hold the mouse down and drag to the last cell it works fine.

My Problem is that if you drag from the last cell (bottom left) to the top cell (top right) the highlighting effect seems to stall randomly until you are on row 2 or 3.

Is there any reason why this would be occurring? Is my code incorrect / inefficient for this?

I've been stuck with this for sometime and can't seem to find any reason why it would be occurring.

Any help is greatly appreciated.

P.S. - This solution MUST be a fully Javascript solution, jQuery cannot be used for this solution unfortunately as we require this to be a single HTML File and must be possible to use without an Internet Connection.

Nitpick: jQuery is JavaScript. If you wanted to use it, you could put it in the page using an inline script tag. — Matt Ball
– Matt Ball, Commented Sep 30, 2013 at 13:33
Fair point, think I'm just having a dumb day today. But still I'd assume this problem would persist? I'll give it a go with jQuery. — Nunners
– Nunners, Commented Sep 30, 2013 at 13:38
Changing the available parts of the code to jQuery did not fix the problem, the same issues occur. — Nunners
– Nunners, Commented Sep 30, 2013 at 13:53

peernohell · Accepted Answer · 2013-09-30 14:02:36Z

3

When you extract rowNum and cellNum, in ClickCell function, you have to convert value to interger:

var RowNum = parseInt(cellID.substring(1, cellID.indexOf('C')), 10);
var CellNum = parseInt(cellID.substring(cellID.indexOf('C') + 1, cellID.length), 10);

edited Sep 30, 2013 at 14:02

answered Sep 30, 2013 at 13:51

peernohell

8175 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nunners Over a year ago

Thanks for noticing that, but this does not solve the issue I am getting.

peernohell Over a year ago

realy? I juste test and it's seams to work perfectly I have update the fiddle: jsfiddle.net/ujhUm/4

Nunners Over a year ago

I'm sorry, having some stupid moments today... This now works fine, thanks a lot :)

Collectives™ on Stack Overflow

Javascript coding seems to stall

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related