I would like to know how to position a fragment of html to appear next to where the cursor is, specifically on click. So far I have a div which will position itself next to the cursor on click.
shape.on('click', function(event){
if (event.which == 1) {
$("#message").css({
top: event.pageY + 5,
left: event.pageX + 5
}).show();
}
});
But rather what I am after is to not 'show' any existing div, but insert new code 'on the fly' to where the cursor is.
Thank you
Use .html() to insert the text into the div that appears next to your cursor.
Example: $("#message").html("html text that you want");
If you want to continue to add text to message then use .append(), otherwise .html() will overwrite the contents of #message each time.
You just have to append (append) or insert (html) the code you want on that div:
$('#message').html('Hello world!');
Full code:
shape.on('click', function(event){
if (event.which == 1) {
$("#message").css({
top: event.pageY + 5,
left: event.pageX + 5
}).show();
$('#message').html('Hello world!');
}
});
Living demo: http://jsfiddle.net/zEsF5/3/
You can add new elements easily if you do:
shape.on('click', function(event){
if (event.which == 1) {
$("<div>The <strong><em>HTML</em> code</strong> you want<br/>can go here<div>").css({
top: event.pageY + 5,
left: event.pageX + 5,
position: 'absolute'
}).appendTo(shape).show();
}
});
There is a working JS Fiddle
Related
Here is my code:
var tagDes = document.createElement('DIV');
tagDes.className = 'tagDes';
tagDes.style.cssText = 'position:absolute;'+
'background:#282828;'+
'color:#fff;'+
'padding:10px;'+
'top:'+(posX+hei)+'px;'+
'left:'+(posY+wid)+'px;'+
'font-size:10pt;';
tagDes.onmouseout = function(){
$(this).remove();
};
$('#main-container').append(tagDes);
$('.tagDes').append(array[5]+'<a class="tagMenu">sdsdssds</a>');
posX, posY, hei, wid is reffering to an element for positioning. array[5] is a string.
I want to hover for a li and create div that contain link(tagMenu class) inside(looks like title attribute). But when I hover the link inside that div, the div will remove(). What I looking for is when I hover the link the div still visible and it will removed from page when I mouseout from it. Any suggestion? Please help me.
try something like this:
tagDes.onmouseout = function(e){
if (e.toElement.parentNode == this || e.toElement == this) {
return;
}
$(this).remove();
};
If I understood you correctly you want to bind onmouseout event to inner link element. Then the code can be like this (I made use of more jQuery to simplify it):
var $tagDes = $('<div class="tagDes"></div>').css({
background: '#282828',
color: '#fff',
padding: '10px',
top: (posX + hei) + 'px',
left: (posY + wid) + 'px',
fontSize: '10pt'
})
.append(array[5] + '<a class="tagMenu">sdsdssds</a>')
.appendTo('#main-container');
$tagDes.on('mouseleave', function() {
$tagDes.remove();
});
A user will be able to click on 3 points on an image, and i want to display a BLACK dot at those points. Then i will save these values in my database, and regenerate the image with those 3 points later on.
This is a 2 part question:
1.) In my code, i am not able to detect the onClick event when the image is clicked. Can someone look into this. Here's my code. JSFIDDLE
$(document).ready(function () {
$('body').click(function (ev) {
alert("d");
mouseX = ev.pageX;
mouseY = ev.pageY
alert(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
HTML
<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">
</body>
2.) Say that i have the X and Y coordinates of the points, and how can i regenerate the image with those points ?
Just use document instead of body (your body element has a calculated height of 0, but document is always the full size of the window):
http://jsfiddle.net/TrueBlueAussie/95vczfve/5/
$(document).ready(function () {
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
As a side note: Your original JSFiddle is also a great example of why you should not connect delegated events to body instead of document. The body element can be styled out of existence (also document exists before the DOM is even loaded) :)
Or, as Brian provided, a reduced version http://jsfiddle.net/BrianDillingham/95vczfve/7/:
$(document).ready(function(){
$(document).click(function (ev) {
$("body").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
})
);
});
});
And Brian's final update with limit of 3 dots: http://jsfiddle.net/BrianDillingham/95vczfve/8/
Your body has 0 height because it has 0 content.
Try adding this to your CSS:
html, body { height: 100%; margin: 0; }
Or try adding some content.
jsFiddle
On a side tip, a lot of things about your jQuery can be made cleaner/easier:
$(document).ready(function(){
// here I asign the event dynamically, not needed for 'body' as such tag should always be present,
// but something you should look into
// see also: http://api.jquery.com/on/
$(document).on('click', 'body', function(e) {
mouseX = e.pageX;
mouseY = e.pageY
// simply press F12 to look at your browsers console and see the results
console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
// no need in JS to write var for every variable declartion,
// just seperate with a comma
var color = '#000000',
size = '5px'; // changed size to 5px from 1 just to make it easier to see what's going on for you
// No need to use $("body") since this event takes place on the body tag
// $(this), in an event, always equals the selector the event is tied to
$(this).append(
// making an element with jquery is simple
// no need to insert whole tag, all you need is tag name and a closer
// like so
$('<div />')
// easily tie all css together
.css({
// also, in jquery CSS, any css variable with a '-'
// can be renamed when assigning
// simply remove the '-' and capitilize the first letter of the second word
// like so, here in 'background-color'
backgroundColor: color,
height: size,
left: mouseX + 'px',
position: 'absolute',
top: mouseY + 'px',
width: size
})
);
})
});
Regarding part 2 of your question, my first thought is to include query params in the image URL, so that instead of http://www.example.com/thingies/someimage.jpg you get something like http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5. From there you would simply check if that string has query params with names matching what you're looking for (x0, y0, x1, etc...) and place points according to those.
Alternatively, you could also store the parameters in the URL for that web page, but that might lead to noisy URLs depending on what you're doing.
This depends on the server storing the coordinates, though.
My second thought is Local Storage, would store the points with the client, but that means that the points are not necessarily sent to the server, and are being read only from the client's browser. It also depends on the browser supporting that, and allowing that. Of course, since 3 coordinates is a rather small set of data, it could be stored in a browser cookie.
I currently have an image displaying when the mouse hovers over a div...
but i only what the image to display next to the mouse if a "div" has a HTML property of "align="center" and if it doesn't then i don't want the image to display?
I think i'm quiet close but i can't figure out how to call the var "divalign" attribute, spent all last night on it :S
$(document).ready(function() {
var $img = $("#MainImage");
$img.hide();
var divalign = $("div").attr("align="center");
$('div').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}).mouseleave(function() {
$img.fadeOut(250);
});
});
Thanks in advance.
$('div').mousemove(function(e) {
if ($(this).attr('align') === 'center') {
// only show if the align attribute has value center
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
You have error in this line
var divalign = $("div").attr("align="center");
Change that to
var divalign = $("div").attr("align","center");
It would be cleaner, if you could give these DIVs a class name (ex: class="alignCenter"), then register the event handler on those divs.
$('div.alignCenter').on('mousemove', function(e) {
..........................
});
Try this:
$('div[align="center"]').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
I am attempting to use JQuery to animate an image to the point where I click my mouse on a div.
The div of the html has an id of "stage" and the image has an id of "player". I have successfully gotten the header to update when the user clicks on the stage, but once I add in the other JQuery to have the image move to my mouseclick on the stage, neither works.
Perhaps its something obvious since I'm new at JQuery but hopefully someone can spot my error.
Here's my code for the JQuery:
$(document).ready(function(){
//alert('It works');
$('#stage').click(function() {
$('#header').html('Image is moving!');
});
$('#stage').click(function(e){
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
});
In summary, when someone clicks in the stage div the header above it should change, and the image should move to where the person clicked on the stage.
Two things:
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
Has syntax errors. It should be:
$('#player').animate({
top: e.pageY,
left: e.pageX
}, 800);
Notice I left off 'px' since it isn't necessary.
You can see it working here: http://jsfiddle.net/VBzUw/
Is there a simple way to locate all DOM elements that "cover" (that is, have within its boundaries) a pixel with X/Y coordinate pair?
You can have a look at document.elementFromPoint though I don't know which browsers support it.
Firefox and Chrome do. It is also in the MSDN, but I am not so familiar with this documentation so I don't know in which IE version it is included.
Update:
To find all elements that are somehow at this position, you could make the assumption that also all elements of the parent are at this position. Of course this does not work with absolute positioned elements.
elementFromPoint will only give you the most front element. To really find the others you would have to set the display of the front most element to none and then run the function again. But the user would probably notice this. You'd have to try.
I couldn't stop myself to jump on Felix Kling's answer:
var $info = $('<div>', {
css: {
position: 'fixed',
top: '0px',
left: '0px',
opacity: 0.77,
width: '200px',
height: '200px',
backgroundColor: '#B4DA55',
border: '2px solid black'
}
}).prependTo(document.body);
$(window).bind('mousemove', function(e) {
var ele = document.elementFromPoint(e.pageX, e.pageY);
ele && $info.html('NodeType: ' + ele.nodeType + '<br>nodeName: ' + ele.nodeName + '<br>Content: ' + ele.textContent.slice(0,20));
});
updated: background-color !
This does the job (fiddle):
$(document).click(function(e) {
var hitElements = getHitElements(e);
});
var getHitElements = function(e) {
var x = e.pageX;
var y = e.pageY;
var hitElements = [];
$(':visible').each(function() {
var offset = $(this).offset();
if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
hitElements.push($(this));
}
});
return hitElements;
}
When using :visible, you should be aware of this:
Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout. During animations that
hide an element, the element is considered to be visible until the end
of the animation. During animations to show an element, the element is
considered to be visible at the start at the animation.
So, based on your need, you would want to exclude the visibility:hidden and opacity:0 elements.