CODEWITHSUNDEEP
javascriptjqueryhtmlresize
LukasFT
LukasFT

Reputation: 164

Add and resize DIV's on the same space

I want to make a bar where I can add multiple child DIVs (Like this: https://i.sstatic.net/tdWsq.jpg). I am using jQuery, jQuery UI and Bootstrap. Plus a few plugins. The div (or span) system could look something like this:

<div class="parent">
    <div class="child" id="1"></div>
    <div class="child" id="2"></div>
    <div class="child" id="3"></div>
</div>

And the "Add div" could look like this:

$('parent').append('<div class="child" id="4"></div>');

And I don't know how the rest jQuery / javascript could look. One of the biggest problems I have, that other threats here don't solve is that I want to have this working on mobile too. Maybe using Hammer.js

I have been looking for this quite some time, but if this already have been posted, I'm sorry

UPDATE: If I didn't said it clearly enough, you have to drag the divs. Like you can with this plugin http://dev.iceburg.net/jquery/jqDnR/, but the total width shall stay the same (the DIV's, that are not being resized have to get smaller)

Example: You have one bar on 600px. There are 3 child DIV's, where each is 200px. Then you resize one of them, so it is 300px. Then the other ones is 150px each

Upvotes: 2

Views: 196

Answers (1)

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Something like this?

HTML:

<input type="button" id="addChild" value="Add Child"/>
<div id="parent" class="parentClass">

</div>

jQuery:

var idGen = 0;
$("#addChild").on("click",function(){
    $("#parent").append("<div id='" + idGen++ + "' class='childClass'>Child Div</div>");
});

CSS:

.childClass
{
    background-color:#b0c4de;
    float:left;
    border:1px solid;
    padding:4px;
}
.parentClass
{
    background-color:green;
    width:500px;
}

JSFiddle: http://jsfiddle.net/Rrdyw/

I haven't tested but I am sure this would work on mobile as well.

Upvotes: 1

Related Questions