I have a very long line at the top:
#top-line {
background: #00A1E0;
border-bottom: 1px solid #FFF;
height: 4px;
position: absolute;
top: 0;
left: 0;
width: 10000px;
}
So I'm using overflow-x: hidden to prevent horizontal scrolling:
html {
overflow-x: hidden;
height: 100%;
}
body {
background: #EDEDED;
font-size: 12px;
font-family: Arial, sans-serif;
color: #666;
height: 100%;
overflow-x: hidden;
}
It works OK, but in mobile phones I still can scroll indefinitely to the right.
Is there any workaround for this?
You should define the width:100% or max-width:100% to prevent horizontal scrolling because you define the width of the area mobile device can occupy and by its nature it is occupying more than the width of the mobile width itself so define as 100% which will restrict it to mobile width.
define body width
body{
width:320px//or 100%;
overflow-x:hidden;
}
Another thing you might want to try if you've ended up here is to adjust this meta tag in the html head:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
html body(tag)
ontouchmove="blockMove()"
js(document)
function blockMove() {event.preventDefault() ;}
Related
I am trying to make a web app, using angular to make a standalone PWA on IOS, while using the viewport-fit = cover meta tag. My CSS looks like this:
body {
width: 100%;
height: 100vh;
background: blue;
}
.test{
background: red;
height: 100%;
width: 100%;
}
As you can see ideally the entire screen should be red, but no matter what I do it there is always a gap on the bottom. I even tried adding padding to test div, but the gap doesn't go away. Do not this issue only comes up after install the web app using "Add to homescreen" on safari.
The viewport-fit=cover tag is kind of a pain to use, but here's what I did to get your code to work:
in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In the <body>:
<body>
<div class="test">
</div>
</body>
In the style.css:
body {
width: 100%;
height: 100vh;
background-color: blue;
}
.test {
position: fixed;
top: 0;
left: 0;
background: red;
height: 100vh;
width: 100vw;
}
You can see the full code at https://glitch.com/edit/#!/neon-wirehaired-egg?path=index.html and everything running at https://neon-wirehaired-egg.glitch.me/ and Apple has more info on https://webkit.org/blog/7929/designing-websites-for-iphone-x/
I am using:
<script type="text/javascript" src="#Url.Content("~/Scripts/htmltooltip.js")"> </script>
from here: http://www.javascriptkit.com/script/script2/htmltooltip.shtml
<i rel="htmltooltip">...tooltip link...</i>
<div class="htmltooltip">
tooltip content
</div>
The style is injected in the Layout page. When you re-size the browser window and hover over the tooltip it is cut-off on the right side.
<style type="text/css">
div.htmltooltip {
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: #ffff99;
border: 2px;
color: black;
padding: 10px;
width: 750px;
}
</style>
I need the tooltip to stay in the middle of the browser window on any screen size. Any help is appreciated.
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.
I have a mobile website and I'm facing an empty area on the right (when I scroll the page to the left), as you can see below:
1 - Normal page:
2 - Scrolling page to the left:
All the page content is inside of "container" id. The site is divided by 5 divs, called "secao".
body{
background-color: #323031;
padding: 0;
margin: 0;
font-family: Planer;
color: #FFF;
font-size: 10px;
overflow-x: hidden;
}
html, body {
height:100%;
}
#container{
width: 100%;
display: none;
}
.secao{
position: relative;
float: left;
width: 100%;
}
If I change .secao CSS inserting border: 1px solid red, I got it:
Here you can find the website: http://www.camona.com.br/ideaos/site/laboratorio/mobile/
Could you please help me to find a solution to this issue?
Thanks.
Looks like your FB like iframe is increasing the page width. There may be more things like this increasing the width.
If you haven't already, putting
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head> section should do the trick. You can read more about it if you wish here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.