Javascript OnMouseDown / OnMouseUp works only first time - javascript

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.

Related

Hover Jquery not working a second time for some reason

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.

How to visually identify the drop target during drag and drop in Kendo Grid?

I have a simple Kendo grid defined in this fiddle. I would like to drag and drop one row onto another. That part does work.
However, while I am dragging the row, I want highlight the row underneath the dragged one to indicate to the user that if they were to drop it here - this is the row that would be replaced.
To that end, I handle dragenter and dragleave events on the grid.table.kendoDropTarget. Unfortunately, it treats the entire grid as a drop target and only fires the event only once when I move the dragged item around the grid.
So my question is how to visual identify the row target of the drop during dragging operation.
It seems that you're getting the wrong element to highlight. If you log inside dragenter the text of the currentTarget - with $(e.draggable.currentTarget).find("td:first").text() - you will notice that it only shows the value of the first column of the row you are dragging. The correct element to highlight is e.dropTarget[0] that changes as you move the dragged row.
Just change - in both dragenter and dragleave - this line:
e.draggable.currentTarget.addClass("highlight-droparea");
To this line:
$(e.dropTarget[0]).addClass("highlight-droparea");
Fiddle.
UPDATE
I didn't realize that in the above snippet drag/drop works only once. Trying to find out the issue I noticed that after first drop all rows lost their draggable attributes. So I wrapped both kendoDraggable() and kendoDropTarget() into a function and then, inside kendoDropTarget.drop event I call it again, re-creating all draggable events for the rows.
Fiddle.
I know that it isn't so pretty and it may decrease performance in some cases but I'm don't really know any other way for doing this.

jQuery: issue with clickable rows

I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.
This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.
Is there a way I can prevent that the row click event is triggered when I click on a button in that row ?
I only want the event to fire by click on the row background but not by click on any button within a row.
Many thanks for any help with this, Tim.
At the top of your click event handler, put the following:
if ($(event.target).prop('type').toLowerCase() !== 'table' ||
! $(event.target).hasClass('myClass')) {
event.stopImmediatePropagation();
return;
}
What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).
If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:
if ($(event.target).prop('type').toLowerCase() === 'button') {
event.stopImmediatePropagation();
return;
}
This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.

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");

How to select <table> like <div> in the MS Html editor?

If a tag like DIV, MARQUEE or IMG is inserted, it can be selected when clicking anywhere in the tag area. However, if a TABLE is inserted, it can only be selected when clicking on the border of tag area. I have searched for the possible event (onclick, keydown) defined for DIV, but unfortunately no relevant Javascript code was found. DesignMode is used for the editor. Anyone knows how to make TABLE easier to be selected just like a DIV?
You can do it using a ControlRange and selecting it. Assuming the table element is stored in a variable called "table":
table.onclick = function() {
if (document.selection.type != "Control") {
var range = document.body.createControlRange();
range.add(this);
range.select();
}
};
jsFiddle: http://jsfiddle.net/DTK8j/
It probably means that table was created so that an event was defined for each cell and possibly each row has an event also. When you click on any area in the row (if there was not padding given for the cell) the cell event was fired up and detect the cell event first not the row event. Likewise the click on the row will trigger the row event rather than the table event.
So it's difficult, but if you didn't define any event like onclick or any event on each row or cell then you only get the table event; otherwise the defined event on any row or cell will be activated in preference to the table event.

Categories