I've been working on a webgl game and have full-screen toggle working for chrome and firefox. And I have been using dat.gui for a control input to this game. Which is based on jQuery-ui. In fact I can't get any child element to appear after fullscreen event has been fired. The behaviour is all the children get cleared,
:-webkit-full-screen {
top:0px;
position:absolute;
width: 100% !important;
background-color:red;
}
:-moz-full-screen body {
width: 100% !important;
background-color:red;
}
:full-screen body{
width: 100% !important;
background-color:red;
}
#navi {
position:relative;
right:10px;
top:10px;
}
And these elements are used, where the canvas is dynamically created and appended to thegameCanvasDiv. While the dat.gui is appended to 'navi'.
<div id="gameCanvasDiv"></div>
<div id ="vSlider0"></div>
<div id ="vSlider1"></div>
<div id ="hSlider0"></div>
<span id="navi" ></span>
Can I use the css to control the position a jQuery ui button after fullscreen?
I'm going round in circles here, so any suggests or insight would be very welcome.
You must make sure the elements you want to be visible is children of the gameCanvasDiv element (assuming that's the element you request full-screen mode at).
This means you need to put those sliders inside of that one. You can control their position using CSS as well as using JavaScript to set their position through their properties (ie. set a class when in full-screen, a different one when not - you'll get the idea).
By using z-index and absolute/fixed positions when full-screen can help you get them at top of the canvas element.
Be aware though that if you place elements on top of the canvas the performance of the canvas element is reduced.
Related
Why and when did Chromium change the behavior position relative?
Here is an example of the current behaviour. I would expect the offset of #box1 to also shift #box2 downwards, as it used to do so? Instead, it's now as if #box1 is positioned absolutely (in relation to its current position) in the sense that #box2 and the rest of the document completely ignore the offset of #box1.
div {
position: relative;
padding: 20px;
opacity: 0.75;
}
#box1 {
top: 20px;
background: green;
}
#box2 {
background: plum;
}
<div id='box1'></div>
<div id='box2'></div>
This has made it so incredibly difficult to achieve something that should be so simple. What I am trying to do is place a button dead smack in the center of the page. When the user clicks the button, additional boxes are added to the list, positioned relatively.
The list container's height probably should be the same height as the page, so that everything should move upwards towards the top of the page when I scroll through the list.
This use to be easy to do by giving the button a relative position, and then placing it halfway down the page. I remember position relative you used to reflow other elements, but not anymore? Now I am completely dumbfounded.
I guess I could use a pseudo element to offset the first child now that I think of it.
Anyways, two questions:
When and why did Chromium change the behavior position relative? (Or am I tripping and it was never changed?)
How can I go about achieving something like this when the dimensions of the document are unknown since the page is responsive?
I have a grid with an image in a column of size small-12 and I want to add next to it on the right side an element, for example a div. The column must be of size small-12 so I can't set it to small-11 and add the div next to it with a size of small-1. How can I do this? Is this related to CSS pseudo elements or classes maybe?
I tried to place it with CSS and position: absolute; but it is not where I want it - like there is a minimum margin to top and side for elements so top: 0vh; won't work.
See this CodePen snippet: http://codepen.io/anon/pen/akwjgg
I'm not sure if using absolute position is good and also this breaks the responsiveness. Also the mail icon should be at top without margin-top as like as the small-12 column. So how to do it correctly?
Please reply with a way without using SASS because I'm using an online CDN where I can't control the variables.
You can set the row's style (Or in your example's case, the div with the ID '#big_column' to have position:relative; instead of position:initial; - This will allow elements within it to utilize its location and boxmodel properties for determining their own position if they're set to position:absolute;
see updated codepen:
http://codepen.io/anon/pen/JKJabd?editors=1100
relevant CSS:
#big_column {
background-color: #ccc;
position:relative; /* Position:absolute... */
height:3em; /* ... elements inside will use the...*/
padding:1em; /* ... lowest ascendant element set to Position:relative; */
}
#mail {
display:inline-block;
right:1%;
bottom:-0.25em;
position:absolute; /* Uses #big_column's box-model properties (like dimensions, location, etc. to define the appropriate/relevant properties of its own */
}
I have one DIV, which changes height depending on data which a user enters into it. Once they are finished, they click a button and a second DIV appears below it with all the data displayed in a table.
The second DIV is always on the page, but it's opacity is set to 0.
As the first DIV can be anywhere from 100px to 1000px in height, how can I get the second DIV to always display directly below it? Ive been playing around with margins and paddings but I just can't get the second DIV to appear dynamically in the right spot.
Preferably using CSS if thats an option.
Thanks.
You have to make sure that the CSS position property is set to relative in your divs. Something like:
HTML:
<div class="user_input_data"></div>
<div class="results hidden"></div>
CSS:
div.user_input_data
{
position: relative;
}
div.results
{
position: relative;
}
div.hidden
{
display: none;
}
div.block
{
display: block;
}
Then you'd have to remove hidden class and add block class to show your results.
if div is a block (is default) it will show in bottom of first div
<div class="firstDiv"></div>
<div class="secondDiv"></div>
if you want second div overlap first div and move by scrolling you should use CSS position property
.secondDiv{
position:fixed;
right:0;
bottom:0;
}
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
If you have a background image in a div with a (drawn) button in the middle and some other drawings around it. How do you make the button clickable but not the whole div because I don't want the user to click the drawings around it, if that makes sense!? I am I wasting my time playing with padding and margins? Should I just create two divs? My boss says he has managed to make it using one div before.
Cheers
Try this code:
#container { width:200px; height:100px; position:relative }
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; }
<div id="container">
<a id="clicker" href="#link"></a>
</div>
Obviously change all dimensions to match the area you want to make clickable.
In short — you don't.
Backgrounds are backgrounds. They aren't content. They aren't interactive.
It is possible to hack around that, but you shouldn't. If you have some content for the user to interact with, then present it as content. Use an <img>.
Put an element which is transparent and relatively positioned inside the div. Position it at the top of the button and make it the same size as the button. Make the element click able.
You could make the div "position: relative" and then place an <a> tag on the drawing using
display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;
That would be the cleanest way.