I want to bind the content of a span element (that is the current position of the element).
Problem: when I change the element position, angular doesn't update the value of the ng-bind attribute.
This is my html:
!doctype html>
<html lang="en" ng-app="exempleApp">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery2.1.4.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="exempleApp.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<script>
$(function() {
$( ".movable" ).draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var thisId = $(this).attr('id');
$('#' + thisId + ' .posX').text(xPos);
$('#' + thisId + ' .posY').text(yPos);
}
}
);
});
</script>
</head>
<body ng-controller="imgController as ctrl">
<div id="1" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[0].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
<div id="2" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[1].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[1].posY"></span>
</div>
<div >
<span ng-bind="ctrl.presentation.images[0].posX"></span>
<span ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
</body>
</html>
And this is my exempleApp.js:
(function() {
var app = angular.module("exempleApp", []);
app.controller('imgController', function(){
this.presentation = pres;
});
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
})();
Thanks for the help
https://docs.angularjs.org/api/ng/directive/ngBind
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
Try this:
<span class="posX">{{ctrl.presentation.images[1].posX}}</span>
Full explanations Databinding in AngularJS
I may have misunderstood your question. It's my understanding that ng- bind binds the value of the html to the value of the object. That is, it's going to read the value from the object, not set it. So when the object changes, the html gets updated. Not the other way around.
#Veo
<p>drag.html</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dragger</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/drag.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<body ng-app="exempleApp">
<div ng-controller="imgController">
<div id="1" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[0].posX}}</span>
<span class="posY">{{presentation.images[0].posY}}</span>
</div>
<div id="2" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[1].posX}}</span>
<span class="posY">{{presentation.images[1].posY}}</span>
</div>
<div>
<span>#1 .movable = </span>
<span ng-bind="presentation.images[0].posX"></span>
<span ng-bind="presentation.images[0].posY"></span>
</div>
<div>
<span>#2 .movable = </span>
<span ng-bind="presentation.images[1].posX"></span>
<span ng-bind="presentation.images[1].posY"></span>
</div>
</div>
<script>
$(function() {
$( ".movable" ).draggable();
});
</script>
</body>
</html>
<p>drag.js</p>
var app = angular.module("exempleApp", []);
app.controller('imgController', function($scope){
$scope.presentation = pres;
});
app.directive('drag', function(){
return {
link: function(scope, element, attrs){
//initial position
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
//position after drag
element.on('drag', function(){
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
console.log(scope.presentation.images[attrs.id-1]);
scope.$apply();
})
}
}
})
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
<p>Note changes: - 1)created a drag directive.then apply it to div.movable.
2)initial position will give you position of draggable div on page load.
3)scope.$apply(); plays important role here without this values will not be apply changes. for more information about $apply visit $apply
<p>if you have any problems just ask me</p>
Related
I am a newbie to Javascript, I wanted to implement a for loop that would go through each div as selected by its class.
The simple idea is to reveal DIVs when I click on a button. But it has to be sequential: I click DIV1 appears, when I click again DIV2 appears and so on. Currently my code only changes the class of one DIV and not the rest. Here are my code samples:
$(document).ready(function(){
// jQuery methods go here...
var count = document.getElementById("page1").childElementCount;
for(var i = 0; i < count; i++){
var myClass = ".panel" + i;
$("button").click(function(){
$(myClass).addClass("showing animated fadeIn")
});
}
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
Please let me know what I am missing especially in the for loop or if I can do something else to be able to grab a DIV and add a class every time I click on the button.
Firstly, the HTML attribute class is made for multiple elements with the same style/behaviour. You should use id if it is to dissociate one panel for another.
You have to store a count variable to know which panel has to appear next.
And always try to do what you want in Javascript without jQuery if it is possible !
var i = 1;
function clickBtn() {
if (!document.getElementById("panel-" + i))
return;
document.getElementById("panel-" + i).classList.add("visible");
i++;
}
.panel {
width: 50px;
height: 50px;
display: none;
margin: 5px;
background-color: #bbb;
}
.panel.visible {
display: block;
}
<button onclick="clickBtn()">click me</button>
<div>
<div id="panel-1" class="panel"></div>
<div id="panel-2" class="panel"></div>
<div id="panel-3" class="panel"></div>
<div id="panel-4" class="panel"></div>
</div>
You could use counter like clickCount instead of for loop
$(document).ready(function(){
// jQuery methods go here...
var clickCount = 1;
$("button").click(function(){
var myClass = ".panel" + clickCount;
$(myClass).addClass("showing animated fadeIn")
clickCount++;
});
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
You've got this a little bit backwards; you're trying to attach an event handler to the button for each element. Instead, you should have one event handler for the button, which cycles through the elements.
You could set a variable to keep track of which element is currently highlit, but it's easier to just determine that based on the current state of the DOM:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.removeClass('showing') // clear it
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
There's a small cheat in the above -- if the current element is the last one, then it won't have a next() to highlight. That's why I waited to check for the case where there's nothing visible until after moving the highlight; that way it will work for both the first click, and for when you need the highlight to loop back around to the first element.
If you intended to have the elements reveal themselves in sequence and not hide earlier ones, just get rid of the .removeClass('showing') line:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
What you can do is count the amount of children that you have, and compare the amount of clicks through a given iterator you have to see what should be shown.
I added an extra functionality that hides the elements again once the max amount of divs has been shown.
Hope this helps.
$(document).ready(function() {
$('#page1').children().each(function () {
$(this).hide();
});
});
var panel="panel";
var pannelNum=0;
var count = $("#page1").children().length;
$(".one").on( "click", function() {
pannelNum=pannelNum+1;
if(pannelNum > count) {
$('#page1').children().each(function () {
$(this).hide();
});
pannelNum=0;
}
else {
clicked=panel+""+pannelNum;
$('.'+clicked).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
this is panel 1!
</div>
<div class="panel2">
this is panel 2!
</div>
<div class="panel3">
this is panel 3!
</div>
<div class="panel4">
this is panel 4!
</div>
</div><!-- page one -->
<div id="trial">
</div>
I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>
i want to have fading effect between 3 images with the help of slider in jquery.
fading is working fine but all the images are coming side by side instead of top of another.how can i achieve that?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider({
range: "min",
value: 10,
min: 0,
max: 20,
slide: function (event, ui) {
var r = (ui.value);
$("#img1").css({'opacity':1-(r/10)});
$("#img2").css({'opacity':function(){
if((r-10)<0)
return r/10;
else
return 1-((r-10)/10);
}
});
$("#img3").css({'opacity':(r/10)-1});
}
})
});
</script>
</head>
<body>
<div style="position:relative">
<img id = "img1" src = "img/face_1.png" style = "height:1024px; width:768px;z-index:1">
<img id = "img2" src = "img/face_2.1.png" style = "height:1024px; width:768px;z-index:2">
<img id = "img3" src = "img/face_3.jpg" style = "height:1024px; width:768px;z-index:3">
<div id="slider" style = "height:10px; width:200px" ></div>
</div>
</body>
</html>
Here's an easier solution
JQuery
jQuery(document).ready(function(){
$(function(){
$('.fadein div:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(1000)
.next('div').fadeIn(1000)
.end().appendTo('.fadein');},
2000);
});
});
HTML
<div class="fadein">
<div id="rotatingImage1"></div>
<div id="rotatingImage2"></div>
<div id="rotatingImage3"></div>
</div>
CSS
#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}
I am using this javascript from this link.
I have created a new div element in javascript using the following code
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
value= VALUE_FROM_DB.split("||");
for (k=0;k<value.length;k++)
{
if (value[0] == paramName1)
{
return unescape(value[k]);
console.log("no of swipe views ");
}
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = document.createElement('div');
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('class','swiper-slide');
newdiv.style.width = "25%";
newdiv.style.height = "30%";
superdiv.appendChild(newdiv);
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}
html code
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
css code:
.clinical
{
font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
width:auto; height:30%; display:block; overflow:hidden;float:left;
}
the output comes like this
but i would like to get it like this
on swiping i should get it like this
Please suggest me ways to solve this problem..
EDIT: I have given the following code after the style and before javascript.
</style>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
<script type="text/javascript" charset="utf-8">
EDIT 2:
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
document.querySelector('.swiper-container');
i added this document.querySelector('.swiper-container'); as well as
function onDeviceReady()
{ var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
});
The only improvement is that only the 1st slide is there, it's not swiping.
There is no Jquery in your code but only native javascript.
I recommend you to give a look at this plugin.http://plugins.jquery.com/jcarousel/
This is a jquery Carousel. I already used it and it's simple, well documented and flexible.
Click "view homepage" on the top right corner and check demos in the developper's page.
EDIT here a sample code using JCarousel to help you :
<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
<html>
<body>
<div id="swipe_body">
<div class="swiper-container swiper-threshold" id="mycarousel">
<div class="swiper-wrapper" id="swiper-wrapper">
<div id="container1" class="container"><span><img...</span></div>';
<div id="container2" class="container"><span><img...</span></div>';
<div id="container3" class="container"><span><img...</span></div>';
... ...
</div>
</div>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// optional configuration goes here
});
});
</script>
As you can see, only 2 line of jquery to get this.
You can download jquery.jcarousel.min.js at the url given above. Just create your several conteners with the data from the server. Remember, avoid giving same id to differents elements
for (k=0;k<value.length;k++){
...
var cnt1 = '<div id="container" cla
...
They will all have the same id.
I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.