I'm trying to make a custom context menu. I'll eventually put in all the options.
I tried it in both Firefox and Chrome, and it doesn't even appear. It just shows the default context menu.
Here is my code:
sandbox.html:
<!DOCTYPE html>
<!-- Christian's Sandbox -->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Author" content="Christian Arnold" />
<title>Sandbox</title>
<link rel="stylesheet" type="text/css" href="sandbox.css" />
<script type="text/javascript" src="sandbox.js"></script>
</head>
<body>
<div id="contextmenu">
This is the context menu div.<br />
Put all your context menu-y things in here.
</div>
</body>
</html>
sandbox.css:
/* CSS for Christian's Sandbox */
#contextmenu {
display: none;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #aaa;
border-radius: 2px;
background-color: #ccc;
color: #000;
}
sandbox.js:
/* JavaScript for Christian's Sandbox */
document.onload = function() { // Make sure this all works
// Context menu script
var contextmenudiv = document.getElementById("contextmenu"),
contextmenu = {
hide: function(event) {
// Hide the context menu div
contextmenudiv.style.display = "none";
// Remove the event listener
document.removeEventListener("click", contextmenu.hide, true);
},
};
document.addEventListener("contextmenu", function(event) {
// Prevent the browser from opening the default context menu
event.preventDefault();
// Move the context menu to where the mouse is with respect to the page
contextmenudiv.style.left = (event.pageX + scrollX) + "px";
contextmenudiv.style.top = (event.pageY + scrollY) + "px";
// Display it
contextmenudiv.style.display = "block ";
// When you click somewhere else, hide it
document.addEventListener("click", contextmenu.hide, true);
}, true);
}
I got it fixed.
What I did was:
I put the contextmenudiv = document.getElementById("contextmenu") into the event listener instead of putting the whole thing into document.onload.
Here is my new code:
/* JavaScript for Christian's Sandbox */
// Context menu script
var contextmenudiv,
contextmenu = {
hide: function(event) {
if (event.button == 0) {
event.preventDefault();
// Hide the context menu div
contextmenudiv.style.display = "none";
// Remove the event listener
document.removeEventListener("click", contextmenu.hide, true);
}
},
};
document.addEventListener("contextmenu", function(event) {
contextmenudiv = document.getElementById("contextmenu");
// Prevent the browser from opening the default context menu
event.preventDefault();
// Move the context menu to where the mouse is with respect to the page
contextmenudiv.style.left = (event.pageX + scrollX) + "px";
contextmenudiv.style.top = (event.pageY + scrollY) + "px";
// Display it
contextmenudiv.style.display = "block";
// When you click somewhere else, hide it
document.addEventListener("click", contextmenu.hide, true);
}, true);
Now, I have effects and a notifications system to go along with it.
Related
I am trying to find the latest updated current mouse position relative to the whole document. I have set up a scroll event.
Since this event doesn't contain mouse location I have nested another event listener of mousemove inside this scroll event.
Even though, it works the problem I am facing is that if the user keeps the pointer in the same position and simply scrolls with the wheel, the latest position is not being updated unless I move the mouse.
What should I do? What can I use to detect the mouse position? I want simplest answer because I am learning css and js.
Here is my code:
document.addEventListener('scroll', (e) => {
document.addEventListener('mousemove', (e1) => {
total_scroll = window.scrollY + e1.clientY;
console.log("Current Pos: " + total_scroll);
})
})
body {
height: 2000px;
}
I think the best solution would be to separate these listeners, and keep updating some variable with current mouse position, and then, on scroll - just use the variable.
My previous answer was not proper, so I'll give another one:
<html lang="en">
<head>
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
let clientScrollY = 0;
document.addEventListener('mousemove', (e1) => {
clientScrollY = e1.clientY;
})
document.addEventListener('scroll', (e) => {
total_scroll = window.scrollY + clientScrollY;
console.log("Current Pos: " + total_scroll);
})
</script>
</body>
</html>
Also here is solution if you want to update onscroll and onmousemove.
<html lang="en">
<head>
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
let clientScrollY = 0;
let totalScrollY = 0;
function updateTotalScrollY(){
totalScrollY = window.scrollY + clientScrollY;
console.log(totalScrollY);
}
document.addEventListener('mousemove', (e1) => {
clientScrollY = e1.clientY;
updateTotalScrollY();
})
document.addEventListener('scroll', (e) => {
updateTotalScrollY();
})
</script>
</body>
</html>
I want to display the div wherever the cursor is holding right click.
in my case i have this code
<div class="d-none" id="item"></div>
#item{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: royalblue;
/* transform: translate(calc(287px - 50%), calc(77px - 50%)); */
}
.d-none{
display: none;
}
var myMouseX, myMouseY;
function getXYPosition(e) {
myMouseX = (e || event).clientX;
myMouseY = (e || event).clientY;
getPosition(myMouseX, myMouseY);
function getPosition(x, y) {
console.log('X = ' + x + '; Y = ' + y);
let div = document.querySelector("#item");
if (div.classList.contains('d-none')) {
div.classList.remove('d-none');
} else {
div.classList.add('d-none');
}
divX = x + "px";
divY = y + "px";
div.style.transform = `translate(calc(`+divX+` - 50%) , calc(`+divY+` - 50%))`;
}
}
window.addEventListener('click', function () {
getXYPosition()
})
or you can see my Fiddle
Its work on left click by default using window.addEventListener('click')
so how do i change from left click to holding right click a few seconds
The MouseEvent API (with its mousedown and mouseup events) lets us check the event.button property to learn which mouse button the user is activating. And we can keep track of how much time passes between mousedown and mouseup to decide what to do when the mouse button is released, such as running a custom showOrHideDiv function.
And the contextmenu event fires after a right-click (unless the relevant context menu is already visible, I guess.) We can suppress the default contextmenu behavior if necessary -- although this power should be used sparingly if at all.
Note that the technique used here is problematic in that it assumes the user will never use their keyboard to see the context menu, which will eventually cause accessibility snafus and other unpleasant surprises for users. This is why hijacking the default right-click behavior should be avoided if possible (maybe in favor of something like Shift + right-click) unless the user explictly opts in to the new behavior.
// Defines constants and adds main (`mousedown`) listener
const
div = document.querySelector("#item"),
RIGHT = 2,
DELAY = 150;
document.addEventListener('mousedown', forceDelay);
// Main listener sets subsequent listeners
function forceDelay(event){
// Right mouse button must be down to proceed
if(event.button != RIGHT){ return; }
// Enables contextmenu and disables custom response
document.removeEventListener('contextmenu', suppressContextMenu);
document.removeEventListener('mouseup', showOrHideDiv);
// After 150ms, disables contextmenu and enables custom response
setTimeout(
function(){
document.addEventListener('contextmenu', suppressContextMenu);
document.addEventListener('mouseup', showOrHideDiv);
},
DELAY
);
}
// The `contextmenu` event listener
function suppressContextMenu(event){
event.preventDefault();
}
// The `mouseup` event listener
function showOrHideDiv(event){
if(event.button != RIGHT){ return; }
const
x = event.clientX,
y = event.clientY;
div.classList.toggle('d-none'); // classList API includes `toggle`
div.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
}
#item{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: royalblue; }
.d-none{ display: none; }
<div id="item" class="d-none"></div>
EDIT
Note: The script works properly when tested in a standalone HTML file using Chrome, but (at least with my laptop's touchpad) behaves strangely when run here in a Stack Overflow snippet. If you experience similar issues, you can paste it into a <script> element in an HTML file (with the CSS in a <style> element) to see it working.
There is a div element in my page. Here are the functionalities I would like it to have:
Fill out the browser window, that is, maximized, after it's clicked
After it's maximized, the div element remains maximized when the browser window size changes.
When it's maximized, clicking on it restores the div to its original size before it was maximized.
To implement the second point, I registered a resize event on the window to maintain the maximized state. The resize event is removed when it comes to the third point. However, it seems that the resize event failed to be removed because when I adjust the browser window, the div element is maximized again.
Can anybody tell me what happens underneath the hood?
http://jsbin.com/pokirokahe/edit?html,output
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 2px solid blue;
background: gray;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var domDiv = document.getElementsByTagName("div")[0];
var maximized = false;
var originSize = {};
originSize.w = parseFloat(getComputedStyle(domDiv, null).width);
originSize.h = parseFloat(getComputedStyle(domDiv, null).height);
domDiv.addEventListener("click", function() {
if (!maximized) {
fullfill();
maximized = true;
console.log("maximized true, adding event listener");
window.addEventListener("resize", fullfill);
} else {
this.style.width = originSize.w + "px";
this.style.height = originSize.h + "px";
console.log("maximized false, removing event listener");
window.removeEventListener("resize", fullfill);
maximized = false;
}
function fullfill() {
var screensize = getViewportSize();
console.log(screensize.w + " " + screensize.h);
var divBorder = {
top: parseFloat(getComputedStyle(domDiv, null).borderTopWidth),
bottom: parseFloat(getComputedStyle(domDiv, null).borderBottomWidth),
left: parseFloat(getComputedStyle(domDiv, null).borderLeftWidth),
right: parseFloat(getComputedStyle(domDiv, null).borderRightWidth)
};
domDiv.style.width = screensize.w - divBorder.left - divBorder.right + "px";
domDiv.style.height = screensize.h - divBorder.top - divBorder.bottom + "px";
}
});
function getViewportSize(w) {
w = w || window;
if (w.innerWidth != null) return {
w: w.innerWidth,
h: w.innerHeight
};
var d = w.document;
if (document.compatMode == "CSS1Compat")
return {
w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight
};
return {
w: d.body.clientWidth,
h: d.body.clientHeight
};
}
</script>
</body>
</html>
Everytime you trigger click event, you defined a function named fullfill, so the function fullfill your addEventListener is not equal to the one you remove.
If you want your web run correctly, you should define the function named fullfill out of your click eventListner.
well i think it is best to use css in this case, since you need the div to be maximized and get the browser's size, use the position absolute or fixed to the div and give it height:100% , width:100% it will re-size automatically with the browser and it will save you the hassle of JS events.
I'm trying to create a little overlay next to the mouse cursor that shows the coordinates of the cursor vs. the upper left corner of the image the mouse is on. I'm almost there: it kind of works, but there are still some problems.
When I scroll (either with the mouse wheel or with the scroll bars on the side) the overlay and the cursor get far apart from each other: the overlay moves with the page and the cursor stays still relative to the monitor. I already tried "onscroll" but it does not work
I used "onmouseover" and "onmouseout" function for the images in the page, but for some reason they are only executed ONCE, when the page is loaded.
When I put the mouse on the upper left corner of the image, I'd like to see 0,0 as the coordinates. The X is actually 0, but the Y is actually -15. For some reason the coordinates of the image are 15 pixel below the upper edge. No idea why.
OK, now that I mentioned the problems, here is my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="main2008.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="Ext/mcs2.js"></script></head>
</head>
<body>
<div id="content">
<h1>JS test</h1>
<img src = "pic.jpg">
</div>
</body>
</html>
CSS
#xy {
font-size:10px;
position: absolute;
top: 0px;
right:0px;
width:60px;
visibility: visible;
color:#006699;
background-color:#ffffff;
border: 1px solid #66ccff;
z-index: 10;
padding:7px;
}
JS
var myX, myY, xyOn, myMouseX, myMouseY, ImgX, ImgY, Active;
//For each image, set onmouseover and onmouseout to the functions that activate and deactivate
$(document).ready(function() {
$("img").each(function(i) {
this.onmouseover = getcoordinates(this);
this.onmouseout = deactivate(this);
});
});
//Creation of new div is inside window.onload because it needs to be done when body already exists
window.onload = function(){
var divg = document.createElement("div");
divg.setAttribute('id',"xy");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
function getcoordinates(object) {
ImgX=object.offsetLeft;
ImgY=object.offsetTop;
//document.getElementById('xy').style.visibility='visible';
Active=1;
alert("Acti"); //This pop-up is just for debugging
}
function deactivate(object) {
//document.getElementById('xy').style.visibility='hidden';
alert("Deacti"); //This pop-up is just for debugging
Active=0;
}
document.onmousemove=getXYPosition; //THIS IS THE KEY FUNCTION!!! And it works
window.onscroll=getXYPosition; //I tried this to fix the scrolling problem, but it does not work
// Cursor coordinate function
xyOn = true;
function getXYPosition(e){
if (1==1) { //Instead of "1==1" I had written "Active==1", but it does not work at all
myMouseX=(e||event).clientX-ImgX;
myMouseY=(e||event).clientY-ImgY;
if (myMouseX + 100 > document.documentElement.clientWidth) {
myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
} else {
myX = myMouseX + 20;
}
if (myMouseY + 64 > document.documentElement.clientHeight) {
myY = myMouseY - (myMouseY + 44 - (document.documentElement.clientHeight));
} else {
myY = myMouseY + 20;
}
if (document.documentElement.scrollTop > 0) {
myY = myY + document.documentElement.scrollTop;
myMouseY = myMouseY + document.documentElement.scrollTop;
}
document.getElementById('xy').style.top = myY + "px";
document.getElementById('xy').style.left = myX + "px";
document.getElementById('xy').innerHTML = "X is " + myMouseX + "<br />Y is " + myMouseY;
document.getElementById('xy').innerHTML = document.getElementById('xy').innerHTML;
if (xyOn) {
document.getElementById('xy').style.visibility = "visible";
} else {
document.getElementById('xy').style.visibility = "hidden";
}
}
}
PS: In case you're wondering why I add the overlay div and set the properties with JS rather than HTML, the reason is that when I manage to make the JS code at some point this will become a Chrome extension, which means I can inject JS and CSS into the page, but no HTML.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm trying to make a "bubble" that can popup when the onmouseover event is fired and will stay open as long as the mouse is over the item that threw the onmouseover event OR if the mouse is moved into the bubble. My bubble will need to have all manners of HTML and styling including hyperlinks, images, etc.
I've basically accomplished this by writing about 200 lines of ugly JavaScript but I would really like to find a jQuery plugin or some other way to clean this up a bit.
Qtip is the best one I've seen. It's MIT licensed, beautiful, has all the configuration you need.
My favorite lightweight option is tipsy. Also MIT licensed. It inspired Bootstrap's tooltip plugin.
This can be done easily with the mouseover event as well. I've done it and it doesn't take 200 lines at all. Start with triggering the event, then use a function that will create the tooltip.
$('span.clickme').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$('<div class="tooltip">test</div>').appendTo('body');
positionTooltip(event);
};
Then you create a function that position the tooltip with the offset position of the DOM-element that triggered the mouseover event, this is doable with css.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
Although qTip (the accepted answer) is good, I started using it, and it lacked some features I needed.
I then stumbled upon PoshyTip - it is very flexible, and really easy to use. (And I could do what I needed)
Ok, after some work I'm able to get a "bubble" to pop up and go away at all the right times. There is a LOT of styling that needs to happen still but this is basically the code i used.
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn't on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
Here is a snippet of the html that goes with it:
Mouseover this for a terribly ugly red bubble!
I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!
What You can do:
- attach popups to any DOM element!
- mouseover/mouseout events automatically managed!
- set custom popups events!
- create smart shadowed popups! (in IE too!)
- choose popup’s style templates at runtime!
- insert HTML messages inside popups!
- set many options as: distances, velocity, delays, colors…
Popup’s shadows and colorized templates are fully supported by
Internet Explorer 6+, Firefox, Opera 9+, Safari
You can download sources from
http://plugins.jquery.com/project/jqBubblePopup
QTip has bug with jQuery 1.4.2. I had to switch to jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples and it works great!
Sounds to me you dn't want the mouse over events: you want the jQuery hover() event.
And what you seem to want is a "rich" tooltip, in which case I suggest jQuery tooltip. With the bodyHandler option you can put arbitrary HTML in.
I'm trying to make a "bubble" that can
popup when the onmouseover event is
fired and will stay open as long as
the mouse is over the item that threw
the onmouseover event OR if the mouse
is moved into the bubble. My bubble
will need to have all manners of html
and styling including hyperlinks,
images, etc.
All those events fully managed by this plugin...
http://plugins.jquery.com/project/jqBubblePopup
ColorTip is the most beautiful i've ever seen
The new version 3.0 of the jQuery Bubble Popup plugin supports jQuery v.1.7.2, currently the latest and stable version of the most famous javascript library.
The most interesting feature of the 3.0 version is that You can use together jQuery & Bubble Popup plugin with any other libraries and javascript frameworks like Script.aculo.us, Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems;
jQuery Bubble Popup was tested and supports a lot of known and “unknown” browsers; see the documentation for the complete list.
Like previous versions, jQuery Bubble Popup plugin continues to be released under the MIT license; You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact.
download the latest version or visit live demos and tutorials at
http://www.maxvergelli.com/jquery-bubble-popup/
Autoresize simple Popup Bubble
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $('.bubble:eq('+i+')').attr('title');
if(!title){
z=0;
} else {
$('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
$('.bubble:eq('+i+')').removeAttr('title');
}
i++;
}while(z>0)
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.bubble', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
bubble.css
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}
Tiptip is also a nice library.
You can use qTip for this; However you'd have to code a little for launching it on mouseover event; And in case you want a default watermark on your text fields, you'd have to use the watermark plugin...
I realized that this leads to lot of repetitive code; So I wrote a plugin on top of qTip that makes it really easy to attach informational popup to form fields. You can check it out here: https://bitbucket.org/gautamtandon/jquery.attachinfo
Hope this helps.