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)?
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'm currently doing a Scheduling module for our project, and to be able to achieve this, we are going to use DHTMLX Gantt. However, I cannot store the values that is entered into the gantt chart!
Here is my code for the chart
<!DOCTYPE html>
<html>
<head>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="codebase/dhtmlxgantt.js"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.load("events.php");
var dp = new dataProcessor("events.php");
dp.init(gantt);
</script>
</body>
</html>
and here is the code for the events.php
include ('codebase/connector/db_sqlite3.php');
include ('codebase/connector/gantt_connector.php');
$dbtype = "MySQL";
$res=mysql_connect("localhost", "root", "");
mysql_select_db("myfirstdb");
$gantt = new JSONGanttConnector($res, $dbtype);
$gantt->mix("open", 1);
$gantt->render_links("gantt_links", "id", "source,target,type");
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,progress,sortorder,parent");
?>
What seems to be the problem?
You php code seems ok. What happens when you try saving the event, can you check the server response? It may contain an error message.
Try also enabling logging for gantt connector so you could see an actual sql requests and their results
http://docs.dhtmlx.com/connector__php__errors.html
One other thing - make sure you've enabled auto increment for id column, otherwise connector will be unable to insert new records
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle.
I am giving the size of heading in percentage :
<!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>
</head>
<body>
<img src="images/upload.png">
<img src="images/render.png" class="menuc">
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test.
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
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.
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.