I have a few URLs that each show the status of some industrial equipment. I'm trying to create an HTML/Javascript solution that, on load, cycles through each of the websites at a set interval, with two buttons to stop the cycle (to take a closer look at something) and restart the cycle (either from the beginning or where it left off, I'm not picky). I'm REALLY rusty, but I got what I think is a good start. Unfortunately, it doesn't work. Here are the CSS and HTML:
html,
body {
height: 100vh;
width: 100vw;
}
#btStart {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 50px;
}
#btStop {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 120px;
}
#infoFrame {
width: 100%;
height: 100%;
}
.holder {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)";>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Before I added the buttons it would load, then 5 seconds later it would cycle correctly, and so on. Now it only shows the buttons. Looking at the requests, I believe what's happening in my CSS and structure is trash, and it's loading the appropriate URL, but not displaying. I should add, prior to the buttons I only had the iframe with the script in it as a proof of concept. I div'd it, added the stylesheet, and added the buttons, and now here we are.
This may be a rookie mistake, or something more complicated. I haven't done development in a long time, and I'm just trying to solve a little problem at work. If you could spare a minute, I'd be happy to know how to fix this, and also any feedback on what I could be doing better. I'd love to get back into doing more of this, so I'm interested to learn anything the community can share. I've searched the site and the internet, and I've found a couple of related solutions but nothing for this in particular.
Thanks!
EDIT:
In case it helps, below is the HTML before the buttons and stylesheet, which worked (it rotated between webpages every 7 seconds):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Info Cycle</title>
</head>
<body>
<iframe id="frame" src=""
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
"></iframe>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('frame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 7000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</body>
</html>
The iframe style was something I found in an old file I'd written (probably copied and pasted from Stack Overflow to just get a thing to work).
The problem here is having the script inside the iframe. If you move your script out of the iframe and put it under body or head then it will work.
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1) ? -1 : count;
return url;
}
function cycleTimer() {
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
u.innerHTML = '';
i.src = nextUrl();
i.onload = function () {
u.innerHTML = i.src;
}
}
</script>
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)" ;>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Related
when I view this codes , iframe popup automatically open.
but I want to open iframe when I click "click me" button.
could you please help me ? I hope that its very easy trick but I am an amateur for javascript.
<html>
<head>
<script language="javascript">
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
</script>
<head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
I have fixed your code for you. You should probably not use an inline call, but here is how you would do it. Make sure to wrap your code in the load function so when you call javascript:load() it will complete the function.
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
A solution could just be not creating the Iframe until the button is clicked:
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head><body>
<b><font color="000">Click Me !</font></b></body>
</html>
I tried searching for "file name changes to 0 in browser" both in Google and here, but got nowhere. This is a simple file which suddenly stopped opening. I can't even get at the inspector to troubleshoot it. Undo/redo history is lost, so that will not help. I'm guessing it's a simple mistake, but I have NEVER seen this before.
<!doctype html>
<html lang="en">
<head>
<title>JS Animated Navigation Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
<!--
var location = 0;
var bar = document.getElementById("bar1");
function myMove()
{
// if (id != 0) clearInterval(id);
location = -144;
// if (location != -144) return; // don't execute onmouseover while previous onmouseover is still running.
id = setInterval(move, 1);
}
function move()
{
location++;
bar.style.left = location + 'px';
if (location == 300)
{
clearInterval(id);
id = setInterval(moveback, 1);
}
}
function moveback()
{
location--;
bar.style.left = location + 'px';
if (location == -144)
{
clearInterval(id);
// id = setInterval(move, 1);
}
}
-->
</script>
<style>
#container
{
width: 600px;
height: 100px;
position: relative;
background: white;
}
#bar1
{
width: 150px;
height: 30px;
position: absolute;
left: -144px;
background-color: white;
}
</style>
</head>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate"><img src="imageGalleryBar.png" alt="Image Gallery" width="150" height="30" id="bar1" onmouseover="myMove()" /></div>
</div>
</body>
</html>
Thank you
You can't use the variable name location as it is a reserved word; what you're actually doing is setting the window.location variable to 0.
Rename it, or put it in a namespace or object.
I'm trying to learn how to use pdfMake. I'm trying to use open and print to generate or print the information respectively. But, when I click on the button which fires the event, a new tab opens for a second and vanishes.
The page which opens is displayed in history as blob:http://localhost:9999/93c1600e-3c64-42fe-8b44-fe6eeb995b5e
I'm not able to figure out the error. I'm following the official documentation of pdfMake.
Please help.
function print(){
window.event.preventDefault()
// this is just a simulation of the open event, replacing it with print produces the same result
var docDefinition = { content: {text:'This is an sample PDF printed with pdfMake',fontSize:15} };
pdfMake.createPdf(docDefinition).open();
}
<!DOCTYPE HMTL>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>
<script src="js/print.js"></script>
</head>
<body>
<main>
<button onclick="print()">Print Card</button>
</main>
</body>
</html>
Please check that any type of ad blocker in your browser is turned off and try again.
I found solution for printing in same window.
In your .html file put iframe
<iframe id="printPdf" name="printPdf"></iframe>
iframe needs style to hide himself for example (I do not know why, but if I define width and height on iframe, printing will not work):
#printPdf { position: fixed; top: 0px; left: 0px; display: block;
padding: 0px;border: 0px;margin: 0px;
visibility: hidden; opacity: 0;
}
Finally, just call:
if ('safari') {
pdfMake.createPdf(content).open({}, window.frames['printPdf']);
setTimeout(function() {
window.frames['printPdf'].focus();
window.frames['printPdf'].print();
}, 2000)
} else {
pdfMake.createPdf(content).print({}, window.frames['printPdf']);
}
Tested on Chrome v72, Firefox v65, Edge v18, Safari v12
for the open() it's not working even without ad blocker so i converted it to base64 then blob then fileURL
var docDefinition = getRWABELPDF(data);
var createPdf = pdfMake.createPdf(docDefinition);
var base64data = null;
createPdf.getBase64(function(encodedString) {
base64data = encodedString;
console.log(base64data );
var byteCharacters = atob(base64data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
PDFMake has an open issue for this problem.
PDFMake creates URLs starting with blob: to print/open a generated PDF. The problem is that this pattern of URL is used by many sites to show undesired popups to users. Then EasyList listed this URL pattern and ad blockers started blocking it.
Therefore, as steffanjj suggested, disable your ad blocker and you should be able to print/open the generated PDF. I just wanted to explain in little more detail why this is happening.
This helped me for viewing directly in browser.
<!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>PDF Make</title>
<script src='js/pdfmake.min.js'></script>
<script src='js/vfs_fonts.js'></script>
<style>
#viewPdf { position: fixed; top: 0px; left: 0px; display: block; padding: 0px; border: 0px; margin: 0px; width: 100%; height: 100%; }
</style>
</head>
<body>
<iframe id="viewPdf" name="viewPdf"></iframe>
<script>
const docDefinition = {
pageMargins: [ 0, 0, 0, 0 ],
content: 'This is an sample PDF printed with pdfMake'
};
pdfMake.createPdf(docDefinition).open(window.frames['viewPdf']);
</script>
</body>
</html>
I started designing my own site and followed a YouTube video tutorial on how to code Motion Parallax scrolling on Dreamweaver using JavaScript and CSS so I followed the video and did everything it told me to but my code is still not working?
https://www.youtube.com/watch?v=cF3oyFXjRWk
I feel like my JavaScript code is not linked or something because some of the syntax or variables that are highlighted in a specific color on the video are not highlighted for me. What could my problem be?
I put the JavaScript within the head tag as well... this is the .js code
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
This is all my code with the css as well....
<!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">
<title>Bootstrap 101 Template</title>
<link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image{
position: relative;
z-index: -1
}
#content{
height: 750px;
width: 100%;
margin-top: -10px;
background-color:#4dbbac;
position: relative;
z-index: 1;
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</head>
<body>
<img id = "background" src = "sky1.jpg" width = "100%" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
<div class = "main">
<div id = "container">
<div class = "header">
<div id = "content">
</div>
</div>
</div>
</div>
</body>
</html>
This is not looking quite charming:
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
Check if all resources are loaded. Right click and check element or inspect element in your browser. Make sure all resources are found and loaded.
Right now I have a base html page that gets the most popular videos using youtubes api. So far it displays the title of the videos but i'm trying to make those titles clickable. If the title was clicked they would then just be brought to the video on actual youtube. I know that I could theoretically just find the most popular videos then do a clickable link but I want this to more or less auto update everytime a new popular video gets found with the youtube api. Right now I have this basic code.
<html>
<head>
<title>My Videos</title>
<style>
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
}
ul.videos {
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
// var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
html.push('<span class="titlec">', title, '...</span><br /></span></li>');
}
// html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player">
</object>
</div>
<div id="videos2"></div>
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>
I am not sure if I exactly understand what you are trying to achieve but I have created a jsfiddle!
Here is the code:
<html>
<head>
<title>My Videos</title>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
html.push('<li class="titlec">' + title + '</li>');
}
document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url);
}
}
function loadVideo(e) {
var container = document.getElementById('playerContainer');
var player = document.getElementById('player');
container.removeChild(player);//remove object child
player.setAttribute('data',e);//change link
container.appendChild(player);//add object back
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player"></object>
</div>
<div id="videos2"></div>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>