When I use <Rectangle2D /> node, the rectangle did not display on canvas, and the debug console print a warning WARNING: Unrecognised X3D element <rectangle2d>.. I try it with Chrome 67 and Firefox 61, and my code is as follow:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>X3DOM page</title>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<X3D width='500px' height='400px'>
<Scene>
<Shape>
<Appearance DEF='MagentaAppearance'>
<Material diffuseColor='0 1 0' />
</Appearance>
<Rectangle2D ccw='true' lit='true' size='7,7' solid='true'></Rectangle2D>
</Shape>
</Scene>
</X3D>
</body>
</html>
I found the problem, use x3dom-full.js instead of x3dom.js for the 2d geometries.
Related
When i run the npm run build its give me the build but when i place it in the tomcat webapps its so me error
Failed to load resource: the server responded with a status of 404 ()
But when i place the . in html file its work.
Code its not working:-
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="8080/build/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="8080/build/manifest.json" />
<title>GV App</title>
<script defer="defer" src="8080/build/static/js/main.99658d36.js"></script>
<link href="8080/build/static/css/main.0dd94b59.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
Code its working when i place the dot like href="./logo192.png" :-
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="./manifest.json" />
<title>GV App</title>
<script defer="defer" src="./static/js/main.55119f6e.js"></script>
<link href="./static/css/main.d962d6c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
I have an addin for outlook, which is complaining: Uncaught Invariant Violation: Target container is not a DOM element.
My app already ran before, so it seems to be an issue within my components (just a guess).
The Exception occours here:
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component title={title} isOfficeInitialized={isOfficeInitialized} key="config" />
</AppContainer>,
document.getElementById("root")
);
};
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contoso Task Pane Add-in</title>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<!-- Template styles -->
<link href="../taskpane/taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-Fabric">
<div id="root"></div>
</body>
</html>
EDIT: Rendered code in Chrome debug tools
How can I find the code part which cannot be rendered? Which DOM element might be the issue?
In my code example I have an upload button and an x3d scene.
After choosing an x3d file from the local file system the method URL.createObjectURL is called.
The content of my html file looks like this:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Include an external X3D-File</title>
<script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
</head>
<body>
<input type="file" onchange="onFileChange(event)" accept=".x3d">
<x3d width='500px' height='400px'>
<scene id="scene">
</scene>
</x3d>
</body>
<script>
function onFileChange(event) {
var inline = document.createElement("Inline");
inline.setAttribute("nameSpaceName", "Inline");
inline.setAttribute("mapDEFToID", true);
var url = URL.createObjectURL(event.target.files[0]);
inline.setAttribute("url", url);
document.getElementById("scene").appendChild(inline);
console.log("ObjectURL: " + url);
}
</script>
</html>
An .x3d file could look like this:
<x3d width="500px" height="400px">
<scene>
<shape>
<appearance>
<material diffuseColor='red'></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
I want to use the created object url for a new generated inline node but unfortunately the model is not showing up. Instead a loading circle stays at the upper left corner like in this
screenshot or in image below.
Did I overlook something or is there another way to load an x3d file into the browser and access it from the inline node?
Update:
In the meantime I've solved the problem by myself.
Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.
In the meantime I've solved the problem by myself. Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.
The final solution is now:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Include an external X3D-File</title>
<script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
</head>
<body>
<input type="file" onchange="onFileChange(event)" accept=".x3d">
<x3d width='500px' height='400px'>
<scene id="scene">
</scene>
</x3d>
</body>
<script>
function onFileChange(event) {
var inline = document.createElement("Inline");
inline.setAttribute("nameSpaceName", "Inline");
inline.setAttribute("mapDEFToID", true);
inline.setAttribute("contentType", "model/x3d+xml");
var url = URL.createObjectURL(event.target.files[0]);
inline.setAttribute("url", url);
document.getElementById("scene").appendChild(inline);
console.log("ObjectURL: " + url);
}
</script>
</html>
I have done a program which does autocomplete using angucomplete statement.but iam unable to get when i enter any key it does not displaying it with scrollbar whne number of matches are done.CAn anyone help me to solve this
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Autocomplete using remote searching</title>
<script src="angularfiles/angular.min.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="Jsfiles/autourl.js"></script>
<script src="angularfiles/angucomplete-alt.js"></script>
<link rel="stylesheet" href="angularfiles/style.css" />
<link rel="stylesheet" href="angularfiles/angucomplete-alt.css" />
<link rel="stylesheet" href="angularfiles/bariol.css" />
</head>
<body ng-controller="controller">
<angucomplete-alt id="members" pause="400" placeholder="Type to start"
selected-object="testObj" maxlength="40"
remote-url="http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address="
remote-url-data-field="results"
title-field="formatted_address"
minlength="1"
discription-field="status"
/>
</body>
</html>
//JSfile
var app=angular.module("myapp",['ui.bootstrap','angucomplete-alt']);
app.controller("controller",function(){
});
To show scrollbar, you need to set the following css style to angucomplete-dropdown class, and then the directive automatically picks it up.
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px; // your preference
}
See example #1
For more Info: https://github.com/ghiden/angucomplete-alt
I've got a simple website using jQuery mobile. It's composed of 2 pages, index.php and pageB.php. In pageB.php is the jqm pages' header. I put a link back to index.php:
Retour
In index.php, the page id is welcome
My problem is that if I
Enter the site from domain.com/
Click on a link to pageB.php (ajax-loaded)
Click on the link back to index.php
The event pageshow is not fired again and the content, which I loaded dynamically before, is not present. (Seems to be a new page of type #welcome)
But if I replace the link in pageB.php with a link to index.php#welcome, welcome being the id of the page in index.php, then if I enter the site from pageB.php, the link is inactive.
Update:
Here is simplified code to reproduce the problem:
index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=welcome>
<div data-role=header>
<h1>Index</h1>
</div>
<div data-role=content>
<a href="pageB.php">link to pageB</link>
<script>
$('#welcome').bind('pageshow', function(){
alert('pageshow triggered');
});
</script>
</div>
</div>
</body>
</html>
and pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=pageB>
<div data-role=header>
<!--Retour-->
Retour
<h1>PageB</h1>
</div>
<div data-role=content>
nothing
</div>
</div>
</body>
</html>
I suggest the following solution:
First, create a javascript file and call it test.js for example. In this file, include the following code:
function myfunc(){
alert('pageshow triggered');
}
$(document).delegate('#welcome', 'pageshow', myfunc);
Then, include the following code for both your files index.php and pageB.php:
-index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
</body>
</html>
-pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
Another solution would be to group every jQuery Mobile pages in one HTML file:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<!-- PAGE ONE -->
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
<!-- PAGE TWO -->
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
PS: You may change the path / source of the file 'test.js' according to your convenience.