Zoom varies with leaflet in different browsers - javascript

I have been working on a site with leaflet, testing in Chrome in Windows. I've discovered that when I view it in other browsers (specifically Firefox or Chrome on MacOS, IE in Windows, Chrome on Android) the zoom is different: the effect is identical to zooming to 125%, making the zoom inside the map work differently but also making all text etc. appear slightly blurry. If I change the browser zoom to 75% on IE, it looks identical to the Chrome version. Here's a screenshot with side-by-side comparison.
Here's a simplified version of the code which is producing this problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script>
</script>
<link rel="stylesheet" href="styles_dark.css" />
</head>
<body>
<div id="mapdiv"></div>
<script>
// settings
var northWestCorner=L.latLng(53.85,-5.48),
southEastCorner=L.latLng(51.03,-2.44),
mapBounds=L.latLngBounds(northWestCorner,southEastCorner);
var mainMap = L.map('mapdiv', {
maxBounds:mapBounds,
minZoom:8,
maxZoom:13
}).setView([52.16, -3.65], 9);
// create map
L.tileLayer('http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
}).addTo(mainMap);
</script>
</body>
</html>
#mapdiv{top:0vh;left:0vw;height:100vh; width:100vw;vertical-align: top;}
body{margin:0px;padding:0px;}
#mapdiv{padding:1px;}
.text-center {padding:1px;}
::-webkit-scrollbar {
display: none;
}
Any idea why this might be happening?
Thanks very much in advance!

Related

Can't change favicon with javascript in safari

I have a page that changes the favicon through javascript. This works great on chrome and firefox, but on Safari it does not work. I even added the <link rel="apple-touch-icon" href="favicon-1.png"> part and changed that through javascript as well, but that also does not do the trick.
The page looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
<link rel="icon" type="image/png" href="favicon-1.png">
<link rel="apple-touch-icon" href="favicon-1.png">
<style>
</style>
</head>
<body></body>
<script>
setTimeout(() => {
var favicon = document.querySelector('link[rel="icon"]');
var appleTouchIcon = document.querySelector('link[rel="apple-touch-icon"]');
favicon.setAttribute('type', 'image/png');
favicon.setAttribute('href', 'favicon-2.png');
appleTouchIcon.setAttribute('href', 'favicon-2.png');
}, 4000);
</script>
</body>
</html>
Can anyone spot what I am doing wrong here?
It seems like it is not even possible as briefly mentioned in this webkit issue.
Citing:
...Since we quite purposefully don't allow dynamic changes/animations to the favicon...

How to run in full screen on start?

http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.

Need some advice with an Shoutcast app using intel XDK

I'm trying to develop an app that will just stream a shoutcast, the deal is I can't make it work, I'm testing my app on a android 4.2 and it seems to not work at all, I'm just doing the example from intel xdk documentation.
Here is the simple code i have made atm:
<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
var onDeviceReady=function(){
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function PlayMe() {
intel.xdk.player.startShoutcast("http://209.9.238.10:8008/",true);
}
</script>
</head>
<body>
<button onClick="PlayMe();">PLAY ME</button>
</body>
</html>
This issue is only seen on Android devices with version 3.0 and above. With the change of the Android web browser and WebView's rendering engine to Webkit, the intel.xdk.startShoutcast() can not successfully executed since it is an internal modification to the browser's engine.
Please use this format, it will just stream a shoutcast without errors,
Here is the simple format I have made:
http://209.9.238.10:8008/;strem.mp3
I have tested my app on an android 4.3 and it seems to work well.

dygraphs fails on IE8 when options are used

The following HTML does not display a graph on IE8. Works fine on Firefox, Chrome, and IE9 and IE10. On IE8 all I can see are the captions (the dates) and "Barometric Pressure".
dygraph-combined.js is the current version. First six lines are as recommended. If you take the width option out, it works.
Just to make life more interesting, if I replaced width by ylabel:'millibars' it doesn't display the label. Gawds I hate IE.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!--[if IE]><script src="/excanvas_r3/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
<title>Real-Time Hydrologic System</title>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
"http://ra-tes.org/bigrain-14.csv" , { width: 600 }
);
</script>
</body>
</html>

enquire.js not responsive in IE9

I'm running a very simple enquire.js test as per the enclosed and finding that it doesn't get a response from IE9. Several other browsers are responding fine (FF, Chrome, Safari). I've tested the test-suite from GITHUB in IE9 which runs fine - so I must be missing something. Any help appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>enquire.js test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="frame">hello</div>
<script src="js/libs/jquery.1.7.1.js"></script>
<script src="../dist/enquire.js"></script>
<script>
$(document).ready(function(){
enquire.listen(50);
enquire.register("screen and (max-width: 1000px)",
{
match : function(){
$("#frame").css("background-color","#f00");
},
unmatch : function(){
$("#frame").css("background-color","#0f0");
},
});
});
</script>
</body>
</html>
IE9 does not support the matchMedia API so you have to include a polyfill to get it to work. You can add the polyfill to the page however you like, providing it's loaded before enquire. Personally I use Modernizr to conditionally load polyfills, but that's personal preference.
Hope that helps

Categories