A-frame: scene with intro and a "start" button - aframe

I'm new to A-frame (and a novice coder, indeed).
I'm trying to set up an intro to my scene, with a minimum UI (a "start experience" button).
This particular question have been asked before Here, but I'm unfamiliar to Fiddle.
I've been using Glitch as a code playground and I can't figure out how to run theses solutions outside Fiddle.
Can anyone help me? Thank you.

The easiest way to hide the a-frame canvas is to place a <div> element in front with some content - text, pictures, start button.
The div needs to be fixed, and remeber to set it's with and height to a maximum.
#loading {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 10000; /* overkill, but keeps the div in front */
}
As for the fiddle part, most of the time you can just copy
a) the HTML part to your <body> element.
b) the JS part to any included .js script .
c) the CSS part to any included .css stylesheet.
Check it out on this glitch.

Related

Fix the position of a clip-path or mask

I have this interface concept and I just don't know if it's possible. It's kinda hard to explain so I sketched it out.
I think I know how to accomplish some behaviour:
<header> position: fixed;
<nav> position: sticky (with a polyfill)
<section class="content box"> --- no idea really
I was hoping there would be some kind of way to add a clip-path to the content box that I could position: fixed. So that when the user scrolls the content box would peep trhough the area which was defined by the clip-path.
Looked into quite some options and thought I'd found a solution in webkit-mask-attachment but that property was nuked.
Any help is welcome. I prefer a pure CSS solution which has to work responsively.
Cheers,
Bart!
PS. I have thought of a javascript solution where I monitor the scroll offset and change the class of <header> in which I set a height and overflow: hidden. But I really would prefer it if there was a CSS solution.
UPDATE 1
I'm on to something. Working in Firefox only since I'm using position: sticky and haven't bothered polyfilling it. It works when you scroll.... but if you scroll down and wait a couple of seconds somehow stuff gets repositioned or redrawn and the red header is shown fully again.
Any idea why this happens?
Try out this pen on Firefox: http://codepen.io/anon/pen/GJBxYw
Ah, found it! Strange behaviour. In order to hide the svg object I set the css properties for svg to:
svg { display: none; }
Now somehow when scrolling this doesn't matter. But when you scroll the css rule kicks in. So in order to hide the svg object I changed the rule to:
svg {
position: fixed;
z-index: -1;
top: 0;
height: 0;
width: 0;
}
And that seems to work. Don't know if there are better ways to go about hiding the svg object?
Try out this updated pen on Firefox: http://codepen.io/anon/pen/GJBxYw
Haven't done any serious FED since XHTML so I'm quite proud of myself, go easy on me :)

How to make a theme image clickable

I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure
<div id="mainContent"> testlink</div>
<div id="theme"><img src="abc.jpg" /></div>
I am placing my theme behind my header bar by position:absolute and z-index:-1
Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can't use image as background as I have to make image path configurable (through infopath) and can't hardcode it in css.
In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari
Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question
If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don't need z-index then.
A simple example can be found here: jsFiddle example.
The css code being :
#theme {
position: absolute;
top:0;
left:0;
}
#mainContent {
position: absolute;
top:0;
left: 0;
}
Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.

Kill Horizontal Scroll On Absolute Image with Body as Parent

I haven't asked too many CSS questions on here, so here it goes.
Let's say I have a page:
<body>
<div id="wrap">//page containment, etc.. goes here..</div>
<img class="custom-bg" src="example.jpg" />
</body>
Then I write some CSS for the image in particular:
#wrap {
z-index: 100;
}
img.custom-bg {
position: absolute;
top: 1000px;
left: 50%;
margin-left: -960px //the image is 1290px wide
z-index: 0;
}
If you can't tell by now, yes, I'm trying to create a background image using absolute positioning. Yes, I know, I can just set the image as a background to the body tag and use positioning to place it, but for the sake of this question, let's say that's not an option to me.
The issue at hand is the appearance of horizontal scroll bars. Google is full of examples with people turning off overflow and other things, but I'm curious if anyone has been able to find/create a definite approach to removing horizontal scroll bars when performing something like the above. An absolute image, that lives happily on it's own. Centered. And not "attached" to the window... Thus eliminating the need for the browser to let users know there's an image that's really big, and that they just have to see it by scrolling horizontally a little bit.
Any insight would be awesome. I included as little code as possible so that people who may search for this example and are new to web dev, may have an easy time understanding how to work through their problem regarding absolute positioning and horizontal scrolling.
I may have missed the point here, but why don't you just use position:fixed instead?
http://jsfiddle.net/shanethehat/7MetS/

CSS issue: Links on page becoming unclickable when other element is positioned "absolute"

This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:
<style>
#style {
position: absolute;
width:100%;
height:100%;
}
</style>
<div id="style"></div>
test
If you try this, you will see that the "test" link is unclickable (cross-browser).
Does anyone have an idea how I can solve this? Thanks!
<style>
#style {
background-color:#ccc;
position: absolute;
width:100%;
height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>
<div id="style"></div>
test
<style>
#style {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.test {
z-index: 99;
}
</style>
<div id="style"></div>
test
Will work too, along with campino2k's answer.
Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.
Click through a DIV to underlying elements
#Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).
#campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.
So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.
I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.
The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.
The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.
$('*').click(function (){
alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id'));
});
above will alert the element in the foreground. Now that you know the cause look at its style.

How to put an element on the top layer in the middle of the browser's window?

EDIT: I used Browser's window instead of page or screen so that if the browser is in "window" mode (and not in full screen) it will be centred anyway.
I need to write a countdown which will temporally opacize the page and write (possibly in full window size) in the middle of the browser's window "3" one second of pause "2" an other second "1" an other second and the app should start.
The problem is how to put that number there and in that way. So this is a CSS problem not JavaScript, except if there is a JS framework that does this thing easyly :P
To put it in a top layer this should be enough:
position: absolute;
z-index: 1;
supposing I do not have any other element in z >= 1.
How to do the rest part?
I think I'll have to create a full window size div with a semitransparent background (any hint on how to do it?) then write the huge number in it. It should obviously work with any resolution.
Across the whole screen -- I hope this is not possible. I don't want anything in my browser to be able to have that much control over other browser tabs let alone the rest of my screen.
Within a browser it certainly is possible... the insert hyperlink dialogue does it.
If you want all custom javascript, have a look at http://blog.madskristensen.dk/post/Custom-LightBox-JavaScript.aspx
Or you can use JQuery Thickbox
I'd try the lightbox / thickbox approaches mathieu recommended. If you want to try doing the CSS on your own... off the top of my head:
div#countdown{
background: #000;
color: #fff;
font-size: 30px;
height: 100%;
line-height: 100%; <!-- not sure if this line would work -->
opacity: .8;
width: 100%;
}

Resources