How to move images independently - javascript

The code should display an alert when an image is clicked and then the movement buttons should move the image. The problem occurs when you click on the next image. The movement buttons now operate on the images that were previously clicked as well. Note: I need to do this without setting up id's on each image
Also, why doesn't the fiddle work when I place my js in the js box? It seems to only work when added as a script to the html
jsfiddle farm animals
$(document).ready(function() {
$("img").click(function() {
alert("a " + this.alt + " was clicked on!");
var image = $(this);
$("#up").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top - 5,
left: offset.left
})
});
$("#down").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top + 5,
left: offset.left
})
});
$("#left").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top,
left: offset.left - 5
})
});
$("#right").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top,
left: offset.left + 5
})
});
});
});

You're defining additional button click handlers every time an image is clicked. That means that you can click multiple images and move them at once, but also that you can click the same image multiple times, and the buttons will be moving the image a greater distance each time.
You should define button click handlers only once, and let the image click handler just reassign the value of image.
var image;
$("img").click(function() {
alert("a " + this.alt + " was clicked on!");
image = $(this);
});
$("#up").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top - 5,
left: offset.left
})
});
$("#down").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top + 5,
left: offset.left
})
});
...
See a working example

You were almost there. The problem is that you were redefining the image variable inside your click handler, and it should be outside. See the modified code (partial)
//this is the variable you will use in all your click handlers
var image;
$("img").click(function() {
//here you assign a specic image to it
image = $(this);
$("#up").click(function() {
//in every handler, just to be sure, check if ANY image has been clicked
if(!image) return;
var offset = image.offset();
...

Related

move the icon to the absolute position of the element that was hovered or clicked

$('.class1').on('mouseenter', function () {
var top_offset = $(this).position().top;
var left_offset = $(this).position().left;
$('.icon').prependTo($(this)).css({
position: "absolute",
top: top_offset,
left: left_offset
});
});
On mouse enter or hover I get the position of that element and I have an icon that I want to move it to that position, But I want to do it with animation so the user sees it.HOW CAN I DO IT?
$('.class1').on('mouseenter', function () {
var top_offset = $(this).position().top;
var left_offset = $(this).position().left;
var class1 = this
$('#icon').css('position', 'relative').animate({
top: top_offset,
left: left_offset
}, 1000, function () { $(this).prependTo($(class1)) });
});
you have to use jQuery animate. this is very simple. just set your duration and what you want in end of execution. the CSS is up to you and up to your html design.

need to trigger mouse move function on load

I want the zoom function not to just appear on mousemove but as soon as the page loads, I tried 'zoom.fadeIn' closer to the top but I need to trigger the other event so the image is centered within it. Any recommendations?
sym.$('.zoom_area').css({
});
sym.$('.zoom').css({
'box-shadow':'0 0 0 0px rgba(255,255,255,0.85),0 0 0px 0px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,.25)',
'position':'absolute',
'display':'none'
});
sym.$('.zoom_area').each(function () {
// find the element in the dom that have the zoom class
var zoom = $(this).find('.zoom');
// the big image is the background of the loop.
var zoom_on = $(this).find('.zImage');
// load the actual image in the loop
var image = new Image();
image.src = zoom_on.attr('src');
zoom.css({background: "url('"+$(this).find('.zImage').attr('src')+"')no-repeat"});
// the top left of element compare to the page.
var offset = $(this).offset();
// gets the coordinate of the mouse compare to the image on the stage
$(this).mousemove(function (e) {
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
// if the mouse enters the image fade in the zoom
if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height()){
zoom.fadeIn(250);
}
else //fade out the zoom when it leaves
{
zoom.fadeOut(250);
}
// center the mouse in the zoom
// calculate the ratio of the image compare to the original image - center it.
var rx = -Math.round(image.width/zoom_on.width()*x- zoom.width()/2);
var ry = -Math.round(image.height/zoom_on.height()*y- zoom.height()/2);
zoom.css({
left: (x-zoom.width()/2) + "px",
top: (y-zoom.height()/2) + "px",
backgroundPosition: (rx) +"px " + (ry) + "px"
});
});
});
You can use onload on the body of your HTML.
<body onload="script()">
put the code that you want to run when the page loads in a function,
and call this function instead of script() in the example i gave above.

Positioning image in the page with OnMouseOver function

I have a function that onmouseover load a javascript function which is
function imgEnlarge(val) {
var imageFile = getVal(arrayFile, {
'id': val
}, 'picture');
var imagePath = 'admin/img/' + imageFile;
document.getElementById("imgDisplay").innerHTML = '<img src="' + imagePath + '" style="width:800px;height600px">';
} //end enlarge function
.imgDisplay {
top: 50;
left: 200;
position: absolute;
z - index: 999;
width: 600 px;
height: 500 px;
}
The problem is when i scroll down to e.g middle of the page, the display is still at the "top of the page" as I can see the bottom of the image appearing on the div.
I have an empty div at the top of my site that is having the id of imgDisplay
How do I fix the code such that onmouseover, the picture display will at the current screen X,Y instead of top: and left: (from the top of page)
You can simply set the position of your image as fixed and top and left properties to 0.
Here is a javascript solution:
var image = document.getElementById('imgDisplay');
image.addEventListener('mouseover', function(){
this.style.position = "fixed";
this.style.top = 0;
this.style.left = 0;
});

jQuery Change Background Position Using Relative Value

I am trying to change the image background position X & Y using relative values (+= and -=) when click on the button. It seems to reset itself to 0% 0%. It didnt work.
Fiddle
$(function(){
$("body").on("click", "#move", function() {
$("#obj-1").css({ 'backgroundPosition': '+=0px -=5px' });
return false;
});
})
Change the click function as below:
$(function(){
$("body").on("click","#move", function(){
var backgroundPos = $("#obj-1").css('backgroundPosition').split(" ");
var xPos = parseInt(backgroundPos[0], 10);
var yPos = parseInt(backgroundPos[1], 10);
var newX = xPos + 0;
var newY = yPos - 5;
$('#obj-1').css({
'background-position':newX+'px '+newY+'px'
});
return false;
});
});
Updated fiddle here. hope it helps.
Now on click image will shift from top and left to 10px eveyrtime.
here is the updated jquery code.
$(function(){
$("body").on("click","#move", function(){
$("#obj-1").css({
left: $("#obj-1").position().left + 10 + "px",
top: $("#obj-1").position().top + 10 + "px"
});
return false;
});
})
Here is the working Demo http://jsfiddle.net/kheema/8f2pf/7/

Creating a dynamic jquery tooltip

I make a jquery tooltip but have problem with it, when mouse enter on linke "ToolTip" box tooltip don't show in next to link "ToolTip" it show in above linke "ToolTip" , how can set it?
Demo: http://jsfiddle.net/uUwuD/1/
function setOffset(ele, e) {
$(ele).prev().css({
right: ($(window).width() - e.pageX) + 10,
top: ($(window).height() - e.pageY),
opacity: 1
}).show();
}
function tool_tip() {
$('.tool_tip .tooltip_hover').mouseenter(function (e) {
setOffset(this, e);
}).mousemove(function (e) {
setOffset(this, e);
}).mouseout(function () {
$(this).prev().fadeOut();
});
}
tool_tip();
Something like this works, you've still got a bug where the tooltip sometimes fades away on the hover of a new anchor. I'll leave you to fix that, or for another question.
function setOffset(ele, e) {
var tooltip = $(ele).prev();
var element = $(ele);
tooltip.css({
left: element.offset().left - element.width() - tooltip.width(),
top: element.offset().top - tooltip.height(),
opacity: 1
}).show();
}
And here's the jsFiddle for it: http://jsfiddle.net/uUwuD/4/
you need to calculate the window width and minus it with the width of your tooltip and offset
if(winwidth - (offset *2) >= tooltipwidth + e.pageX){
leftpos = e.pageX+offset;
} else{
leftpos = winwidth-tooltipwidth-offset;
}
if you want more detail please refer :)

Categories

Resources