- Part 2

Form Undefined In Bootstrap Modal Dialog Under Angular JS

April 25, 2015 by blogmeister·0 Comments

So when I was using Angular JS, I wanted to set the form in a modal dialog window back to its pristine state whenever it was shown.

Problem was, the form is always undefined. If I place a code within the modal window, the form exists but when I call it in a Javascript function, it is undefined.

The solution is to add $parent to your form name like this:

<form name="$parent.myForm"> ...

1	<form name="$parent.myForm"> ...

This will automatically create the form object in your parent controller. Then, you can simply access it using the scope like $scope.myForm.

JQuery UI DatePicker Not Shown In Bootstrap Modal Window

April 20, 2015 by blogmeister·0 Comments

Well, this one bugged me down for hours. I thought the problem was Bootstrap’s form-control CSS class since removing it shows the Jquery UI DatePicker widget but the input field styling is gone.

User lastoneisbearfood in the StackOverflow forum provided 2 easy solutions of your preference: either adding a css attribute or doing it Javascript style.

on-JS Just add z-index:1051; to the style attribute of your input element. This is based on the observation that bootstrap .modal class uses a z-index of 1050.

Dynamic solution using JS When declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modal and set datepicker’s z-index to 1 higher than that:

datepicker({beforeShow: function(inputElem, inst) {
    var zi = Number($(inputElem).closest('.modal').css('z-index'));
    $(inputElem).css('z-index',zi+1);
}});

datepicker({beforeShow: function(inputElem, inst) {

var zi = Number($(inputElem).closest('.modal').css('z-index'));

$(inputElem).css('z-index',zi+1);

}});

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 };

}

Tech Tips & Tricks

tech tips gadgets programming software

Month: April 2015

JQuery UI DatePicker Not Shown In Bootstrap Modal Window

How To Get Rectangle Bounds Of Selected Text In Javascript