i already add the plugin with cli
github.com.
and this my code
<button onclick="slide('right', 'dashboard.html')">back</button>
<script type="text/javascript">
function slide(direction,href) {
window.plugins.nativepagetransitions.slide(
{
'duration': 400,
'direction': direction,
'iosdelay': 50,
'androiddelay': 120,
'winphonedelay':800,
'href': href
},
function () {
console.log('slide transition finished');
});
}
</script>
and also i already add
<script type="text/javascript" src="cordova.js"></script>
this my complete code
pastebin.com
but is not working, i have error on console
exec proxy not found for NativePageTransitions
In JS you only have a 1:
function slide(href)
but in your html you have 2:
slide('right', 'dashboard.html')
Related
I try to use jQuery file upload in a bootstrap modal with external content.
I've no problem with Firefox and Explorer, but with Chrome i've got this error
Cannot read property 'parseMetaData' of undefined
I include jQuery.js and jQuery.ui.min.js in main template and all other js directly in php page called by modal in this order:
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-image.js"></script>
<script src="js/jquery.fileupload-audio.js"></script>
<script src="js/jquery.fileupload-video.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
Then there is my code:
jQuery(function ($) {
'use strict';
$('#fileupload').fileupload({
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 8000000,
maxNumberOfFiles: 6,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 1200,
imageMaxHeight: 900,
imageCrop: false,
url: '/wall/'
});
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
});
Anyone could help me?
i found the answer!
I've to include all the scripts in the header of main template.
Bye
I have some tests running with RequireJS and Jasmine. I have a Jasmine test harness file that looks like this:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
<script type="text/javascript" src="./Scripts/jasmine/jasmine.js"></script>
<script type="text/javascript" src="./Scripts/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="./Scripts/jasmine/boot.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
<script type="text/javascript">
require(["fakeTest"], function () {
window.onload();
});
</script>
</head>
<body>
</body>
</html>
My fakeTest file is very simple:
define(["require", "exports"], function (require, exports) {
describe("fake test", function () {
it("test nothing", function () {
expect(1).toEqual(1);
});
});
});
If I run this in FireFox/Chrome then everything works fine; I see one test and that it passed. If I run this with PhantomJS though, I start getting problems. Running it with the remote debugger flag I get the error:
Error: Cannot find module 'fakeTest'
phantomjs://bootstrap.js:299 in require
phantomjs://bootstrap.js:263 in require
If I try changing my harness file so that it says requirejs[("fakeTest"...... instead of just require, I get this error:
Error: Script error for "fakeTest"
http://requirejs.org/docs/errors.html#scripterror
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:140
in defaultOnError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:544
in onError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1732
in onScriptError :0 in appendChild
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1952
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1679
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:829
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:819
in fetch
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:851
in check
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1177
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1550
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1162
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:131
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:56
in each
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1114
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:783
in init
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1453
If I put in a completely invalid module name, I get the same errors in both cases.
I'm totally lost as to why this is happening. I've played around with changing the path for fakeTest in the harness file but nothing changes. I've simplified the harness file as much as I could, but since I'm still seeing this i'm not sure what else to try. Anyone have any ideas?
edit
I've removed everything to do with Jasmine and just have fakeTest do an alert. Now I get errors saying
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script type="text/javascript">
require(["fakeTest"], function () {});
</script>
</head>
<body>
</body>
</html>
and
define(["require", "exports"], function (require, exports) {
alert('foo');
});
"ReferenceError: Can't find variable: requirejs"
Instead of write html use karma with requirejs plugin.
karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'Scripts/**/*.js', included: false},
{pattern: 'test/*.js', included: false},
'test/test-main.js'
],
// list of files to exclude
exclude: [],
browsers: ['PhantomJS']
});
};
test/test-main.js
var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
// example of using a couple path translations (paths), to allow us to refer to different library dependencies, without using relative paths
paths: {
// Put Your requirejs config here
},
// example of using a shim, to load non AMD libraries (such as underscore)
shim: {
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
This is example files. Fix it and run
karma run
Instead of
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
use
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"
data-main="Tests/main"></script>
Move test files to Tests directory.
In Tests/main.js use Your requirejs config and run main tests file.
var deps = ['Tests/fakeTest'];
require.config({
baseUrl: '..',
paths: {
'jasmine': ['Scripts/jasmine//jasmine'],
'jasmine-html': ['Scripts/jasmine/jasmine-html'],
'jasmine-boot': ['Scripts/jasmine/boot']
},
// shim: makes external libraries compatible with requirejs (AMD)
shim: {
'jasmine-html': {
deps : ['jasmine']
},
'jasmine-boot': {
deps : ['jasmine', 'jasmine-html']
}
}
});
require(['jasmine-boot'], function () {
require(deps, function(){
//trigger Jasmine
window.onload();
})
});
In index.html run only Tests/main.js file:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" data-main="Tests/main"></script>
</head>
<body>
</body>
</html>
i was trying adding Google translate dropdown to a website.
For the sake of simplicity, i added all the code in the same place of the page.
I have added this code (slightly beautified):
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
On the Chrome console i receive this error:
Uncaught TypeError: google.translate.TranslateElement is not a function
This error code doesn't show up with a google search, and i don't know what caused it.
Any help is really appreciated...
Thanks!
You should add google script before your own.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>
I am trying to setup a QUnit environment using requirejs and grunt-contrib-qunit.
Here is what I have.
gruntfile:
qunit: {
all: {
options: {
urls: [
'http://localhost:8000/qunit/qunit-test-suite.html'
]
}
}
},
connect: {
server: {
options: {
port: 8000,
base: '.'
}
}
},
qunit-test-suite.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Tests Suite: travis CI Test</title>
<link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="../components/libs/qunit/qunit/qunit.js"></script>
<script>
QUnit.config.autoload = false;
QUnit.config.autostart = false;
</script>
<script data-main="qunit" src="../components/libs/requirejs/require.js"></script>
</body>
</html>
qunit.js:
require.config({
baseUrl: "../",
paths: {
'jquery': 'components/libs/jquery/dist/jquery.min',
// Test for Foo
'foo': 'components/app/foo/foo',
'test-Foo': 'components/app/foo/test-Foo'
},
shim: {
'QUnit': {
exports: 'QUnit',
init: function() {
QUnit.config.autoload = false;
QUnit.config.autostart = false;
}
}
}
});
require(['test-Foo'], function (Foo) {
QUnit.load();
QUnit.start();
});
test-Foo.js:
define(['foo'], function(Foo) {
'use strict';
module("Foo");
test("Foo return Test", function() {
equal(Foo.foo(), "foo", "Function should return 'foo'");
equal(Foo.oof(), "oof", "Function should return 'oof'");
});
test("Bar return Test", function() {
equal(Foo.bar(), "barz", "Function should return 'bar'");
});
});
Problem is that it all works fine when I open up the test-suite.html in my browser. Once sent to PhantomJS I get the following error:
Running "connect:server" (connect) task
Started connect web server on http://localhost:8000
Running "qunit:all" (qunit) task
Testing http://localhost:8000/qunit/qunit-test-suite.html
>> PhantomJS timed out, possibly due to a missing QUnit start() call.
Warning: 1/1 assertions failed (0ms) Use --force to continue.
Aborted due to warnings.
Full setup: https://github.com/markusfalk/test-travis
Test Run: https://travis-ci.org/markusfalk/test-travis
Thanks for any help :)
With the help of Jörn I came up with a working setup. Trick is to setup requireJS before QUnit loads (moved requireJS config to config.js and load it first).
Requirements:
grunt-contrib-qunit v0.7.0
qunit v1.18.0
HTML test suite:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Tests Suite: asdf</title>
<link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="config.js"></script>
<script data-main="unit" src="../components/libs/requirejs/require.js"></script>
</body>
</html>
config.js
var requirejs = {
baseUrl: "../",
paths: {
//{{app}}
'foo': 'components/app/foo/foo',
'test-foo': 'components/app/foo/test-foo',
//{{libs}}
'unit': 'qunit/unit',
'qunit': 'components/libs/qunit/qunit/qunit',
'jquery.exists': 'libs/jquery.exists/jquery.exists',
'jquery': 'components/libs/jquery/dist/jquery.min'
},
'shim': {
'jquery.exists': ['jquery']
}
};
unit.js
require([
'qunit',
'test-foo'
],
function(qunit, TestFoo) {
TestFoo();
qunit.start();
});
test-foo.js:
define(['jquery', 'qunit', 'foo'], function($, qunit, Foo) {
'use strict';
return function() {
qunit.module("Foo");
qunit.test("Foo Test", function() {
equal(Foo.saySomething(), "Hello", "returns 'Hello'");
});
};
});
And finally the module I want to test:
define(['jquery'], function($) {
'use strict';
var Foo = {
saySomething: function() {
return "Hello";
}
};
return {
saySomething: Foo.saySomething
};
});
Have you tried running grunt with the -v and/or -d flags to get some more verbose output? I did notice that there was something skipped regarding PhantomJS in your travis-ci build.
Writing location.js file
PhantomJS is already installed at /usr/local/phantomjs/bin/phantomjs.
npm WARN excluding symbolic link lib/socket.io-client.js -> io.js
If it's dependant on io.js and the link isn't there, it will fail.
UPDATE:
I found the issue using the verbose output. Your test is 404ing because of a filename issue.
["phantomjs","onResourceReceived",{"contentType":"text/html; charset=utf-8","headers":[{"name":"X-Content-Type-Options","value":"nosniff"},{"name":"Content-Type","value":"text/html; charset=utf-8"},{"name":"Content-Length","value":"43"},{"name":"Date","value":"Fri, 10 Apr 2015 06:45:47 GMT"},{"name":"Connection","value":"keep-alive"}],"id":6,"redirectURL":null,"stage":"end","status":404,"statusText":"Not Found","time":"2015-04-10T06:45:47.747Z","url":"http://localhost:10000/components/app/foo/test-Foo.js"}]
You're trying to use the file test-Foo.js. The file is named test-foo.js in your repository. Changing the case should fix the test.
Apologies in advance if I'm stating the obvious but do you have PhantomJS installed? I can't see it in your packages.json file. You can install it using npm install phantomjs --save-dev in your project root. The save-dev will add it to your packages.json so when you run npm install it will automatically get installed.
can't get the following test to work with Firefox 22.0 when AdBlock Plus is enabled. Works just fine on Chrome + when I've disabled adblock. It also works when I'm loading the scripts with script tags instead of requirejs.
./index.html:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!--<link rel="icon" type="image/png" href="img/icon.png"/>-->
<!--<script src="js/lib/jquery.js"></script>-->
<script data-main="js/main" src ="require.js"></script>
<!--
<script src="js/lib/soundmanager2.js"></script>
<script src="js/test.js"></script>
-->
<title></title>
</head>
<body>
<div id="stop" style="cursor:pointer;"> stop</div>
</body>
</html>
./js/main.js:
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
define(['jquery','underscore',"soundmanager2"],
function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
return soundManager;
});
No errors or anything in the console, no alerts after that initial 'hep!' one.
Classic pattern, fight with some issue for hours, give up and ask for help, find solution immediately after posting.
added
soundManager.beginDelayedInit();
after soundManager.setup() and it works now.
Use require () method of RequireJS to load a module. In the callback write your code what need. Note that parameter of function is a array contains paths that loads dependencies
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
require(['jquery','underscore',"soundmanager2"],function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
});