I'm fairly new to jQuery , and I'm trying to scroll and image downwards. The code I'm using is successfully scrolling the image, but sideways, and that's not what I need.
This is the code I'm using
$(function(){
var y = 0;
setInterval(function(){
y -= 1;
$('.scroller').css('background-position', y + 'px 0');
}, 100);
})
If needed, I can provide the CSS and HTML, but those aren't the issue.
Probably because you are changing the X axis... (Read more about background-position or Cartesian coordinate system)
Try this:
$('.scroller').css('background-position', '0 ' + y + 'px');
Related
I am making a website with a multipage google-doc-like user interface and want to allow the user to "zoom" or change the scale of everything on the page with "zoom in" and "zoom out" buttons. At first I tried to achieve this by styling everything using rem units and using this js:
$(document).ready(function() {
var fontSize = parseInt($("html").css("font-size"), 10);
$("#in").on("click", function() {
fontSize += 0.5;
$("html").css("font-size", fontSize + "px");
});
$("#out").on("click", function() {
fontSize -= 0.5;
$("html").css("font-size", fontSize + "px");
});
});
This works, but the problem is that there are many divs on the page (laid out in a single vertical column), so if you are scrolled in the middle of the page and then click the zoom function, causing them all to resize, it produces a scrolling effect as the divs get smaller or bigger and therefore get pushed further up or down on the page. This is disorienting if the content you were viewing before zooming is no longer on the page after the zoom. Here is a codepen demonstrating this.
Next, I tried zooming using the transform scale() css property and adjusting the transform-origin to be centered on the user's scroll position:
var zoom = 1;
$("#in").on("click", function () {
var x = window.innerWidth / 2;
var y = $(window).scrollTop() + $(window).height() / 2;
zoom += 0.2;
$(".container").css({
transformOrigin: x + "px " + y + "px",
transform: "scale(" + zoom + ")",
});
});
$("#out").on("click", function () {
var x = window.innerWidth / 2;
var y = $(window).scrollTop() + $(window).height() / 2;
zoom -= 0.2;
$(".container").css({
transformOrigin: x + "px " + y + "px",
transform: "scale(" + zoom + ")",
});
});
The problem with this is that portions of the pages get cut off when you zoom as the viewport doesn't expand to accommodate the scaled divs. Here is a codepen to demonstrate this approach.
I've searched extensively and can't seem to find a good solution to the problem. I have also considered using the "zoom" css function but from what I understand this is not supported and behaves differently in different browsers.
Any ideas would be much appreciated! Thanks
So i just saw this [http://jsfiddle.net/X7UwG/][1]. So, when you move mouse to the left, everything is ok, but when you move mouse to the right there are white place. Is there any way not to have that. So just to do single pharallax effect without that white place (margins).
I want full width picture to just move a little depending on mouse position, as in example, but not to have that white place. Is that possible maybe with zooming image or somet
Use percentages for the x-axis and scale the image to 110%
Demo
$('#landing-content').mousemove(function(e){
var amountMovedX = (( e.pageX / window.innerWidth ) * 100) ;
var amountMovedY = (e.pageY * -1 / 6);
$(this).css('background-position', amountMovedX + '% ' + amountMovedY + 'px');
});
I'm having a problem where my image previews aren't attaching to the mouse correctly. The preview is way below the mouse when I hover over the image. I need to make it so that the image display must be 15px to the right of the mouse and 15px down below the mouse. How can I achieve that? (Needs to be strictly JavaScript.)
here is the fiddle:
https://jsfiddle.net/pgyt1qpg/3/
here is part of the code:
e.target.addEventListener('mousemove', function(f) {
var x = f.offsetX;
y = f.offsetY;
myElement.style.top = (y + 20) + 'px';
myElement.style.left = (x + 20) + 'px';
});
Preview of what the image is doing and how far away it is from the mouse
Change 26th line of your JS from the linked fiddle from
myElement.style.top = f.offsetY + 5 + 'px';
to
myElement.style.top = f.offsetY - parseInt(window.getComputedStyle(f.target).height) + 5 + 'px';
Why to subtract previewed image's height? Because you place the preview image below the previewed one.
See it working in updated fiddle.
I'm trying to run an animation by altering the background-position of an image within a div. I'm using setTimeout to recall the function and continuously decrement the image position (so it appears to be animated). I've tested the the variables and setTimeout they seem to be working fine. The image however is not moving at all.
How can i amend the code to enable this animation to run ?
var decrement = 0;
function runningRobot() {
var robotCont = document.getElementById('robotCont');
if(decrement < -660) {
decrement = 0;
}
robotCont.style.backgroundPositon = decrement+ 'px' +' '+ 0 + 'px';
decrement -= 110;
timer = setTimeout(runningRobot,500);
}
runningRobot();
You misspelled backgroundPosition:
robotCont.style.backgroundPosition = decrement + 'px' + ' ' + 0 + 'px';
I also don't know if you'll need the position left setting. I think 0 is the default, and since it comes second to top, it can be omitted, right?
robotCont.style.backgroundPosition = decrement + 'px';
To improve to axiom82's answer, you can also reduce your code by putting the amount of seperate parts you have together. You'd change it from:
robotCont.style.backgroundPosition = decrement + 'px' + ' ' + 0 + 'px';
to:
robotCont.style.backgroundPosition = decrement + 'px 0px';
as was also suggested by antyrat in the comments.
And to correct axiom82, it is not allowed to omit the second 0px, as can be seen on the MDN docs, which says the background-position style needs "a list, each item consisting of two keywords". This means both the x and the y need to be specified, and the second value can't be omitted.
This is a followup question to How to zoom to mouse pointer while using my own mousewheel smoothscroll?
I am using css transforms to zoom an image to the mouse pointer. I am also using my own smooth scroll algorithm to interpolate and provide momentum to the mousewheel.
With Bali Balo's help in my previous question I have managed to get 90% of the way there.
You can now zoom the image all the way in to the mouse pointer while still having smooth scrolling as the following JSFiddle illustrates:
http://jsfiddle.net/qGGwx/7/
However, the functionality is broken when the mouse pointer is moved.
To further clarify, If I zoom in one notch on the mousewheel the image is zoomed around the correct position. This behavior continues for every notch I zoom in on the mousewheel, completely as intended. If however, after zooming part way in, I move the mouse to a different position, the functionality breaks and I have to zoom out completely in order to change the zoom position.
The intended behavior is for any changes in mouse position during the zooming process to be correctly reflected in the zoomed image.
The two main functions that control the current behavior are as follows:
self.container.on('mousewheel', function (e, delta) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
This function collects the current position of the mouse at the current scale of the zoomed image.
It then starts my smooth scroll algorithm which results in the next function being called for every interpolation:
zoom: function (scale) {
var self = this;
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
var newCss = {};
for (var i = compat.length - 1; i; i--) {
newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
}
self.image.css(newCss);
self.currentscale = scale;
},
This function takes the scale amount (1-10) and applies the css transforms, repositioning the image using transform-origin.
Although this works perfectly for a stationary mouse position chosen when the image is completely zoomed out; as stated above it breaks when the mouse cursor is moved after a partial zoom.
Huge thanks in advance to anyone who can help.
Actually, not too complicated. You just need to separate the mouse location updating logic from the zoom updating logic. Check out my fiddle:
http://jsfiddle.net/qGGwx/41/
All I have done here is add a 'mousemove' listener on the container, and put the self.mouseLocation updating logic in there. Since it is no longer required, I also took out the mouseLocation updating logic from the 'mousewheel' handler. The animation code stays the same, as does the decision of when to start/stop the animation loop.
here's the code:
self.container.on('mousewheel', function (e, delta) {
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
});
Before you check this fiddle out; I should mention:
First of all, within your .zoom() method; you shouldn't divide by currentscale:
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
because; you already use that factor when calculating the mouseLocation inside the initmousewheel() method like this:
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
So instead; (in the .zoom() method), you should:
self.currentLocation.x += (self.mouseLocation.x - self.currentLocation.x);
self.currentLocation.y += (self.mouseLocation.y - self.currentLocation.y);
But (for example) a += b - a will always produce b so the code above equals to:
self.currentLocation.x = self.mouseLocation.x;
self.currentLocation.y = self.mouseLocation.y;
in short:
self.currentLocation = self.mouseLocation;
Then, it seems you don't even need self.currentLocation. (2 variables for the same value). So why not use mouseLocation variable in the line where you set the transform-origin instead and get rid of currentLocation variable?
newCss[compat[i] + 'transform-origin'] = self.mouseLocation.x + 'px ' + self.mouseLocation.y + 'px';
Secondly, you should include a mousemove event listener within the initmousewheel() method (just like other devs here suggest) but it should update the transform continuously, not just when the user wheels. Otherwise the tip of the pointer will never catch up while you're zooming out on "any" random point.
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale);
});
So; you wouldn't need to calculate this anymore within the mousewheel event handler so, your initmousewheel() method would look like this:
initmousewheel: function () {
var self = this;
self.container.on('mousewheel', function (e, delta) {
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta;
self.smoothWheel(delta);
return false;
});
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale); // <--- update transform origin dynamically
});
}
One Issue:
This solution works as expected but with a small issue. When the user moves the mouse in regular or fast speed; the mousemove event seems to miss the final position (tested in Chrome). So the zooming will be a little off the pointer location. Otherwise, when you move the mouse slowly, it gets the exact point. It should be easy to workaround this though.
Other Notes and Suggestions:
You have a duplicate property (prevscale).
I suggest you always use JSLint or JSHint (which is available on
jsFiddle too) to validate your code.
I highly suggest you to use closures (often refered to as Immediately Invoked Function Expression (IIFE)) to avoid the global scope when possible; and hide your internal/private properties and methods.
Add a mousemover method and call it in the init method:
mousemover: function() {
var self = this;
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale);
});
},
Fiddle: http://jsfiddle.net/powtac/qGGwx/34/
Zoom point is not exactly right because of scaling of an image (0.9 in ratio). In fact mouse are pointing in particular point in container but we scale image. See this fiddle http://jsfiddle.net/qGGwx/99/ I add marker with position equal to transform-origin. As you can see if image size is equal to container size there is no issue. You need this scaling? Maybe you can add second container? In fiddle I also added condition in mousemove
if(self.running && self.currentscale>1 && self.currentscale != self.lastscale) return;
That is preventing from moving image during zooming but also create an issue. You can't change zooming point if zoom is still running.
Extending #jordancpaul's answer I have added a constant mouse_coord_weight which gets multiplied to delta of the mouse coordinates. This is aimed at making the zoom transition less responsive to the change in mouse coordinates. Check it out http://jsfiddle.net/7dWrw/
I have rewritten the onmousemove event hander as:
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
console.log(offset);
var x = (e.pageX - offset.left) / self.currentscale,
y = (e.pageY - offset.top) / self.currentscale;
if(self.running) {
self.mouseLocation.x += (x - self.mouseLocation.x) * self.mouse_coord_weight;
self.mouseLocation.y += (y - self.mouseLocation.y) * self.mouse_coord_weight;
} else {
self.mouseLocation.x = x;
self.mouseLocation.y = y;
}
});