I am playing around with VRML at the moment, not through choice to be honest but for a project on Web 3D.
I am trying to make a touch sensor in VRML that will show and hide a Div in a webpage. I have tried writing a wee script using
browser.loadURL('javascript:someFunction()');
to try and test this.
The javascript is never called, however I know my touch sensor is ok as certain functions I have tried to use (e.g. if i spell 'browser' wrong) it throws up an error.
Perhaps this is just not supported by modern browsers?
Any assistance and advice would be greatly appreciated.
DEF alertScript Script {
eventIn SFTime make_alert
url [ "javascript:
function make_alert (value) {
Browser.loadURL('javascript:alert()');
}
" ]
}
ROUTE touchBack.touchTime TO alertScript.make_alert
Do they only want classic VRML or is X3D allowed ? (X3D is the name of the current version of VRML).
If you are allowed to use X3D (I don't see why not), you could use X3DOM which is a WebGL engine, you may even get extra points on your assignment :)
Here's an example that hides a div when you click on a 3D sphere:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Touchsensor in X3DOM</title>
<link href="x3dom.css" rel="stylesheet" />
<style>
#myDiv {
color: blue;
margin: 20px 0;
}
x3d {
display: block;
width: 600px;
height: 400px;
background: #EEEEEE;
border: none;
}
</style>
</head>
<body>
<div id="myDiv">
Click the sphere to hide this div
</div>
<x3d>
<Scene>
<Shape id="mySphere">
<Appearance>
<Material diffuseColor="0 1 0" />
</Appearance>
<Sphere/>
</Shape>
</Scene>
</x3d>
<script src="x3dom.js"></script>
<script>
(function() {
document.getElementById('mySphere').onclick = function(){
document.getElementById('myDiv').style.display = "none";
};
})();
</script>
</body>
</html>
And by the way, X3D is the recommended 3D technology by the HTML5 spec, it isn't dead at all :-)
Related
I just tried FMX TWebBrowser in Delphi 10.3.3. I could not rotate a photo in img tag. The following page is working in Google Chrome. But it is not working in FireMonkey TWebBrowser of Delphi 10.3.3. What is wrong? Please someone help me!
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
width: 300px;
height: auto;
}
</style>
</head>
<body>
<button onclick="rotate();">Rotate 90 degrees</button>
<br />
<img src="20190228-1.JPG" id="theID" />
<script>
function rotate() {
var imgX=document.getElementById("theID");
imgX.style.transform = "rotate(90deg)";
imgX.style.display = "block";
}
</script>
</body>
</html>
I guess your target platform is Windows. TWebBrowser wraps IE based web browser control on Windows which displays pages in IE7 standard mode by default. This mode doesn't support CSS transformations. You have multiple options to workaround that.
Option 1: Use deprecated -ms-filter CSS property
-ms-filer or filter is Microsoft CSS extension to apply collection of graphic filters to an object. It also supports rotation:
imgX.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
Option 2: Force Egde standard mode via registry
This is also what TWebBrowser documentation encourages you to do on Windows platform. You basically need to enlist your application's EXE name under HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION either manually or programmatically as DWORD value that defines compatibility mode for your application. 11001 ($2AF9) is for IE11 edge mode. See Browser Emulation for further values. This setting will affect all pages loaded in any web browser control within your application.
Option 3: Use x-ua-compatible header to specify legacy mode
You should be able to achieve the same effect as in option 2 by injecting x-ua-compatible header via <meta> tag in your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
…
See Specifying legacy document modes for more information.
All of the above applies to Windows platform. Keep that in mind when picking from the options. Option 1 most likely won't work on other platforms.
While you're at it consider also separating JavaScript from CSS by leveraging CSS classes:
<style>
img {
display: block;
width: 300px;
height: auto;
}
.rotated {
transform: rotate(90deg);
}
</style>
…
<script>
function rotate() {
var imgX = document.getElementById("theID");
imgX.classList.toggle("rotated");
}
</script>
I have many different MathJax formulas that are going to be dynamically moved around different lists on the webpage. I am trying to control this with JQuery and the append attribute.
In my script file I have various arrays of formulas and then a function that lists the formulas in the array inside of a specified div using .append. Here's the code:
function listArray(array,div){
for(var i=0; i<array.length; i++){
$('#'+div).append('<li>'+array[i]);
}
};
I am having the problem that MathJax typesets the math before this script runs and so the appended formulas don't display in TeX. Here is an example Fiddle:
http://jsfiddle.net/T8m64/92/
Does anyone know of a good fix for this? I have tried reading some of the documentation on re-typesetting MathJax, but I don't really follow it.
There are two problems with your fiddle example. First, the array of math expressions loses the backslashes, because these are used as escape characters in the javascript strings. You need to double them:
var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];
Second, you need to tell MathJax to process the mathematics once you have added it to the page. Use
MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);
after appending the math in order to do that.
Version 120 of you fiddle shows a working version.
I ran some tests as updates /93, /94, /95 of your fiddle, and found that the rendered formulas could be moved around but the whole thing was fragile. Sometimes a simple change or just a page refresh would cause the unrendered formulas to show, each one doubled-up, which I can't explain.
As you will see, I thought a setTimeout would fix things but now I don't think that's the case.
I think the bug is just a feature of running the code in jsFiddle. I can't induce the bug when running the code in a test page served locally under file:// protocol from my own computer and viewed in Opera.
Here's my test page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
body {
margin: 10px;
}
.jax {
display: none;
}
#list1, #list2 {
margin: 10px 0;
padding: 5px;
border: 1px solid #000;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
$(".jax").each(function(i, j){
var li = $("<li/>").append($(j).text());
$ul.append(li);
});
};
//move formulas from original spans into list1
listArray($("#list1") );
//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
$("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
$("#list1 li").eq(0).appendTo($("#list2"));
});
});
</script>
</head>
<body>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<span class="jax">\(\mathbb{Q}\)</span>
<span class="jax">\(\mathbb{Z}\)</span>
<ul id="list1"></ul>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<ul id="list2"></ul>
</body>
</body>
</html>
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
I am trying to build a single-page scrolling website leveraging the Ascensor JQuery plugin, and am having a lot of trouble getting it setup correctly. The documentation at http://kirkas.ch/ascensor/ is helpful, but I still must be missing something. What I want is a simple 3-floor layout, top to bottom. It seems that the layout of my "building" gets generated correctly, but I am unable to move between the "levels." The arrow keys and my links don't move the page at all. Can I get a little help with my code? Any guidance is appreciated.
Thanks,
Brett
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ascensor Test</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.scrollTo-1.4.3.1.js"></script>
<script src="jquery.ascensor.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function()
{
$('#house').ascensor(
{
AscensorName:'ascensor',
ChildType:'div',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
Easing:'easeInOutCubic',
WindowsOn:1,
Direction:'y',
AscensorMap:'1|1 & 2|1 & 3|1',
KeyNavigation: true,
Queued:false,
QueuedDirection:"x"
});
});
</script>
<style>
body
{
margin: 0;
padding: 0;
}
#house
{
overflow: hidden;
border: 5px solid black;
}
#navigation
{
z-index: 1000;
position: fixed;
top: 50px;
left: 50px;
}
#ascensorFloor1
{
background-color: orange;
}
</style>
</head>
<body>
<div id="navigation">
Floor 1
Floor 2
Floor 3
</div>
<div id="house">
<div>
Floor 1
</div>
<div>
Floor 2
</div>
<div>
Floor 3
</div>
</div>
</body>
</html>
The problem is not you, it is in "jquery-1.9.1.js".
I've tried to implement ascensor myself, and figured that the problem is that the plugin doesn't work with the last update from jQuery. The version originaly used 1.5.1. Check it out the jQuery in Git (https://github.com/seekvence/ascensor).
I've tried to find out why, but see no reason for that! Even tried to use the jQuery migrate plugin, but it didn't work as well!
The problem isn't the IDs, since it is the plugin that is generating them. So you shoudn't put them in your mark-up in the first place. I had the same problem as you and after going through a lot "on/off switching stuff", i found out that the problem was in the key navigation declaration. If you turn it to false, it starts working. Don't ask me why, but "KeyNavigation:false" gets the plugin to work. Which is a shame, since key navigation is one of the things i liked about the plugin... Anyway, try this and see if it works.
Easing:'easeInOutCubic' - don't work
Delete: Easing:'easeInOutCubic',
or: Easing:'linear',
..))
I was trying to test out some working code from http://dev.iceburg.net/jquery/jqModal/ to get an idea of how this works, but I am unable to get the code to work. I'm trying to use the pop up dialog box part, and I am testing the code from the defaults, which is the first example, in the examples section. here is what I had copied and tried testing out. the part that is not working is the dialog box popping up. i receive an error say.... Uncaught ReferenceError: $ is not defined
<html>
<head>
<title> test </title>
<style type = "text/css">
.jqmWindow {
display:none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
# html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<script type = "text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
</head>
<body>
view
...
<div class="jqmWindow" id="dialog">
Close
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the documentation too!
<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>
If your code is indeed your entire HTML, then the reason $ is not defined is that you have not included jQuery (which defines $ and uses it a lot as shorthand). Your code includes neither the jQuery library nor the jqModal script. (Admittedly all of the examples on the jqModal site are extracts rather than full code so they take this step for granted.)
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jqModal.js"></script>
in your <head>, adjusting the path for jQModal.js as appropriate.