on the following site i have two hidden panels labelled "show map" and "show floor plans".
When the the header of each is clicked the slide panel is opened.
The floor plans is long and thus will go below the page view. is there anyway to keep focus at the bottom of the panel, so that when it's clicked you manage to see the whole window opening, thus avoiding scrolling?
the dev link is: http://marldon.staging.dante-studios.com/property.php
Thanks in advance.
I believe what you're looking for is the scrollIntoView method:
$("#foo").show()[0].scrollIntoView(false);
Passing a value of false scrolls the bottom of #foo to the bottom of the viewport. Passing true or not passing any value aligns the top to the top.
This method is supported both by standards-friendly browsers and by Internet Explorer.
Related
I have a list of elements and a sticky button, fixed at the bottom of the screen. So when the user scrolls down in the list the button stays at the bottom. This works perfectly fine but when I open up my keyboard, the button is pushed up as well, hiding the other elements which are on the top of the screen.
Can I place my button somehow that it remains sticky on the screen but when the keyboard is opened up it doesn't get pushed up?
My current (hacky) implementation is that I am hiding the button when the keyboard opens up but I don't like it very much.
you must be using any library for keyboard like react-native-keyboard-spacer or etc so you can disable that for that specific screen, another hacky implementation #mikasa
i assume you are wrapping your component with a KeyboardAvoidingView, that would explain your button getting pushed up, so you should consider passing false to "enabled" prop when your keyboard is open, this will cause the keyboard overlay your button. you can check out the docs here https://reactnative.dev/docs/keyboardavoidingview#enabled
I have a pop-out navigation menu that appears on smaller screens when an 'open menu' button is clicked, tapped or keyed with enter or spacebar. (Javascript, CSS and HTML; no jQuery).
The navigation uses divs, rather than an unordered list, with a <nav> container but the problem outlined below happens whether the menu is in divs or an unordered list.
If a keyboard user is tabbing, opens the pop-out, continues tabbing, the user is cycled round the trapped area until either a navigation link is opened with the enter/spacebar keys or the pop-out is closed by using the enter/spacebar on the 'close button' or the Escape key is pressed (with thanks to Graham Ritchie for this code).
It works fine in general. See this Codepen that works.
BUT, if the last item in the menu is both a direct link and a parent with a sub-menu, then the trapping does not work and anyone tabbing in the pop-out menu finds themselves in the browser's address bar area outside the website itself or, in the case of this Codepen where it is not working correctly, the tabbing moves down to the 'Console, Assets, Comments...' area at the bottom of the browser.
Can anyone explain why this is happening and what I need to do to resolve it? Thank you.
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
I'm trying to find the best technique for showing a navigation/menu for a mobile site I'm working on. So far all my solutions have flaws, and I was wondering if anyone could point me in the right direction. (You may have to reduce browser window size to make the examples work as intended)
First off, take a look at this "basic" example: http://audunaas.no/menu/problem.html
You'll notice the content is still scrollable while the navigation is open. This is confusing and annoying.
My first attempt at a fix was to set the body to overflow:hidden and position:fixed whenever the navigation is open. Example here: (Had to remove link because maximum 2 links in post)
This, however, causes the body to snap back to the top and "forget" its scroll position. This means you are taken back to the top of the page whenever you open the navigation. Not good.
Lastly, my best solution so far is one where i put all the page content inside a #scroll-area-div with a fixed position taking up most of the screen, and body scroll set to hidden. Example here: http://audunaas.no/menu/
This solves most of the problems in the page itself, but breaks the "memory" of the back button. This means whenever you click back in your browser you are taken to the top of the page instead of back to where you were before you decided to click a link. (Mobile safari seems to be the only browser that remembers scroll position on div's aswell as body)
I can't really think of any more solutions to this, except for maybe some sort of javascript. Does anyone have some experience with similar cases, or any ideas on how to accomplish this?
The solution must:
Prevent scrolling on page content when navigation is open
Preserve scroll position on page content when navigation is open
Remember scroll position on previous page when back-button is used
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!