I have tried this iFrame to display Word files:
<!DOCTYPE html>
<html>
<head>
<style>
.doc {
width: 100%;
height: 700px;
}
</style>
</head>
<body>
<iframe class="doc" src="https://docs.google.com/gview?url=http://writing.engr.psu.edu/workbooks/formal_report_template.doc&embedded=true"></iframe>
</body>
</html>
This works fine for files online.
How do I do the same with files in my localhost?
You can't do that.
You need to host it somewhere for Google Docs to load it from.
Related
Is it possible to detect which link is clicked inside an ?
Where the page HOSTING the iframe and the iframed page have different domains.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<iframe src="anOtherPageDomain" name="myFrame"></iframe>
</body>
</html>
We are working on a Raspberry Pi project that works to remote launch a model rocket. The detonator is a website that displays a large, read "launch" button, which will prompt the raspberry pi to run a Python script that controls a GPIO pin that is connected to a relay board. The issue that I am having is when input the HTML code, the page turns up blank.
Can someone let me know what I'm doing wrong?
I have Apache downloaded to host the website - have placed the html file in the /var/www/html folder and have also attempted to overwrite the code within the index.html file that was already in the folder. Additionally, I have placed the html file in my "rocket" folder which houses the Python script. None of these options have worked.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Launch Rocket</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var button = webiopi().createGPIOButton(17, "Launch");
$("#controls").append(button);
webiopi().refreshGPIO(true);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 1280px;
height: 720px;
font-size: 100pt;
font-weight: bold;
color: white;
}
#gpio17.LOW {
background-color: Red;
}
#gpio17.HIGH {
background-color: Black;
}
</style>
</head>
<body>
<div id="controls" align="center"></div>
</body>
</html>
all attempts have resulted in a blank page.
Based on the tutorial provided by #weegee, I realized that my issue was that I had been missing some of the configuration setup.
Tutorial: https://webiopi.trouch.com/Tutorial_Basis.html#testing
I was missing the pathway to the HTML file in my /etc/webiopi/ config, and as a result the Pi was not responding the way it should.
I was creating a very simple HTML page with a full-size background, however, my background picture displayed as broken when I loaded the page. Does anyone have any idea of why this is happening please? Thanks!
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bgimg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
}
.vdeo {margin: 10% 8%; }
</style>
</head>
<body>
<img class="bgimg" src="https://wallpaperclicker.com/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper/20306228/">
<iframe class="vdeo" width="600" height="345" align="middle" src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1&controls=0"></iframe>
<script>
for (var i=0;i<4;i++) {
alert(
(i===2)?"Happy Birthday, dear Hub Hub!":"Happy Birthday to YOU!"
)
}
</script>
</iframe>
</body>
</html>
And my page looks as in the picture:my page
You're trying to load a web page as a background image.
https://wallpaperclicker.com/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper/20306228/
Unless you're using a server application to select and serve an image, your src attribute value should end with an image filename extension, such as .jpg or .png.
You can't just put the link to the site with the picture, you need the link to the picture. (In your case it's https://wallpaperclicker.com/storage/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper-20306228.jpg) Try it with the direct link to the picture.
You're using a URI on the src attribute value that renders an entire web page, if you want to use the image inside that web page, you should use the image URL.
In this case I guess it is: https://wallpaperclicker.com/storage/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper-20306228.jpg
If you're not managing the routes of that website, you can right-click then inspect and see the image source.
I have the code bellow in the html file and the problem is the background picture is not showing, nor when I try doing it from the css file. Can somebody help me out what am I doing wrong? Thanks in advance!
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
try using !important
<head>
<style>
body{
background-image: url("trees.jpg") !important;
}
</style>
</head>
First of all you need to set height of your body if their is no-content in the body then the image will not show
secondly, this code will only work if your html file and image are both in same folder
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
if the image is in say img folder then you need to do this
body{
background-image: url("img/trees.jpg");
}
but if the img folder is not in the same directory as html but is in it's parent directory. you need to do this
body{
background-image: url("../img/trees.jpg");
}
Most likely it can't find the file destination, try to check if you typed the file name right, even the file extension. Sometimes is the file extension in uppercase, like ".JPG".
A ridiculously simple bit of web coding is failing to work for me, and for the life of me I can't figure out what I'm doing wrong.
This is my HTML file:
<!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">
<title>Experiment</title>
<link rel="stylesheet/css" type="text/css" href="/team/css/style.css">
</head>
<body>
<div id="user_box">
<p>Hi. Whassup?</p>
</div>
</body>
</html>
And this is the CSS file it's linking to:
#user_box {
position: fixed;
left: 10px;
top: 10px;
padding: 5px;
z-index: 100;
height: 40em;
width: 16em;
background-color: white;
border: solid black;
}
It doesn't work. The CSS formatting is ignored entirely. However, when I copy the content of #user_box into a style= tag, it works exactly the way I think it should.
I'm confirming that the CSS file is where it should be and the browser can see it; when I view the source, I can click that link, and it downloads just fine.
I suspect I'm missing something obvious/stupid, but I'm failing to figure out what it is. I beg you, point out my stupid and get a shiny shiny check mark.
The correct rel for a stylesheet is simply stylesheet, not stylesheet/css. Remove that /css and all should be fine.
Try removing the rel="stylesheet/css".
Change the tag to have:
rel="stylesheet"
i.e.
<link rel="stylesheet" type="text/css" href="/team/css/style.css">
Make sure that team is a root folder in your web directory and that it has a subdirectory of css with a style.css file