window | Tech Tips & Tricks

How To Get Rectangle Bounds Of Selected Text In Javascript

April 15, 2015 by blogmeister·0 Comments

User Tim Down from the Stack Overflow forum provided a very handy function to get the rectangle bounds of selected text in Javascript.

This is mighty useful in cases like mine where I wanted to control the visibility of the context menu and that I required it to appear only when the mouse cursor is within the selected text bound.

function getSelectionBound() {
    var sel = document.selection, range;
    var x = 0, y = 0, width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            x = range.boundingLeft;
            y = range.boundingTop;
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                x = rect.left;
                y = rect.top;
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { x: x, y: y, width: width , height: height };
}

function getSelectionBound() {

var sel = document.selection, range;

var x = 0, y = 0, width = 0, height = 0;

if (sel) {

if (sel.type != "Control") {

range = sel.createRange();

x = range.boundingLeft;

y = range.boundingTop;

width = range.boundingWidth;

height = range.boundingHeight;

}

} else if (window.getSelection) {

sel = window.getSelection();

if (sel.rangeCount) {

range = sel.getRangeAt(0).cloneRange();

if (range.getBoundingClientRect) {

var rect = range.getBoundingClientRect();

x = rect.left;

y = rect.top;

width = rect.right - rect.left;

height = rect.bottom - rect.top;

}

return { x: x, y: y, width: width , height: height };

}

Angular JS ng-view Height Problem

March 8, 2015 by blogmeister·0 Comments

When I used a bootstrapped 3.0 template together with Angular JS, I found out that the height of the DIV layer where ng-view resides does not change its height to fill the window viewport height if its content height is small.

I have not found any solution in any forum regarding this problem so what I did was to create a directive and added it to the HTML element where ng-view is located.

My template contains only a horizontal bar at the top, while the bottom is occupied by the content where ng-view is.
This is my HTML:

<body ng-controller="AppCtrl">
    <div id="main_navbar" class="navbar">
        ....
    </div>
    <div class="container-fluid-full" ng-view resize>
    </div>
</body>

....

</div>

</div>

</body>

This is my directive:

AppIndex.directive('resize', function ($timeout) {
	return {
		restrict: 'A',
		link: function(scope, elem, attrs, controller) {
			angular.element(document).ready(function () {
				$(window).resize();
				$timeout(function() {
					if (($(elem).height()  + $('#main_navbar').height()) < $(window).height()) {
						$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');
					}
				});
			});
		}
	};
});

AppIndex.directive('resize', function ($timeout) {

return {

restrict: 'A',

link: function(scope, elem, attrs, controller) {

angular.element(document).ready(function () {

$(window).resize();

$timeout(function() {

if (($(elem).height() + $('#main_navbar').height()) < $(window).height()) {

$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');

}

});

}

};

});

What the code does, is that once the ng-view works its magic and populates the HTML contents to the DIV layer, the Angular JS Directive will wait for the DOM till it is ready. Angular JS also has its own way to detect if a DOM is ready the same way JQuery does, but with a different syntax.

Once it is ready, I call on the $(window).resize() function to simulate a window viewport resize, then do the formula to adjust the height of the DIV content layer to fill the extra height of the window viewport.

Without calling the resize() function the height adjustment will not work when, say, you have a tab element and one of those tabs contains small content.

If you have a footer at the top, then simply add the footer height to the computation.

android:zAdjustment Does Not Work In Fragment Animation

November 28, 2013 by blogmeister·0 Comments

In case you are wondering why your custom animations do not work when used with fragments as opposed to using them in Activity transitions, the answer is you cannot.

Google framework engineer Dianne Hackborn had this to say:

“The Z adjustment only works for window animations. I thought this was documented, but apparently not.” — Dianne Hackborn (Android framework engineer).

Tech Tips & Tricks

tech tips gadgets programming software

Tag: window

How To Get Rectangle Bounds Of Selected Text In Javascript

Angular JS ng-view Height Problem

android:zAdjustment Does Not Work In Fragment Animation