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.
Related
beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together
You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.
Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/
As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};
You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)
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.
Scroll bar moves freely pixel by pixel which i don't need .What i need to do is a scroll bar scrolls the table 1 element right or left .Whatever i try schooling should not divide elements . Is it possible to make a scroll-bar that scrolls let say 200px at a time?
use scrollBy(xnum,ynum)
look at this
http://www.w3schools.com/jsref/met_win_scrollby.asp
update
using this : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
i was partially able to do it. it kind of works with the mouse. it might be improved.
http://jsfiddle.net/btevfik/EZpdA/
I remember seeing a google maps mashup / music video that created, resized, and moved windows on the screen. What javascript methods are used to do this?
I don't know how reliable this is, but to move the window relative to it's current position you can do this:
window.moveBy(250, 250); //moves 250px to the left and 250px down
http://www.w3schools.com/jsref/met_win_moveby.asp
To move the window to a certain part of the screen:
window.moveTo(0, 0); //moves to the top left corner of the screen (primary)
http://www.w3schools.com/jsref/met_win_moveto.asp
Courtesy of #Dan Herbert:
It should probably be noted that window.moveTo(0,0) will move to the
top left corner of the primary screen. For people with multiple
monitors you can also send negative coordinates to position on another
monitor. You can check for a second monitor to move to with
screen.availLeft. If it's negative, you can move a window that far
onto the second monitor.
From a quick google search: Moving windows
You're looking for Window.moveBy and window.moveTo
I remember that video too, you select your hometown and whatnot? I quite liked that.
You move a displayed object's position by changing its top and left margins, which, together, are the coordinates of its top left corner. If you know the absolute coordinates of the target position, you can change the margins and the object will move to that spot.
If you don't know the absolute target position, but only know two relative deltas (i.e., move the window up 5 pixels and right 10 pixels), you can read the object's top and left margins, increment those by the appropriate distances, and set the margins from that.
Margins are part of the style of the object, so you'd say something like:
theobject.style.left = 10 + 'px';
theobject.style.top = 40 + 'px';
for a positioned object.
Since your links contain anchors, "#", when you click on the links it will move the page back to the top. Try replacing the href with something like:
href="javascript:void(0)"
This will prevent anything within the href from executing.
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.