I downloaded code mirror from official website and tried to test it on mobile device. At first I linked all the core files as described in the docs.
Inside the index.html I added the following code
<!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>
<!-- link codemirror -->
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<link rel="stylesheet" href="theme/duotone-dark.css" type="text/css" media="all" />
<script src="mode/javascript/javascript.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var myCodeMirror = CodeMirror(document.body,
{
mode: "javascript",
value: "var a = 'DS code is cool thanks to codemirror';",
lineNumbers: true,
lineWrapping: true
}
);
</script>
</body>
</html>
When I tried to preview it, It looks it's working properly but it's not.
When I add a new line and try to backpress,
i. it hide soft keyboard and Backpress doesn't work when removing new line(see figure 1).
When I type var and press enter,
ii. it misbehave(see figure 2. It is not working sometimes when I click the editor to edit).
iii. It is also not taking the full height of screen.
Figure 1
Figure 2
How to solve them? Thanks in advance.
My main purpose is to add it inside android webview.
Related
I'm a beginner creating an app through jQuery Mobile, i am trying to incorporate a custom theme through theme roller and it prompted me to use these lines of code:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
I have already put the themes folder in the apps folder however I am trying to figure out how to include these lines within this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
All while not changing the layout and current look. The end goal is to figure out how to change the background and button colors on my app. Thank you!
I have written a html and javascript files.
Here is my code
HTML:
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>New value: <span class="my-new"></span></li>
</ul>
</div>
</body>
<script src="event.js"></script>
</html>
and here is my javascript code
window.addEventListener('storage', function(e) {
document.querySelector('.my-new').textContent = e.newValue;
});
I write something on another page and want to display it on another page(the code of this page is shown here). Everything is fine, the code is working on Chrome. However, when I open it on safari, it does not display.
Javascript is enabled. I have no idea what is the problem. Please, help
Wich safari are you on? could be that your safari is old and you need to use:
document.getElementsByClassName('.my-new')
or better give it a id and use:
document.getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/nl/docs/Web/API/Document/querySelector
I'm trying to download the source of https://outline.com/rUdmgC. (I want to get the same file I get when I save that url using Chrome.)
I first tried wget and curl, which didn't work. (By didn't work, I mean the downloaded source was mostly empty; The page probably uses Javascript to create its content.)
Then I did some googling, and tried this https://gist.github.com/giocomai/247d54e097b5083e2451. It didn't work, and exited with these exceptions:
TypeError: undefined is not a constructor (evaluating 'suffix.startsWith('http:')')
https://outline.com/app.js:20767
https://outline.com/app.js:17217
https://outline.com/app.js:17113 in onEachEvent
https://outline.com/app.js:17210 in value
https://outline.com/app.js:18695
https://outline.com/app.js:18792
https://outline.com/app.js:19000 in each
https://outline.com/app.js:18792 in toggle
https://outline.com/app.js:18683
https://outline.com/app.js:19498 in mountTo
https://outline.com/app.js:19638 in pushTags
https://outline.com/app.js:19000 in each
https://outline.com/app.js:19642 in pushTags
https://outline.com/app.js:19693 in mount
https://outline.com/app.js:20112
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="en" class=" js csstransforms3d csstransitions" style=""><head>
<title>Outline - Read & annotate without distractions</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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,user-scalable=no,height=device-height">
<meta name="description" content="Outline is a free service for reading and annotating news articles. We remove the clutter so you can analyze and comment on the content.">
<meta name="keywords" content="clean links readable readability medium typography annotations annotate">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/daoolpmoieinofbnddaofhkhmbagfmnj">
<link rel="stylesheet" href="https://outline.com/css/outline.css?v=1.0.1">
<link rel="shortcut icon" href="https://outline.com/favicon.png">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="https://outline.com/js/modernizr.custom.js"></script>
<script src="https://outline.com/app.js"></script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-2748618594698147",
enable_page_level_ads: true
});
</script>
<style type="text/css">.yue { max-width: 650px; margin: 0 auto; }</style></head>
<body>
<outline-app></outline-app>
<script>
var riot = require('riot')
require('initialize')
</script>
</body></html>
What can I do?
Oh yes, it does. To see the resulting page you should open the page in browser and see it in the developer mode.
So I thought it'd be really nice to have all my page elements like navbar, carousel, footer etc externalized and then load them through jQuery into parent page. I'm using Brackets which has live preview that showed all elements and all worked properly there. The problems began when I tested it in real browsers.
I tested in Chrome, Opera and Firefox and only Firefox would show the content loaded through jQuery.
Here's what parent page looks like:
<!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">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navLoader"></div>
<div id="carouselLoader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
And this is jQuery that loads elements:
$(document).ready( function() {
$("#navLoader").load("components/navbar.html");
$("#carouselLoader").load("components/carousel.html");
});
Loading troubles aside, is this a good practice to keep page elements separate? It feels much tidier and easier to work with, but that doesn't mean that it is necessarily good from a technical standpoint.
Thanks in advance.
I have followed the following example from Nokia Here HTML5. It's not working as expected. This is my current code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- You should also add the following meta tags to support Blackberry 7.0+ devices -->
<meta name="HandheldFriendly" content="True">
<meta name="touch-event-mode" value="native">
<meta name="cursor-event-mode" value="native">
<!-- To disable address sniffing and prevent native maps from starting, use the following meta tags -->
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<!-- <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">-->
<link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/colors.css">
<!-- <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js"></script>-->
<script src="http://api.maps.nokia.com/mobile/latest/lib/mh5.js"></script>
</head>
<body class="mh5_hwacc_body">
<div id="app_location" style="width:320px; height:480px; position:relative;"></div>
<script>
nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed({
domNode: "#app_location",
appId: "_peU-uCkp-j8ovkzFGNU",
appCode: "gBoUkAMoxoqIWfxWA5DuMQ"
});
</script>
</body>
</html>
I don't know why only shows a white screen. Do you have any idea?
Optionally, I have another question. Does anyone know if this mobile version allows adding markers and clustering?
You need to make sure that the <script> initializing the mh5 container is called after the <body class="mh5_hwacc_body"> has been initialized. It would also help to include the doctype element as well. If you run your example in Chrome and check the error statements you can see that is attempting to append items into the body of the DOM when it is still null. The quick start example (appended below) works fine.
You'll need to substitute in your own app id and token
<!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="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
<link rel="stylesheet"
href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
</head>
<body class="mh5_hwacc_body">
<script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
</script>
<div id="app_location"
style="width: 320px; height: 480px; position: relative;">
</div>
<script>
nokia.mh5.assetsPath =
"http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed ({
domNode: "#app_location",
appId: "YOUR APP ID",
appCode: "YOUR TOKEN"
});
</script>
</body>
</html>
Use the addPOI() method described here to add markers to the map.
Clustering is not a standard feature of MH5 - it is a framework, not an API - works best within its own use case - i.e. rapid cross-platform mobile development for "search for X, route for X, add markers for X" and drill down to give an infobubble or new page. Where X is supplied by your data.