I am trying to hide the scrollbar of my iPhone but overflow: hidden doesn't seem to be working. I also tried touchmove(e) {e.preventDefault()} but if I drag from down to up, I still see the scrollbar appear.
If I do position: fixed, then my page jumps (for example: if I open a modal view with my addressbar and nav bar minimized, on doing position: fixed, the address bar and nav bar appears back causing a jump on the page.)
Any advice would be appreciated.
I have also tried adding the styling for the scrollbars like:
.hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0px;
background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-button {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
but still doesn't hide the scrollbar.
Related
I am using html/css/js to make a website but a scroll is appering because of some effects I added. But I don't want a user to see the scrollbar or even scroll with middle mouse button. What can I do to solve this problem?
Guesswork solution:
body { overflow: hidden; }
https://developer.mozilla.org/de/docs/Web/CSS/overflow
you can use css for this problem if you don't want the scroll to appear
overflow: hidden;
for more you can refer this
overflow
you can use in CSS
overflow:hidden
https://developer.mozilla.org/de/docs/Web/CSS/overflow
or if you want to have scrolling but you can hide it
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
I have an issue on my mobile site with the address bar of Google Chrome. I have a fixed navbar on my website and at the moment i scroll down and the address bar dissapear, when i open my menu, a white space (size of the address bar) appears at the bottom and i need to scroll up to make the address bar appear thus removing the white space. This is my menu css:
#menu {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 10000;
padding: 0;
background-color: blue;
overflow-x: hidden;
overflow-y: auto;
}
Other web browsers are working fine on mobile, what can i do to get rid of that address bar blank space?
I have the same problem after upgrading my Chrome. I got it resolved by changing position to fixed.
https://developers.google.com/web/updates/2016/12/url-bar-resizing
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.
I implemented the fancy box as usual:
<img src="img/fotos/architektur/thumbs/1.jpg">
<img src="img/fotos/architektur/thumbs/2.jpg">
It works totally cool on Desktops but on my iPad it only works with the left control. A move forward to the next image (right arrow) doesn't work... Why?
if "cyclic" is set to true, maybe there's an overlay issue
did you try to display the page in a desktop window resized to ipad resolution? maybe with "Pesticide" activated ? (it's extension for chrome, will make outlines on all elements)
.fancybox-overlay {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
/* z-index: 9999;*/
background: url('fancybox_overlay.png');
}
I'm having an issue with an Orbit slideshow, part of ZURB's Foundation.
http://visiondemo.com.au/tmp/
If you click on the header logo or land on the homepage by clicking a link, the slideshow loads perfectly. No issues. However, if you hit refresh, it's missing.
Also, when the page is refreshed and the slideshow is missing, resizing the window makes it magically appear.
Any ideas how I can get it loading at all times?
Cheers.
Hmm this answer will be quite a hacky way of doing things but I think it'll work for you in a way or another..
Firstly to fix the height: 0px problem in the data-orbit.
Since you have chosen the content of your orbit to be an actual caption as well then, try to add this in a <style> tag or in your style.css. (#note this is only for the medium-up block only, supply your height for the small block).
.slideshow.show-for-medium-up > li {
height: 421px !important;
}
now thats already good and working, you'll see your orbit now.. apparently another problem would appear. It would display the orbit before the content's .orbit-caption finishes styling the list. So append this small fix to your style.css
/* Orbit Fix */
ul[data-orbit] {
margin: 0;
padding-left: 0;
list-style-type: none;
}
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}
/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }
/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
display: block;
}
UPDATE:
I think thats because you show the image only when the screen is small, I recommend adding this,
.slideshow.show-for-small-only img {
/* change the img height here */
height: 200px; /* Change this as you see fit */
}