This is the code to get temperature of London from weather API. It works correctly (images are local hence won't show):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/body.css" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script language="javascript" type="text/javascript">
<!--
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = Math.round(temp-Kelvin);
if (Centigrade <= 25) {
//alert("Temperature : "+Math.round(Centigrade)+" C");
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
}
else if (Centigrade > 25) {
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo3.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
}
}
</script>
<div style="position: absolute; left: 30px; top: 75px;">
<img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
</div>
<p id="temp"></p>
</body>
</html>
From tutorials point and Bootstrap website I have tried to use a dissmissable popover. It works fine too:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("[data-toggle='popover']").popover();
});
</script>
</body>
Temperature
</html>
Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.
Setting a image instead of the red button and then temperature data
List item and the image ie. Tlogo2.svg to be appeared in that pop over box.
So can anyone suggest how to set that?
EDIT : I have tried this to attain what I said. but nothing happened. The code goes here:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback(result));
});
</script>
</body>
Temperature
</html>
I am adding some addition. SO that people don't get confuse and see what really I want. I want the result of the function ie temperature is 23 C to that pop over element
The code:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback);
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>
</html>
So let me know where I need to change.
Maybe you can do popover on hover, here is example
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
Use it like this
Temperature
Related
I'm working on a webgl project now and I'm trying to call javascript function in index.html from plugin.jslib
I did google some methods and seems they're not working.
Is there a proper and simple way to do this?
below codes are the ones that i tried.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script type="text/javascript">
window.CheckLoad = function(){ window.alert('It is working!!'); };
</script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
mergeInto(LibraryManager.library {
Loaded: function()
{
window.CheckLoad();
},
});
Unity C# script
public class blablabla : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void Loaded();
public static void IsLoaded()
{
#if !UNITY_EDITOR && UNITY_WEBGL
Loaded();
#endif
}
void Start()
{
IsLoaded();
}
}
Well.. I was stupid.
turned out it was my mistake and the way to do these stuffs are quite easy.
For those who might have same question, check below codes.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
function CheckLoad(){
window.alert("WORKING~!");
}
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
var plugin = {
Loaded: function()
{
CheckLoad();
}
};
mergeInto(LibraryManager.library, plugin);
I have a image on a map, in image Overlay i set bounds (left superior and right inferior) but the image have some kind of strech, it is is higher than wide and the original image is square (558x558), I put markers where the bounds should go. l can´t resolve these problem. Thanks alot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pruebas2</title>
<!-- LEAFLET -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="contenedorMapa" style="width: 100%"></div>
<script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
</script>
<script> // TIPOS DE MAPAS
var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
//[21.893950, -101.440188]
var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
</script>
<script>
var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
.bindPopup('supe-iz');
var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
.bindPopup('inf-der');
</script>
<script>
var imageUr6 = 'ecos/altamira/ppi3/ULTIMA.gif';
var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
var imagen6 = L.imageOverlay(imageUr6, bordes6, {
opacity: 0.7
}).addTo(map);
</script>
</body>
</html>
Please check your image. It works for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pruebas2</title>
<!-- LEAFLET -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="contenedorMapa" style="width: 100%"></div>
<script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
</script>
<script> // TIPOS DE MAPAS
var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
//[21.893950, -101.440188]
var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
</script>
<script>
var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
.bindPopup('supe-iz');
var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
.bindPopup('inf-der');
</script>
<script>
var imageUr6 = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif';
var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
var imagen6 = L.imageOverlay(imageUr6, bordes6, {
opacity: 0.7
}).addTo(map);
</script>
</body>
</html>
I created a small js script which allows me to get pop-up from console message when something will be printed there:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var exLog = console.log;
console.log = function(msg) {
exLog.apply(this, arguments);
alert(msg);
}
})()
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
But function is only executed one time, how to make this every time when something in console occurs?
I'm trying to use iOS Native app send a few(getWidth(), getHeight(), getSourceUrl()) parameters to the webpage. I found this is useable, but I don't know how to fix this problem?
The webpage template (this template works on android) is as below:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>auto skip</title>
<script type="text/javascript">
window.onload = function(){
var width = window.javaControl.getWidth();
var height = window.javaControl.getHeight();
var imgUrl = window.javaControl.getSourceUrl();
var imgElH = document.getElementById("img_content_h");
imgElH.width = width;
imgElH.height = height;
imgElH.src = imgUrl;
}
</script>
</head>
<body>
<img id="img_content_h" alt="" />
</body>
I use this code, but it doesn't work!
[self.bridge callHandler:#"getWidth" data:[NSNumber numberWithInt:320]];
[self.bridge callHandler:#"getHeight" data:[NSNumber numberWithInt:64]];
[self.bridge callHandler:#"getSourceUrl" data:#"http://211.155.89.163:28080/FlowKit/uploads/userinfo/20150527/C47F1DC39A31443ACF4EAF3802F06879.png"];
I am trying to make a dynamic list in HTML, I'm using a string array as data for the list, this array is OK, it has some string inside, I verified it.So this is my code:
function add_li(list, text) {
var list = document.getElementById(list);
var li = document.createElement("li");
li.innerHTML = text;
list.appendChild(li);
}
function load_list(list, list_array) {
for (var i = 0; i < list_array.length; i++) {
add_li (list, list_array[i]);
}
}
Here's the call:
load_list(lista_bodegas, Bodegas);
Html where the is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/cordova-2.3.0.js"></script>
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>
</title>
</head>
<body onload= "cargarBodegas();">
<ul id= "lista_bodegas">
</ul>
</body>
</html>
Try using
load_list("lista_bodegas", Bodegas);
instead of
load_list(lista_bodegas, Bodegas);