A HTML to Javascript Converter for Writing to New Tabs
This HTML to Javascript Converter has been specially built to allow developers to write code that programmatically opens a new tab together with text or code of his / her choice:
The code you may enter in the box above should be nothing else than the source of a working HTML-file (your domain). Inserting that code into the box and following the instructions will allow you to write the result of the (original) inserted code to a new tab.
This way you can write an iframe plus some text outside it, for instance, to a new tab. A typical example would be (the red line produces the close button for the new tab):
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Custom New Tab </title>
</head>
<body >
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px" onclick="window.close()">X</div>
<div style="text-align: center; font-family: verdana; font-size: 16px; position: relative; top: 10px" >Hello from <i>some_site.com</i>. </div>
<div style="position: fixed; left: 50px; top: 100px; right: 50px; bottom: 100px; padding: 5px; border: 1px solid black; border-radius: 5px">
<iframe src="http://wikipedia.com" style="height: 100%; width: 100%; border:0;">
</iframe>
</div>
</body>
</html>
This gives the following result
Here's the code (to be entered into the box) for loading some title-text together with an image and a script that specifies the height of the image:
<!doctype html>
<html>
<head>
<title>My village</title>
</head>
<body style="font-family: verdana; font-size: 12px; ">
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px; z-index: 1" onclick="window.close()">X</div>
<div style="position: absolute; left:0; top:10px; right:0; bottom: 0; overflow: auto">
<div id='the_caption' style='text-align: center; margin-top: 10px; margin-bottom: 10px; background: white'>
<b>Johan Dijkstra</b> (1896-1978): <i>Kerkje te Ezinge</i>
</div>
<div id='content_without_the_caption' style='position: relative; text-align: center'>
<img style='height: 100%; border: 1px solid black; ' alt='' src='http://www.westnieuws.nl/wp-content/uploads/2015/05/Kerkje-Ezinge-Johan-Dijkstra-620x330.jpeg'>
</div>
<script>
function height()
{document.getElementById('content_without_the_caption').style.height=window.innerHeight-document.getElementById('the_caption').clientHeight-60+'px'}
height();
window.onresize=function(){height()}
</script>
</div>
</body>
</html>
Entering this code into the box should produce this
How about playing an embedded YouTube-video in a new tab? This code would do it:
<!doctype html>
<html>
<head>
<title>Russian Easter Festival</title>
</head>
<body style="background: gray; color: white; font-weight: bold">
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px; z-index: 1" onclick="window.close()">X</div>
<div style="font-family: verdana; font-size: 13px; text-align: center">
Nikolaj Rimski-Korsakov - Russian Easter Festival Op. 36<br>
Philharmonie Zuidnederland, Stefan Blunier
</div>
<div style="position: fixed; left: 30px; top: 70px; right: 30px; bottom: 30px">
<iframe style="width: 100%; height: 100%" src="https://www.youtube.com/embed/9YF4hMFfSig?rel=0&vq=large" frameborder="0" allowfullscreen>
</iframe>
</div>
</body>
</html>
Here's the result of inserting the code into the box.
Of course, you can leave things very simple by just entering some text into the box and leaving out the close button:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Custom New Tab </title>
</head>
<body >
So simple!
</body>
</html>
Simple
Enjoy!
Arie Molendijk, mesdomaines.nu