I have a html file.
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div align="left" style="height: 475px;">
<noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;"></div></noscript>
<div id="x"></div>
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">x.embed("x","720px","475px","x.xml","true","false");</script>
</div>
</body>
</html>
I want to insert css script within the <head></head> and the file become this:
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body{margin: 0px 0px 0px 0px; background-color:black;}
</style>
</head>
<body>
<div align="left" style="height: 475px;">
<noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;"></div></noscript>
<div id="x"></div>
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">x.embed("x","720px","475px","x.xml","true","false");</script>
</div>
</body>
</html>
Can anyone show me the steps how to do that with R?
Detailed explanation will be appreciated! Thanks!
You can do like this:
library(xml2)
h <- as_list(read_html("yourfile.html"))
css <- list('body {background-color:black;}')
attr(css, "type") <- "text/css"
h$html$head$style <- css
write_html(as_xml_document(h$html), "outfile.html",
options=c("format","no_declaration"))
outfile.html:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">body {background-color:black;}</style>
</head>
Related
I'd like to have this hover animation run once when the page loads, preferably without JS.Border must remain there after the animation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
width: 0%;
border-bottom: 5px dotted black;
transition: .5s;
}
.border-bottom-animate:hover:after {
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
That is all there is to the problem. No further details worthy of adding.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
transition: .5s;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
So im trying to create a zoomable image using css transform: scale and and overflow on the container div. However when the scale is put on the image, i am unable to scroll up or left.
Ive included my test code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<!-- CSS INCLUDES-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS INCLUDES -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TITLE -->
<title>test</title>
</head>
<style>
#zoom-wrapper {
overflow: auto;
height: 90vw;
width: 90vw;
border: 1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
.zoom {
transform: scale(2);
transition: transform ease .2s;
}
</style>
<script>
$(document).ready(function() {
$('#zoom').click(function() {
$(this).addClass('zoom')
});
});
</script>
<body id="gallery-wrapper" style="background-color: #efefef">
<br><br>
<div id="zoom-wrapper">
<img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
</div>
</body>
</html>
Simple HTML:
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<style>
p{
font-size: 0.2rem;
}
</style>
</head>
<body>
<p>doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex.fsadfa1234</p>
</body>
</html>
chrome calc 0.2rem to 33.2px.
Console screenshot:
i have been doing this website but i got stuck at the point where the blusih grey blank space at the bottom of the screen refused to go.
i have moved the of the page. Any ideas on how to fix that blank area ?
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body {
background: #08121A;
background-image: url('../img3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}
.stretch {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/** element defaults **/
table {
width: 100%;
text-align: left;
}
th,
td {
padding: 10px 10px;
}
th {
color: #666;
background: #141517 none repeat-x scroll left top;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
</html>
Body css is wrong. Try this:
background-size:cover;
try to put img {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
and move the img as last element in body tag
in your case body will take height from all the elements in it. so if u put img - background always will take the height of body( this is calculate form all the elements in the body) ,so if you put as a tag <img src='myimg'/> will take space and don't forget to put img tag low z-index
Please correct your html code.
You must end your tag before start before tag. not end of tag. so your html code will be like this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
Put here your body content
</body>
</html>
Then follow the css.
.yourcssClass {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
I have problem with width using percentage in Mozilla Firefox.
In Firefox:
In Opera:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="adminite">
<title>Untitled 2</title>
<style>
#cont {
width:99.8%;
height:125px;
border:1px solid red;
background-color:#1ea1de;
margin: 0px 0px 0px 0px;
}</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>
A possibility is that you haven't reseted the browser default styles.
Try:
html, body{
margin: 0;
padding: 0;
}
If that's the case, you might benefit from using a reset stylesheet such as this one:
http://meyerweb.com/eric/tools/css/reset/