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"];
Related
I have these tests html/js files. What I'm trying to do is show that the original image doesn't have the src attribute, and then show that it is actually there, or that is the expected behavior.
What is actually happening is that it is printing the image as if it already had the src attribute.
<!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>Práctica DOM JS</title>
<script src="index.js"></script>
</head>
<body>
<h1 id="demo" class="clase1">Nada</h1>
<img id="imagen" />
<div class="clase1"></div>
</body>
</html>
function foo() {
document.getElementById("demo").innerHTML += " Hola Mundo!";
let imagen = document.getElementById("imagen");
console.log(imagen);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen);
setTimeout(() => {
imagen.src =
"https://i1.wp.com/elanillounico.com/wp-content/uploads/2015/03/JRR-Tolkien15.jpg?fit=760%2C1076&ssl=1";
}, 5000);
}
window.onload = foo;
The browser console may be lazily evaluating the element object. You could log the outerHTML instead.
console.log(imagen.outerHTML);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen.outerHTML);
i will create a Checkout system for gastro.
How i can wríte this.
I will create a list than write this on another page "home.php",
than i need a script were i can onclick writeout "deftige KartoffelSuppe" and the price.
i love you guys,
<script>
let Suppe =["Deftige Kartoffelsuppe, 4,80"];
</script>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="Ausgabe"></div>
Greedings from Germany
Michael Burat
<!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>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
let suppe = ["Deftige Kartoffelsuppe, 4,80"];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = suppe;
});
</script>
</body>
</html>
i changed the id names to lowercase and added a eventListener to handle the click.
innerHTML is what you wanted i guess.
And thanks for loving me btw.
and this is a clean version of coding something like this:
<!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>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
const data = [
{
name: "Deftige Kartoffelsuppe",
preis: "4,80€"
}
];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = `${data[0].name} für nur ${data[0].preis}`;
});
</script>
</body>
</html>
I want to make a javascript program to activate something which requires some time to compute a animated screen pop ups while computing/loading. My Problem is I don't know how to achieve this in JS using async code. I have my approaches like this on where I just created a element into the website via javascript animated via CSS and when the computation was finished closed via javascript, but nothing happened. The idea was kind of like this:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
});
#example{
display: none;
}
<!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>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</html>
So what is wrong with this approach?
It's likely that your entire code block is executed in one go, including setting the loading element visible and invisible afterwards, without giving the browser time to actually update the rendered page to show the loading element.
One way to modify your code would be:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
setTimeout(function() {
//Some Computing...
document.getElementById("example").style.display = "none";
}, 0);
});
This should allow the browser to update the page before going into the computation.
You should access after loading window.
<!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>
<script>
window.onload = function(){
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
};
</script>
</head>
<body>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</html>
<!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>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
<script>
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
</script>
</html>
image
This is the view of my webview content of which bottom is overflowing and is not visible. What I figured out is the parent view of webview is covering entire screen and the child view is covering entire screen leaving app status bar area. But both of them is having equal dimensions, and this is why my child view is overflowing downward.
I read many solution and most of them I tried but no difference is found.
html file that I am loading
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, heigth=device-height, width=device-width">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta charset="utf-8">
<title>XYZ</title>
<base href=".">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<root id="app-root"></root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
webkit view
static func getWebKitView(uiController : ViewController, handlerName : String) -> WKWebView {
let controller = WKUserContentController()
controller.add(uiController as! WKScriptMessageHandler, name: handlerName)
let config = WKWebViewConfiguration()
config.userContentController = controller
let webKitView = WKWebView(frame: .init(x: 0.0, y: 0.0, width: DeviceInfo().getDeviceBounds().w, height: DeviceInfo().getDeviceBounds().h-2), configuration: config)
webKitView.backgroundColor = UIColor.yellow
webKitView.scrollView.isScrollEnabled = false
// webKitView.frame.size = webKitView.scrollView.contentSize
webKitView.scrollView.contentSize = webKitView.frame.size
webKitView.allowsBackForwardNavigationGestures = true
return webKitView
}
How can I correct this UI issue
Give the Height for Web Kit View 100 points less than the device bounds
and then give y position to your Child view as heightOfYourWebView + 10 so the Button will be below the WebkitView and above the bottom of the screen also give width as 350 and height for button as 30 and the view will not go out of bounds
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