My index page is displaying only "elm" div in the body and not the google-sign-in div and testing h1 as I have in the following index.html.
When I inspected them using browser tools, I did not see the elements.
When I comment out or remove var app = Elm.Main.init({
node: document.getElementById('elm')
}); the browser displays the google div and h1 elements.
What is the reason and how can I solve it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="google-signin-client_id" content="XXXXX.apps.googleusercontent.com">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="main.js"></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<br>
<br>
<h1>Testing</h1>
<div id="elm"></div>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
My Elm program.
-- MAIN
main : Program () Model Msg
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlChange = UrlChanged
, onUrlRequest = LinkClicked
}
I also tried changing style of the elm div <div id="elm" style="width:50%; height:400px;"></div>
elm 0.19
Firefox
If you want access to elements in your body along with elm then I would use Browser.element. Otherwise Browser.document and Browser.application manage the body for you (what you are seeing currently).
More information here:
https://package.elm-lang.org/packages/elm/browser/latest/Browser#element
Related
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
I am trying to get notification area in summer note to work but It doens't showup.
In the example below I expect the area to show at the bottom once the button is pressed.
What am I missing ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<button onclick="test()">hello</button>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
$('#summernote').summernote({
maxHeight: 300,
dialogsInBody: true,
dialogsFade: true // Add fade effect on dialogs
});
});
function test(){
$('.note-status-output').html('<div class="alert alert-danger">' +
'This is an error using a Bootstrap alert that has been restyled to fit here.' +
'</div>'
);
}
</script>
</body>
</html>
I am new to polymer framework. I am using polymer 2.0.0-rc.3 and latest version of chrome. But below code is not displaying menus.Only "Hello World" is printed in browser. The developer tools console does not show any error.
Below is the code
test-app.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<!-- Since 'home' is the default route, eagerly load it. -->
<!-- <link rel="import" href="shop-home.html"> -->
<dom-module id="test-app">
<template>
<H1>Hello World</H1>
<paper-toolbar>
<div class="horizontal-section">
<paper-menu>
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</paper-toolbar>
</template>
<script>
class testApp extends Polymer.Element {
static get is() { return 'test-app'; }
}
customElements.define(testApp.is, testApp);
</script>
</dom-module>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>test</title>
<link rel="import" href="src/test-app.html" async>
</head>
<body>
<test-app unresolved>test</test-app>
<script>
window.performance && performance.mark && performance.mark('index.html');
Polymer = {lazyRegister: true, dom: 'shadow'};
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'bower_components/webcomponentsjs/webcomponents-lite.js';
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
bower.json
"polymer": "polymer/polymer#^2.0.0-rc.3",
"app-layout": "polymerelements/app-layout#^0.10.7",
"app-route": "polymerelements/app-route#^0.9.3",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.3.2",
"iron-form": "polymerelements/iron-form#^1.1.4",
"iron-icon": "polymerelements/iron-icon#^1.0.12",
"iron-pages": "polymerelements/iron-pages#^1.0.8",
"iron-selector": "polymerelements/iron-selector#^1.5.2",
"paper-icon-button": "polymerelements/paper-icon-button#^1.1.4",
"paper-spinner": "polymerelements/paper-spinner#^1.2.1",
"iron-media-query": "polymerelements/iron-media-query#^1.0.8",
"paper-menu": "polymerelements/paper-menu#^1.2.2",
"paper-item": "polymerelements/paper-item#^1.2.1",
"paper-toolbar": "polymerelements/paper-toolbar#^1.1.7"
Does any body have any idea about error? Any guide as how can I debug it to find error?
paper-menu has been deprecated in Polymer 2. As this comment says:
This element is deprecated in favor of paper-listbox, which has been ported already to Polymer 2.0.
I need to use javascript (with no tag) to setup videojs with below simple codes, but the css seems not loaded correctly, what's the right way for this as the HTML way is ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<div id="videoarea"></div>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
You have to include an html5 video tag on the page. This ensures proper device fallback and is required for videojs to properly load.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<video id="videoarea" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264"> </video>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
I am trying to fetch and display a map from the arcgis server using Aptana IDE. It says l is undefined.
GET https://gistest2.xxx.xxx/arcgis/rest/info?f=json
200 OK 27ms TypeError: l is undefined
...x)<=p.dx)&&q._addFrameInfo(h,p);this.setExclusionAreas(this.exclusionAreas);this...
Here is the entire code except the URL I am trying to hit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>BGSU Memorial Trees Location</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/">
</script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer ) {
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"https://XXX/");
map.addLayer(customBasemap);
});
</script>
</head>
<body class="claro">
<div align="center"><strong>BGSU Memorial Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Any help is highly appreciated.
Thanks in Advance!
In the constructor of ArcGISTiledMapServiceLayer you have to specify the URL of an ArcGIS tiled map service. Example of URL:
http://myserver/arcgis/rest/services/map_service_name/MapServer
The address you specified (arcgis/rest/info?f=json) is the address of the REST service of ArcGIS Server but doesn't point to a Map service.