I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.
I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.
Here is the code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1024px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
a,img,map,area {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<img src="screen2.jpg" width="1024" height="768" border="0">
<div id="spinner">
</div>
</body>
</html>
Any advice will be appreciated.
A few things are wrong with your code:
you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error.
you have another syntax error. You're not closing jqueries document.ready function properly.
You're using a jQuery method but you're not including the jQuery library in your code.
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it).
The spinner works in its most simple form. See working example:
http://jsfiddle.net/wLkganhm/
If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :)
You have a few issues with your code as already pointed out.
I've put up a cleaned up version here http://jsbin.com/payuzeyopa.
Things to improve on/fix:
Try using a site like JSFiddle or JSBin to share/prototype your code with others
Keep your HTML, CSS and JavaScript files separate
Spot errors early by using tools built into the browser. For example, see http://discover-devtools.codeschool.com/ for an excellent starter.
Finally, read up on JavaScript and HTML :)
Good luck!
Related
I would like to visualise the data I am getting via API output as particles using three.js / particles.js .
I am receiving Integers between 2 and 42.
So, if my data equals 2 I would like to have two particles, if it equals 32, I would like to have 32 particles floating about without refreshing the page.
I'm trying to figure how I can "dynamically" add or delete particles based on the data I am receiving from the API call.
I've searched for all kinds of things but I think I am missing the right terminology for this to get valuable results.
I basically want to able to update "maxParticles" (line 29) every 5 seconds with the API data and have particles appear and disappear without refreshing the page.
From tutorials my demo code currently looks like this (far from it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
height: 100%;
}
</style>
</head>
<body>
<canvas class="background"></canvas>
<script src="https://unpkg.com/#codegewerk/particle-cloud#1.x/dist/particles.min.js"></script>
<script>
const instance = new ParticleCloud({
selector: ".background",
maxParticles: 32,
color: "#ff0000",
connectParticles: true,
sizeVariations: 5,
});
instance.start();
</script>
</body>
</html>
As always, any ideas or input very much appreciated.
my question is is there someone out there who managed to get a scaling/resizing like this: http://fabricjs.com/controls but in paper js?
Would appreciate some help or directions how to do that.
EDIT: You see the quadrats in the link, when you pull them the object gets sized in that direction. For example when I pull right side then only right side of object is expanded (in other word the object is scaled horizontally).
That behavior I'm looking for, when I pull an object on one side then it should expand in that side AND I also want to do that when the object have some rotation (e.g. 20° from x axis)
You have to listen to a slider change event, then update your item size accordingly.
Here is a fiddle demonstrating the solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
canvas[resize] {
width : 100%;
height : 100%;
}
div {
position : fixed;
top : 15px;
left : 15px;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<div>
<p>move the slider and see the circle scale change</p>
<input type="range" min="1" max="5" step="0.5" value="1">
</div>
<script>
// setup paper
paper.setup('canvas');
// draw a circle
const circle = new paper.Path.Circle({
center: paper.view.center,
radius: 50,
fillColor: 'orange',
// make sure matrix is not applied so we can easily use scaling property
applyMatrix: false
});
// on slider value change
$('input').change(function() {
const value = $(this).val();
// update circle scale
circle.scaling = value;
});
</script>
</body>
</html>
I want to display a polyline underground in cesium.js. But I have no idea about this.
It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud,but the underground effect can be gained by an alternative way--translucent terrain.
According How to display underground entity? in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps.
For gif, see here.
1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change
command.pass = Pass.GLOBE;
to
command.pass = Pass.TRANSLUCENT;
2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.
3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.tools {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="cesiumContainer">
</div>
<div class="tools">
Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
</div>
</div>
<script>
function change() {
var value = document.getElementById("btnImageryAlpha").value;
if (viewer.imageryLayers) {
for (var i = 0; i < viewer.imageryLayers.length; i++) {
viewer.imageryLayers.get(i).alpha = value / 10;
}
}
console.log(value);
}
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals: true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
//skyAtmosphere: false,
//orderIndependentTranslucency: false,
baseLayerPicker: false,
terrainProvider: terrainProvider
});
//viewer.scene.globe.depthTestAgainstTerrain = false;
//change the ugly blue color to black
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
//default is 1
//viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;
var blueBox = viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
Yes, this is supported in cesium. It can be hard to see sometimes since the camera cannot go bellow the ellipsoid.
var viewer = new Cesium.Viewer('cesiumContainer');
var purpleArrow = viewer.entities.add({
name : 'Purple straight arrow at height',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
-90, 43, -200000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});
viewer.zoomTo(viewer.entities);
Live
I'm trying to understand how and why does the webview scales the content of the loaded page. For example, the element in the loaded page that is in 400x300px webview that shares 100% width and height with "margin: 0 auto" on all crossing elements becomes 320x240 and expected is 400x300. With this behavior, I get quite unpleasant results, in case of Bing maps the result is mediocre, it's not just the tiles, but also pushpins on the maps that gets scaled (not included in the samples)
In the screenshot below, the webview content is placed on the top, iframe at the bottom.
.
IFrame doesn't seem to suffer from this and the size is as expected, 400x300. I'd prefer to use webview as it's slihtly easier in regards to communication between the two pages.
To reproduce:
create a new project in visual studio community with a template Windows Phone 8, blank app
in default.html, place the following code
<body class="phone">
<p>Content goes here</p>
<x-ms-webview id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 0px; left: 0px; z-index:999;"></x-ms-webview>
<iframe id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 310px; left: 0px; z-index:999;"></iframe>
and in the referencing page place the following:
Meta tags:
http-equiv="Content-Type" content="text/html; charset=utf-8"
name="viewport" content="width=device-width, user-scalable=no"
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
callback: function () {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
mapTypeId: "r",
center: new Microsoft.Maps.Location(-32.377200, 148.626183),
zoom: 5,
enableClickableLogo: false,
enableSearchLogo: false,
customizeOverlays: false,
showBreadcrumb: false,
credentials: "",
disableBirdseye: true,
showScalebar: false,
showDashboard: false,
enableHighDpi: true
});
}
});
}
and the body element has the
style="margin:0px;padding:0px;"
and within it is a div with id="mapDiv" with
style="position: absolute; width:100%; height:100%; overflow:hidden;
margin:0px;padding:0px;"
(it'snearly impossible to place the whole html here so it's truncated by stackoverflow)
I have looked at other posts and there is a running solution involving "event" however I can't see how that fits into my code. As it stands the .animate() function, more specifically the duration functionality, doesn't seem to work unless I use chrome.
Here is my code.
index.html
<title>Quests Development Space</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<div id="circle"></div>
javascript.js
$(document).ready(function() {
$("#circle").click(function() {
$(this).animate({
borderRadius:"0px"
}, {
duration: 1600
});
});
});
I have tried iterations without the ",{duration: x}" and just ", 1500" as I have seen it used both ways however neither works in anything except Chrome.
The function turns a circle into a square and still does in all browsers however it is only animated in Chrome.
Edit:
stylesheet.css
#circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: blue;
}
Here is the CSS for those who asked though as I said it does work just only animates on Chrome.
Edit 2:
Breaking News!
It seems it is animating however it is "blinking" to border-radius 0 then animating inwards.
Try this code snippet:
$(function() {
$("#circle").click(function() {
$(this).animate({
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
WebkitBorderTopLeftRadius: 0,
WebkitBorderTopRightRadius: 0,
WebkitBorderBottomLeftRadius: 0,
WebkitBorderBottomRightRadius: 0,
MozBorderRadius: 0
}, 1600);
});
});
You need to set all cross browser border radius properties to run it across all the browsers.
Plunker