Currently developing a Webapp using Cesium and Bootstrap.
Problem is that Cesium viewer is not resizable. Only solution I found to limit it to 50% of the window is overflow: hidden; in css. You will understand that this can lead to an unnecessary use of resources because we are doing a simple cache-misère.
Any clue to resize Cesium viewer?
var cesiumContainer = document.getElementById("cesiumContainer");
var ellipsoid = Cesium.Ellipsoid.WGS84;
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneMode: Cesium.SceneMode.SCENE3D,
infoBox: false,
geocoder: false,
timeline: false,
animation: false,
homeButton: false,
scene3DOnly: true,
baseLayerPicker: false,
sceneModePicker: false,
fullscreenButton: false,
projectionPicker: false,
selectionIndicator: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false
});
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cesiumjs.org/releases/1.11/Build/Cesium/Widgets/widgets.css">
<script src="http://cesiumjs.org/releases/1.11/Build/Cesium/Cesium.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div id="cesiumContainer"></div>
<div class="col">
This must take 50% of height.
</div>
</div>
</body>
</html>
Responsive DIVs in CesiumViewer [CesiumJS]
As i said here where i have a very similar problem, using reactjs u can use cesium as a react component and render the cesium map and it size in function of the browser size.
Related
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
So im trying to create a zoomable image using css transform: scale and and overflow on the container div. However when the scale is put on the image, i am unable to scroll up or left.
Ive included my test code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<!-- CSS INCLUDES-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS INCLUDES -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TITLE -->
<title>test</title>
</head>
<style>
#zoom-wrapper {
overflow: auto;
height: 90vw;
width: 90vw;
border: 1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
.zoom {
transform: scale(2);
transition: transform ease .2s;
}
</style>
<script>
$(document).ready(function() {
$('#zoom').click(function() {
$(this).addClass('zoom')
});
});
</script>
<body id="gallery-wrapper" style="background-color: #efefef">
<br><br>
<div id="zoom-wrapper">
<img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
</div>
</body>
</html>
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.
I try to create a pdf file using phantomjs. This pdf contain multiple pages. I define this pages with the follwing css:
.page{
height: 210mm;
width: 297mm;
}
body{ margin: 0; padding: 0; }
And here is an example of html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="{{ asset('/css/main.css') }}" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div class='page'>page1</div>
<div class='page'>page2</div>
</body>
</html>
And following is config file for phantomjs:
var page = require("webpage").create();
page.open("http://site.local/pdf/2", function() {
page.paperSize = { format: "A4", orientation: "landscape" };
//page.paperSize = { width: "29cm", height: "21cm" };
//page.zoomFactor = 1.249;
page.render("example.pdf");
phantom.exit();
});
But my html pages never fit 100% in the pdf pages. They are every time smaller. If I set the zoomFactor to 1.249, then the page fit almost 100% inside. But somehow this solution is weird. How could I solve this problem?
You can write this:
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: {
top: '1cm',
left: '1,6cm',
right: '1,6cm',
bottom: '1cm'
}
};
it helped me.
This question is specific to the design. I have an application that displays positions on a map all works "fine". But now I need to design the user interface, that goes beyond the map (buttons, forms, etc.) these will be located on one side of the map, but under any reason the map is displayed once change some of the CSS page.
I'm a bit desperate since neither my own CSS, or bootstrap (2.3.0), foundation (3.2.5) works. The map simply not displayed, in the console there are no errors. Event in the better case the map is displayed but with graphics glitchs (zoom controls messed, bad markers position, etc) That may be happening and how I can fix this. Will I have to use an iframe? or is there a better solution?
I've readed about max-width: none fix but this is solving nothing. To clarify that I am using the maps are not static.
I can get work perfectly the maps if try with a simple markup and styles
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="/js/app.js"></script>
</body>
</html>
styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
});
But obviously it'snt enough for build the application.
A solution that includes the use of iframes, since it seems that is the only way that the map is not affected by the rest of the CSS
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9">
<iframe id="map_container" src="/map.html" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
map.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
</body>
</html>
map-styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
var options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
$iframe = $('#map_container'),
map_el = $iframe.contents().find('#map')[0],
map = new google.maps.Map(map_el, options);
// Match iframe size to parent
$iframe.width($iframe.parent().width());
$iframe.height($iframe.parent().height());
});