I am trying to make a video chat container which contains video of the local user as well as a remote user. I managed to make it draggable using react-draggable but it takes unnecessary space in the DOM which is not required because it is a draggable element.
<Draggable nodeRef={this.draggableRef}>
<div className={styles.remote} ref={this.draggableRef}>
<video className={styles.remoteVideo} ref={this.remoteRef}></video>
<div className={styles.local}>
<video className={styles.localVideo} ref={this.localRef}></video>
</div>
</div>
</Draggable>
CSS:
.remote {
position: relative;
width: 300px;
z-index: 1;
}
.local {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
}
.remoteVideo, .localVideo {
width: 100%;
}
It is expected that the container does not occupy DOM space.
What should be the recommended CSS properties to be used to achieve this?
The issue was solved. Refer to the following code if anybody is having the same issue:
.outer {
position:absolute;
width:17%;
height:auto;
z-index: 1;
}
.remote {
position: absolute;
width: 100%;
height:auto;
}
.local {
position: absolute;
bottom: 0;
right: 0;
width: 35%;
height:auto;
}
Related
I have a video and a canvas inside a div and I want to overlay the canvas over the video. I tried this:
.container {
margin: 0 auto;
position: relative;
}
.video {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.canvas {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
JSFiddle here
But for some reason the canvas does not cover the whole video, it is shorter. How do I fix that?
Canvas must have absolute width and height. When the video load you can assign the right width and height.
Here: jsfiddle:
https://jsfiddle.net/7sk5k4gp/13/
PS: I put a red filter for better understanding.
Code above:
<style>
.canvas {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background-color:rgba(255,0,0,0.5);
}
</style>
<div class="container">
<video class="video" id="vd1" controls autoPlay src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_sma ll.ogv" onplay="resize_canvas(this)"></video>
<canvas class="canvas" id="cv1"></canvas>
</div>
<script>
function resize_canvas(element)
{
var w = element.offsetWidth;
var h = element.offsetHeight;
var cv = document.getElementById("cv1");
cv.width = w;
cv.height =h;
}
</script>
Adjusting the canvas's height to 100% makes sure the entire video is covered. The auto tag just adjusts the size of an object relative to the amount of data needed to be shown. E.g. for a <\p> tag with 'width:auto' the more text, the wider the tag etc.
.container {
margin: 0 auto;
position: relative;
}
.video {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.canvas {
width: 100%;
height: 100%;
position: fixed;
background-color:black;
top: 0;
left: 0;
z-index: 10;
}
How in CSS can I make the section fluid when absolutely positioned?
<div class="layout">
<aside>leftnav</aside>
<section>content fluid here</content>
</div>
aside {
width: 200px;
position: absolute;
left: 0;
top: 0;
}
section {
position: absolute;
top: 0;
left: 200px;
//fluid width to fill window
}
Edit: With absolute positionning, just add:
section {
position: absolute;
top: 0;
left: 200px;
right: 0px; // this line
}
End of edit.
Use float on the aside tag and add a margin-left to the section:
aside {
width: 200px;
float: left;
}
section {
margin-left: 200px;
}
Made an image for better understanding of the problem.
Need code for .bgimage and .content div
Is this even possible for crossbrowser css (IE7+ and other major browsers) without any scripting?
It was actually a bit longer than expected, but I got your picture in real life. Don't ask again any questions here without doing more research first and writing some actual code.
Here is a demo
The code
HTML:
<body>
<div id = "header">
</div>
<div id = "bgimage">
</div>
<div id = "content">
</div>
<span class = "clear"></span>
<div id = "footer">
</div>
</body>
CSS:
*
{
margin: 0;
padding: 0;
}
body
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header
{
width: 100%;
height: 200px;
background-color: purple;
}
#bgimage
{
position: absolute;
top: 200px;
left: 0px;
right: 50%;
height: 600px;
background-color: green;
}
#content
{
position: relative;
width: 700px;
height: 600px;
float: right;
z-index: 2;
background-color: blue;
}
.clear
{
clear: both;
}
#footer
{
position: relative;
top: 600px;
width: 100%;
height: 200px;
background-color: red;
}
Note: I haven't optimized the CSS, there's some work that could be done there.
The code is also here
Explanation
Elements that I've used in the code (you might want to google them):
CSS Reset
CSS clear
absolute positioning CSS
relative positioning CSS
I'm trying to figure out how to code my HTML & CSS to have the 3 screenshots images align up like in the screenshot below.
The idea is when the user resizes the window smaller the images on the left and right should move in towards the center, or tighter behind the main image and the main image always stays centered.
My Dev Link:
http://leongaban.com/portfolio/athenasweb/
My CodePen
http://codepen.io/leongaban/pen/AwJFt
And tips or direction would be super appreciated! :D
HTML
<div class="pattern">
<div class="athena_thumbs">
<div class="first">
<img src="../../images/athena1.jpg"/>
</div>
<div class="second">
<img src="../../images/athena2.jpg"/>
</div>
<div class="third">
<img src="../../images/athena3.jpg"/>
</div>
</div>
</div>
CSS
div.inner .pattern {
position: absolute;
width: 100%;
height: 100%;
background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
background-repeat: repeat;
z-index:2;
}
.athena_thumbs {
position: absolute;
max-width: 1000px;
margin: 250px auto 0;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
float: left;
left: 25%;
right: 25%;
z-index: 3;
}
.athena_thumbs .second {
position: relative;
float: left;
left: 10%;
right: 5%;
z-index: 2;
}
.athena_thumbs .third {
position: relative;
float: left;
right: 10%;
left: 5%;
z-index: 1;
}
Running late for a meeting.
But, if you take a look at
Code Pen: http://codepen.io/anon/pen/bazEr
.athena_thumbs {
position: absolute;
width: 90%;
margin-left: 5%;
text-align: center;
overflow: hidden;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
z-index: 3;
}
.athena_thumbs .second {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
.athena_thumbs .third {
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
}
I think this will get you going in the correct direction.
There is nothing in the way of cross-browser checking.
Just the basic according effect more or less in place.
Hope this helps.
I hope this helps you out. I've put together a small demonstration of how I'd go about getting the effect you're after, which you can find here.
I would set the outside thumbnails to position: absolute;, sticking them to either side of the parent container, and ensuring you give them a top position to keep them in line. Set the centered thumbnail to position: relative, and center it with automatic margins as you normally would. z-indexing keeps the outside thumbs behind the centered one.
I'm working on a prototype of a website here:
http://www.paulgrantdesign.com/valcomp/index.php
I have a div in the middle that is set to stick in the middle. It's got a given height, so in the css I did
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}
It sits in the middle, as required. But when the window gets too small, I don't want it to cover what's above it. Can I set it so that there's always a minimum amount of distance between the top of the window and the top of this div?
May be you can use media query for this like this:
#media only screen
and (min-width : 1000px) {
#middle {
color:red;
}
}
You can read these articles
http://css-tricks.com/6731-css-media-queries/ ,
http://css-tricks.com/6206-resolution-specific-stylesheets/
put position:relative on the body.that s a first step. I m trying..hold on..
and bottom--position:absolute. It works! yeah!
I fixed your problem by changing your html like this:
<div id="container">
<div id="top">
<div id="topcontent">
<p id="mobile">Mobile data collection</p>
<p id="slogan">Collect. Send. That's it.</p>
</div>
</div>
<div id="middle"></div>
</div>
Then changing your css like this:
#container{
width: 100%;
position: absolute;
min-height: 350px;
bottom: 20%;
top: 0;
}
#top {
width: 825px;
min-height: 250px;
display: block;
position: absolute;
left: 50%;
height: 50%;
margin-left: -412px;
overflow: auto;
bottom: 250px;
}
#topcontent {
width: 100%;
position: absolute;
bottom: 0;
}
...
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
bottom: 0;
margin-top: -112px;
z-index: 100;
}
It might need some tweaking to get it exactly how you want it; especially with the #bottom div
You need to add the attribute z-index to the elements #top and #bottom, and let them less than the z-index of #middle.