Placed popup mask in page. its showing white space while rotating mobile screen for a second.
please find the sample,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
html, body {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
.skMask {
height: 1500px;
width: 100%;
opacity: 0.9;
background-color: #000000;
}
</style>
</head>
<body>
<div class="skMask"></div>
</body>
</html>
i have tried using backface-visibility option. but still its showing on rotate.
Related
Hi i am new to javascript, i wanted to do a scrolling show and hide for my 2 divs, however the one i did is currently when scroll it change to bg-2 already but the text is like cut. its not the exact same position as bg-1. Can i ask for help?
This is the code:
https://codesandbox.io/s/hopeful-estrela-zfkih7?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div style="position: fixed; top: 0; width: 100vh; height: 100vh;"></div>
<div class="bg-1" id="bg-1">
This is testing UI
</div>
<div class="bg-2" id="bg-2">
This is another testing UI
</div>
<div class="bg-3">
This is third testing UI
</div>
</body>
</html>
<style>
.bg-1 {
height: 80vh;
background: blue;
position: relative;
z-index: 99999;
}
.bg-2 {
display: none;
height: 80vh;
background: red;
position: relative;
z-index: 99999;
}
.bg-3 {
height: 50vh;
background: pink;
}
</style>
<script>
window.addEventListener("scroll", function () {
var elementTarget = document.getElementById("bg-1");
var elementTargetRewards = document.getElementById("bg-2");
console.log("window.scrollY", window.scrollY);
console.log("elementTarget.offsetTop", elementTarget.offsetTop);
console.log("rewards", elementTargetRewards.offsetTop);
let lastScrollTop = 0;
if (window.scrollY < elementTargetRewards.offsetTop - 100) {
console.log("up 1");
$("#bg-2").show();
$("#bg-1").hide();
} else if (window.scrollY < elementTarget.offsetTop) {
console.log("up 1");
$("#bg-1").show();
$("#bg-2").hide();
} else {
// console.log('down 1');
$("#bg-2").show();
$("#bg-1").hide();
}
lastScrollTop = elementTarget.offsetTop;
console.log("last", lastScrollTop);
});
</script>
Desired output when scroll:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('img_parallax.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<p>In this example we have turned off parallax scrolling for mobile devices. It works as expected on all desktop screens sizes.</p>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
<div class="parallax"></div>
</body>
</html>
i am trying the image to cover full page.
Vertical scroll : allowed
Horizontal scrolling : disallowed
Image : image must show full page without leaving border and responsive based on device size.
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>
The issues is, it leaving a blank space in all 4 side of the screen. How to fix this?
It may Help you :
*{
padding:0px;
margin:0px;
}
img{
width:100%;
object-fit:cover;
max-width: 100%;
}
You can use the background image property
Check here - W3schools
You have to reset the browser added styles to the body tag by removing the padding and margin from it, feel free to add this at the top of your styles:
body {
padding: 0;
margin: 0;
}
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
If you want the image to cover full page, better use background-image and background-size cover, using this way your aspect ratio is also maintained
html, body {
height: 100%;
}
body {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
Try this
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>
My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>
I am trying to create a website that scrolls horizontally with a fixed character in the centre, similar to http://www.rleonardi.com/interactive-resume/.
When trying to change the css to resize the images it doesnt affect the website and I dont know if I need to use the position:fixed to fix the character in the centre.
background
floor
character
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Your title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background>
<character><img src="Photos/Character.png" alt= "Background image"/> </character>
<div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>
</body>
and css:
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
For a complex project like this you're really going to have to wrap your head around the positioning of elements and how fixed/relative and absolute positioning work. This should set you on the right track. In this case I used chrome inspector to have a look at the example that you are trying to replicate and I can see that the character has position: absolute. Here's some css with the character resized. Hope it helps!
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
background img {
width: 100%;
}
floor img {
width: 100%;
position: fixed;
bottom: 0;
}
character img {
position: absolute;
width: 200px;
bottom: 140px;
left: calc(50% - 100px);
}
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() ;}