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;
}
Related
I'm trying to embed a camera feed into a page which will display manual focus and servo controls. However, I cannot get past the scaling of the content within the iframe.
The iframe boundary resizes to the width of the window. However the embedded page (which is an mjpeg page generated by an application) is not being scaled.
Here's the markup
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ustreamer Webcam</title>
<style>
.icontainer {
border: 1px solid red;
position: relative;
padding-bottom: 100%; /* set the aspect ratio here as (height / width) * 100% */
height: 0;
/*overflow: hidden;*/
max-width: 100%;
}
.icontainer iframe {
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='icontainer'>
<iframe src='http://abc.def.com:5001/webcam/?action=stream' allowfullscreen></iframe>
</div>
</body>
</html>
Do you think it is at all possible? The source page is out of my hands, unless there is no option. It just poses other complications.
The URL you are embedding there returns an image data stream, the browser will create a rudimentary HTML document around that, and an img element. A plain image has no reason to "scale" to anything by its own volition - and since the iframe content is from a different origin, you can't easily inject your own styling either.
But you should be able to simply use an img instead of an iframe to begin with, to embed this into your page - and then you can format that image directly.
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.
First time posting here so do forgive me if I have any markup issues. I'm not used to the SOF framework for writing posts.
I'm trying to make some social icons bounce on my site on hover. I grabbed the code over from jQuery UI to test it out and made some small edits, however I'm running into a problem with double images being visible on the page. When the mouse hovers over the image it bounces but a duplicate is visible from behind the bouncing image. If I move the mouse away during the bouncing session and quickly hover back over the icon it bounces correctly hiding the image behind.
So how can I force it to consistently hide the image behind?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { width: 32px; height: 32px; background-repeat:no-repeat; background-image: url(http://www.liquidclubs.com/assets/img/icon-fb.png); border: position: relative; }
</style>
<script>
$(document).ready(function() {
$("div").mouseenter(function () {
$(this).effect("bounce", { times:3 }, 350);
});
});
</script>
</head>
<br><br><div></div>
</body>
</html>
Because you are defining the image as background image.
http://jsfiddle.net/UQTY2/33/
<div> <img src="http://www.liquidclubs.com/assets/img/icon-fb.png" /></div>
div {
width: 32px;
height: 32px;
}
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.
What I am trying to do is have different parts of a page slide up and cover up the previous part. I found what I wanted to do at http://johnpolacek.github.com/superscrollorama/, specifically the "Wipe It" portion. I tried copying some of the code and including the same javascript files.
In Firefox, it works. However, in Chrome and IE, when I try to scroll down, the scrollbar jitters and snaps back to the top of the page.
I don't have it up on a site, but I do have the files that I'm using: http://www.mediafire.com/?h28etrbr5t24qyw
Any help (or more practical alternatives) would be greatly appreciated.
Yea that looks pretty cool. I would just create the code from scratch so you can get it exactly how you want. I just created something real basic. A blue main div with a red div that wipes down. Obviously you can put whatever you want on both divs.. Heres the code:
<!doctype html>
<html>
<head>
<style type='text/css'>
body{
margin: 0px;
}
#wipeScreen{
position: fixed;
width: 100%;
background-color: red;
}
#mainScreen{
position: absolute;
background-color: blue;
height: 200%;
width: 100%;
}
</style>
<script type='text/javascript'>
var visHeight;
function loadConstants(){
visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
var wipeScreen = document.getElementById("wipeScreen");
wipeScreen.style.height = visHeight+"px";
wipeScreen.style.top = -visHeight+"px";
window.onscroll = runScroller;
}
function runScroller(){
document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
}
</script>
</head>
<body onload='loadConstants()'>
<div id='mainScreen'></div>
<div id='wipeScreen'></div>
</body>
</html>
Copy and paste it into an HTML document and you will see what I mean