Cancel scrolling on HTML5 - javascript

I have a page in HTML5
The page is defined as 100% height, and still have a scroll bar.
At first I thought it was because the Google Map that I have in the page, and then I opened the page in another browser, scroll bar smaller than the first browser,
then I got the idea that it is because of the different Tool Bars.
Is it really because of the Tool bar or is it because of the map, and how to fix it?
Thank you...
My css:
.ui-mobile
{
height: 99%;
width: 100%;
}
ui-mobile-viewport.ui-overlay-c
{
height: 99%;
}
#map_canvas
{
height: 99%;
width: 100%;
position: inherit;
}
My Html:
<!DOCTYPE html>
<html class="no-js">
<head>
...
<title>Main Page</title>
</head>
<body>
<div id="MainPage" data-role="page">
<script>
$("#MainPage").live("pageinit", function () { ... });
</script>
<div id="map_canvas">
</div>
</div>
</body>
</html>

If this is not a problem for you take a look at my jQuery solution:
$(window).bind('resize', function () {
var screenHeight= 0;
screenHeight= $('[data-role="page"]').first().height() - $('[data-role="header"]').first().height()- $('[data-role="footer"]').first().height();
$('#map_canvas').css('height',screenHeight - 4);
}).trigger('resize');
Page height - header height - footer height - 4 = content height
I am using - 4 to counter borders. Use only -2 if you have only footer or header. None if you have only map.
For this formula you need a viewpoint meta tag set, because you will get wrong screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1" />
This is a jsFiddle example: http://jsfiddle.net/Gajotres/HKjEF/
Tested in Win Firefox, iPad Safari, Android 4.1 Chrome environments.

First of all please share HTML code.
For your question : Yes, it may be because of Tool Bars or some other default margin, padding in the page.
You can remove the scroll-bar by setting height as 98% or 99% which ever fix scrolling issue for you.

Related

How to make an alert banner have height and float?

We have an position: fixed; alert banner which appears at the top of the page to display different alerts. We want it to have a height (or appear to have height) so that it doesn't cover up the top menu of the page, but rather pushes the page content down. When the user accepts or x's out of the banner, the page should pop back to the top. When the user scrolls down the page, the banner should float at the top of the window, remaining on screen the whole time.
The current strategy is very kluge and uses a setBannerHeight() function all over the place that gives a above our banner a set height, pushing the main page content down and allowing the banner to appear to 'take up space'.
It's proven to be non future proof and does things like prevents our iOS Smart App Banners (a totally different banner) from appearing properly.
Is there a way I can either give a fixed element a height, make a sticky element float (so far I can't, this is in a self contained alert.component.ts component so don't think I can give a parent element height), OR, perhaps a 3rd party alert library you'd recommend that already has this solved?
This may help. It's simple, using position: sticky in CSS and some vanilla JavaScript. The alert stays at the top of the page when a user scrolls. It disappears when a user clicks on it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="alert">Alert</div>
<nav>Menu</nav>
<section>
<p>Add enough content here so you can scroll the page.</p>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
#container {
width: 600px;
margin: 0 auto;
}
nav {
width: 600px;
height: 100px;
background: lightblue;
}
#alert {
width: 600px;
height: 40px;
position: sticky;
top: 0;
background: orangered;
cursor: pointer;
}
section {
width: 600px;
}
const alert = document.getElementById("alert");
alert.addEventListener("click", function() {
alert.style.position = "static";
alert.style.display = "none";
})
One way to do it is by toggling a CSS class to the <body> that matches the state of the alert (open or closed). This class affects the behavior of the body, specifically his top-padding which should equal the height of alert.
Now all you have to worry about is to toggle the class on the proper show/hide events of the alert component.
body.alert-on {
padding-top: 60px;
}
.alert {
position: fixed;
}

CSS position fixed problem with clippath or image mask only on Chrome

I'm trying to achieve an effect similar to background attachment fixed.
I can get the result I want with clip-path or -webkit-mask-image, however on Chrome sometimes the fixed image gets hide when its out of the view and when I'm scrolling back, it does not show up until I select something or change the browser width. I have tested this on Firefox and Edge and they were both okay.
I want to know what is the issue and is there way to fix that.
gif issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue</title>
<style>
.parent {
position: relative;
width: 500px;
height: 200px;
background: lightcoral;
clip-path: inset(0);
box-sizing: border-box;
}
.child {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/800/400");
}
.filler {
width: 100%;
min-height: 2000px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
<div class="filler"></div>
</body>
</html>
As well as using position: fixed on your child element, you also need to apply background-attachment: fixed. Both these styles are required.
I went through a painful process of trying to get clip:rect working a few months ago, with the same issue as you're experiencing (I understand you're not using clip:rect). The underlying issue was that, when reloading the page, if the clip:rect area was not currently within view, the contents within it would not be rendered.
Resizing my screen or turning a style off and back on in the developer panel would re-render my images correctly but was not a solution, just evidence of the issue.
The solution, for me, with clip:rect, was in the use of the position style on the contents within the clip:rect element. I was initially using relative positioning but it needed to be fixed or absolute.
Please check what positioning you're using and see if this helps.
On an additional note - and very frustrating one too - the browser which I tested this on at the time was Chrome, mobile and desktop. I had it working very well once I'd completed development and tested it thoroughly. Today, ironically, the only browser which is not working with my clip:rect content is desktop Chrome!
This must have been a recent update to desktop Chrome... back to the drawing board.

The WebGL 3D Animation is stopped when scrolling down the page

I added a WebGL 3D animation to the page with VantaJS.org, I have completely written the code as same as the official example, but the 3D animation is stopped once I scroll down the page. You can check the demo here: https://lovage.io/3d and my codes below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<script src="https://lovage.io/3d/js/three.r92.min.js"></script>
<script src="https://lovage.io/3d/js/vanta.wave.min.js"></script>
</head>
<body>
<section id="layer"></section>
<div style="height:3000px;"></div>
<script>
VANTA.WAVES({
el: "#layer",
});
</script>
</body>
</html>
However, the official demos works fine on my browser. Anyone can give me any tips debugging?
Thanks in advance!
You need to give height and width to your section.
You attached the event on that tag but since has no dimensions you lost the animation at the first scroll.
Try this
body, section{
height: 100%; width: 100%
}

Blank space under body in Chrome Device Mode

Why there is a blank space under body tag on mobile view ( chrome only, ff and ie work fine )
the code is simple:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
display: flex;
width: 500%;
background: pink}
</style>
<body>
</body>
</html>
image:
It's just the Chrome device view. You have scrolled the view down. The screen height is set at 1024px, so the body won't go any lower. There's no need to worry since you won't be able to scroll down once you have it opened on an actual device. It's just the Chrome viewer, there's nothing wrong with your site.
Edit:
I noticed you had solved it by using a fixed position. You shouldn't do that. It won't be useful in normal use, and might lead to problems in later development.

How do I embed a responsive website inside a website without losing website design responsivness?

Hi I have a responsive designed website embedded into another website. But the problem is that on mobile devices and tablets the embeded website dosent respond to the device window size. Code posted below. Thanks in advance for any help.
<!DOCTYPE html>
<html>
<header>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
html, body {
height: 100%;
}
div {
height: 99%;
}
object {
width: 100%;
min-height: 100%;
}
</style>
<script>
$(document).ready(function() {
$("#siteloader").html('<object data="www.responsivesite.com" />');
});
</script>
</header>
<body>
<div id="siteloader"></div>
</body>
</html>
Use an iframe to embed another page. The media queries will then be treated based on the width of the iframe. For example,
window width - 480px
iframe width - 100%
#media (max-width:480px) will trigger.
window width - 480px
iframe width - 80%
#media (max-width:480px) will not trigger.
Put this on the head of the html
<meta name=viewport content="width=device-width, initial-scale=1">
Source

Categories

Resources