I include the d3 javascript like this
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="d3/d3.nocache.js"></script>
</head>
<body>
</body>
</html>
Then when I call it from the entry point d3 is null, why?
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
public class D3 implements EntryPoint {
public void onModuleLoad() {
test();
}
private native void test()/*-{
$wnd.alert($wnd.d3);
}-*/;
}
Well, it seems that the problem was that I named the project D3. Need to call it something else because it seems that it overwrites the D3 of the javascript library.
Related
i have a simple Vuejs projet that only have an index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="app.js"></script>
</body>
</html>
and app.js File
const HelloVueApp = {
data() {
return {
message: 'Hello VueXYZ!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
The problem is that i dont have any IntelliSense for the code in
<script src="https://unpkg.com/vue#next"></script>
when i hover the mouse over a method of the Vue Object it only show (ANY)
I set up a very simple scala.js project with this very simple "application":
package example
import org.scalajs.dom._
import scala.scalajs.js.JSApp
class EverythingWorks extends JSApp {
def main() = {
console.log("It works!")
}
}
The corresponding HTML looks the following:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
example.EverythingWorks().main();
</script>
</body>
</html>
Now, I did sbt fastOptJS, copied the generated JS file to js/app.js and the js.map file next to app.js.
Instead of printing "It works!" on the console, I get ReferenceError: example is not defined. I double-checked that app.js is found from the HTML.
What am I missing?
Your main class should be object, not class.
The ScalaJS build process does "dead code elimination." This reduces the size of the build dramatically. However, unless you tell it that some of your top level stuff is NOT dead code, it will be eliminated.
That means you have to use the #JSExport annotation to tell ScalaJS not to remove your top level methods and objects.
From this introduction, the example code:
#JSExport
object ScalaJSExample {
#JSExport
def main(canvas: html.Canvas): Unit = {
I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)
I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.
I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so:
<script language="javascript" type="text/javascript" src="MessageBox.js"></script>
The rest of my HTML page is this:
<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>
I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:
var messageBox = window.plugins.messageBox;
However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md
(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)
I would appreciate any help with this issue, thanks!
NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin
EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"
EDIT2: Here's my index.html:
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.alert("PhoneGap is working");
window.location.href="otherpage.html";
}
</script>
The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.
You just need to wait for PhoneGap to be ready before you execute your code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location="otherpage.html";
}
</script>
</head>
<body>
</body>
</html>
Then, on otherpage.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
console.log("onLoad");
var messageBox = window.plugins.messageBox;
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
}
</script>
</body>
</html>
I tested it on PhoneGap 1.4.1
I would like to make a webapp that uses the "UIScrollView" xcode-function but in html.
There's no problem making a html page that puts a bunch of images in one row.. I just want to make a iphone horizontal scroll with swipe gesture to show the next image.
Can this be made?
You'll need to watch for touchstart and touchend (or touchmove) to figure out the direction, then just replace the image with the next/previous. Here are some links:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Untested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var startX;
var endX;
var pic=0;
var pics = ['pic1.png','pic2.png','pic3.png'];
document.getElementById('picture').setAttribute('src',pics[pic]);
function touchStart(event){
startX = event.touches[0].pageX;
}
function touchEnd(event){
endX = event.touches[0].pageX;
deltaX=endX-startX;
if(deltaX>0){
next();
}
else{
prev();
}
}
function next(){
pic++;
if(pic>pics.length){pic--;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
function previous(){
pic--;
if(pic<0){pic++;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
</script>
<style>
#pictureFrame{height:460px; width:320px; top:0; left:0;}
</style>
</head>
<body>
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div>
</body>
</html>