I simply want to output this using PrimeFaces Mobile:
<body onload="windowOnLoad();">
This is what the page looks like:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
renderKitId="PRIMEFACES_MOBILE">
<pm:page title="Mobile Login">
<pm:header>
<script language="JavaScript" type="text/javascript">
function bodyOnLoad() {
alert("in bodyOnLoad");
}
</script>
</pm:header>
<pm:view id="viewForm">
<pm:content onload="bodyOnLoad();">
Test
</pm:content>
</pm:view>
</pm:page>
</f:view>
I've tried putting it on the pm:page, pm:view, pm:content. None seem to work? I am sure I am missing something easy.
Thank you.
This turned into more of a Javascript solution:
<pm:header>
<script language="JavaScript" type="text/javascript">
function bodyOnLoad() {
alert("in bodyOnLoad");
}
window.onload = bodyOnLoad;
</script>
</pm:header>
Related
Here i try to Angular setup in html page for that i wrote simple code as Below
MyApp.js
/// <reference path="angular.js" />
var app = angular.module('MyApp', [])
debugger;
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "This is MyApp....";
})
Master.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app="MyApp">
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
Here why my msg is not Loading This is MyApp....
ng-app inject wrong place. Not <head ng-app="MyApp">, Inject html or body or div tag as per your web application need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
the problem is with your angular script, is not loaded, check your path, you can use the CDN also :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
I am new in angularjs, so i try this script in Index.html like this:
<!DOCTYPE html>
<html lang="en" ng-app="DEMO">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.HelloMessage = "Hello Pejman";
}
</script>
</body>
</html>
but when i run this, it show {{HelloMessage}} instead of Hello Pejman , what is the problem?
EDIT : this is the tutorial:
You did not bootstrap angular module, that is why your code doesnt work. You must call ng-app in any HTML tag to notify Angular start in there. So all of the sub tags under the tag Angular declared will be able to use directives, scope, controller etc.
Please check here to understand how to create controller and use it : https://docs.angularjs.org/guide/controller
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="angular.min.js"></script>
</head>
<body>
<h1 ng-app="demo" ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script type="text/javascript">
var app = angular.module('demo', []);
app.controller('HelloWorldCtrl', function($scope) {
$scope.HelloMessage = "Hello Pejman";
});
</script>
</body>
</html>
Below is my HTML file RouterExample.html. I am trying to create a router. But it is not working.
Have i imported all necessaries?
When i try to run the code i get the html page as designed. When i click on any of the HREF objects, the object's name is getting appended to the URL but getting JBOSS, which is my server home page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="scripts/underscore.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="router.js"></script>
</head>
<body>
One
Two
Three
One
Two
Three
<table>
<tr>
<td id="one">1</td>
<td id="two">2</td>
</tr>
<tr>
<td id="three">3</td>
<td id="four">4</td>
</tr>
</table>
<script>
$(function(){
var AppRouter = Backbone.Router.extend({
routes: {
'RouterExample.html': 'home',
'one' : 'oneFun'
},
home : function()
{
alert("Home");
},
oneFun: function()
{
alert("One Function");
}
});
var fovView = new AppRouter();
Backbone.history.start();
});
</script>
</body>
</html>
Your anchor tags are linking to another document because the href values start with /. Try this:
One
Two
Three
One
Two
Three
I'm trying to detect when zoom is changed in my map, I tried using these:
Microsoft.Maps.Events.addHandler(map, "targetviewchanged", console.log('targetviewchanged'));
Microsoft.Maps.Events.addHandler(map, "viewchangestart", console.log('viewchangestart'));
but is triggered only once when the map changes
How can I detect the zoom change only?
Thank you in advance
Try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Event view change start</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map, lastZoomLevel = 0;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
lastZoomLevel = map.getZoom();
Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
}
function viewChanged(e)
{
if(lastZoomLevel != map.getZoom()){
lastZoomLevel = map.getZoom();
alert("Map Zoomed");
}
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="; width:400px; height:400px;"></div>
</body>
</html>
I am a newbie in this field and have been trying to work with the x3dom objects. The problem that I am now facing is how to display the attributes of the x3dom objects as a popup. I have seen the examples given in the x3dom website but have not found any relevant examples yet. I would be glad if anybody have some examples to share. Thank you in advance.
You could use the attributes property (e.g. document.getElementById("id").attributes), here's an example that shows a table of attributes when you click either buttons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>X3DOM</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container">
<X3D width="100%" height="300px">
<Scene>
<Shape id="myShape">
<Appearance>
<Material id="myMaterial" diffuseColor="0.6 0.6 0.6" specularColor="0.8 0.8 0.8" shininess="0.145" ambientIntensity="0.2" emissiveColor="0,0,0"/>
</Appearance>
<Sphere />
</Shape>
</Scene>
</X3D>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://x3dom.org/x3dom/release/x3dom.js"></script>
<script>
function displayAttributes(objectId){
var code = '';
var attributes = document.getElementById(objectId).attributes;
$.each(attributes, function(index, attr) {
code += '<tr><th>' + attr.name +'</th><td>' + attr.value + '</td></tr>';
});
$("#attributesTable").html(code);
}
</script>
<button onclick="displayAttributes('myShape')" class="btn btn-large">Attributes of the shape</button>
<button onclick="displayAttributes('myMaterial')" class="btn btn-large">Attributes of the material</button>
<table id="attributesTable" class="table table-striped table-bordered" style="margin-top:50px"></table>
</body>
</html>
Gist: https://gist.github.com/4329304
exactly what you are trying is unclear not sure this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://x3dom.org/x3dom/example/x3dom.css"></link>
<script type="text/javascript" src = "http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
<X3D showLog='true' width="400px" height="400px"><Scene>
<Shape><Box size="2 2 2" onclick="alert_attributes();" /></Shape>
</Scene></X3D>
<script>
function alert_attributes()
{
var size = document.getElementsByTagName("Box")[0].getAttribute('size');
x3dom.debug.logInfo( size );
alert( size );
}
</script>
</body>
</html>