I´m using awesome Brad Frosts left nav flyout for my responsive design navigation. (http://codepen.io/bradfrost/pen/IEBrz).
I need some advice for the flyout. I need the flyout-area to be scrolled separately, not affecting the main content area — like the facebook app.
My experience so far is pretty bad when it comes to crossover support for fixed, scrollable areas (with complex elements inside) for smartphones combined with relative heights and meaures (the site is responsive). I´ve tried iScroll and jQuery mobile so far.
Would it be possible to accomplish scrolling the flyout ONLY without a huge amount of javascript-plugins, client-sniffing and CSS vendor-specific hacks?
My client really likes the flyout pattern. Performance, crossdevice support and non-hacky code is a "must have". Native look and feel is a "could have". I have no problem recommend another way to solve the navigation, I just need to be sure of my decision. Of course everything can be done — but to what cost?
Do you have any recommendations or advice before I cut the rope :) ?
The preview you've put up is looking really promising!
What I would suggest is that you use a little JavaScript to detect the window height. You can then set the height of the fly-out panel to the same height as the page and use display: block; overflow: auto. (It's possible that it already has block-display set).
This will force the panel to scroll within itself rather than flow further.
A few things worth bearing in mind:
You'll need to recalculate the height on window change or orientation change;
Touch-screen devices tend not to display scroll bars, this is a double-edged sword because it means you get a really nice app-like feel when you swipe up/down. However, it also means that users may need a little more of a visual hint that there's something to scroll for!
Related
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
Is there a way to adjust the zoom in Safari's responsive design mode? The part I highlighted can't be selected unlike the other stuff. I'm using Safari 10.0.1
I wasn't able to find anyone asking this question let alone answering it. The closest is this: In Safari's "Responsive Design Mode" can you hide all of the device options on top for more screen real estate?
Seems like a really poor design choice for the browser to automatically adjust the zoom, show the percentage, and then not allow you to alter it...
(I can't believe this is my first StackOverflow question.)
At the time of writing you can't. You have to manually select x1 from that little dropdown - it's a real pain as that resets on each refresh.
Yes, it is possible. Try and adjust the width and height of the responsive "area" in the responsive view. The adjustment is done using the handles displayed on the left/right middle and the bottom center of the responsive viewport. The aspect ratio of the responsive view area is what determines the zoom level. If you make it very tall, then the zoom level gets reduced to display the entire height of the content in the fixed available space...
Thanks.
How to make a website get treated like in image when window resizing? I don't know if this could be done with the viewport or not. I have looked at some answers and most of them say that it not possible or not a standard. Yet on this very site you can see when zooming in that elements do not get resized or at least the element to window size ratio is always the same. but when you go to a website like https://www.lynda.com/ you can see the elements resizing when zooming in and there is never a scrollbar for the width unlike stackoverflow. So how can someone site's be like stackoverflow in that regard? because lynda.com way seems to be the default.
Thanks in advance ....
If I got it correctly, you are interested in these concepts:
Fixed layout/design: SO like layout, elements do not react if viewport is changes
Response layout/design: Lynda like layout, elements change or even disappear, if viewport becomes small enough
A nice, short and illustrative presentation can be found here, where you can also find out about other design modes.
Is there any way to control the speed or in other word, the viscosity of scrolling by the user in a scrollable element in a mobile browser?
I'm focusing on android browser.
No, scroll speed is controlled by the browser (and usually directly by the settings on the computer/device). I think your code wouldn't effect that.
In regards to a work around...
There are ways you could try to fake a different scroll speed by
moving your own content instead of the page, however, it's a bad
idea in terms of usability.
If the interest is that users have to scroll multiple times to get
to content further down the page, I would also suggest anchor points
with a smooth scroll option built into it. That way the control
to jump to that content faster is left to the user.
And lastly, if you're concerned about users leaving your content too
quickly and missing important information, it may be a better idea
to better style your content to visually catch their attention
before they begin scrolling away from it.
I hope this information helps you moving forward.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.