I am wondering if is possible to perform this action:
I have a site (Wordpress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?
The question may not be for stackoverlow but looking for help as I wasn't able to find what I am looking for.
An answer to this question is in plugin called Force Refresh
https://wordpress.org/plugins/force-refresh/#installation
Posting an answer as it may help someone else.
Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.
The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.
The code below is just to demonstrate the idea, it si not a complex solution.
jQuery(function($) {
//check on load - shloud be removed
checkFileExists();
//call function every 5 minutes
setInterval(function() {
checkFileExists();
}, 1000 * 60 * 5);
//check if a given file exists
function checkFileExists() {
var http = new XMLHttpRequest();
http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
http.send();
if (http.status === 200) {
$("#notice-bar").show();
//you can reload the page here, just uncomment the line below
//location.reload(true);
$("#notice-bar").show();
} else {
//File doesn't exists
$("#notice-bar").hide();
}
}
//reload page once the link is clicked
$('#reload').click(function() {
location.reload(true);
});
});
#notice-bar {
position: absolute;
display: none;
top: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5em;
background-color: #FFDDA9;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="notice-bar">
<p>New version available. Please reload the page.</p>
</div>
</body>
</html>
Related
Is it possible to somehow import the image base64 from another file? or save the url to a variable and import it to CSS? since the code is very long and it does not seem clean in this way.
Thank you for your help guys.
index.css
.column {
margin: calc(var(--grid) / 2);
border: var(--borderWidth) solid #fffddd;
border-radius: var(--borderRadius);
background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...
What you could do is to use var() CSS from inside another CSS file that you can import .
File myCssVar.css
:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ;
}
Your CSS file
#import url(myCssVar.css);
.column {
background-image: linear-gradient( ....), var(--mybguri64) ... ;
}
It will make your CSS easier to read.
Looks like from your edit you almost had it .
Background-image's URL is a string value. Of course, you can store it in another file, import it and use js to inject it dynamically.
The best solution to that is to use the server side script with an inline css to make this happen. to make this happen. lets say the backend language is php. and your pages are made up of 3 templates components. It could be in different backend languages either ASP.net, Javs, php, node... but i'm using php here since i'm vast in it. just follow through its quite simple and direct.
base64ImageFile.php - the file with the base64image variable it could be more than 1
header_template.php
footer_template.php
application.php
then in your base64Images.php you have this there..
<?php
$base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
$base64Image2 = 'data:image/png;base64,sgw....';
$base64Image3 = 'data:image/png;base64,sgw....';
$base64Image4 = 'data:image/png;base64,sgw....';
?>
**in my header_template.php, add the template to the beginning of the file.. **
<?php
require('base64images.php'); //the images are rendered here..
?>
<!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>Document</title>
<style type="text/css">
li {
background:url(<?php echo $base64Img; ?>) <!-- and used here --->
no-repeat
left center;
padding: 5px 0 5px 25px;
}
</style>
</head>
in my footer_template.php
<!--- footer elements/scripts go here --->
<script src="...."></script>
<script src="..."></script>
</html>
application.php - file, merge template components to build page here
<?php require('header_template.php'); ?>
<body>
.......body content coes here...
</body>
<?php require('footer_template.php'); ?>
this way you can re-use and seperate the components and even seperate images into different files and call them. in your file instead of typing it out. or even multiple images... but the CSS must be inline with the HTML..
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
I'm trying to make a simple example work on my local environment. I want to make a map on my website, but once I downloaded the necessary files I've got strange problems. First, I had to add for the example script link the 'type="module"' code, which is already made me crazy. Nobody tests these applications, or my environment is so special? Why are they even using the import tag, if it's not working in the most used browser like a charm?! After I extended the example code and changed the import links to be fine for my environment (ol/Map.js to /ol/Map.js), now I've got this error you can read in the title. Failed to resolve module specifier "rbush". What can I do? I have no idea. There must be a main point I have missed. The example (https://openlayers.org/en/latest/examples/simple.html) works fine online on openlayers.org, but If I follow the instructions It don't on my end. Why?
OpenLayers 5.1.3 is meant to be used with the npm package manager as described here:
https://openlayers.org/en/latest/doc/tutorials/bundle.html
To use it without including the dependencies and "building" it, see the quick start page in the documentation:
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
working example of the "simple" example
I'm using the Polymer/web-component-tester to run automated tests of my components.
I've run into an issue where a component test will pass if run in isolation, but fail when run using a file glob - for example:
FAILS: wct components/**/test
SUCCEEDS: wct components/btn-component/test
After a fair bit of digging, I found the reason is the change in browser behaviour: in both cases the launched browser has two iFrames side-by-side, with the right one showing the test progress, and the left showing the component. The globbed test run results in a significantly narrower left (component) iFrame.
When using polymer-gestures to simulate mouse clicks, the narrower iFrame causes issues because it can often render a horizontal scrollbar and change a component's clickability.
The following is an example of a component & test that fails as described. It renders a Cancel button a few hundred pixels to the right.
Component
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="btn-component" attributes="name">
<template>
<style>
:host {
display: block;
width: 400px;
}
</style>
<div layout horizontal>
<span flex></span>
<div id="cancel_button" on-tap="{{cancel}}">Cancel</div>
</div>
</template>
<script>
Polymer({
ready: function() {
console.log("btn-component component ready!");
},
cancel: function(event, detail, sender) {
console.log("Cancel Btn!", event, detail, sender);
this.fire('cancel_btn', {});
}
});
</script>
</polymer-element>
Test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>btn-component Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../bower_components/polymer-gestures/test/js/fake.js"></script>
<link href="../btn-component.html" rel="import">
</head>
<body>
<btn-component id="component"></btn-component>
<script>
function runAfterEvent(eventName, element, callback) {
var listener = function(event) {
element.removeEventListener(eventName, listener)
callback(event.detail);
};
element.addEventListener(eventName, listener);
}
suite('<btn-component>', function() {
var c = document.getElementById('component');
var fake = new Fake();
test('hitting cancel fires cancel event', function(done) {
runAfterEvent('cancel_btn', c, function(event) {
assert.ok(1, "the cancel_btn event should be fired");
done();
});
var cancelBtn = document.querySelectorAll("btn-component /deep/ #cancel_button")[0];
console.log(cancelBtn);
setTimeout(function() {
fake.downOnNode(cancelBtn);
fake.upOnNode(cancelBtn);
}, 1000);
});
});
</script>
The fail happens trying to click the button.
I guess there's a variety of ways to approach resolving this - including in my own tests (e.g. checking the viewport size vs the element position and scrolling right before trying to simulate a click), but starts to get quite fiddly/fragile. A reasonable option might be to add a config to wct that specifies a minimum viewport size on the component iFrame.
Perhaps I'm missing some available configuration that could help here. Is there a recommended way to handle this scenario?
A simple solution is pretty obvious. I added the following to my test's index.html
<style>
#subsuites {
width: 600px !important;
}
</style>
The css used by the wct tool sets the width at 50% and nests frames when using file globs - resulting in progressive narrowing.
I'm trying to develop a very simple mobile web app to show a list of websites via iFrame.
The app starts always in protrait mode and when it switches to landscape mode, the width of the iFrame is not updated, so the iframes does not fill the device width when rotating in landscape mode. I added the script in HTML to force the app to reload the iframe in case of orientation change, hoping it would have solved the issue, but without success.
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<script>
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},
}
onload = addNumber;
</script>
<iframe id="wc1" src="http://<url>" seamless></iframe>
<iframe id="wc2" src="http://<url>" seamless></iframe>
<iframe id="wc3" src="http://<url>" seamless></iframe>
<iframe id="wc4" src="http://<url>" seamless></iframe>
</body>
This is my CSS code
html, body {
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
}
iframe {
width:100%;
height:100%;
padding: (0, 0, 0, 0);
}
I'm a mobile web development newbie and I swore that I tried every single solution I found on SO and other sites to make my code working, but without success.
you have set javascript as :
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},/*<= what is this bracket closing, and why extra comma???*/
}
onload = addNumber;
remove evrything and just keep this :
window.addEventListener("orientationchange", function() {
window.location.reload();
}, false);
also, for pure html way to check orient, add this in you head :
<meta http-equiv="refresh" content="1">
check this thread too => Detect change in orientation using javascript