I'm trying to build a tool that allows you to create a HTML-page using Blockly-Blocks (Blockly).
It is a HTML-page that looks like this at the moment:
It can already create code out of blocks, but now I need a way to preview the result live on the page in the upper right corner. Does anyone have an idea how that could be somewhat easily implemented? I've looked around a bit but only found tools that are able to Live-Preview HTML but none to use in your own page.
Thanks in advance!
You could document.write the page into an iFrame
This will alas not work here at SO since iFrames are sandboxed
but it does work in a jsfiddle
PS: Your HTML is malformed.
const ifr = document.preview;
const html = `<!doctype html>
<head>
<meta charset="UTF-8" />
<title>Preview</title>
</head>
<body>
<div style="font-family:Ariel, sans-serif; background-color: #ffcc00; color: #003300">
<ol>
<li>Line 1</li>
<li>Line 2</li>
</ol>
</div>
</body>
</html>`;
ifr.document.write(html);
ifr.document.close();
#preview {
width: 500px;
height: 500px;
float: right;
}
<iframe name="preview" id="preview"></iframe>
You can save the code in a file ex: "index.html"
Copy the code from the right side bottom from
<DOCTYPE HTML> to the end </html>
And open the file with your browser simple as that :)
Related
I am currently trying to convert HTML to PDF using itext7 and itext7.pdfhtml but have a small problem.
I have a fixed footer (.footer) which works well when opened with a browser but when converted using below code, the div is not fixed to the bottom of the page. The div sits just after the other div content before it.
C# .net core code
string fullBody = System.IO.File.ReadAllText("index.html");
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false);
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<img src="header1.bmp" width="100%" />
<img src="header2.bmp" width="100%"/>
</div>
...
<div class="footer">
Fixed footer
</div>
</body>
</html>
CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
Have tried several other examples but it still won't stay at the bottom.
Even this similar question Similar question doesnt work
Any help would be greatly appreciated.
In PDF
In browser (print view)
Just a small note - this pdf will only have 1 page so a hard coded solution might be considered.
The footers belong to the page margin area. #page media is the right way to configure it. CSS running element functionality can be used to put the element into the desired location and exclude it from the rest of the layout. Major tools converting HTML into page-based representation support it.
Here is a sample HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-center {
content: element(footer);
}
}
</style>
</head>
<body>
<p>Hello world</p>
<div id="footer">I am a footer</div>
</body>
</html>
Result looks like this:
I am embedding base64 images in my web page projects and I want to keep it all organized but the base64 takes up large sections of the markup making it hard to read and debug.
Is there a way to separate base64 strings to another location on the page?
<html>
<head>
</head>
<body>
<!-- markup here -->
<!-- markup here -->
<!-- markup here -->
</body>
</html>
Is there a way to organize the base64 string all together at the beginning of the body tag or at the end?
Update
There are examples of moving the image data to CSS as a background image and then assigning the class. That might work for some cases but not for cases where an image behavior is expected.
If you are using CSS and want to keep the code organised you can place the data image url in css and call it using div in the body. check the example code
<!DOCTYPE html>
<html>
<head>
<style>
#someclass {
/* single gray pixel - repeated */
background-image:
url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
background-repeat: repeat;
background-position: left top;
position: absolute;
left: 30px;
top: 68px;
}
</style>
</head>
<body>
<div id="someclass">sssssss....</div>
</body>
</html>
I am working on my first ever media query for a class and to me my code looks like the example we were given, but when I test it on Chrome using the developer tools, it is not responsive. I am just trying to make it so that the list will be vertical (block) when viewed on a phone and horizontal (inline block) when viewed on a bigger screen. Can anyone help me see what I did wrong?
body {
font-family: 'Ruslan Display';
}
ul {
background: #3399ff;
padding: 20px;
}
#favorites li {
background: #cce5ff;
margin: 5px;
list-style: none;
display: block;
}
#media(min-width:375px;
) {
#favorites li {
display: inline;
}
}
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet">
<meta charset="utf-8">
<meta name="description" content="My First Site for Web Fundamentals">
<title>My First Webpage</title>
</head>
<body>
<p>This is my very first attempt at putting info up on a Webpage using a a media query for responsive design. <br></p>
<p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p>
<ul id="favorites">
<li>My husband, Brian</li>
<li>My kids, Louis and Brady</li>
<li>My parents, Terry and Steve</li>
<li>My brother, Steven</li>
<li>My best friend, Missy</li>
</ul>
</body>
Remove the semi-colon from your media query param; this is invalidating your query.
#media(min-width:375px;)
should be
#media(min-width:375px)
When I tried to put your html into the snippet, there were html errors highlighted in red. You had break tags (<br>with forward slashes (</br>) that were being picked up as incorrect (the forward slashes are unnecessary). Also, the closing paragraph tag wasn't being recognised as being matched (that may be a shortcoming of stacksnippets, but still, it's good to close a paragraph after a block of text instead of using multiple br tags). The HTML errors probably contributed more to your issue than your css. The online w3c validator is a very useful tool for checking for html errors.. just a tip! .
Hope this helps
I am trying to make a menu with a background-image but according to the web console, the browser can't find the image. I have this problem for a very long time and until now I don't know how to fix it. I think the solution is very simple but I don't find it.
The image is in the right map because if I load the image in a img tag the browsers shows the image.
I run it local host and I use Firefox
see my code below.
Can somebody help with solving this problem?
body{
margin: 0px;
}
nav{
position: fixed;
top:0px;
width:100%;
height:50px;
background-image: url('img/menu1.jpg');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/svg.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<nav >
<ul class="banner">
<li>Test menu</li>
</ul>
<ul class="menu">
</ul>
</nav>
</body>
</html>
Try to change your
background-image: url('img/menu1.jpg');
to
background-image: url('../img/menu1.jpg');
The path of your rule is relative to css file, not relative to html file.
Quote from Quick Reminder About File Paths
You have to pay attention to the relationship of where the file is
that is referencing the image, and where that image actually is.
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
The URL of the image in your CSS file should be relative to THAT file, and not your HTML document
There's obviously something fundamental I don't understand about styling so please help me out.
Let's take the following simple HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?
Your CSS file mustn't be getting loaded somehow or you have an older version cached in your browser.
Your code works fine. Here it is working in a jsFiddle.
Try performing a hard refresh (generally CTRL+F5 on Windows, CMD+SHIFT+R on Mac) and ensuring your CSS file is located in the same directory as the HTML file you're trying to open.
Did you put the css file in a sub folder?
If so, you'll need to point to it:
<link rel="stylesheet" href="subfoldername/test.css" />