"loadHTMLString" height width issue with WKWebView - ios

I am trying to load HTML content to WKWebView, It does not load properly the same as screen height/width, same code is working fine with UIWebView, See the following code
webView.loadHTMLString(htmlString!, baseURL: nil)
HTML string content <style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style> 667px is screen height and 375px is screen width.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#container {
width: 667px;
height: 375px;
margin: 0 auto
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
//Chart code.
});
</script>
</body>
</html>
What can I do to solve this issue?

Add headerString before your html code and try it Like below
let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)
self.webView.loadHTMLString("\(headerString)", baseURL: nil)

Related

Using p5.js with F# Fable

I'm trying to create an web page with F# Fable and p5.js. I have the setup and draw functions correctly declared, and p5.js is referenced in the HTML. However nothing seem to work: The setup function is never called and thus canvas is never created. No error message is displayed.
The following is the code I'm using.
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
</html>
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import
[<Emit("fill($0)")>]
let fill (_: int): unit = jsNative
[<Emit("rect($0, $1, $2, $3)")>]
let rect (_: int) (_: int) (_: int) (_: int): unit = jsNative
[<Emit("frameRate($0)")>]
let frameRate (_: int): unit = jsNative
[<Emit("createCanvas($0, $1)")>]
let createCanvas (_: int) (_: int): unit = jsNative
let setup () =
createCanvas 500 500
frameRate 15
let draw () =
fill 255
rect 10 10 100 101
If I use the very same HTML above with the equivalent JS it will work as expected, so I assume Fable is messing up my somewhere.
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
<script>
function setup () {
createCanvas(500, 500)
frameRate(15)
}
function draw () {
fill(255)
rect(10, 10, 100, 101)
}
</script>
</html>
Following the hint given by #FyodorSoikin, I searched the documentation and found out how to add properties to JS objects.
So I added the two relevant functions to the Browser.window object (i.e. made them global):
Browser.window?setup <- setup
Browser.window?draw <- draw
And now everything works.

Detect return button in UIWebview (iOS)

I have a UIWebView which I am creating a custom text editor, with a native keyboard.
I am trying to detect when the return button is pressed on the native keyboard. I have attempted the code in this: How to detect keyboard enter key? as well as customize return key but was not able to succeed. How do I capture the return?
html:
<!DOCTYPE html>
<html>
<head>
<title>iOS Note Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
function returnKeyPressed(event){
if(window.event.keyCode == 13) document.location = "returnkeypressed:";
return true;
}
}
</script>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<link rel="stylesheet" type="text/css" href="quill.snow.css">
<link rel="stylesheet" type="text/css" href="quill.bubble.css">
<link rel="stylesheet" type="text/css" href="quill.core.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body onKeyPress="return returnKeyPressed(event)" style="padding-top:0px;margin-top:0px;">
<div id="wrap">
<div id="editor-container" style="padding:0px;margin-top:0px;font-family:'GothamPro-Light';font-size: 15px;"></div>
</div>
<script type="text/javascript" src="quill.core.js"></script>
<script type="text/javascript" src="quill.min.js"></script>
<script type="text/javascript" src="quill.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ios_note_editor.js"></script>
</body>
</html>
.m
//Not being called
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSLog(#"webView shouldStartLoadWithRequest");
}
body onKeyPress when changed to onKeyDown fixes the issue. Hours of headache over one word

iOS Safari zooms into webpage from landscape to portrait

My problem is for my webpage designed for iOS. When testing on iPhone 5 (Safari) it loads fine in portrait mode then flips fine to landscape mode. But when going back to Portrait from Landscape it zooms in. I don't have this issue with iOS Chrome thought.
I've tried lots of different meta tags like :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
But they seem to only cover the opposite issue of going from portrait to landscape zooming.
Some help would be greatly appreciated. I've spend many hours searching without success.
Here's a link if you wish to try it on a mobile device: http://www.blueberry-studio.co.uk/Robomoco_Websites/Device_iPhone_5/
and here's the code used:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=no, width=1280" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style type="text/css">
#media screen and (orientation:portrait)
{
#robomocomobileportrait_hype_container {
display: block;
}
#robomocomobilelandscape_hype_container{
display: none;
}
}
#media screen and (orientation:landscape)
{
#robomocomobileportrait_hype_container {
display: none;
}
#robomocomobilelandscape_hype_container {
display: block;
}
}
</style>
<div id="robomocomobileportrait_hype_container" style="position:relative;overflow:hidden;width:1280px;height:2260px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_portrait.hyperesources/robomocomobileportrait_hype_generated_script.js?71837"></script>
</div>
<div id="robomocomobilelandscape_hype_container" style="position:relative;overflow:hidden;width:1280px;height:720px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_landscape.hyperesources/robomocomobilelandscape_hype_generated_script.js?17049"></script>
</div>
I've found a way that resolves my problem:
var alsoenlarge = true;
$(function(){
if(isScalePossible()){
$('body').css({overflow:'hidden'}); //geen scrollbars
$('#scalecontainer').css({position: 'absolute', margin: 0}); //centreren met de hand na resize
// Run scale function on start
scaleSite();
scaleSite();
// run scale function on browser resize
$(window).resize(scaleSite);
}
});
function scaleSite()
{
windoww = $(window).width();
sitew = $('#scalecontainer').width();
f = windoww/sitew;
if(!alsoenlarge && f>1) f = 1;
$('#scalecontainer').css({
"-moz-transform" : "scale("+f+")",
"-webkit-transform" : "scale("+f+")",
"-ms-transform" : "scale("+f+")",
"-o-transform" : "scale("+f+")",
"transform" : "scale("+f+")",
"left" : ((windoww-(sitew*f))/2)+"px"
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
And my content in this div:
<div id="scalecontainer"> </div>

Trigger.io topbar jQuery Mobile iOS bug

I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>

continuous water movement with jquery

I have image of width 4096px and my screen width is 960px.I have to create continuous water movement.For this I ma using sprite of 32 images My code is as below
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lets learn grammer</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script>
function moveBack(){
var i=0;
setInterval(function(){
if(i<23){
i++;
$('#bck').css('background-position',((i)*-130));
}else{
//for(var j=0; j<=4;j++){
$('#bck').css('background-position',0);
//}
i=0;
}
}, 50);
}
</script>
<style type="text/css">
#bck{
position:absolute;
width:960px;
height:540px;
background-image:url("water.png");
background-repeat:repeat-y;
top:0px;
left:0px;
border:1px solid red;
}
</style>
</head>
<body onload="moveBack()">
<div id="bck"></div>
</body>
this code move whole sprite to the end point after that it stop. but i want to continous movement until i stop the execution.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lets learn grammer</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script>
function moveBack()
{
var i=0;
setInterval(function()
{
//if(i<23){
i++;
$('#bck').css('background-position',((i)*-130));
//}
//else{ //for(var j=0; j<=4;j++){
//$('#bck').css('background-position',0);
//} i=0; }
}, 50);
}
</script>
<style type="text/css">
#bck
{
position:absolute;
width:960px;
height:540px;
background-image:url("water.png");
background-repeat:repeat-x;
top:0px;
left:0px;
border:1px solid red;
}
</style>
</head>
<body onload="moveBack()">
<div id="bck"></div>
</body>
Is this what you want? If yes, just notice the changes:
change in setInterval()
background-repeat:repeat-x; instead of background-repeat:repeat-y;

Resources