CODEWITHSUNDEEP
javascripthtmlcss
William Finken
William Finken

Reputation: 13

Auto resize "div" when another is added

I'm making a video portal using WebRTC and need to have the child divs resize when a new member has joined a chat. If 1 person is in a chat I need the their div to be 100% height and width. If a second joins I need both divs to be 50%; a third 33% and so on. How can I accomplish this? The div element are being created within js.

Edit: Added current code.

videoportal.htm

<html>
    <head>
        <title>Video Portal</title>
        <script src="js/simplewebrtc.bundle.js"></script> 
        <script src="js/videoportal.js"></script>
        <style type="Text/CSS">
            @import url('css/style.css');
        </style>
    </head>
    <body>
        <div class="backbutton"><a href="javascript:window.history.back();" style="border:0px;"><img src="images/back.png" class="backimg"></a></div>
        <div id="remotes">
        </div>
        <div class="mainlocal">
            <video id="localVideo"></video>
        </div>
        <div class="logo"><a href="https://video.landrethlans.com" style="border:0px;"><img class="logoimg" src="images/logo.png"></a></div>
        <div class="controlbar">
            <a href="javascript:togglemute();" style="border:0px;"><img class="muteimg" id="muteimg" src="images/mute.png"></a>
        </div>
    </body>
</html>

style.css

.mainremote {
    position: absolute;
    width: 100%;
    height: 100%;
    display:table   }

.backbutton {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 25px;
    left: 10px; }

.backimg {
    position: relative;
    width: 40px;
    height: 40px; }

.mainlocal {
    position: absolute;
    height:19%;
    width: 12%;
    bottom: 10px;
    right: 10px;
    z-index:100; }

.mainlocal video {
    position: relative;
    width: 100%;
    height: 100%; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px;
    border-radius: 15px; 
    overflow: hidden; }

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: auto; }

.videoContainer video {
    flex: 1; 
    position: relative;
    width: 100%;
    height: 100%; }

.backbutton {
    padding-left: 10px; }

.logo {
    position: absolute;
    bottom: 10px;
    left: 20px; 
    height:50px;
    width:100px;}

.logoimg {
    position: relative;
    height: 50px;
    width: 100px;}

.controlbar {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 0);
    height:30px;
    width:30px;
}

.muteimg {
    height: 30px;
    width: 30px; }

body {
    background-color: #0f0f0f;
}

videoportal.js

var room = location.search && location.search.split('?')[1];
var tggle;


function setRoom(name) {
    document.title = "Video room: " + room;
}

if (room) {
    setRoom(room);
} else {
    window.location = "url";
}

var webrtc = new SimpleWebRTC({
    localVideoEl: 'localVideo',
    remoteVideosEl: '', // empty string
    autoRequestMedia: true,
    url: 'URL'
});

// we have to wait until it's ready
webrtc.on('readyToCall', function () {
    // you can name it anything
    webrtc.joinRoom(room);
});

webrtc.on('videoAdded', function (video, peer) {
    console.log('video added', peer);
    var remotes = document.getElementById('remotes');
    if (remotes) {

        // create video container
        var container = document.createElement('div');
        container.className = 'videoContainer';
        container.id = 'container_' + webrtc.getDomId(peer);
        video.className = 'remvideo';
        container.appendChild(video);

        // suppress contextmenu
        video.oncontextmenu = function () { return false; };

        remotes.appendChild(container);
    }   
});

webrtc.on('videoRemoved', function (video, peer) {
    console.log('video removed ', peer);
    var remotes = document.getElementById('remotes');
    var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
    if (remotes && el) {
        remotes.removeChild(el);
    }
});

// local volume has changed
webrtc.on('volumeChange', function (volume, treshold) {
    showVolume(document.getElementById('localVolume'), volume);
});

// remote volume has changed
webrtc.on('remoteVolumeChange', function (peer, volume) {
    showVolume(document.getElementById('volume_' + peer.id), volume);
});

function togglemute(){
    if(tggle=='on'){
        document.getElementById('muteimg').src="images/mute.png";
        tggle='off';
        webrtc.unmute();
    } else {
        document.getElementById('muteimg').src="images/unmute.png";
        tggle='on';
        webrtc.mute();
    }
}

Upvotes: 0

Views: 1183

Answers (3)

Zorak
Zorak

Reputation: 709

Here you go sample with jQuery. Works well, but could be improved, like setting the height of old users before adding new one and that new one append with preset height instead of appending without height care and than loop.

function addUser(){
var count = $(".container .user").length; 
//get num of users

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); 
//get rand color - for demonstration purposes of this demo

var height = 100/(count+1);
/*calculate height of each user after adding the new one (the new one is the +1)*/
/*also you may want to limit this, so the user divs will not be extra small*/
if(height<=10){height=10; $(".container").css("overflow-y","scroll")}

$(".container").append("<div class='user' style='background:"+newColor+"'></div>");
/*append new div*/

$(".container .user").css("height",height+"%"
);
/*loop through users div and set correct height*/
}
.container{
width:150px;
height:200px;
border:1px solid black;
position:absolute;
top:0px;
left:120px;


}
.user{width:100%; position:relative; margin:0; float:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="addUser();">Add user</button>
<div class="container"></div>

Upvotes: 0

Alexander Bell
Alexander Bell

Reputation: 7918

Use Table element and set its id="myTable", then apply the Javascript snippet to add new row dynamically like shown below;

var table = document.getElementById("myTable");

// Create an empty <tr> element
var row = table.insertRow(0);

// Insert new cells (<td> elements)
var cell1 = row.insertCell(0);

// set context
cell1.innerHTML = "YOUR CONTENT";

Hope this may help.

Upvotes: 0

Wanjia
Wanjia

Reputation: 817

I think the easiest way would be to work with a horizontal list and edit this list according to what you want to place in it.

As you can see from the following code adding or removing li elements those elements will always be even spaced out.

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    text-align: center;
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
    background: #fafafa;
    width: 100%;
}
<ul>
    <li>Member 1</li>
    <li>Member 2</li>
    <li>Member 3</li>
</ul>

Upvotes: 1

Related Questions