Display div over canvas in Dojo mobile app - ios

I know this question have been asked many times but I still can't manage to get it to work.
I am developing apps on iPad and generate a globe 3D in WebGL, some of the elements are created with Dojo (like the splitpane).
I basically have a top pane with a canvas and a bottom pane with different stuffs.
<div id="splitArea" data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props="orientation:'V'">
<div id="topDiv" data-dojo-type="dojox.mobile.ContentPane">
<div id="globePane">
<button class="globeItem" id="metButton" data-dojo-type="dojox.mobile.Button" onclick="displayOptions('MET')">MET</button>
<canvas id="globeCanvas"></canvas>
<script type="text/javascript" src="js/Globe.js"></script>
<div id="globeOptions"></div>
</div>
</div>
<div id="infosPane" data-dojo-type="dojox.mobile.ContentPane">
</div>
</div>
Here is the top pane elements CSS :
#topDiv {
top: 0px;
width: 100%; height: 50%;
}
#globePane {
width: 100%; height: 100%;
position:relative;
}
#globeCanvas {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
}
#globeOptions {
width: 150px; height: 150px;
position: absolute;
top: 40px; right: 200px;
z-index: 4;
}
.globeItem {
position: absolute;
z-index: 3;
}
And the Javascript that injects globe in the canvas :
var container= document.getElementById('globeCanvas');
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( { canvas: globeCanvas , antialias:true} );
else
renderer = new THREE.CanvasRenderer( { canvas: globeCanvas } );
renderer.setSize(container.offsetWidth,container.offsetHeight);
renderer.setClearColor(0x000000, 1);
...
}
Now question is : I want a Div (id="globeOptions") to appear on screen when I click a button named "MET", I got at first to create it (what is done in the code), but once created, the div isn't displayed.
The button was created with Dojo and is displayed well on canvas (I didn't do anything special so it must be Dojo auto config that lets it being displayed on canvas), but the div stays under canvas whatever I try.
I tried lots of solutions I found but nothing works (even the relative/absolute positions).
Why does it work on Fiddle but doesn't in device, am I doing something wrong?

Related

How to change chart's width to fill up div using angular2-highcharts when hide/open left side nav menu?

How to change chart's width to fill up div when hide/open left side nav menu using angular2-highcharts??
I tried to use style="display:block; width: 100% !important;" as recommended on most resources I found, but it didn't help.
Here is an example of using chart inside mat-sidenav-container and mat-sidenav-content:
Html
`<mat-sidenav-container class="sidenavContainer">
<mat-sidenav #sideNav opened="true" mode="side" class="filters-viewer-sidenav">
mat-sidenav
</mat-sidenav>
<mat-sidenav-content>
mat-sidenav-content
<button (click)="sideNav.toggle()">
mat-sidenav-button
</button>
<div style="width: 100%; height: 100%">
<chart [options]="options" style="display:block; width: 100% !important;"></chart>
</div>
</mat-sidenav-content>
</mat-sidenav-container>`
css
`html, body, mat-sidenav-container, .chart-wrapper {
margin: 0;
width: 100%;
height: 100%;
}
.sidenav {
width: 240px;
height: 100%;
box-shadow: 3px 0 6px rgba(0,0,0,.24);
}`
Added also screenshot: after I close left side nav menu, chart width stays the same.
still_same_chart_width_size
One of the solution was to delay rendering of the chart. I used ngAfterViewInit() lifecycle hook:
ngAfterViewInit() {
setTimeout(() => {
if(this.chart) {
this.chart.reflow();
}
},100);
}
This can be done with css
chart {
width: 100% !important;
margin: 0 auto;
display: block;
}
Check https://github.com/gevgeny/angular2-highcharts/issues/11

jQuery resizable containment - leaves a space on right

I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.

iOS devices displaying iframe video smaller

I am having a problem with a kickstarter video that I am embedding. It works fine on everything except iOS devices. The iframe container is the correct size but when the video plays it is scaled down by about 25%.
I have done some research and tried fixing it but nothing is working for me. It appears as if it is a CSS conflict.
Here is a screenshot from my iPad:
http://louisreed.co.uk/tiddlybot/screenshot.png
HTML:
<div class="video-container">
<div class="embed-container">
<iframe src="https://www.kickstarter.com/projects/1320310506/tiddlybot-fun-and-simple-raspberry-pi-robot/widget/video.html" frameborder="0" scrolling="no"> </iframe>
</div>
</div>
CSS:
.video-container {
width: 75%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Any help or suggestions are welcome, cheers!

Vertical Flex Boxes and Jquery Ui resize

I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
CSS:
body, html{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: columN
}
#A{
height: 20px;
max-height: 100%;
width: 100%;
flex: 2;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
JS:
$("#B").resizable({
handles: "n"
});
I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.
Is there anything i can do to keep resiable from setting this top property?
http://jsfiddle.net/t6B2e/8/
Your jQuery set your element in absolute position.
you can test and find out using !important to override some of the CSS set by jQuery: http://jsfiddle.net/t6B2e/9/
#B{
height: 200px;
width: 100%;
background: blue;
/* overrides any inline style or javascript style */
position:relative!important;
bottom:0!important;
top:auto!important;
}

Vertically centering a div in a 100% height div doesn't work on Mobile Safari

I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle

Resources