Full viewport height image with parallax scrolling - javascript

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();
};

Related

How to get the new size of a dynamically sized div?

I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps

getViewportHeight() resulting in only a piece of the viewport

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

How to open website at specific point on page in HTML?

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)

jquery cycle slider height issue

I've been trying to make the slider on this page behave responsively. However, it seems it requires a fixed height on the container, otherwise it does not display the entire slide.
Is there a way (other than going to jquery cycle 2 plugin which I am not allowed to do) to declare a height:auto and still display the entire image? I initially suspected it's something to do with floats, but they are all cleared and still not working.
If I force overflow:show on the wrapper (#industries-slider) I run into issues with the #nav which does move with the overflow.
What am I doing wrong?
Thanks!
Update: responsive, not adaptative. I know I can use media queries to adjust the height, but on exotic displays (and on browser resize which is how its being tested, there is a visible jump of the #nav
Ok, set position: absolute again.
You can set the height of #industries-slider1 using jQuery.
//Find the max height of items
var heights = $(".slide-item").map(function ()
{
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
//Set #industries-slider1 height
$('#industries-slider1').height(maxHeight);

Scrollable div show content outside of window?

I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )
You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.
The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)
OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!

Categories