We Keep Coding

Stop one event by another - Javascript/jQuery

I'm implementing drag and drop with jQuery.
So, after mousedown, event starts working:
On mousemove selected element moves with mouse.
Now, I want it to stop working on mouseup.
here's my code:
$(document).on("mousemove", widget, function() {
var newMouseX = event.pageX - mouseX;
var newMouseY = event.pageY - mouseY;
var newElemX = elemX + newMouseX;
var newElemY = elemY + newMouseY;
$(widget).offset({ top: newElemY , left: newElemX });
$(document).on("mouseup", widget, function(widget) {
// what to do here?
});
});
any suggestions?

line break tag in specific situation html and javascript

I have this little javascript
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
its making image titles appear very nice, but I cant find a way to put a line break in there.
I have tried <br> </br> <br/> &#32 &#013 n/ nothing worked

If you want to insert html use .html() instead of .text()

onbeforemousemove to get mouse's old position?

I'm working on a drag and drop lib and i would like to add the mouse's position variation to the dragged element's actual position instead of just setting it's position to the current cursor position in the window. This would allow me not to use position: fixed and be able to drag position relative/absolute; elements.
To know the old position of the mouse (before the mousemove handler is called) i can just store the position in a variable in the previous call to that handler using e.pageX and pageY. But what about the first time the mouse handler is moved ? How can i know the old mouse position to determine it's variation when i havn't stored that old position yet ?
A piece of code :
var $dragged = null,
$window = $(window),
oldMouseX = null,
oldMouseY = null;
var mouseMoveHandler = function(e) {
var curTop = $dragged.css('top'),
curLeft = $dragged.css('left');
$dragged.css({
top : curTop + e.pageY - oldMouseY,
left : curLeft + e.pageX - oldMouseX,
});
oldMouseX = e.pageX;
oldMouseY = e.pageY;
};
$('.Draggable')
.attr('draggable', true)
.css({userSelect: 'none'})
.on('mousedown', function() {
$dragged = $(this);
$window.bind('mousemove', mouseMoveHandler);
})
.on('mouseup', function() {
$dragged = null;
$window.unbind('mousemove', mouseMoveHandler);
})

Disabling default tooltip

Here's a tooltip script, http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/. It works great in all the browsers but the default tooltip isn't disabled in IE.
How can i update the following script to disable the default tooltip?
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
});
</script>

I don't see any reason to add the title attribute back in to the element on blur. You have it stored in the jQuery metadata. My guess is that is why IE is still showing it. Remove the line
$(this).attr('title', $(this).data('tipText'));
and see if that fixes it.
EDIT: That missed some requirements. This is untested, but might work:
$(document).ready(function() {
$('.masterTooltip').each(function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
}).hover(function(){
$('<p class="tooltip"></p>')
.text($(this).data('tipText'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Note that this is sub-optimal, as it calls $(this) twice in the each block, but that should be easy enough to fix.

I have simple solution to disable the default tooltip which is shown in left/right bottom side of the IE or other browser. [If your default tooltip is same as I mentioned]
Just write a simple javascript function
function GoToLink()
{
location.href = "mypage.htm";
}
call this function in tag like
<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">

obtain mouse coordinates through chrome extension

I am curious to know if there is a way to get the mouse coordinates through a chrome extension and then use these coordinates to check if the person has clicked in that position ?

Getting the mouse coordinates is very simple, put this in a content script:
document.onmousemove = function(e)
{
var x = e.pageX;
var y = e.pageY;
// do what you want with x and y
};
Essentially, we are assigning a function to the onmousemove event of the entire page, and getting the mouse coordinates out of the event object (e).
However, I'm not entirely sure what you mean by this:
then use these coordinates to check if the person has clicked in that position ?
Do you want to check if a user clicks something like a button? In that case you can simply subscribe an event to that button (or any other element) like this:
document.getElementById("some_element").onclick = function(e)
{
alert("User clicked button!");
};
To record all mouse clicks and where they are:
document.onclick = function(e)
{
// e.target, e.srcElement and e.toElement contains the element clicked.
alert("User clicked a " + e.target.nodeName + " element.");
};
Note that the mouse coordinates are still available in the event object (e).
If you need the coordinates when a user clicks an arbitrary location, this does the trick:
document.onclick = function(e)
{
var x = e.pageX;
var y = e.pageY;
alert("User clicked at position (" + x + "," + y + ")")
};

I was so tired of searching for an answer to this every few weeks so I created a quick script. It requires jquery for dom selection, dom appending, and style editing.. this could be easily changed, but i've already worked too much this week.
(function() {
'use strict';
var $toolTip = $('<div/>');
$toolTip.addClass('customTooltip-rsd')
.css({
position: 'absolute',
display: 'inline-block',
'font-size': '22px',
backgroundColor: '#000',
color: '#ffffff',
'z-index': 9999999999,
padding: '10px',
'word-spacing': '10px',
'border-radius': '50%',
width: 100,
height: 100,
'line-height': '100px',
'text-align': 'center',
'font-weight': 'bold'
})
;
$(document.body).append($toolTip);
$(window).on('mousemove', function(e) {
var posX = e.pageX;
var posY = e.pageY;
$toolTip.text(posX + ',' + posY).css({
top: posY + 'px',
left: posX + 'px'
});
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

In my projects, I put this simple jQuery script in a separate file to check for x and y coordinates. I can simply toggle it off and on with the trackingMouse variable.
// this lets you click anywhere on the page and see the x and y coordinates
let trackingMouse = true;
$(document).ready(() => {
$(document).on('click', (e) => {
if (trackingMouse) {
let x = e.pageX;
let y = e.pageY;
console.log(`The x coordinate is: ${x}`);
console.log(`The y coordinate is: ${y}`);
}
});
});

Once you have the mouse coordinates, you can make use of "target" attribute with "_blank" value to open an url in a new tab.
URL Display Name
If you are using any javascript framework, you can provide a click event and in its controller, you can make use of default navigate method to navigate.