I have a problem in html5 edge animate. I have created an animation using edge animate.
I would like to call composition ready of edge animate from outside. I tried calling using $.Edge.registerCompositionReadyHandler( compId, handlerFn, options ) , But it gave error ReferenceError: $ is not defined . I am not able to solve this and i did not find enough documentation about this. Can any one please help me.
my code looks like this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="teste1_edgePreload.js"></script>
<script type="text/javascript" src="teste1_resize.js"></script>
<style>
.edgeLoad-EDGE-1429726 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
<script>
$.Edge.registerCompositionReadyHandler("EDGE-1429726",scaleStage) //SCALE STAGE IS INSIDE THE JAVASCRIPT fn teste1_resize.js
function mover(){
var stage = $.Edge.getComposition("EDGE-1429726").getStage();
console.log($("#Stage").height());
stage.mover();
}
</script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-1429726">
<input type="button" value="Mover" onClick="mover();">
</div>
</body>
Thanks in ADVANCE
With Ena's help and little modification i was able to find an answer.
AdobeEdge.bootstrapCallback(function(compId) {
AdobeEdge.Symbol.bindElementAction(compId, 'stage', 'document', 'compositionReady', function(sym, e){
// composition is loaded, do stuff here
});
});
Instead of
$.Edge.registerCompositionReadyHandler
use
AdobeEdge.registerCompositionReadyHandler
Moreover, put your code inside this function:
AdobeEdge.bootstrapCallback(function(compId) {
// Register your handlers here
});
So you are sure the stage is loaded and you can register handlers in it.
Related
I have just started coding and I have encountered a problem that seems very obvious. I wrote an HTML code in an HTML file and a CSS code in a CSS file. I have placed both in the same project folder.
To animate my website, I decided to write a Javascript code in a .js file using jQuery. I downloaded the latest version of jQuery into that same folder as all my other files of that project.
The CSS linked just fine, but not the Javascript. (I needed some text in Russian, so I followed the instructions from an answer in this forum). I am using Atom.
Heres my code (the file is long, so I won't include the full contents, just the javascript element... I literally made one to test it out but nothing seems to work) :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
and here is what i wrote on main.js to see if it works :
$(document).ready(function() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
So as you can see I am trying to make this part hide when the mouse goes over it. I also tried with 'click' and without the event. I didn't type anything else in main.js... was there supposed to be something that notifies it what document this goes into?
Furthermore, in the HTML, I also tried to specify the type (although not necessary). It also didn't work.
I don't know if I made typos or anything... I suspect that it may be because I put them all in the same project file. The project file in sitting on my desktop. Could that be the cause of the problem?
EDIT
I have changed my main.js file to :
$(document).ready(() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
But it still doesn't work...
remove => from $(document).ready(function() => { and it will work (either it is in separate js file or added in HTML page itself)
Working snippet:-
$(document).ready(function(){
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--used live jquery library to make it working -->
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
Note:- You can do like this also
$(document).ready(()=>{
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
Running Output:- https://jsfiddle.net/npthjwu1/
A bit more cleaner approach:-
$(document).ready(function(){
$('.out').on('mouseover',function(){
$('.out').hide();
});
});
remove => from $(document).ready(function()
I think the problem comes with the anonymous function syntax that you are passing in as jQuery event handlers. You are trying to use both the old school JavaScript lamba and the new ES lamba syntax.
Try removing the old school JavaScript anonymous function syntax function(){}, and use the new ES style () => {} (since it is the latest, which is supported by modern browsers) as follows...
$(document).ready(() => {
$('.out').on('mouseover', () => {
$('.out').hide();
});
});
I wish made an Angular module using Unity WebGL. Indeed nothing has already done on this topic and no module existed today.
However, I am little lost and I need help. It would be good if that module will develop to Angular 2. But I know Angular 1 so far.
Unity 3D export gave that:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Test Unity</title>
<style>
/* a style sheet needs to be present for cursor hiding and custom cursors to work. */
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<script type='text/javascript'>
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
dataUrl: "Development/ExportMiniDev.data",
codeUrl: "Development/ExportMiniDev.js",
memUrl: "Development/ExportMiniDev.mem",
};
</script>
</body>
</html>
Could you please provide to me something to start. I already pass a lot of my time on this. If I succeed I will publish that module on Github.
Looks like there are now a couple of libraries (I haven't tested them):
https://github.com/rgoddat/AngularUnity
https://github.com/cHullaert/ng-unity
Consider the following script (Also at http://jsbin.com/yegike/1/). If I try to create variable map before including the google maps link, I get a ReferenceError: google is not defined error. Without moving the link before the script, is it possible to eliminate this error? Even if the answer is "no", I would appreciate an explanation on what is happening.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> -->
<script>
(function($){
var map = new google.maps.LatLng(47.64864, -122.348927);
}(jQuery));
</script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</body>
</html>
You're trying to call a method named maps within the google namespace which is defined in your commented out script. The solution for this is to use the jQuery.ready method to execute your code when the page has been loaded (including your script include at the bottom of the page). Wrap your function within this and you should be good to go:
$( document ).ready(function() {
var map = new google.maps.LatLng(47.64864, -122.348927);
});
For more information about ready you can check out the always useful jQuery API:
http://api.jquery.com/ready/
Perhaps try this which waits until the page is loaded and if it takes google a while to load, then it will try again:
var map;
function makeMap() {
if (google && google.maps) { // google loaded?
map = new google.maps.LatLng(47.64864, -122.348927);
return;
}
setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
makeMap();
});
I am trying to run an alert when a swipe-up gesture occurs anywhere on the document; and, ultimately also when a 2 finger swipe-gesture occurs.
I've used hammer.js to listen for gestures before and this code seems valid to me, but for some reason the alerts are not happening.
Any ideas why ?
Here is the code:
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Two Swipe!</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://raw.github.com/EightMedia/hammer.js/master/dist/jquery.hammer.min.js"></script>
<script type="text/javascript">
var hammer = $(document).hammer();
hammer.on('swipeup', function(event) {
alert("swiped-up!");
if( event.gesture.touches.length == 2 )
alert("two swiped!");
});
</script>
</body>
</html>
Checked the source. If you look at the swipe gesture here at line 208, you'll see that it has max touches set to 1. My guess is that this is limiting you from seeing multiple touches. You could probably either modify this code to suit your needs or write a custom listener for multitouch swipes.
OK guys this is intreting,
I'm testing this page
http://static.nemesisdesign.net/demos/ie8-strange/test.html
on IE8 / windows XP.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
</body>
</html>
If I open this page with IE8 I get an error.
If I change the code of the script to:
<script>
// note that I added var prefix
var thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
It works fine.
This happens only on IE 7/8, didn't test it on IE6.
What do you think?
Does it happen to you also? Or is it just my browser that has gone crazy?
Addition
You're saying that is just not using the var prefix that cause the error?
I'm sorry guys but you're wrong, you didn't take time to test the code.
I uploaded a test2 page
http://static.nemesisdesign.net/demos/ie8-strange/test2.html
with the follwing cocde
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test 2</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisdoesntgiveanyerror = 'test';
alert('This alert will be fired correcly');
</script>
</body>
</html>
That works fine.
So what is actually causing the error? The variable name without the var prefix having the same name as the ID of the DIV element.
Isn't this strange?
May be the answers to this SO-question can help?
You should always precede your variable declarations with var to specify their scope or you might observe inconsistent behavior between different browsers.
use var to declare variables instead of just plugging their name
I'd say the JavaScript interpreter in IE is slightly stricter than on FireFox and others, meaning the script returns an error when it comes to the variable definition line. Putting var in will ensure it actually is a variable.
It's very good practice to declare all your variables with var
James
EDIT
I can't get to IE at the moment, but I can recommend you change your <script> tag to <script type="text/javascript">.