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)
Related
I am trying to make a webpage that resizes based on the size of the window and the code below seems to be the solution.
var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );
Could Somebody Tell me why this works and what exactly are we doing with this?
Plz refer this for More Info.
The code you posted is taking the percentage ratio between the width of a certain component and the width of the whole page and the height of the same component with the height of the whole page, but it only gets the smaller proportion between the two calculated to consider whether the page is in landscape or portrait layout.
Apparently this number resulting from this line you posted is to be used for you to be able to calculate the value you want to get given the change in the default screen you used to draw. Assuming the canvas you are drawing the default layout on is 1024px by 768px, we would do it like this:
var scale = Math.min(
availableWidth / /*1024px*/
contentWidth, /*500px => (100 / 2048) = 48.82% of available height */
availableHeight / /*768px/*
contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/
);
In this case your line would bring 19.02%, because the Math.min method brings the smallest of the array. So you would use the height of this object as a reference to determine its width too, in order to try to maintain the aspect ratio of the page. But the ideal thing, in my opinion, is that you learn to deal with flex layout, maybe even with bootstrap, to build responsive grids with less work, since the CSS will scale for you according to the screen size natively , without the need for calculations.
;D
I think this code is trying calculate the scale proportion that it should adjust the content based on the different window.size.
For example, you design the website at the window of size 1600* 960px , but some of the content could not fully showed when you go to a window at 300*200, so you need to have a proportion to scale to make the content could be shown in the right style
The availableHeight and availableWidth is the size of the window.
The contentWidth and contentHeight is the size of a specific content (div in the doc)
You divide the size of window to the size of content and get the smaller one of them using Math.min() will make sure you use the most space of the window, but won't make the content oversize or doesn't follow the effect you want.
I have the following code fragment in Javascript:
slider.viewport.height(getViewportHeight())
It resizes the height of a slider. I would like to resize to stay with 100px unless in bottom. I've tried using something like:
slider.viewport.height(getViewportHeight()-100px);
But it doesn't work.
What I need is that the slider to resize and occupies only a fixed height of the viewport with a spare in the bottom.
If the getViewportHeight() works.. then you just have to remove the px measures. After the math operation is completed, you add it.
slider.viewport.height((getViewportHeight()-100) + 'px');
In case your getViewportHeight() doesn't work, here you have some good ways to get your viewport height: Get the browser viewport dimensions with JavaScript
My website's width is 1200px, when someone with lower resolution looking site horizontal scroll is visible and scroll bar is located to the left.
Is there way to locate scroll to center using css, javascript or jquery?
You don't need jquery for that. that is a basic thing for javascript.
document.body.scrollLeft = (1200-window.innerWidth)/2
The best way is to use $(window).scrollLeft();
Just place the center value of the window into the scrollLeft function and the page will reposition itself. The easiest way to find the center of the page is to take your 1200 width and divide it by 2, then subtract the calculated $(window).width(); divided by 2.
var scrollPos = (1200/2) - ($(window).width()/2);
I wish for certain sections of a page to fill out at least 100% of the viewport height regardless of the screen size. I also want the content and background of sections to scroll with a parallax effect.
I have jQuery on the page and use the following to resize the section .parallax to full viewport height:
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight);
};
$(document).ready(imageFit);
$(window).resize(imageFit);
I'm aware of the units vh and vw but I don't want to use them because of poor browser support. (By the way, I'm really bad at javascript so please help me improve this if possible).
Here's a pen with the 100% viewport height section: http://codepen.io/Mest/full/GpycL (If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).
This works fine, however I'm not how to implement the parallax effect. I've tried using Skrollr to modify CSS properties in order to create the parallax effect. However since my section gets it's full viewport height height-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax "transition" to occur instantly as I scroll. It works great without the resizing script above.
Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of X px in my CSS and then Skrollr functioned as it should while scrolling for the first X px.
Thus, my question is the following:
How can I make Skrollr recognize the height set by the script above?
or,
Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?
Don't forget to call refresh() at the end of imageFit.
If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight).refresh();
};
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.