I have a page that collects click events by event.pageX and event.pageY and I want to map those locations to a 600px by 750px box on another page proportionally. Meaning if there were a screenshot of the other page in the box the marking of the click location would show up visually in the same spot.
I know I have ($('body').width(), $('body').height()), (document.body.offSetWidth, document.body.offSetHeight), and (screen.width, screen.height) at my disposal but I'm not quite sure how best to combine these in order to get an accurate ratio.
Currently I'm just using (in sudo code):
x_ratio = 600 / document.body.offSetWidth
y_ratio = 750 / document.body.offSetHeight
new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio
and then the marking of click event inside the box is
<div id='click_marker'
style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>
but this doesn't seem to maintain accuracy across browsers and screen sizes. I would like to take a click position in one browser and screen size and be able to accurately map it on any browser and screen size.
How can I consistently and accurately make this calculation?
First you need to establish the area you want to translate your co-ordinates from. Is it a browser window or a document body? I.e. if do you have a scroll bar, do you want someone scrolling down and clicking at the bottom of the page also appear at the bottom of your 600x750 box or outside? It is not apparently clear from your question.
event.pageX and event.pageY provide position from the left and top edges of the document Therefore using body.offsetWidth will be only consistent when body fills the whole document. Please, check the following fiddle to understand: http://jsfiddle.net/Exceeder/YPHkr/ - notice how going over the right body border will make relative coordinate go over 1.0
Simplest thing to do would be to get $(window).width() and $(window).height() - if the scrolling position does not need to be accounted for. Otherwise you will need to calculate scrolling positions and the algorithm will be a little bit more difficult.
Once you establish that, you need to get the correct width and height. Related question: document.body.offsetWidth variations for different browsers
pageX and pageY, gives you co-ordinates relative to the webpage not the screenUse screenX and screenY to get co-ordinates relative to the screen or clientX and clientY to get them relative to the browsers client window. These event fields may not be available in all browsers.
Related
Let's say we have a page with a div at the center which can be dragged and moved anywhere by the user. I can get the position of this rectangle using getBoundingClientRect. Everything is fine.
But now when I pinch-zoom (not ctrl + +) into the page and scroll to a section, I was expecting the getBoundingClientRect values to change but they don't, and that is understandable, as the values of window.scrollX and window.scrollY also remain the same, which is 0 in this case.
But the thing is, how can I calculate the x and y coordinates of the pinch-zoomed section of the page which is currently visible with respect to the origin of the page.
This page http://orad.msbitsoftware.com/ tries to verticaly align the login form. When I try to get its top position via JavaScript, I get wrong result, which is the same as the chrome developer tool gets (see attached screenshot).
Can someone explain what causes this problem? How come even browser's native tools are affected? And is there a way to get the element's correct position via JavaScript?
Thanks.
It is a common way to center vertically an element of unknown height.
The top position is set to 50%, that makes the top of the element be at the center of the parent (this 50% relates to the parent height)
And the element is transformed with a vertical translation of 50%. This is related to the element height, and makes the element move vertically until it's center is at the center of the parent
top: 50%;
transform: translateY(-50%);
The top value that you get is prior to the transform. This is correct behaviour, but visually you see the transformed element.
Much better explained here Look at the -> vertically -> block level -> unknown height section
If anybody is interested in how to retrieve element's real position via Javascript:
Get element's left/top position within viewport using Element.getBoundingClientRect().
Then get viewport's position relative to the document. This is a bit tricky if you want to support older versions of IE:
var viewport_left = (window.pageXOffset || document.documentElement.scrollLeft) - (document.documentElement.clientLeft || 0);
var viewport_top = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
Add element's left/top position to viewport's left/top position and you get the real position.
This works just fine in IE8+, even on elements using 2D or 3D CSS transforms.
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 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 have a "box" popup that appears on mouseover for some links. The box is about 300px tall and the top side of the box is on the same level as the link position, however some of these links are at the lowest scrollable part of the page, thus the popup will be cut off.
Question
What values are used to detect the bottom of the page, or remaining scrollable distance to the bottom so that you can shift the popup as required?
I'm using jQuery, but a generic JavaScript solution is also welcome for reference.
Thank you.
Basically you want to find the bottom of the viewport relative to the document, and then compare them to the coordinates of the incoming event.
function handler(event) {
var bottomOfViewport = $(window).scrollTop() + $(window).height();
var bottomOfBox = event.pageY + HEIGHT_OF_BOX;
if ( bottomOfViewport < bottomOfBox )
// code to handle overflow condition
}
Thankfully, the pageX and pageY properties are relative to the document. Similar holds for the x-axis.