jQuery Change Background Position Using Relative Value - javascript

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/

Related

Zara's product image functionality

I'm trying to replicate Zara's product functionality: (click on product image)
https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html
I have it almost working from a jsfiddle I found:
https://jsfiddle.net/y6p9pLpb/1/
$(function() {
$('.product-wrapper a').click(function() {
$('.image-zoom img').attr('src', $(this).find('img').attr('src'));
$('.image-zoom').show();
$('.product-wrapper').css('display', 'none');
return false;
});
$('.image-zoom').mousemove(function(e) {
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('.image-zoom').click(function() {
$('.image-zoom').hide();
$('.product-wrapper').css('display', 'block');
});
});
There's only one thing I can't solve.
When I click on the image and expands, this one jumps to match its respective position relative to the cursor.
Is there any way I can solve that? Like Zara does...
Thanks in advance!
The issue is that the image jumps to your cursor once you move it, right? This should do what you're looking for!
https://jsfiddle.net/8z67g96b/
I just broke out the position change as a function, and also call it when you click the thumbnail - that way, the image already has the cursor's position influencing it when it first appears.
function zoomTracking(event){
var h = $('.image-zoom img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * event.pageY;
$('.image-zoom img').css('top', y + "px");
}
$('.product-wrapper a').click(function(e) {
$('.image-zoom img').attr('src', $(this).find('img').attr('src'));
$('.image-zoom').show()
zoomTracking(e);
$('.product-wrapper').css('display', 'none');
return false;
});
$('.image-zoom').mousemove(function(e) {
zoomTracking(e);
});
In the fiddle, it has a section relating to the position of the mouse and the width/height of the image:
$('.image-zoom').mousemove(function(e) {
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
Simply remove this portion and it won't do any moving with the mouse, just expand onClick.

How to move images independently

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();
...

Javascript moving child when dragging on parent

I want to move child element when dragging on parent and the element itself, and the parent shouldn't be moved.
here is my demo
As in the demo, I want to move the red box when either drag on it or drag on its parent (the background), but I couldn't compute the right position, could you help me?
Other question is why I can't offthe mousemove event when I set .off('mousemove', mousemove')
Thank you very much
I have done some changes. This works ;)
DEMO
$(function(){
var graph = $('.graph')[0];
var parent = $(graph).parent();
var lockX = 0;
var lockY = 0;
var mousemove = function(e){
$(graph).offset({
top: e.pageY + lockY,
left: e.pageX + lockX
});
};
parent.on('mousedown', function(e) {
lockY = $(graph).offset().top - e.pageY;
lockX = $(graph).offset().left - e.pageX;
$(this).addClass('draggable')
.on('mousemove', mousemove)
.on('mouseup', function(){
$(this).off('mousemove', mousemove)
})
event.preventDefault()
});
$('.graph').parent().on('mouseup', function(e) {
$('.draggable')
.off('mousemove', mousemove)
.removeClass('draggable');
});
});
EDIT
The only actual change I made to make it work was:
.offset({
// instead of: e.pageY - $('.draggable').outerHeight() / 2 + dtop
top: e.pageY + dtop,
// instead of: e.pageX - $('.draggable').outerWidth() / 2 + dleft
left: e.pageX + dleft
})
PS: In the example in the JS Fiddle I changed dleft and dtop respectively to lockX and lockY. Ofcourse, that is a pure semantical thing.

How to make Bubble Chart Random Position

I want to make the bubble position is random instead of people need to set the y and x position.
Here the link of example bubble chart
http://codepen.io/anon/pen/LowKD
here the js script
$(document).ready(function() {
$('.graph-bar').each(function() {
var dataWidth = $(this).data('value');
$(this).css("width", dataWidth + "%");
});
});
// Positioning of .bubbleChart
$(document).ready(function() {
$('.chart-bubble').each(function() {
// Bubble Size
var bubbleSize = $(this).data('value');
$(this).css("width", function() {
return (bubbleSize * 10) + "px"
});
$(this).css("height", function() {
return (bubbleSize * 10) + "px"
});
// Bubble Position
var posX = $(this).data('x');
var posY = $(this).data('y');
$(this).css("left", function() {
return posX - (bubbleSize * 0.5) + "%"
});
$(this).css("bottom", function() {
return posY - (bubbleSize * 0.5) + "%"
});
});
});
I want this bubble chart to random positioning
<div data-value="7" data-label="500" data-x="50" data-y="50" class="chart-bubble"></div>
so I don't have to set the data x and y because I want to make it random when user fill the value
I would use the Math.random(). It gives you a random number between 0 and 1, you just have to multiply it by your range (in your case I guess it would be the width and height of your window).
Look at random() documentation.

background color change on mouse position not loading until mouse moves

I'm using your JS code on my website to change the color of the background based on mouse position, thanks to #j08691.
But the background color doesn't display until I move my mouse...
can you or anyone else help me with this please ?
also when using isotope there's a problem with the background color when scrolling my page... The background color is only set for the height of my screen height...
Here is the js code for the background color :
$(window).mousemove(function(e){
var $width = ($(document).width())/255;
var $height = ($(document).height())/255;
var $pageY = parseInt(e.pageY / $width,10)+50;
var $pageX = parseInt(e.pageX / $height,10)-100;
$("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
$(".fancy_hover_1").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
});
and here is my full function.js file, including the isotope Js
// remap jQuery to $
(function($){})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function (){
// your functions go here
init();
function init(){
init_objects();
}
function init_objects(){
}
});
//-------------------------------------------------- SLIDER BIO PHOTO ----------------------------------------------------//
$(document).ready(function () {
var count = $('.photos').length;
$("#total").text(count);
// set display:none for all members of ".pic" class except the first
$('.photos:gt(0)').hide();
// stores all matches for class="pic"
var $slides = $('.photos');
$slides.click(function () {
// stores the currently-visible slide
var $current = $(this);
if ($current.is($slides.last())) {
$("#current").text("1");
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$("#current").text($current.next().index()+1);
$current.hide().next().show();
}
});
});
//-------------------------------------------------- ISOTOPE ----------------------------------------------------//
$(window).load(function() {
//isotope//
$('.isotope').isotope({
// options
itemSelector : '.item',
/*resizesContainer : true,
resizable: true,*/
layoutMode : 'fitRows'
});
});
//-------------------------------------------------- BACKGROUND-COLOR CHANGE----------------------------------------------------//
$(window).mousemove(function(e){
var $width = ($(document).width())/255;
var $height = ($(document).height())/255;
var $pageY = parseInt(e.pageY / $width,10)+50;
var $pageX = parseInt(e.pageX / $height,10)-100;
$("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
$(".fancy_hover_1").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
});
and a JSfiddle link : http://jsfiddle.net/BegPz/
thanks a lot
You can not trigger the event as object can not be passed. set default background-color on document ready. something like:
$("body").css("background-color", "rgb(128,128,128)");
Demo
Try this in your $(document).ready(function () {}); function, instead of defining in $(window).mousemove(function(e){});. And then you might not need to set any default css.
$().mousemove(function (e) {
var $width = ($(document).width()) / 255;
var $height = ($(document).height()) / 255;
var $pageY = parseInt(e.pageY / $width, 10) + 50;
var $pageX = parseInt(e.pageX / $height, 10) - 100;
$("body").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");
$(".fancy_hover_1").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");
});

Categories

Resources