Okay I am going to be outright. I have never touched HTML ever and may be a nuisance. But I understand lua and simple principles of coding. With that said I will get on with my question.
I made a status checker for my minecraft server and used the image to make a desktop gadget I want the flicker to stop when it refreshes. I used other sources and applied them.
<html>
<head>
<title>War Server</title>
<style>
body{width:560;height:95}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
img = document.getElementById('refreshImage');
img.src += "?";
setInterval("img.src=img.src.replace(/\\?[0-9]*/, '?'+Math.floor(Math.random()*9999999+1));", 5000);
}
//]]>
</script>
</head>
<body>
<img id="refreshImage" src="Status.png" alt="Server Banner" style="position:absolute;top:0;left:0;border:0;width:560px;height:95" />
</body> <!--I didn't put the actual link for privacy.-->
</html>
My Idea:
There probably is a proper way but I'd like to think I could contribute something. I thought I might be able to have a background of the same image but it updates just before the image. Thus the background would change and then the image would paint and the background would flash(That was what the flicker always was) but it would matter because when it'd had change and flashed the image would've covered it.
The proper solution would not be with html or css it would be with javascript/jquery since you are already using it. You would need to use an if and else statement.
if(i==1) {
return; //stop the execution of function
}
else {
//keep on going
}
I could provide further advice but you need you clarify your question better. Do you want the picture to flicker until the page is done loading? You used the word update what is it you are waiting for to update?If you are then.
if (document.readyState === "complete") would be your argument so...
<html>
<head>
<title>War Server</title>
<style>
body{width:560;height:95}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
img = document.getElementById('refreshImage');
if (document.readyState === "complete") {
img.src = "Status.png";
return; //stop the execution of function
}
else {
//keep on going
img.src += "?";
setInterval("img.src=img.src.replace(/\\?[0-9]*/, '?'+Math.floor(Math.random()*9999999+1));", 5000);
}
//]]>
</script>
</head>
<body>
<img id="refreshImage" src="Status.png" alt="Server Banner" style="position:absolute;top:0;left:0;border:0;width:560px;height:95" />
</body> <!--I didn't put the actual link for privacy.-->
</html>
Related
I would want to create an tag with target attribute set to blank, but without actually moving me to the opened page, but rather staying on the page it was opened on.
I hope this helps.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
<a href="https://google.com/" trueblank="true" >Click Me</a>
<script>
var links = document.querySelectorAll("a");
links.forEach(function(each) {
each.onclick = function(ev) {
if(this.getAttribute("trueblank") == "true") {
ev.preventDefault();
window.open(this.href);
}
}
});
</script>
</body>
</html>
following JS code below opens a new window on your current window and user remains on the first page yet
window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
I have been looking for a solution for this for a long time and I just could not find what I was looking for. I have made a code that is an automatic traffic light and it loops through. How can I change it so when I click it goes through the sequence and stops when it gets back to Red?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body onload="startTime();">
<img id="img1" />
<script>
var imgArray = new Array("Red.jpg","RedA.jpg","Green.jpg","Amber.jpg");
var imgCount = 0;
function startTime() {
if(imgCount == imgArray.length) {
imgCount = 0;
}
document.getElementById("img1").src = imgArray[imgCount];
imgCount++;
setTimeout("startTime()", 1000);
}
</script>
</body>
</body>
</html>
You just need to change setTimeout function syntax.
setTimeout(function(){
startTime();
},1000);
Check working example
I use the following html5 code to display a html page with an image(1.JPG). Its working fine. The image will be randomly overwritten with an another newer image in a certain interval in the same path provided. So, I use meta tag to refresh the page, so that whenever any newer image is overwritten in the path, the page will be refreshed with the updated image automatically. But, it looks like refreshing the page for every 5 secs fine, but its NOT displaying the newer image which has overwritten in the same path, it always shows with the initial image i kept. Could someone help me to fix this issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<meta http-equiv="refresh" content="5">
</head>
<body>
<canvas id="myCanvas" width="578" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 30pt Calibri';
context.fillText('Screen sharing', 10, 50);
</script>
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
</body>
</html>
Meta tag Refresh URL, please try
<meta http-equiv="refresh" content="5; ,URL=http://domain.com">
OR You can do it from javascript
<script type="text/javascript">
setInterval(function(){
window.location.reload();
},5000);
</script>
And please use SERVER url to load image instead of file url
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
Change To
<p><img src = "http://domain.com/Downloads/1.JPG" /> </p>
I am trying to make some website and would like to ask some questions.
The main file for the website is main.asp.
In main.asp, I inserted notice.jpg file as a pop up window.
I would like to make that, if I click the pop up window, then the pop up window disappear and the new big window(www.charming.or.kr/jeju/) show up.
Can anyone help me on this?
The following is part of my source.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title><!--#include file="../include/title.asp"--></title>
<style type="text/css">
#import url(../css/comm.css);
</style>
<script language='javascript'>
function OpenWin(dest)
{
posy = screen.Height/2 - 100;
posx = screen.Width /2 - 200;
StartWin = window.open(dest,
"notice_popup","toolbar=no,channelmode=no,left="+posx+",top="+posy+",location=no,directories=no,w idth=743,height=720,resizable=no,menubar=no,scroll=no");
}
</script>
</head>
<body onload="OpenWin('../img/main/Notice.jpg')" >
In your new window you can refer to your original window by using window.opener which is a direct reference to your original. You can thus use
window.opener.location.href = newURL;
I am trying to load a bitmap into the canvas following the example here.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 5 Reports</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke(); }
img.src = 'worldmap1.bmp';
}
</script>
</head>
<body onload="draw()">
<canvas id="graph"></canvas>
</body>
</html>
Nothing is drawn in the browser when I view the page. No Errors Given.
Please tell me what I am doing wrong. Thanks!
I guess I should answer this question so I can close it. That is what it seems to say on meta.stackoverflow.com
Ok I forgot the semi-colon after draw(); and canvas id needs to be "canvas" instead of "graph". Solved my own problem =) I feel smart now =) Thanks for the help all. – EddieC 2 mins ago edit.
I have no experience with Canvas, but I would be surprised if BMP files were supported... Try a JPG, PNG or GIF file, those are reliably supported across all browsers.
If its not bitmap related per the other posts... are you sure img.src is a valid path to the file?