I'm using jQuery to fade in an <article> element which contains a <section> element.
Outside element is display:none, position:fixed, and z-index:5. Inside element is position:absolute.
Basically the article gives a frame and the inside section holds the content and has a scrollbar.
I'm fading in the outside element and expecting the inside to follow suit.
In IE9+, FF, and Chrome it works as expected.
In IE8- it does not. The outside article doesn't fade in at all - remains invisible, and the inside section is positioned relative to the browser frame and is always visible. Other elements on the page are all skewed and the page becomes mostly non-functional.
Code samples:
article
{
display: none;
position: fixed;
z-index: 5;
}
section
{
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}
and
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<article id="contentFrame">
<section id="content">
Lorem Ipsum
</section>
</article>
</body>
</html>
and
$("#contentFrame").fadeIn(2000);
IE8 and below does not support HTML5 tags such as article and section.
HTML5 elements CSS & Javascript interaction in IE8 and below
HTML5 elements in Internet Explorer: runtime insertion
Related
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;
}
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.
I'm trying to create something similar this web page, where a video is used as the background and as the user scrolls up and down the text/background video change appropriately so as to tell a story.
Right now getting the video to play is about the only thing working. The video will load, and play, as intended. However the <div> elements are simply stacked below the video one by one. When the user clicks anywhere on the page, I'd like the text to scroll up, from the bottom, and finish scrolling once they reach the same position on the page as the previous text... however I don't think I'm using the .animate() function properly.
This seems like it'd be relatively easy to do, so here's my admittedly weak first attempt.
fiddle: http://jsfiddle.net/f06w76bv/
<!DOCTYPE html>
<html>
<head>
<style>
.textConatiner{
position: absolute;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
left:10%;
}
video.bgvid{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(TurbineStill.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="TurbineStill.png" class="bgvid">
<source src="Turbine.mp4" type="video/mp4">
</video>
<section>
<div class="textConatiner" id="one" style="top:50%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
<section>
<div class="textConatiner" id="two" style="top:150%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).click(function () {
var myDiv = $("#two");
var scrollto = myDiv.offset().top + (myDiv.height() / 2);
myDiv.animate({ scrollTop: scrollTo }, 1000);
});
});
</script>
</html>
EDIT
By adding the position to the div container I'm able to get the original div positions exactly where I want them when the page loads. However, I still cannot get the animate method to move the second div into the page from below.
Your question isn't exactly new, it's just a bunch of questions in one really.
First of all - for your positioning, you'll be able to use plain CSS like you would with any DOM element. Tutorial on that are at W3Schools for example.
Scrolling to an Element using JQuery is answered in this stackoverflow-Question.
And another stackoverflow-question about moving a video by scrolling can be found here.
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.
I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.