<AFrame> How does icon for fullscreen stay at bottom right edge? - aframe

The icon for fullscreen mode (looks roughly like a set of goggles, maybe at 50% transparent gray and solid white) always sits on the bottom right of the browser screen when viewing via desktop.
The positioning is such that despite potentially disruptive acts such as changing the window size, pressing to bring up console, or fov changes to the camera angle, the icon's position is fixed.
How is this achieved?
I would like to construct a similar element (rectangle would be fine) and position it somewhere stable (bottom center, perhaps) where it can be clicked by a mouse, when the application is being run in a "desktop" mode rather than viewed through visor or cardboard. The application is displays 360-photos.
EDIT: (part of original question deleted for clarity, question expanded to get more details of the proper usage of CSS)
Answer posted by ngokevin suggests using CSS.
I have used CSS successfully with HTML and simple JavaScript situations. Am having trouble with getting it to work in the AFRAME context.
In the below example is one of several tries to alter the "bottom" attribute, but it isn't having an effect. (Tried using id instead of class, using the literal string provided in the answer, using absolute or not, various other things.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS/AFRAME Test</title>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<style>
.plane { position:absolute; bottom: 100px ! important;}
</style>
</head>
<body>
<a-scene>
<a-plane class="plane"
height="1"
width="3"
position="0 0 -4"
material="color: red">
</a-plane>
<a-camera fov="100" look-controls></a-camera>
</a-scene>
Changing the value for "bottom" has no effect. Is it possible, for example, to make this rectangle always hug the center bottom edge using CSS?
Would it be possible to show an edit the above so that CSS is used to affect any attribute of the so I can see and play with a working example?
If the "plane" element needs to be 2D HTML, how do we set to overlap the a-scene?

It's just CSS. You can override it (e.g., something like .a-enter-vr-button { bottom: auto !important; top: 10px; })

I thought I'd post a simple example. Now that I've done it, it seems very obvious, even though it wasn't when I first asked.
The example uses two "p" tags with "fixed" positioning. When the mouse hovers over either tag, a function is called that gets & sets attributes. The Z-Index value is used to ensure that the "P" tags appear above the a-scene.
Because I am new to HTML/CSS I had to do some reading up on positioning. The MDN link on Positioning, and the section on "Practical Positioning Examples" directly after that were very helpful.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS/AFRAME Interaction Test</title>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<style>
p {
font-size: 24pt;
text-align: center;
width: 35px;
height: 35px;
color: white;
background-color: grey;
opacity: 0.5;
position: fixed;
bottom: -10px;
z-index: 1;
}
.foo {
left: 20px;
}
.bar {
left: 56px;
}
</style>
<script>
function recolorPlane() {
var plane = document.querySelector("#plane");
var currentColor = plane.getAttribute('material').color;
if (currentColor == "red") {
plane.setAttribute('material', {color: 'blue'});
} else {
plane.setAttribute('material', {color: 'red'});
}
}
</script>
</head>
<body>
<p class="foo" onmouseover="recolorPlane()">+</p>
<p class="bar" onmouseover="recolorPlane()">-</p>
<a-scene>
<a-sky material="color: #DDF"></a-sky>
<a-plane id="plane" height="1" width="3"
position="0 0 -4" material="color: blue">
</a-plane>
</a-scene>
</body>
</html>

Related

Problem printing iframe Google map within bootstrap visible-print div

I'm working on a web site that needs a fairly complex print layout. Within one of the printable areas is a Google map - iframe version.
But I can't get the map to print.
I've created a test HTML page containing minimal HTML/CSS/JS to demonstrate the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="idHead">
<title>iFrame inside .visible-print</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<style media="print">
.visible-print-block {
border: 10px solid red !important;
width: 620px !important;
height: 470px !important;
display: block !important;
}
.visible-print iframe {
border: 10px solid blue !important;
}
</style>
</head>
<body>
<div class="visible-print visible-print-block">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2418.4013212105515!2d-1.656887048290665!3d52.68884797974762!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDQxJzE5LjkiTiAxwrAzOScxNi45Ilc!5e0!3m2!1sen!2suk!4v1567617099057!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Expected results is a blank web page when you view it in the browser, but the print preview (and the print) would show a red bordered area containing the map.
What I get is an empty red bordered area.
I added the blue border to the iframe to show where the iframe should be and to check the iframe is showing.
I've looked through the Bootstrap CSS and can't see how the 'visible-print' 'visible-print-block' could affect the iframe or the Google map.
If I take the iframe out of the container div it appears and prints correctly.
Google maps cannot render on a hidden div. If you need to print this, i suggest you to create another page just to print.

Safari is not preventing the scrolling of <body style="overflow-y: hidden">

Here's the extremely simple HTML page
<body style="overflow-y: hidden">
...
</body>
The expected behavior of this page is: scrolling of a document is prevented because of overflow-y: hidden.
It works as expected (scrolling is prevented) everywhere except Safari.
Live demo: https://spotted-chime.glitch.me/
The question is: how to make Safari behave the same way as other browsers?
Just use overflow: hidden and it will work.
Alternatively, you can try using position: fixed on the <body> tag as well.
(NOTE: Using this approach, the body will scroll to the top as by default the top: 0.)
EDIT: For safari mobile devices, you need to use Javascript events. Explained in this answer.
https://stackoverflow.com/a/4770179/2860486
Position fixed is meant to create a div that stays in the same position on the screen while the content behind it is scrolled down.
fixed
The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or
filter property set to something other than none (see the CSS
Transforms Spec), in which case that ancestor behaves as the
containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.)
Its final position is determined by the values of top, right, bottom,
and left.
This value always creates a new stacking context. In printed
documents, the element is placed in the same position on every page.
Have you tried changing it to absolute?
body {
overflow-y: hidden;
}
#backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .2);
border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div>0%</div>
<div>1%</div>
<div>2%</div>
<div>3%</div>
<div>4%</div>
<div>5%</div>
<div>6%</div>
<div>7%</div>
<div>8%</div>
<div>9%</div>
<div>10%</div>
<div>11%</div>
<div>12%</div>
<div>13%</div>
<div>14%</div>
<div>15%</div>
<div>16%</div>
<div>17%</div>
<div>18%</div>
<div>19%</div>
<div>20%</div>
<div>21%</div>
<div>22%</div>
<div>23%</div>
<div>24%</div>
<div>25%</div>
<div>26%</div>
<div>27%</div>
<div>28%</div>
<div>29%</div>
<div>30%</div>
<div>31%</div>
<div>32%</div>
<div>33%</div>
<div>34%</div>
<div>35%</div>
<div>36%</div>
<div>37%</div>
<div>38%</div>
<div>39%</div>
<div>40%</div>
<div>41%</div>
<div>42%</div>
<div>43%</div>
<div>44%</div>
<div>45%</div>
<div>46%</div>
<div>47%</div>
<div>48%</div>
<div>49%</div>
<div>50%</div>
<div>51%</div>
<div>52%</div>
<div>53%</div>
<div>54%</div>
<div>55%</div>
<div>56%</div>
<div>57%</div>
<div>58%</div>
<div>59%</div>
<div>60%</div>
<div>61%</div>
<div>62%</div>
<div>63%</div>
<div>64%</div>
<div>65%</div>
<div>66%</div>
<div>67%</div>
<div>68%</div>
<div>69%</div>
<div>70%</div>
<div>71%</div>
<div>72%</div>
<div>73%</div>
<div>74%</div>
<div>75%</div>
<div>76%</div>
<div>77%</div>
<div>78%</div>
<div>79%</div>
<div>80%</div>
<div>81%</div>
<div>82%</div>
<div>83%</div>
<div>84%</div>
<div>85%</div>
<div>86%</div>
<div>87%</div>
<div>88%</div>
<div>89%</div>
<div>90%</div>
<div>91%</div>
<div>92%</div>
<div>93%</div>
<div>94%</div>
<div>95%</div>
<div>96%</div>
<div>97%</div>
<div>98%</div>
<div>99%</div>
<div>100%</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Try this:
<head>
<style>
.forSafari::-webkit-scrollbar { width: 0 !important }
</style>
</head>
<body style="overflow-y: hidden" class="forSafari">
...
</body>
just use "position: relative" or fixed it will resolve the problem

My div background image is not displaying in IE8

I need the background image to stay centered because I am going to display charts in fixed positions and want the van (in the image) always to be visible. It's working fine in Chrome etc but nothing appearing in IE8.
http://clients.online95.com/RzMaOxkMOC/rep_mktsh.php
Thank you for any assistance you can provide.
#aa_breakdown_bg {
background: url(/RzMaOxkMOC/images/aa_breakdown_bg.jpg) center top no-repeat fixed;
overflow: hidden;
height: 100%;
}
<html lang="en">
<head>
<title>UK Breakdown Market Tracker</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<div id="aa_breakdown_bg"></div>
</body>
</html>
My guess would be that while your div is 100% height, that's 100% of zero. Try stretching both the body and html elements to 100%, too, and see if that does the trick.
body, html {
height: 100%;
}
Also, as Adrift mentions, you'll be a lot better off adding an appropriate DOCTYPE to your HTML, otherwise Internet Explorer will probably run in "quirks mode" and really confuse you.

Position one element based on the position of another element using only CSS

I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo

IE7 relative/absolute positioning bug with dynamically modified page content

I was wondering if there's anyone having an idea how to tackle with the following problem in IE7:
<!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>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected.
I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( )
I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this).
Please help!
This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.
The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":
Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":
As of IE7, overflow became a layout-trigger.
This solution doesn't necessarily have anything to do with dynamic content, but it worked for me (at least made the page borked to a manageable degree): specify dimensions.
I only noticed IE7 thought a div didn't have a width when using the crappy 'Select element by click' tool (ctrl+B) in IE tools.
I have created my function to trigger redraw. Maybe it is not a right solution, but it works.
// Script to fix js positon bug on IE7
// Use that function, recomended delay: 700
function ie7fixElementDelayed(elements, delay) {
window.setTimeout(
function () {
if(navigator.appVersion.indexOf("MSIE 7.") != -1) {
ie7fixElement(elements);
}
},
delay
);
}
function ie7fixElement(elements) {
elements.each(function(i) {
var element = $(this);
var orginalDisplayValue = element.css("display");
element.css("display", "none");
element.css("display", orginalDisplayValue);
});
}
Sample usage:
ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);

Resources