Does anyone know if it is possible to create a website that scrolls across five panels horizontally yet still remains responsive? I can make it work for a specific viewport size by creating an outer div that contains a div with the five different screens extended across. I use javascript to set the max-width of the viewport div and the width of each section, but if the browser is resized, or the device orientation is changed, it doesn't 'respond', you would have to reload the page. Does anyone have any insight on this?
You can adjust the resizing function on window resize instead of on load...
this is assumed to be placed in the window load event, however you choose to set that. ($(document).ready() for example)
function resize(){
//do whatever you do on resize here
}
//set the listener and call the function initially
$(window).on('resize', resize);
resize();
Related
I have an idea for a layout. When users first load a page. The content will be display full window height. But when users resize the window, it will add a vertical scroll bar to view the full window height.
To put into another, it is like I want to keep the full height window when users resize the window.
Example, initially the window full height is 1600px, and then when users use a mouse to resize the window to 1000px for example, I want the content still 1600px and a scroll bar is added to help users view the content.
And if users open the window initially at let's say the smaller screen 800px height. I want it first make full height but then when users resize the content will fit the resize window.
Am I confused about my idea but is it possible to do so?
If you mean zoom when you say resize and mouse. You can use
window.resize = function() {
//will be called whenever the window changes size. I.E zooming in or changing the window size manually
}
To pick up that behaviour, but the best approach I believe would be the place the content you wish to have this property into a div wrapper. As that way you can set the size manually.
Hope that helps
Let's do it by steps:
are you using any framework ?, Frameworks generally use the window's resizing base, the percentage of the window used, so it will adapt whenever the user decreases or enlarges the screen, if you want the static screen when resizing, change the css attributes of your framework, or create your layout with pixel or hexadecimal from scratch. To create an adaptive window on the first access and then leave it static, first you have to put your highest value DOM element (html, or window) in css, and the other elements you leave in pixel values, if you need , also use the "position: fixed" attribute.
I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }
Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.
I have a facebook canvas app setup with width and height as fluid in the Advanced app settings.
What I need to achieve is to set the height of my canvas app equal to the height of the Facebook sidebar(side pane where all the FB adds and links appear).
Currently the canvas app is set to fluid which sets the height of the app equal to the view area, so what happens is the FB sidebar is bit taller than the view area and scrolls the page by default and hence creates space below my canvas app.
I have tried setting the height to fixed but then it removes the scroll bar(adds overflow hidden to the iframe) from the iframe which is not desirable as the app contains content which exceeds the fixed height.
Check this for better understanding http://jsfiddle.net/v2QKN/5/
Just stop the scroll when they have reached the bottom
Ok, this is not probably the neatest solution out there.
But that white space kept happening to me when the body inside the iframe was fully scrolled already, so the main window scrolling took over.
So, a very effective solution for me is simply stopping the scroll when I don't need it anymore. Users are going to scroll inside the canvas 99% of times. So to do this we only need a few lines of javascript:
$("body").on("mousewheel", function(e) {
if ( ( window.innerHeight + document.body.scrollTop) >= $("body").height() ) {
e.preventDefault();
e.stopPropagation();
document.body.scrollTop = document.body.scrollTop - 1;
}
});
See it in action here: https://apps.facebook.com/hiphopexpress/
Note: the mouse wheel event is only triggered by mouse wheels. Still, with this solution we are improving the experience of the vast majority of our desktop users.
It's not possible to set your canvas app to be the height of the sidebar, however you can use a fixed canvas height along with the Javascript SDK setAutoGrow function which will resize the frame that the app is contained in to fit it's content. I think this is your best option, if you don't want the side bar to be taller than your app content.