I'm trying to create a spot the difference game with jQuery.
Basically, several images stacked, positioned absolutely in a container. Above the container there is the page header with a logo and a menu, which takes altogather about 120px above the images container.
When someone clicks an area inside the image, I put there a new div, with either a correct (V) mark, or a wrong (red X).
I'm trying to get the position of the click inside the element, using the following code (the following used event variable e is returned in the click event just to be clear):
var parentOffset = $(this).parent().offset();
var topOffset = e.clientY - offset.top;
My problem is that the offset from the top changes when I scroll the page down a little to the footer area, and then I do not position the new marker div in the correct height.
When I'm scrolled to the top of the page, the mark is position correctly.
I've created such a game before, but can't understand why suddenly the calculation is wrong :\
Seems that I get the distance minus the scroll height, but not sure.
Thanks for your insight,
Yanipan
I played around with Firebug a little and it looks like e.originalEvent.layerY is exactly what you're looking for.
It always shows the absolute coordinates of your click within the clicked object, no matter where the screen is scrolled.
Related
Not sure how to word this, so a little jsfiddle work:
http://jsfiddle.net/UwEe2/
That's the basic idea for what I need done, except that I am in need of the image to be centered (so that the very center, horizontally and vertically, of this image, appears in the little 250x250 window and is capable of being scrolled in all four directions to the edges of the image.
What I have, which would work if I would get the exact height and width of the image halved, http://jsfiddle.net/UwEe2/599/, which uses a second div inside the first with style="position:relative; top:-330px; left:-330px;", which shifts the image more to where I need it, but disallows the scrolling of the image left and up any further than the initial screen.
Hopefully this makes sense...I'm rather at a loss right now.
All you need to do is set the initial scrollTop and scrollLeft to the size of the image minus the container divided by two.
$('#container').scrollTop(($('#container img').height()-$('#container').height())/2).scrollLeft(($('#container img').width()-$('#container').width())/2);
http://jsfiddle.net/UwEe2/600/
I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.
But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.
Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).
Hope you guys can help!
Now that we are talking in abstract terms, I will try to explain to the best of my ability.
Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.
This answer might help you in getting the current position of the targetDiv.
So, do the following steps and let me know how it went:
1) Get jquery.appear
2) Apply the disappear event on your selector:
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
3) On that event just make the other div dissapear.
$('theStuffToHide').toggle()
4) Final result
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
$('theStuffToHide').toggle()
});
This should be the only thing you need.
Cheers, hope it helps.
You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.
And when the pageoffset comes less that the calculated amount, make the div hide
Anyone familiar with the Zynga Scroller JS library?
How do I set a default offset for a scrollable region?
I set the CSS for the element using:
-webkit-transform' : 'translate3d(200px, 0px, 0) scale(1)
Assuming I want a 200px offset for the scrollable region, but the code overwrites this upon page load, and snaps back to 0px. When I hard code the 200px offset, it then thinks that 200px is the starting position and bounces back as if it were the edge.
Any help?
I had the same issue in a way and I will describe it below along with the solution.
I work on an "infinite horizontal scroller" with elements equal in size. The idea is that you will only have nrVisibleElements + 2 elements in the DOM. 1 is before your scroll window and the second is after it. The first and last elements swap according to the moving direction. You can find the library here: https://github.com/bedeabza/JS-Infinite-Scroller
Now, I want to use snapping for elements, but if I activate snapping, ZyngaScroller will snap right before I append the swapped element because it thinks my container will end. That's why I reported to it a bigger container (1000 * actualDimension) with the setDimensions() method and offset'ed my dimension processing with 500 * actualDimension.
Basically every time I set the actual transform on the DOM I offset it with the following method:
offset: function (left) {
return left + this.offsetValue;
},
Where left is the left reported by ZyngaScroller.
I have a div with a relative position (div 1). It contains an image (shown as the green block) with an absolute position which by default is hidden way off to the left of the browser window.
I'd like to make it so that when div 1 is in the center of the browser window as the user scrolls down, the image is moved in slightly from the left and appears on the screen. As the user begins to scroll down past div 1, I'd like the image to move back to its original offscreen position.
I have attached a picture to try and make a bit more sense.
I have a feeling this is possible using JavaScript or jQuery but I'm not sure how. Any help would be greatly appreciated.
Ian
You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.
The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:
var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;
$main.scroll(function(ev){
var ratio = $main[0].scrollTop / $main[0].scrollHeight;
var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
$tgt.css({left:newLeft});
});
You would want to position the image on scroll. You would basically check what the position of the div is, set the top of the image to the same as the div, and set the left to whatever you like. you could use jquery animate for this to make it "move" to that position. You then would have to manage to do an scrollstop event (which doesn't exist), and hide the image again. See: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstop implementation (taken from the below post).
You might want to read through jQuery - fadeOut on Scroll / fadeIn on "scrollstop"
I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.
I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.