Develop Reference

How can I arrange horizontally arranged sections, in my web page, as vertically so as to make my page responsive on devices

My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...

The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.

css allow div to scroll anywhere, but pan with Hammer if at the top

First i would describe what I'm trying to achieve:
Basically I have a simple scrollable div as a container. But once it is scrolled to the top, I want the entire div to be pan-able (eg. to swipe the container down) - when i attempt to swipe it down. But I want to retain the scrolling in the case that I swipe it upwards (scrolling downwards), it scrolls normally downwards. Check out Facebook's container element when it opens a container on their app.
I am currently using a simple div with panning from Hammer and a scrollable div, but i encounter a problem:
Once I allow the entire div to be pannable, I cannot scroll the div now.
Hence, I cannot detect whether a user is attempting to swipe down or up the div to pan and scroll the div respectively.
I am wondering what are some suggestions to approach this conflicting issue! Thank you!

Prevent hiding navigation bar when scroll is set programmatically

I have a navigation bar which becomes hidden when the user scrolls down and is shown when the user scrolls up. Similar behavior is implemented in the Headroom.js library. The logic of hiding and showing is called on the scroll event.
I also have a large table where I prepend some rows from time to time. I want this table to keep the user's view position even when the new rows are added. This is implemented as proposed in this answer.
The problem is that when I prepend some rows, scroll position changes (It is changed via setting scrollTop property to keep scrolling position unchanged) and the navigation bar is hidden. I want to hide the navigation bar only if scrolling is initiated by the user, not by the software.
Can I prevent firing scroll event when changing scrollTop property? How can I combine this two techniques - adaptive navigation bar and table which holds its viewport unchanged when the data is added?

If there is no easy way of controlling the default scroll functionality. Then You can apply condition using custom flag, when to trigger scrolling event and when to prevent it.
Check this thread for further understanding. https://stackoverflow.com/a/12763950/10664244

Click on button to display div which should be fixed when scrolling down. Div not showing properly though?

I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??

Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.

Bootstrap sidebar item hidden issue on multiple hierarchy

As shown in below screenshot, can be noticed here on getbootstrap.com by lowering the browser height. As sidebar is fixed there for when height of sidebar increases specially in case of multiple hierarchies it starts hiding items underneath it. And page scroll do nothing to show the hidden items.
How can I overcome this issue?

You need to enable scrollbar to side panel so user can scroll for hidden menus.
you need to fix visible height of window to sidebar container.