Automaticaly reload html page only when a picture has been changed - javascript

I have a simple presenter when my PC is not compatible with a data projector. I make a print-screen of my local PC and upload it to my web page via FTP. It is working automatically, no problem (Linux).
But I would like to change following file to reload only when the program sees that the picture "web_presentation.png" has been changed (uploaded anew). The problem is that this page is constantly blinking while reloading every 10 s - it is annoying.
<html>
<head>
<title>web_presentation</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta Name="Keywords" Content="redirect">
<meta Name="description" Content="redirect">
<meta http-equiv="Refresh" content="10; URL=web_presentation.htm">
</head>
<BODY>
<img src=web_presentation.png width=100%>
</body>
</html>
This page is displayed on a second PC, which is connected to the data projector (usually windows).
I spend a few hours to figure out how to get modification time (lastmodified) of web_presentation.png and reload it according to this information.
If possible, please stick to pure javascript or php (Firefox).
It seems to be much more difficult as I thought it would be.
Thanks :-)

Related

Getting separate callbacks on browsers back and forward button press

I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?

jQuery popup won't work in IE11 Enterprise mode

I have a classic asp application which runs on the IE 11 Enterprise mode, where I added the jQuery popup with some search function on it. This functionality works properly with Normal mode but not with Enterprise mode(search functionality and CSS for popup to look decent). Anybody knows the reason?
I have added the below libraries.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../javascripts/lib/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../javascripts/lib/chosen_v1.1.0/chosen.jquery.min.js" type="text/javascript"></script>
And there are tow other JavaScript file which is related to the popup functionality.
The page is a part of the iframe and iframe contain the above changes.
I would appreciate your help. Thanks in advance.
I found the answer and below are the changes.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">

Facebook post embed renders but isn't showing up

I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server

Why does my javascript stop working on every other refresh of page? Script caching?

I have a HTML page with a lot of javascript (sorry to be vague but I dont think the code is relevant) Since recently changing my code to include some drop down boxes, the javascript is only working on every other page refresh. e.g. It works when I click on the page, but then if I refresh it it doesn't work, then I refresh it again and it works etc. After doing a bit of googling I don't believe that this is anything to do with what is in my script but more to do with my script being cached. I have tried adding these lines of code to my page ...
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
But I am still getting the problem on every other refresh. Does anyone have any ideas? Thanks!

Problem with displaying french character in IE

I have to display "sélection?" in one of page that is viewed via iframe. But this is getting rendered as "s�lection?". If I view it requesting the page then it is rendering properly.
But if I view it in an iframe it gets changed. Same thing is happening in Firefox and Chrome.
Just write sélection.
What's happening is that your browser is displaying the page in another encoding (eg ISO-8859-1 instead of UTF-8). There are multiple reasons why this can happen:
The tag in your <head> says so.
The tag in the webservers response headers says so.
The browser is setup to override the formatting on the page.
If it works on the page itself, but when the page is in an iframe, check the encoding of the page containing the iframe. It will probably differ. Look for this kind of tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
And make sure they are the same on both pages (hint: you should probably be using UTF-8)
Do you have the right charset?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Along with the meta tag <meta http-equiv="Content-Type" content="text/html; charset=utf-8">, I convert the document to UTF-8, you have all kind of software to convert it to you (dreamweaver, textedit, etc).

Categories