<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Remote Control</title>
</head>
<link rel="stylesheet" href="/../.." type="text/css" />
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" SRC="popup.js" > </script> <!-- <---- Problem, doesn't work in FF but ok in IE/Chrome -->
<body>
The script doesn't execute on Firefox like it does on IE and chrome. Why is this?
Could anyone tell me what needs to be done to make it work in FF?
Your popup.js file is full of references to a method called document.getelementbyid. There is no such method in JavaScript because its a case-sensitive language and thats the reason your code breaks right at the beginning of the hidep1() function.:
if (document.getelementbyid) {
Replace all occurrences of getelementbyid with getElementById and try again.
Related
I have written a html and javascript files.
Here is my code
HTML:
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>New value: <span class="my-new"></span></li>
</ul>
</div>
</body>
<script src="event.js"></script>
</html>
and here is my javascript code
window.addEventListener('storage', function(e) {
document.querySelector('.my-new').textContent = e.newValue;
});
I write something on another page and want to display it on another page(the code of this page is shown here). Everything is fine, the code is working on Chrome. However, when I open it on safari, it does not display.
Javascript is enabled. I have no idea what is the problem. Please, help
Wich safari are you on? could be that your safari is old and you need to use:
document.getElementsByClassName('.my-new')
or better give it a id and use:
document.getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/nl/docs/Web/API/Document/querySelector
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
I made a angularjs HTML SPA that works fine.In a specific situation I need the power of a HTA. As far as I know there are no restrictions in using a HTA in combination with angular or any other valid HTML. Nevertheless I get an error when using the line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
in a HTA, even when it's the only script tag in the header.
The error message is: Script error, Code 0, URL http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
I would expect that others have encountered this error before but I can't find anything on stackoverflow.Does anybody recognize this problem? Is there a solution or workaround?
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div >
...Do something
</div>
</body>
</html>
You have declared ng-app and ng-controller on HTML element, but its handlers are not defined. Also, as noted in comment, you must elevate implicit IE version to use sane JS engine with X-UA-Compatible meta. Adding those two lines fixes described error:
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){}])</script>
</head>
<body>
<div>
...Do something
</div>
</body>
</html>
I have a problem something about JS and Android.
I need to call a JS function onclick by Android.
Here is the code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<link href="portrait-styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function callApp() {
window.location = 'ios:webToNativeCall';
}
</script>
</head>
<body>
<div class="wrapper">
<img src="IO08_01.png" />
</div>
How can I get data ios:webToNativeCall to pass it to android and use android call url.
I know how to use only in IOS but I don't know how to use in android.
yes it is possible by using Javascript , try something like this http://android-er.blogspot.in/2011/10/call-javascript-inside-webview-from.html
I'm trying to keep all the files Edge generates separate from my main files.
This is the html in the file it publishes:
<!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="anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
I copied the code over to an html file outside the animation folder containing all the generated files and changed the directory of the JS file it's referring to.
anim_edgePreload.js --> edgeAnimation/anim_edgePreload.js
<!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="edgeAnimation/anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
The animation no longer appears on the page, any idea why?
I get this error in Firebug after a few seconds:
TypeError: AdobeEdge.okToLaunchComposition is not a function
function edgeCallback(a){htFallbacks[a]&&(a=htFallbacks[a]);AdobeEdge.preload.got[a]=!0;if(a==AdobeEdge.preload.last)AdobeEdge.okToLaunchComposition(compId),AdobeEdge.preload.busy=!1,AdobeEdge.preload.q.length>0&&(a=AdobeEdge.preload.q.pop(),AdobeEdge.requestResources(a.files,a.callback))}
My issue was displaying the animation in a div on another page. Any attempt to load the animation explicitly failed. I succeeded in resolving this issue by using the HTML object tag:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Banner</title>
</head>
<body style="margin:0;padding:0;">
<object data="animations/liferay/liferay-00.html" style="height:175px; width:100%"></object>
</body>
</html>
Do note I did NOT change any of my URL paths. All I did was point to the publish folder.
So if you still encounter issues try re-publishing.
Update:
Additional solution provided by Wayne Barron:
http://youtu.be/RQKqlpCkrjs