I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.
Related
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
I am developing a website in asp.net; and on this page is the collapsable panel control installed from ajax. My question is, when i open the panel (in which there is a few labels) the scroll bar appears on the side of the page, and the page shifts. This looks unclean. I was wondering if there is a way to prevent the scrollbar from appearing.
Thanks in advance!
If you are talking about disabling the browser scroll bar you can add overflow-y: hidden to your html element in css.
Caution - this will disable scrolling on the website.
If you want to prevent from appearing and disappearing a scrollbar you can just enable it to be always there.
html {overflow-y:scroll}
It should help with the effect of moving site to the left or right depending on scrollbar appearance. Hope it helps.
I have a series of scrollable divs on a page. When a DIV gets scrolled to say the top and the user keeps scrolling it starts to scroll the page up instead (not so much on Firefox) but on Safari and Chrome it does.
This is annoying, and I notices that on Facebook, the activity monitor, friends online and chat window do not do this. If your mouse is in the div the you can only scroll that div not the page when you reach the top or bottom.
How have they done this?
Marvellous
Facebook use a custom scrollbar instead of those that come with the browser (at least, for the friends online sidebar).
Custom made controller = custome made control. :)
I cannot figure out why, but on certain pages like:
http://www.serif.cz/folio.htm
the menu shifts just a bit to the left of where it appears on the rest of the site:
http://www.serif.cz/
I have compared the HTML and it looks exactly the same.
Any ideas?
Its the scroll bars. Firefox and Chrome do not display scroll bars unless the content actually needs to scroll. IE will display a disabled scroll bar if the content does not scroll.
You can add a disabled scroll bar to pages that do not have content long enough for a scroll by using the following CSS:
body{overflow-y:scroll;}
Or you can just kind of accept the fact that it's going to do it on those pages. It's just one of those things where it makes sense why it's happening, it's just annoying. :)