On my website, and seeimingly on every page on the internet that I'm searching on this problem exists, and I am wondering if anyone has a solution to this.
If a website has a navbar at the top, then you click your cursor on a textbox, scroll down on the page so the textbox is out of view. Start typing and the page will scroll back to the tetbox that you are typing on, except the navbar will be blocking the actual text, there is no offset to account for that navbar height.
Here it is in action on w3schools.com for example:
https://www.w3schools.com/html/html_forms.asp
I have set my cursor to the "Last name:" field.
Now I scroll down so the field is out of view.
Now start typing again. You will see the website scroll back to the field so it can be in view at the top of the page. But note that the navbar at the top is blocking it.
This is prevalent all over the internet. w3schools for example and even facebook.
Has anyone every noticed and solved this issue? I don't even know where to start.
Related
I'm having a hard time with a button and hope you can help me. The button - Next - is on the first page of subscription page, when clicked it goes to the register page but is keeping the scroll down - showing the footer and not the begining of the form. I tried to use offset, criating another div, add a new function, scrollTo, and nothing seems to work. Any tips are welcome! tks
There's something odd in your sequence of pages but to surely address your problem, on your registration page (that loads scrolled down), run this once the document is ready:
window.scrollTo(0,0);
This is a duplicate question of Disable all scrolling in an iframe, but allow clicking but I'm going to risk asking it again because that question was asked in 2014 and no solution was found (except that it can't be done). I'm desperately trying to find out if this can be done now. Therefore I would like to post this question again:
I'm trying to disable all forms of scrolling in my iframe, but still allow the user to click a button that appears in the iframe. I've successfully disabled all forms of scrolling (scroll bars, mouse wheel, etc) by using scrolling="no" and style="pointer-events: none;", however the later disables all forms of clicking to. Is it possible to prevent all forms of scrolling while still allowing the use to click within the iframe to inter-act with a button?
Unfortunately I don't have control over the iframe's content.
Possibly there is a way how to do this now after so many years? If so, I'd be very happy to hear about it. I checked all kinds of similar question of clicking and scrolling iframes but I did not find a solution yet.
Hmm... Honestly, I've never tried that.
But I imagine you could put a div over the suface of the iframe (as if it was a transparent overlay), and then when the user clicks the invisible div (that is on the iframe) then triggering a click event on the iframe?
If you happen to need the click's coordinates then make sure the div has got the exact same dimensions of the iframe (but with less z-index, so you make sure it's ON it) and then pass the div's click event coords to the iframe's click event you are gonna trigger.
Let me know if this works!
Regards.
So the console preview panel at the bottom of the page remembers how big you had it last time you previewed. Usually this is great! But somehow mine is currently maximized, so the only thing that shows up is the Page dropdown at the top of the page (and anything in the console, if I switch between pages and the pages have things that log on load). The rest is just white console. Any idea how to get back the default view where the console is 20% of the bottom of the page? There is no visible dragging bar frame thing anywhere.
I can change my preview to console=0 to be able to use it, but I'd like a way to restore the default position of the panel.
Normally you should be able to hover on the top border of the console panel and resize it as you wish. An icon will appear, similar as in the image below:
Nonetheless, if you are doing your previews on a mobile device such as a tablet, then such thing is not possible to do. Therefore; a hacky way to do it would be to put the following code on the onAttach event handler of the page that is loading:
var splitPanel = widget.root.getElement().parentElement
.parentElement.parentElement.parentElement
.parentElement.parentElement.children[0].children[3];
splitPanel.style.height = "75px";
Nota bene: this is intended to ONLY work in preview
I have an issue regarding the popup position of facebook like button. When a user likes he will get a popup where he can type some text and confirm or decline the like. It's all perfectly clear.
Usually I put my like button plugin in the footer and I have no issue with that. User comes in, clicks like, popup appears, user scrolls a bit to see popup and all is well.
My problem arises from the fact I use parallax theme so when the user presses like page will increase its height to accommodate this popup and suddenly I can see the images from the parallax. This is ugly!
Please check the page here to see what I am talking about.
Is there a way to force this popup to open above the like button?
I didn't check it properly but why don't you try to make the position: relative where you put the fb like button and see your luck.
I'm developing vaadin application with a home page and a multi tab view.
On the home page there are two link buttons shown like this 'Login | Register', i.e. with some spacing and separated by a pipe character. When I click on 'Login' what happens whilst still on home page and just before the login screen is displayed is the spacing between the two links and the pipe char is lost like so 'Login|Register' and hence they appear to have lost position then the login page is displayed.
This kind behaviour is observed throughout the application and not just on the home page, i.e. the behaviour of items on screen changing position just before changing display.
My best guess why this is happening is that for some reason the CSS styling is lost a second before display change hence causing the slight position movement.
This is rather annoying as it seems the view flickers just before view change.
Any ideas why this is happening and how to stop this behaviour.