<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type="text/css">
#fake /* fake cursor */
{
float:left;
position:absolute;
z-index:99;
}
</style>
<script type='text/javascript'>
$('#div1').ready(function() {
$('#div1').bind('mousemove', function(e){
$('#fake').css({
left: e.pageX + 200,
top: e.pageY
});
});
});
</script>
</head>
<body style="cursor:text;">
<div id="div1" style="height:300px;width:300px;border:1px solid red;"></div>
<div id="fake" ><img id="cursor" src="xp.png" /></div><br />
<body>
</html>
i want to hide the fake cursor when mouse cursor is out of div1.how can i do this.i tried using this code below but it dint work.please help.and any suggestions over shouldersurfing are most welcomed.
$("#div1").mouseout(function () {
$("#fake").hide();
});
Try to use Jquery's .on statement instead of your separate mousemove and mouseout events:
$("#div1").on({
mousemove: function () {
$('#fake').css({
left: e.pageX + 200,
top: e.pageY
});
},
mouseout: function () {
$("#fake").hide();
alert("Mouse Out!")
}
});
JSfiddle
Related
i have a div element with id="drag", if a div element with id='drag' is dragged and dropped onto a div element with id="drop", it will display the coordinates value relative to the div element with id="drop" . I've managed to retrieve the coordinates relative to the div id="drop", but when the page is scrolled, the Y value also changes. how to solve this so that when the page is scrolled the Y value remains relative to the div with id='drop'? here is my code below
`
`<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
</head>
<body style="height: 200vh">
<div
id="drop"
style="
width: 600px;
height: 600px;
background-color: brown;
margin: 0 auto;
"
></div>
<div
id="drag"
style="background-color: blue; width: 100px; height: 100px"
></div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#drag").draggable();
$("#drop").droppable({
accept: "#drag",
drop: function (e) {
var rect = e.target.getBoundingClientRect();
const coordinates = [
Math.round(e.pageX - rect.left),
Math.round(e.pageY - rect.top),
];
console.log(coordinates[0]);
console.log(coordinates[1]);
},
});
});
</script>
</html>`
`
At least from here, it never changes.
you can check it like that:
$(function () {
var coordinates;
$("#drag").draggable();
$("#drop").droppable({
accept: "#drag",
drop: function (e) {
var rect = e.target.getBoundingClientRect();
coordinates = [
Math.round(e.pageX - rect.left),
Math.round(e.pageY - rect.top),
];
setInterval(() => {
console.log(coordinates[0]);
console.log(coordinates[1]);
}, 500);
},
});
});
Code that should display alert when rectangle reaches somewhere; How much details you should add before question is displayed; The code uses popular javascript library. Vanilla javascript should have been good but it is difficult with that.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
if(x==40 && y==40)
{
alert ("Hello world!");
}
}
</script>
<div id="draggable" onmousemove="showCoords(event)" class="ui-widget-content">
<p>Drag me around</p>
</div>
function showAlert();
<p>Mouse over the rectangle above to get the horizontal and vertical coordinates of your mouse
pointer.</p>
<p id="demo"></p>
</head>
</body>
</html>
So use the events that draggable gives you. The event object has the position
$("#draggable").draggable({
start: function(evt){
console.log("start", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
},
drag: function(evt){
console.log("drag", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
},
stop: function(evt){
console.log("stop", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
},
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<p id="demo"></p>
I want to get the X coordination of the button to the root document like in picture.
I try to use offsetLeft of JQuery, but it only return the x of current frame :
$(window).on('click',
function(e){
console.log("x: " + e.target.offsetLeft);
}
);
http://i.imgur.com/Fdfr31x.jpg
So I want to know that is there a method to get direct the x in situation like that ?
Try
$("button").on('click', function()
{
// Your code
});
In this case, the x value will be 8 as the default margin of the body is 8px.
$("button").on('click',
function(e) {
console.log("x: " + e.target.offsetLeft);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>
Add a javascript to each file:
$(window).on('click',
function(e) {
console.log(getLeft()+e.target.offsetLeft);
}
);
function getLeft() {
if (window.parent!=window) {
var result="foo";
$(window.parent.document).find("iframe").each(function() {
if ($(this)[0].contentWindow==$(window)[0]) {
result=this.offsetLeft+window.parent.getLeft();
}
});
if (result!="foo") return result;
}
return 0;
}
A sample of an html containing test2.html would be:
<html>
<head>
<style>
iframe {
position: absolute;
left: 50%;
top: 0px;
width: 50%;
height: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<button>foo</button>
<iframe src="test2.html"></iframe>
</body>
</html>
This works by getting the position of the iframe from the parent.
Feel free to comment on this if you have any questions :)
P.S. <frame> is obsolete/deprecated. The example is using <iframe>.
I'm having a problem with jQuery UI draggable..
I with to scroll an element within a smaller parent element, so that it creates a kind of viewport.
However, I'm having an issue with the element being dragged as it's snapping to the edges of the port.
Been battling with this for a while now so could really use some help... please :)
Here is an example of the behaviour I'm trying to get : LINK
Here is a jsFiddle : LINK
and sample code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#port{
width:50px;
height:100px;
border:1px solid red;
overflow:hidden;
}
#obj {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightpink;
}
</style>
<!-- Javascript -->
<script>
$(function ()
{
$("#obj").draggable(
{
containment: "#port",
scroll: false,
axis: 'x'
});
});
</script>
<!-- HTML -->
<div id="port">
<div id="obj">
<p>Drag me</p>
</div>
</div>
DEMO
Hope this is what you need, since you specified axis:x , it will move only in x axis
$(function () {
$("#obj").draggable({
scroll: false,
axis: 'x',
});
});
Here is the solution.
<div id="port">
<div id="obj">
<p>This is my new paragraph</p>
</div>
</div>
$(function() {
$( "#obj" ).draggable();
});
Link: http://jsfiddle.net/3HVT5/
It works when you remove the containment: "#port" line in your original code.
DEMO
I guess this is what you need
$(function () {
$("#obj").draggable({
containment: 'parent',
axis: 'x',
drag: function (event, ui) {
var p = ui.helper.position();
$(this).stop().animate({
right: p.right,
left: p.left
}, 400, 'linear');
}
});
});
Found 'a' solution here, but not sure of it's elegance...
<div id="outer"> <!-- position: relative -->
<div id="inner"> <!-- position: absolute -->
<img id="img_1" src="http://media02.hongkiat.com/nature-photography/red-planet.jpg" width="300" height="100" />
</div>
</div>
$(function()
{
var img = $("#img_1").draggable(
{
containment: '#inner',
axis: 'x'
}),
h = img.height(),
w = img.width(),
outer = $('#outer'),
oH = outer.height(),
oW = outer.width(),
iH = h + (h - oH),
iW = w + (w - oW),
iT = '-' + ((iH - oH)/2) + 'px',
iL = '-' + ((iW - oW)/2) + 'px';
$('#inner').css({ width: iW, height: iH, top: iT, left: iL });
})
However, tried it out and it does exactly what I'm after. So failing anything better I will go with this. Here is a fiddle link for you guys to try it out.
Thanks for your help...
I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>