I have an HTML page which auto refreshes itself every 5 sec. This page contains 3 image from 3 different server which i want to show side by side and and refresh every 5 second.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HMI Remote Monitoring</title>
<meta http-equiv="refresh" content="5" >
</head>
<body>
<table>
<tr>
<td>Chamber 1:100.206.214.19</td>
<td>Chamber 2:100.206.214.122</td>
<td>Chamber 3:100.206.214.145</td>
</tr>
<tr>
<td>
<img border="2" src="http://100.206.214.19/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
<td>
<img border="2" src="http://100.206.214.122/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
<td>
<img border="2" src="http://100.206.214.145/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
</tr>
</table>
</body>
<html>
I am using the http-equiv to refresh the html and it works fine when it's an HTML page in Collaboration view. but now I need to move this same html into a Text area visualization and the refresh doesn't work there.(Mainly coz collaboration dont accept static HTML and i'll have to keep a server running somewhere to keep the html alive.Doable but not a nice solution.)
I know a few alternatives such as using iron-python to reload the html content of the text area(Feels like a overkill + making it sleep in a loop will freeze the viz - will be an unnecessary challenge) or just use the images as labels(it has it's own challenges and is subject of another question I have raised already.) But I was wondering if there's a way we could use JavaScript(clearly I'm bad with JS, so couldn't crack it.) to reload the text area content?
Thanks for your solutions and ideas.
try page refresh using meta tag and content with time you can check in below url
Auto refresh code in HTML using meta tags
Have you tried this?
setInterval(refreshWidth,500) //trigger every .5 sec
from here
Related
i am using froala editor, however when i put this html code in the code view
<td><img src="http://edm.gsc.com.my/WebLITE/Applications/campaignmgmt/uploaded/pics/2017/gsc-edm-july2017/masthead-gsc30.jpg" width="280" height="110" alt="#GSC30" title="#GSC30" class="img-max" style="display:block;"></td>
it become,
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="min-height: 300px;">
<p>
<img src="http://edm.gsc.com.my/WebLITE/Applications/campaignmgmt/uploaded/pics/2017/gsc-edm-july2017/masthead-gsc30.jpg" width="280" height="110" alt="#GSC30" title="#GSC30" class="img-max fr-fil fr-dib">
</p>
</body>
</html>
i dont want it to help me to format anything, how can i disable the froala editor to format anything for me?
It looks like you are using the fullPage option: https://www.froala.com/wysiwyg-editor/docs/options#fullPage. When this option is used, the editor is automatically adding HTML, HEAD and BODY tags.
To disable wrapping the a with P tags, you should also turn the enter option to $.FroalaEditor.ENTER_BR: https://www.froala.com/wysiwyg-editor/docs/options#enter.
Good evening.
I am looking for a bit of help in a Code I found around, but I can't get towork as I would like:
This code, essentially, let's you insert in the Input the URL of an image (Let's say "http://i.blogs.es/e79516/nuevo-logo-google/650_1200.jpg") and once you left the input, the script automatically shows it up in the image below.
The problem, is that I would like to enter only the name of the archive, not the entire URL, but I don't know how or where to enter all the URL route and left only the dynamic part to change, since I am beginning with Js.
So, imagining I want to show only images already created and ubicated in "//localhost/ROL/images/Avatars/Characters/"NAME OF THE ARCHIVE".png", Which changes should I make to only enter the file name, without even the extension?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin tÃtulo</title>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
</head>
<body>
<tr>
<td valign="top">
Profile Picture:<br>
<span class="small3">(will be reduced to 50x50)</span>
</td>
<td>
<input size="100" id="newProfilePicture" name="profpic" value="/%profpic%/">
<br>
<img id="profilePicture" src="/%profimg%/">
</td>
</tr>
</body>
<script>
$('#newProfilePicture').blur(function() {
var newSrc = $('#newProfilePicture').val();
$('#profilePicture').attr('src',newSrc);
});
</script>
</html>
Thank you for the Attention
.blur(function(){
$('#profilePicture').prop('src',"i.blogs.es/e79516/nuevo-logo-google/"+$('#newProfilePicture').val()+".png");
});
Works but not necessary to save the value to a variable.
You also may want to use prop() instead of attr.
(Sorry I missed your OP question asking to tack on the ".png")
I have an area control which is having href="http://google.com" I want to open this URL as pop in frame.
Area code is as follows:
<area tabindex="61" alt="" id="ar1" title="" href="http://google.com"
style="text-decoration:none;" target="_top" shape="poly"
coords="123,169,123,237,146,237,146,169"></area>
I am not generating any area control. The area control is being generated from SSRS report and this SSRS report is not assigning any id for area.
I have googled a lot but does not get success so I have posted it here.
SSRS is generating report like the below image.
.
SSRS is generating dynamic URL and each bar having different URL and it may be any server name in the globe (e.g. 1 bar has URL of google another has URL of apple)
you can use like this... I am giving a theme how can you achieve this...
<html>
<head>
<title>Test IFrame SRC by Javascript </title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#frame").attr("src", "http://www.dotnetschools.com/");
})
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<button id="button">Load</button>
</body>
</html>
As you can see on above example on button click, I am opening a url inside a iframe. you can just do that.
Thanks
I have removed target="_top" and it start working for me.
This application having too many Frame, frameset & iframe nesting. somewhere it was causing issue due to target="_top".
I am developing an app where i need to implement pagination for changing of images. The code i am using is.
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
</head>
<body>
<div class="imagesScreen" id="imagesScreen">
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</div>
</body>
</html>
Here as per above code i am having two buttons in footer tag(not mentioned code above). in each page i want to display around 6-10 images & when i click next button or previous button in the same page data needs to be change using Pagination technique. Here i took static data, but in my app that data comes from server during runtime. so, i need to create dynamic data.
As per the link Pagination link here getting one image at a time. but i want around 6-10 images as per the below picture. when i click on next button page need to be same but data must change as per the Pagination link.
Can anyone please help me with this how to get that type of pagination technique & how to create dynamic data of div & image tags( & tags), as i want the view as per the below blackberry image shown.
Thanks in advance..
It's a fairly logical feature. First, I'm assuming you're pulling data with SQL using a limit
SELECT * FROM images ORDER BY time DESC LIMIT 0, 9
I'm assuming you're using PHP for the server-side scripting, if not, try accommodating this to your language.
Let's say we have a GET value that uses page=123 for the page ID, of course 123 is an arbitrary number; we need to pull the images starting at page number * items per page so for example, at page 2, we get 2 * 9 which is 18, so our first picture should be picture 18. Now I just go on taking the correct LIMIT clause in the SQL query:
PHP:
$start = $_GET['page'] * $items_per_page;
SQL:
SELECT * FROM `images` ORDER BY `time` DESC LIMIT {$start}, {$items_per_page}
That's the basic gist of it.
You can try the below URL as a reference.
http://cssglobe.com/lab/easypaginate/02.html
Thanks
EDIT: See the end of this question for my solution based on the first answer given (which I have "ticked" in green).
Take at look at this simple static html page:
(these are just images i found using google image search, to explain the question. apologies if any of these images are subject to copyright. i just needed images on live servers...)
<html>
<head><title>Server Test Using Image</title>
<head>
<body>
If the server is alive, I will be a happy browser<br>
<img src="http://getsetgames.com/wp-content/uploads/2009/12/ActivityIndicator.gif" id=spinner width=100 height=100>
<img
src="http://pwhatley.files.wordpress.com/2008/06/walmartfrown.jpg"
width=100 height=100
style="display: none;"
id=linkBad
>
<img
src="http://3.bp.blogspot.com/-vpsc13PCfc0/TaLCGaq2SjI/AAAAAAAACTA/hw2MDzTk6mg/s1600/smiley-face.jpg" style="display: none;" width=100 height=100
onError="document.getElementById('linkBad').style.display='inline'; document.getElementById('spinner').style.display='none';"
onLoad="this.style.display='inline'; document.getElementById('linkBad').style.display='none'; document.getElementById('spinner').style.display='none';"
>
</body>
</html>
i have coded the above example using an excerpt of a larger project I am working on that assesses the online state of a number of servers. whilst this content is produced dynamically, for the purposes of this example you can assume it's a static page that is loaded by a browser. (ie assume there is no way of doing these things at the server back end, as the goal of the site is to inform the viewer of what servers he/she can "reach" from that location)
if you cut and paste this in to an html page, you should briefly see an activity indicator, then you should see a smiling face.
if you edit the src tag of the second img object, to either a different domain name, or an ip address you know is dead, eventually the activity indicator should stop, and be replaced with a frowning face.
note - in this example, editing the file name will not work, as the server that serves it ignores the final path component, so please just edit the server and point it to a bad domain name or something like 127.0.0.9
the activity indicator is a nice touch, but probably will only be available with javascript, as it's dependant on the second image's onLoad or onError executing. so please ignore that - i'd just insert the activity indicator using a script tag dynamically. to keep this example simple, the only scripting you see is in the onLoad and OnError tags.
what I would like to determine is some way of achieving this result using only html - i.e. in the event of javascript being turned off, some alternative way of replacing an image that can't be found with one that can, (i.e. assume the frowning image would be safe because it's on the same server as the html page that linked to it.)
Following is the solution I have created based on the answer i have ticked.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.serviceFails {
background-image: url('http://img185.imageshack.us/img185/1800/080508215859259007ge8.jpg');
}
.service1 {
background-image: url('http://img204.imageshack.us/img204/3783/080508190940132007ve6.jpg');
}
.service2 {
background-image: url('http://img206.imageshack.us/img206/2967/080508153147264007sp6.jpg');
}
/* ... */
-->
</style>
</head>
<body>
<table><tr><td>Service 1</td><td>
<div class="serviceFails">
<div class="service1"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
<br>
<table><tr><td>Service 2</td><td>
<div class="serviceFails">
<div class="service2"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
</body>
</html>
Maybe background-image trickery using base64 data URL's will work. The idea being that if you have CSS enabled, at least, an item could have a background image defined in CSS only by means of base64 encoded data and then if the user is able to hit the image (i.e. the service is online) it will be overlaid with the image returned by the server.
So the background image defined in CSS will be effectively hidden from view if the service is online, if it is offline then not. Note that this should be done roughly like so:
<div class="status_test">
<div id="service1Overlay"></div>
</div>
And in CSS:
#service1Overlay { background-image: url('http://myservice.com/statuspic.png'); }
.status_test { background-image: url('<base64-data-url-goes-here>'); }