resize - Angularjs resizing overlayed on div's on img-responsive -
http://plnkr.co/edit/mqb85ejjxzhol5vkv4ua?p=preview
i have bootstrap img-responsive element overlayed div elements. how can resize these divs binding width , height attributes. not want use jquery, correct angular way.
i have tried directive
app.directive('onsizechanged', ['$window', function ($window) { return { restrict: 'a', scope: { onsizechanged: '&' }, link: function (scope, $element, attr) { var element = $element[0]; cacheelementsize(scope, element); $window.addeventlistener('resize', onwindowresize); function cacheelementsize(scope, element) { scope.cachedelementwidth = element.offsetwidth; scope.cachedelementheight = element.offsetheight; } function onwindowresize() { var issizechanged = scope.cachedelementwidth != element.offsetwidth || scope.cachedelementheight != element.offsetheight; if (issizechanged) { var expression = scope.onsizechanged(); expression(); } }; } } }]);
but somehow not able update width of elements
i don't want disappoint after tried work out directive, best way css:
updated plunker
simply change overlays use percentages , automatically stay in right proportion , position:
#overlay1{ position: absolute; background-color: blue; top: 5%; left: 5%; right: 65%; bottom: 65%; } #overlay2{ position: absolute; background-color: red; top: 35%; left: 35%; right: 35%; bottom: 35%; } #overlay3{ position: absolute; background-color: green; top: 65%; left: 65%; right: 5%; bottom: 5%; }
Comments
Post a Comment