I have a page that is laid out using DIVs, and it essentially consists of a header(menu), a left pane (about 20% page width), right pane (remaining 80%), and a footer. The height of the page is about 2-3 screen heights, so it is scrollable. It looks like this.
All I have in the left pane <div> is an image that occupies about 40% of the screen height. I'd like the image to basically "slide" up and down the screen as the user scrolls.
The menu takes up ~100 pixels in height, so the image begins in the left pane at ~px 100. Once the user scrolls down to the point where the image is at 0 px, I want the image to remain fixed at 0 px as the user scrolls (instead of obviously scrolling off the screen, like it does now). The footer also occupies ~100 px, so I want the image to obviously not display over the footer.
Is there a simple solution or JS/CSS trick to implement this?
There is a nice jQuery plugin called jScroll give it a try! You can see the demo here: http://www.wduffy.co.uk/jScroll/ as well as the download link.
Enjoy!
Related
I'm trying to do a landing page, where will be a banner (height: 100% - 200px). And I want, that first scroll down (via mouse wheel / arrow etc.) will scroll down for whole height of banner (100% of page - 200px) and then scroll normally rest of a page.
But when you will scroll back there and you will "step" (top of window will be on the bottom of an element) on banner, it will scroll whole height of banner back to top.
I've tried a plugin fullPage.js, but I can't use it, cause it fights with other plugin that I'm using.
Here is a jsfiddle with a basic simulation of my page: https://jsfiddle.net/Lua4v1p9/2/
basically, an element ".bann" has to be scrollable on one mouse wheel turn, if I'm describing it well enough.
Here is work version of my page online: http://suju.honzisdesign.cz
I hope, that I described my problem good enough, thanks for any response!
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
The latest vogue seems to be things that move when you scroll.
Now, I have a bunch of square divs containing a background image scattered around a long page of content. My idea is to ever so slightly make these background images slide upwards when you scroll downwards. The background image is as wide as the square, but 1.5 times as tall.
The easy solution is to set the backgroundPosition to a fraction of the current scrollTop, but when I thought about it more, it's not altogether that simple.
Essentially, the background image of a div should be at background-position: 0 0; when the div is just obscured beyond the fold. Once it appears, the top position would decrease relative to scrolling, until reaching the end of the background image's bottom edge once the div has disappeared over the top edge of the window.
The divs are floated within text content, so there's no way to hardcode any position values for them.
Maybe I could manage to do this on my own, but there are several considerations;
Scrolling back and forth at any speed, and never moving the background image to a location where any part of the square div wasn't covered.
Divs which appear in the middle of the page on load. It doesn't matter if the background-position isn't 0 0 for them initially, the important thing is that the background image moves at the same speed as all the others.
Adjusting when the user changes the window size.
Now since this is just an extra little flair, I'm not expecting amazing browser compatibility or that this would work on mobile (although if it does, cool).
But I can't even begin to think how all of this would work out. What would be the best way to achieve this? Since the scrolling sliding thing is so popular, are there any (jQuery) plug-ins that I could utilize to build this?
I need to dynamically resize a div based upon the positon of the browser scroll bar. The desired behavior is to have the featured div of a lightbox be rendered at 800px wide when it is opened, but then scale down to 1/3 that size as you scroll down the page, and then continually increase in size as you scroll back up. So far I've been able to get it to scale up as I scroll down, but am unable to get it to scale down. If anyone can help me out with this, it would be very much appreciated.
http://jsfiddle.net/juicesandmilks/CnuAL/3/
-Michael
Works for me:
http://jsfiddle.net/6APeM/1/
You have to remove the script tags if you put your js in the javascript part of jsFiddle.
I'm trying to make a slider (using bxSlider) similar to this one.
It seems the div containing the slider changes its width in equal increments depending on the width of the user's browser. In other words, the div never cuts off the image partially, it always shows the full picture or hides it.
Does anyone know how this works?
You can use media queries
For that you have to know how wide your images are, so you can calculate the width of the slider container.
Just a quick example - your images are 200px wide. So for screens between 800 and 1000px your image container has to be 800px - only 4 images can fit without crop. For screens between 1000 and 1200px - 1000px, so 5 images fit, etc.