when ever i hover over the image coordinates are displayed i would like to append those coordinates in a div is it possible
here is a fiddle of what i have so far
Fiddle
Jquery.js
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX);
}).$('#img').on('click', function () {
$('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
index.html
<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
I just updated your code a little bit and I hope it fulfills your requirements.
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX);
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('#img').click(function(e) {
$('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
The problem is that the click event won't call because the mouse will be constantly over #hoverdiv instead. So you will want to add a click event to that:
$('#hoverdiv').on('click', function (e) {
$( '<span>(' + e.clientX + ',' + e.clientY + ')</span>' ).appendTo( "#append" );
}).mouseout(function(){
$('#hoverdiv').hide();
});
Also note the appendTo() functions needs a html string as the argument. So add some tags (such as <span>).
Demo
There are few mistakes in the code.
The binding of click event to the image was not done correctly.
The tooltip displayed was right below the mouse and therefore the click event of the image was not going through. Please add and offset left or top so that the tooltip doesnt interfere with the click on the image.
I guess appendTo expects html and not plain text.
Corrected Code
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX + 10);
}).on('click', function (e) {
$('<p>(' + e.clientX + ',' + e.clientY + ')</p>').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
I have updated the code to capture the coordinates on hover and click.
To append text to a div on hover, add $('#append').append('(' + e.clientX + ',' + e.clientY + ')'); to your mousemove event.
Note: I have added an offset of 10px to the hoverDiv to move it away from cursor.
Updated Fiddle
$(function() {
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX + 10);
$('#appendHover').append('(' + e.clientX + ',' + e.clientY + ')');
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('.hover').click(function(e) {
$('#appendClick').append('(' + e.clientX + ',' + e.clientY + ')');
});
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
#appendClick {
background-color: cornflowerblue;
}
#appendHover {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hoverdiv"></div>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="appendClick">
</div>
<div id="appendHover">
</div>
Try a click event like this and see if it helps:
$('#img').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});
If it's ok you can just append it to a div.
Related
I'm trying to simulate windows pointer trails effect:
with the same settings there's in windows. This is what I tried:
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
$("#trail" + (a - 6)).remove();
document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
a++;
});
*{cursor:none;}
#cursor {
position:fixed;
z-index:999999;
width:12px;
height:19px;
}
.trail {
z-index:1;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>
But I have few problems with this code:
I can't press buttons or anything else, and if I change the z-index to be negative the cursor is behind the buttons.
If page zoom is different then 100% the cursor size is bigger/smaller.
It's too fast, in the windows pointer trails there's bigger gap between the cursor trails.
I want it to be possible to change trails length(like in the windows settings) but I can't do it because of problem 1.
You can use pointer-events:none to solve problem 1, to solve problem 2 you can do "transform:scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")", to solve problem 3 you can add cursor image only in odd/even loops(I compared it to the windows pointer trails and it's the same speed), and to solve problem 4 you can use animation timing:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
position:fixed;
width:0;
height:0;
transform-origin:0 0;
}
#trails
{
pointer-events: none;
position:fixed;
top:0;
left:0;
z-index:99998;
width:100%;
height:100vh;
}
#cursor
{
pointer-events:none;
position:fixed;
z-index:999999;
width:12px;
height:19px;
transform-origin:0 0;
}
#keyframes pointer_trails
{
0%{width:12px;height:19px;}
100%{width:12px;height:19px;}
}
</style>
<script>
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = true;
//makes image stay the same size:
$(document).ready(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
$(window).resize(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
//pointer trails effect:
document.addEventListener("mousemove", function (e) {
document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
if (document.getElementById("_checked").checked && a)
$("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
a = !a;
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>
I am trying to rotate, resize and drag an image using interactjs.
I am using pinch to zoom for resizing.
After rotating the image the drag feature does't work well and positions the image at wrong coordinates.
I also tried to move the img by (width/2,height/2) before rotating so that it retains its position, but this stopped resize and rotate feature.
Here is the code I am using.
The pinch to zoom and rotate only works on touch phone :
Here is the fiddle(Please check in Phone for pinch-to-zoom and rotate).
HTML
<div style="display:flex;flex-direction:row;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;width:100%">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-11-30/17784-d2820ac7614e8f4eeb755c38bdccadc0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;height:50px;width:150px">
<button id="save" style="width:50px" />
<button id="savetwo" style="height:40px;border-radius:20px;width:70px">Save Image</button>
</div>
<br />
</div>
</div>
SCRIPT
$(document).ready(function(){
$(".Choice").click(function () {
console.log($(this));
var url = '"' + $(this)[0].src + '"';
var index = url.indexOf("http://");
console.log(url);
var modurl = url.substring(index, url.length - 1);
console.log(url);
$(".ChoiceImage").attr("src", modurl);//url appends src to the current uri so I had to split it(suggest alternative )
});
var scale = 1,angle=0;
var gestureArea = document.getElementById('gesture-area');
var scaleElement = document.getElementById('chosenOne');
var scaleElementParent = scaleElement.parentElement;
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1 + event.ds);
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
scaleElementParent.style.webkitTransform =
scaleElementParent.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
function dragMoveListener(event) {
var target = event.target.children[0];
console.log(target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
});
The user clicks on an image from the list of images to perform the actions.
Thanks in advance
Your main issue was to scale and rotate the image AND the "gesture area.
So if the gesture detection element is rotated, interac.js only can misinterpret the movements.
I cleaned the code a little... And removed all the unused elements from this answer, like the buttons...
Here is the code in full and a CodePen to try it on a mobile device.
console.clear();
$(".Choice").click(function() {
$(".ChoiceImage").attr("src", $(this).attr("src"));
});
var scale = 1,
angle=0,
gestureArea = $('#gestureArea')[0],
scaleElement = $('.ChoiceImage'),
scaleElementParent = $('#gestureArea');
// Scale and rotate
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1+event.ds);
scaleElement.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
//scaleElementParent.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
// Drag
function dragMoveListener(event) {
var target = $(event.target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.attr('data-x')) || 0) + event.dx;
y = (parseFloat(target.attr('data-y')) || 0) + event.dy;
// translate the element
target.css({'transform':'translate(' + x + 'px, ' + y + 'px)'});
// update the posiion attributes
target.attr('data-x', x);
target.attr('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
#gestureArea{
position:relative;
z-index:999;
width:150px;
height:150px;
background-color:transparent;
border:none;
padding: 0px 0px 0px 0px;
}
.container{
display:flex;
flex-direction:row;
border:solid grey 2px;
border-radius:20px;
position:relative;
float:left;
background-color:silver;
width:100%;
position:fixed;
bottom:0;
}
img{
width:150px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
<div id="gestureArea">
<img id="chosenOne" class="ChoiceImage resize-drag">
</div>
<div class="container">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png">
</div>
This is my part of code:
<div id="canvasImg" class="img-content position-relative">
<loading></loading>
<canvas id="Canvas" class="position-absolute"></canvas>
</div>
CSS used:
.position-relative{
position: relative;
}
.position-absolute{
position: absolute;
}
After generating the canvas image, I'm creating the some image dynamically.
var createCanvasImgDiv = function (markerDetails) {
var result = "<img src='../../../../../sharedAssets/images/device_marker.png'"
+ "class='position-absolute marker-Img'"
+ "id='" + markerDetails.deviceId + "'"
+ "name='" + markerDetails.externalName + "'"
+ "radius='" + markerDetails.radius + "'"
+ "emailTags='" + markerDetails.emails.join(",") + "'"
+ "/>";
return result;
};
_.map(deviceMarkers, function (tempMarker) {
var imagDiv = createCanvasImgDiv(tempMarker);
$("#canvasImg").append(angular.element(imagDiv));
$compile(angular.element(imagDiv))($scope);
});
Now I want the <img> object to move anywhere inside the parent div(id=canvasImg) on drag of mouse. Also I want the mouse position when it drops.
Please help me on this. Thanks in advance.
I've used jquery-ui draggable widget to achieve this.
$("#image").draggable({
containment: "parent"
});
$("#image").on("dragstop", function(event, ui) {
alert("mouse position: X:" + event.pageX + ", Y:" + event.pageY);
});
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="canvasImg" class="img-content position-relative" style="width:300px;height:200px;border:1px solid #000000;">
<loading></loading>
<canvas id="Canvas" class="position-absolute" style="width:200px;height:100px;border:1px solid #000000;"></canvas>
<img id="image" class="position-relative" src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00721-256x256.jpg" style="width:25px;height:25px;" />
</div>
I have a image with and i want display some text over image when i clicked 1 point in image, my problem is text don't display in mouse point, it display below mouse.
It is my code:
Script:
<script type="text/javascript">
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
//alert("X: " + relativeX + ' -' + " Y: " + relativeY);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY - 30 + "px"; // minus one range you want display text in image ( my number is 30 to display in mouse point)
});
});
</script>
and my form:
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="./src/assets/cat.jpg" style="width:700px; height:600px" >
<h2 id="textEx"></h2>
</div>
</form>
Put wrapper as relative and content as absolute
Also use span element instead of h elements as h elemnt itself is associated with browser specific style(css)
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY + "px";
});
});
.image {
position: relative;
}
#textEx {
position: absolute;
font-size: 20px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width:700px; height:600px">
<span id="textEx"></span>
</div>
</form>
You just have to assign position:absolute for #textEx
#textEx{
position:absolute;
}
I am trying to add an image into my div inside bottom to top when I click the add button. Now it is working, but my problem was the div does not scroll. What I am doing wrong?
JSFiddle link
HTML
<button id="add_content">Add</button>
<div class="image_panel"></div>
CSS
.image_panel {
width:100%;
height:300px;
border:1px solid red;
overflow-y:scroll;
}
#add_content{
float:left;
}
JavaScript
$(document).ready(function() {
var smallimg_count=0;
var bottom=0;
$("#add_content").click(function() {
smallimg_count++;
bottom=bottom+20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" >
<img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:' + bottom + 'px;" />
</div>';
$(insert_html_small).appendTo(".image_panel");
});
});
One issue that I see is that the image you are adding has an absolute position inline style (from your JSFiddle)
e.g.
style="bottom:' + bottom + 'px; position: absolute;'
Therefore it's in a different stacking context than the div
Removing it seems to make it work: http://jsfiddle.net/4Ftev/12/
e.g.
$(document).ready(function () {
var smallimg_count = 0;
var bottom = 0;
$("#add_content").click(function () {
smallimg_count++;
bottom = bottom + 20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" ><img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});
If you want to add it bottom up, then you can use prependTo, see this JSFiddle
http://jsfiddle.net/4Ftev/15/
$(document).ready(function () {
var smallimg_count = 0;
var bottom = 0;
$("#add_content").click(function () {
smallimg_count++;
bottom = bottom + 20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" >' + smallimg_count + '<img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
$(insert_html_small).prependTo(".image_panel");
});
});
You are using an absolute positioned image, inside a div which is not relative positioned.
First of all, add position:relative; to the .image_panel class style
What you will notice now, is that the image is positioned relative to the div.
If you want to test the scrollbar, i would recommend you to use a margin instead of the absolute positioning on your image.
Like, margin-top:900px;
Css
.image_panel
{
width:100%;
height:300px;
border:1px solid red;
overflow-y:scroll;
position:relative;
}
#add_content{
float:left;
}
Javascript
$(document).ready(function(){
var smallimg_count=0;
var bottom=500;
$("#add_content").click(function(){
smallimg_count++;
bottom=bottom+20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" ><img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="margin-top:' + bottom + 'px;" /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});
http://jsfiddle.net/3gzaW/
Best regards.
Jonas
Your images:
<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">
Take away the position:absolute; (make it relative, or remove it entirely)