html and js rectangle resizing issue

Question

I am developing a photo collage just like this one [1]: http://www.fotor.com/features/collage.html but i am making it using javascript and html the issue right now i am facing is that i want to resize the rectangle dynamically. Dynamically i mean if i resize any of the rectangle the others will get resize as well so can any one help or suggest me any solution ? or any lib of js ? or if anyone have done can share it ?

if (newSide != UNKNOWN) {
    if (ndiv.resize(newSide, deltaX, deltaY)); { //
        this.resizeNeighbours(newSide, ndiv, deltaX, deltaY);
        calls.push({
            d: ndiv,
            n: newSide,
            dx: deltaX,
            dy: deltaY
        });
    }
} //end if new side unknown 
} //end 
for
for (i = 0; i < calls.length; i++) {
    c = calls[i];
    this.autoSizeDivs(c.n, c.d, c.dx, c.dy, dep + 1);
}
} catch (e) {
    console.log(e);
}
return true;
}

if(newSide != UNKNOWN){ if(ndiv.resize(newSide, deltaX, deltaY));{ //this.resizeNeighbours(newSide, ndiv, deltaX, deltaY); calls.push({d: ndiv, n: newSide, dx: deltaX, dy: deltaY}); } }//end if new side unknown }//end for for(i=0; i < calls.length; i++){ c = calls[i]; this.autoSizeDivs(c.n, c.d, c.dx, c.dy, dep+1); } }catch(e){console.log(e);} return true; } — Waleed Ahmed, Aug 26 '13 at 14:11
@WaleedAhmed Please use the [edit link](http://stackoverflow.com/posts/18445936/edit) under your question, and add the code into the question body. — bfavaretto, Aug 26 '13 at 14:16

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Look at this fiddle: http://jsfiddle.net/f8DY8/28/ and take a look at this post: Expand a div to take the remaining width

<style>
.rec{
    border:1px solid #249fea;
    margin:3px;
}
.container
{
    width:300px;
    height:300px;
    border:1px solid #ccc;
}
</style>


<button id="changeWidthBtn">Change Width</button><br/>

<div class="container">
    <div style="float:left;width:100px;height:200px;" class="rec" id="one">one</div>
    <div style="overflow:hidden;height:50px;" class="rec">two</div>
    <div class="rec" style="overflow:hidden;height:150px;">three</div>
</div>


<script>
$("#changeWidthBtn").click(function(){
    $("#one").width("200px");
});
</script>

edited May 23 '17 at 11:49

Community

1
1

answered Aug 26 '13 at 14:15

noamtcohen

4,432
2
20
14

Thanks for the post but if you open the link then you will see that the height and width of all rectangles are not same just like [link] http://www.fotor.com/features/collage.html – Waleed Ahmed Aug 26 '13 at 14:19
I think i understand you problem, you what to resize the collage but keep the same ration between the pics? – noamtcohen Aug 26 '13 at 14:22
not exactly ratio but parent remain the same and child get resize have you check the link ? – Waleed Ahmed Aug 26 '13 at 14:24
So you want to resize one photo and have all the other photos somehow fill the remaining space? – noamtcohen Aug 26 '13 at 14:35
yes i want this thing to be happen i will be very thank full if you can help me out – Waleed Ahmed Aug 26 '13 at 14:44
whats about height ? as i am trying to do it using the mouse – Waleed Ahmed Aug 26 '13 at 18:44

score 0 · Answer 2 · answered Aug 26 '13 at 14:15

0

You can give each row a CSS class then, with the help of jQuery, get all images in the row using a CSS selector. You then call your resize function on each selected DOM element.

answered Aug 26 '13 at 14:15

Ultimate Gobblement

1,851
16
23

Thanks for the post but if you open the link then you will see that the height and width of all rectangles are not same just like [link] fotor.com/features/collage.html – Waleed Ahmed Aug 26 '13 at 14:19

html and js rectangle resizing issue

2 Answers2