Hover Jquery not working a second time for some reason - javascript

I have a Matrix made of a Table, i am creating code to select a range of these TD, onmousedown i am selecting the start and marking the TR (so i know the row im in) this so the selection can be done in that row only, then with hover i am marking the TD between the start and end TD's, its working like this:
Green: the row where the selection is taking place
Yellow: start TD
Red: end TD
Blue: TD's between start and end
My issue its that when i click again in the "selecting row" the cursor changes and the hover doesnt work, the mousedown works since the TD i click on turns yellow but i go to the left in the row (holding the click) and nothing happens.
Here is a jsfiddle with it, i created a HTML page locally as well but the same happens, to reproduce go to the fiddle select a range, then in the same row try to select again.

The element is not firing the mouseup event after being clicked for the second time (if the element was hovered on).
The issue is solved when adding e.preventDefault() to your mousedown event.

Related

How to make cell.navigateLeft() work in Tabulator?

Because of another questions of mine (How to go to previous cell after pressing tab key?) I was learning how to use cell navigation
cell.navigateLeft(); //move focus left to next editable cell.
when I click "click me" cell I am expecting cursor to appear in Cell 3 becuse it is an input type of cell.
But whatever way I try it does nothing
table.on("cellClick", function(e, cell){
//e - the click event object
//cell - cell component
console.log("cell ", cell.getField())
console.log(table.navigateLeft())
table.navigateLeft()
console.log(cell.navigateLeft())
cell.navigateLeft()
console.log("cell ", cell.getField())
// console.log(cell.navigatePrev())
//console.log(cell.navigateRight())
});
Could someone explain how to use cell navigation?
Working jsFiddle.
Cell navigation cannot be triggered on click, navigation lets you move the focus of the currently edited cell to another cell, if a cell isnt in focus (as would happen on a cellClick event) then it wont do anything. The navigation functions are primarily used to handle keyboard navigation round the table.
In your example you are also handling every cells click, not just the click on the "click me" column.
If you want to trigger the edit on a particular cell then you should call the edit function on that cells component. So for example in your example if we add a cellClick callback on the column definition for the click me column:
{title: "Click me", field: "c4", cellClick:function(e, cell){
cell.getRows().getCell("c3").edit();
}}
Though from a usability point of view, the user can just click in the cell they want to edit so none of this really feels nessisary

Javascript OnMouseDown / OnMouseUp works only first time

I have a table and in every cell there is OnMouseDown event and OnMouseUp event. I click the first cell then I drag mouse to the other cell and when I stop holding the mouse, it gets the details from both the starting cell and the ending cell so I can create range from those two numbers.
Problem is it only works the first time. When I do it second time and the same cell range it shows me Error cursor. But when I click somewhere else it behaves like it resets the onMouseDown event and I can do it again.
Example Code:
Every cell looks like this:
<td id='20' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>
<td id='21' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>
function OnMouseDownStart(id){
$('#details').find('#startday').html(id);
}
function OnMouseDownEnd(id){
$('#details').find('#endday').html(id);
}
Problem solved.
When there is nothing inside cell you need to add also CSS property: user-select:none
Then it works perfectly. Otherwise if there is text or blank cell without this css property it will try to move highlighted things.

How to make a light off effect in an entire Table Row

Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/

border color change is working only for first time

I am trying to make a javascript based small game.
Here is the Fiddle for the GAME
It is almost working except a few issues:-
On click of any TD, if the image is in that TD, cell border color should be green otherwise
if you have clicked on wrong TD, border color turns to red.
This functionality is working only first time you start the game. from next time it is always
showing red border color.
Till level 8, the changing of border color is visible, but as you increase the level, user
cannot experience whether he has hit the correct cell or not. I want something like as soon as you have hit the correct cell, the color change should be visible and stable until image appears into another cell.
Any improvement in code and suggestion are appreciable.
When you start the game for the second time, you call startGame().
In startGame() you have a $('td').click(), that will fire for the second time, so on each click, it will actual click twice (one catch, one miss).
Working DEMO
This will do the trick
unbind the click event in the starting
$('td').unbind('click');
bind the click event on the startGame() function
$('td').bind('click');
unbind the click event on the stopGame() function
$('td').unbind('click');
Problem with your code :-
you are calling click event in the startGame() function so for the first time you have one $('td').click() function
for the second time you call startGame() function there two $('td').click() function and so one which creates the mess
Suggestion for second point
DEMO
In function callStart() you have placed the below on the top instead place the below code at the end of the this function.
$('td').removeClass("insetBorderMiss");
$('td').removeClass("insetBorderCatch");

Table highlight and display its content upon click

I am trying to add an extra functionality on my table where users can click on any Rn. This should highlight the whole column and display some hidden content coming from the highlighted column Rn TD. The highlight works fine excepts for some small bugs (e.g. you can click the 'player name' column which shouldn't be the case), but the content that needs to change such as the player names and the race information is not changing..
Also, the prev and next buttons are not working anymore since I added the extra code to make the table highlight work. The working prev/next version can be found here: http://jsfiddle.net/yunowork/4UGre/
What am I doing wrong?
DEMO: http://jsfiddle.net/yunowork/4UGre/6/
Try it in the last demo:
change:
rows.children().click(function() { ...
to:
rows.children().not('.emptyrace, .race').on('click', function() { ...
//exclude the td with prev and next link
We have again some bug (like highlight the R1, R2 element text) but this could be a starting point.

Categories