We Keep Coding

Resize divs with common edge

Is that possible to resize two divs simultaneously using their common edge using html and css only? Is there some Angular2 way to do it?
I tried play with resize:vertical style but without luck:
enter link description here
I was hoping that outer div could limit resizing but it seems I was wrong.
PS I don't want to use jquery or work with elements directly from code because I work with ng2 and it is not a good approach to use such hacks, but I didn't find such functionality in ng2

Try ng2-split-pane. Not sure if this is what you need but there is a quick demo on the page that should clear that up.
It works by inserting a dragging anchor between two divs with the option of orienting them vertically or horizontally.
https://github.com/wannabegeek/ng2-split-pane

Have you tried
display: flex
display: flex-box

draggable html objects with fixed positions

I'm not actually sure what to tile this but I'm trying to replicate draggable icons like the iOS home screen. I am not using JQuery. I could figure out how to make things draggable but I don't know how I would implement set positions that the icons would go to. My current code is <div class="icon"><a class="app" href="apps/settings/index.html"><img style="border-radius:14px;" src="img/settings.png"><p class="label">Settings</p></a></div>

I guess you're looking for drag-n-drop with "snap to grid" feature.
It is supported by jQuery UI, but since you're not using it, Gridster may help.
Another good library.
Pep library - look at the "Snap to Grid" demo.

Does javascript or jQuery have any technique to create a holding object that end user can shrink or expand on the fly?

see this gwt Panel
http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwSplitLayoutPanel
The user can shrink or expand to make the space holding the text smaller or bigger depending on their need.
My question is:
Does javascript or jQuery have any technique to create a holding object that end user can shrink or expand like that?

There's no easy native method to do this in javascript or jQuery, but jQuery UI has a re-sizable component.
https://jqueryui.com/resizable/
This does't replicate the behaviour of the google web toolkit example. This is quite complicated behavior. If you open the DOM inspector in chrome, you can see each section has an inline style with the width height and position. These are then recalculated and updated when you drag the bars.

Flip animation for multiple DIV's

I have a strange problem it seems to be a simple one but I am unable to find the solution.
I have 3 divs that are generated by the drupal->views and every div contains a button on the bottom and I need to flip the div on button click. Basically, if div #1 is currently displayed and button is pressed the second div is shown with flip effect and same with the third div.
Here is the arrangement:
<div class="views-row views-row-1 views-row-odd views-row-first">
<div id="careers_excerpt_88" class="careers_excerpt">
<div id="careers_description_88" class="careers_description">
<div id="careers_form_88" class="careers_form">
</div>
And the content is within the above three divs.
Now the problem is that I can show and hide these divs but the flip is not working. I have tried many JavaScript plug-ins, some work for two divs.
I just need help on this issue (or perhaps suggest me some good plug-ins).

Check out this tutorial.
No need of a JS lib.
Simply use CSS, and don't forget to properly set these properties on the right elements: transform-style, transition, perspective, backface-visibility and transform.
Beware of the vendor prefixes!
And also of Internet Explorer. [You can find some hacks for it.][3]

I do not know what exactly is your functionality/Intention of the flip divs you are looking for, but here is a plugin which can be moderated to achieve what you want.
Here is the: Demo and Plugin
And Github Link
Hope this helps.

CSS / Jquery Effect - What is this?

on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks

You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.

This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.

it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover