I have a JavaFX applet with the stage's initial height and width defined as such:
var stage:Stage = Stage {
title: "Blah"
scene: Scene {
height: 768
width: 1024
fill: Color.WHITE
...
Additionally, I have elements laid out in the scene that are bound to the height and width for layout purposes. All works fine as a Desktop program.
However, when I embed it into an HTML page as an applet using the following code, the applet is sized right, but the width and height properties of my scene are set to ZERO even though there's plenty of space.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lol</title>
</head>
<body>
<h1>Lol</h1>
<script src="http://dl.javafx.com/1.2/dtfx.js"></script>
<div style="border:1px solid black">
<script>
javafx(
{
archive: "Lol.jar",
draggable: true,
width: 1024,
height: 768,
code: "lol.Main",
name: "Lol"
}
);
</script>
</div>
</body>
</html>
For example, the expression {stage.width.toString()} evaluates to 0.0. What's going on? How can I, inside the FX code, get the actual height and width of the applet?
Sigh...
I fixed this quickly... apparently using stage.width only works in Desktop mode, whereas stage.scene.width works for both applets and desktop apps... at least in my case. Leaving this here for future JavaFX developers, bless their hearts.
Related
I have some webapplications, written in Netbeans, using CSS.
When I run the file from Netbeans, all works fine. However, there seems to
be a difference when I acces the application from the browser !
this is a simple example :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#border_top_and_bottom {
border-top-style: solid;
border-top-color: coral;
border-top-width: 0.5px;
border-bottom-style:solid;
border-bottom-color:coral;
border-bottom-width: 1.5px;
padding-bottom: 3px;
padding-top: 3px;
width :600px;
</style>
</head>
<body>
<div id="border_top_and_bottom">TODO write content</div>
</body>
</html>
and this is the result, when I acces the application from the web browser (IE):
as you can see, there is a border-line missing at the top.
This is one of the problems, features like a shadow on the box, or
creating tekst near a picture are not working eather.
this is very annoying for other users because I have never the same result !
(I hope my question is clear ?? )
make sure you are using the correct version of IE ... it worked fine on my IE11. the code looks fine
I have an Eclipse RCP 4.5.2 (32bit) application on Windows 7 (64bit) which contains a browser control that uses SWT.MOZILLA to run on XulRunner 31.0 (the latest compatible as far as I've researched (yes I know, that link is for Linux)).
In this browser control I'd like to show a Google Map, which generally works fine, but the zoom controls and some other images are not rendered properly:
This is the HTML file I use to load the map (except for the manual focus on Iceland):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
#map img { max-width: none; }
</style>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=<api-key>&signed_in=true&callback=initMap"></script>
</body>
</html>
[EDIT] If I use the default browser (SWT.NONE -> ie11) the page is rendered properly. I was mistaken. IE (SWT.NONE) renders wrong too.
Is there anything I could change to make Google Maps work (while using SWT.MOZILLA)?
I am plotting some csv data using a java applet embedded in my simple html code. Things run fine when I plot the data without any frill; if I add labels and title I don't see the graphs anymore. What should I change in the html code, reported below?
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"
style="width:1000px; height:600px;"></div><br>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv"),
"combined_file.csv", // path to CSV file
{ title: 'Title',
xlabel: 'Time'
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
</script>
</body>
</html>
For the plotting options, I followed this example.
You forgot a comma after the xlabel property. It should be this:
{ title: 'Title',
xlabel: 'Time',
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
As a result, there was a javascript error stopping execution. To debug this yourself, use your browser's web developer tools and look at the console. It will report any javascript errors.
I linked my stylesheet to my base html file.
<title> <link rel="stylesheet" type="text/css" href="style.css">
and when i click go to link it goes to the right file. i can change the background color and all of the other margins. but when i insert a url the css seems to find the picture but doesnt load up to the html and if i click preview non of the images does load.
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
link your css under header tag not title tag as title tag is referring to Website Title.
<header>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
and the typo mentioned in comments, and ensure your destination is correct.]
p/s (typo)
picture{
background-image:url(img/header.jpg);
}
Like this below code paste in your html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="etbplaza.nl/css/style_basic.css"; />
</head>
<body>
<div class="picture"> your code hre </div>
</body>
</html>
CSS
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
This might be a typo:
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
picture has no class nor id selector which might causing the problem and/or may be try to use url('img/header.jpg'); within quotes. or url('../img/header.jpg') but we don't know where is the image is located.
Also try this:
Inspect Element
hover over the path and see is there the path is being loaded if yes
your image would show there
See this technique
change background-image:url(img/header.jpg/); to background-image:url(img/header.jpg); also make sure the /path/to/file is correct and if picture is a div class then it will be like .picture in your css
you have to use the css as in the form of class or id and try the code as
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
or as id
#picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
surly you got the preview of the Image to your HTML page.
Please check the path of css file is correct or not.
thanks for reading.
I have a forum and I'm trying to add a java applet into it that is the same width as the post it's contained in. Therefore before I compile the JAR I need to know the width of the posts, which is the maximum width the applet can be.
What I need to know is how to make a div that is width 100%, so it stretches to the very sides of the post and inside the div it tells me how wide it is. It would be extremely helpful as I can't measure with a program how wide the post is because I can't see the boundaries due to the design.
Thanks in advance so much for helping,
Gergy.
How about this (assuming you're using jQuery!):
$(".my_div").html($(".my_div").width());
Without jQuery, give this a shot:
<html>
<head>
</head>
<body>
<div id="mydiv">
</div>
<script>
var div = document.getElementById("mydiv");
div.innerHTML = (div.offsetWidth);
</script>
</body>
</html>