My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!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>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!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>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!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">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
The svg rect works well in chrome, but not in firefox. What is the problem? Also, is there any special rules in using svg in firefox?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect {
width: 300px;
height: 100px;
fill: green
}
</style>
</head>
<body>
<svg width="400px" height="110px">
<rect/>
</svg>
</body>
</html>
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>