CSS / JavaScript: Twitter Bootstrap center modal vertically on mobile web view

I’ve been working with modal boxes using Twitter Bootstrap. And the page I’m working on needs to be viewed in mobile devices. The modal looks nice and centered when viewed on desktop, but when run in mobile web browsers, it’s aligned to the top.

Someone on StackOverflow suggested the use of a helper div plus some custom CSS to align Bootstrap modals vertically.

Code for modal:

<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
    <div class=”vertical-alignment-helper”>
        <div class=”modal-dialog vertical-align-center”>
            <div class=”modal-content”>
                <div class=”modal-header”>
                    <button type=”button” class=”close” data-dismiss=”modal”><span aria-hidden=”true”>&times;</span><span class=”sr-only”>Close</span>

                    </button>
                     <h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>

                </div>
                <div class=”modal-body”>…</div>
                <div class=”modal-footer”>
                    <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
                    <button type=”button” class=”btn btn-primary”>Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<button type=“button” class=“close” data–dismiss=“modal”><span aria–hidden=“true”>×</span><span class=“sr-only”>Close</span>

</button>

<h4 class=“modal-title” id=“myModalLabel”>Modal title</h4>

</div>

<button type=“button” class=“btn btn-default” data–dismiss=“modal”>Close</button>

<button type=“button” class=“btn btn-primary”>Save changes</button>

</div>

CSS:

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.vertical–alignment–helper {

display:table;

height: 100%;

width: 100%;

pointer–events:none; /* This makes sure that we can still click outside of the modal to close it */

}

.vertical–align–center {

/* To center vertically */

display: table–cell;

vertical–align: middle;

pointer–events:none;

}

.modal–content {

/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */

width:inherit;

height:inherit;

/* To center horizontally */

margin: 0 auto;

pointer–events: all;

}

Source: Vertically centering Bootstrap modal window

March 14, 2016

JavaScript: Get current function name

getCallingFunctionName() is the important function here.

function getCallingFunctionName() {
    var re = /function (.*?)\(/
    var s = getFunctionName.caller.toString();
    var m = re.exec( s )
    return m[1];
}

function myCurrentFunction(){
    var func_name = getCallingFunctionName();
    alert(func_name);  //displays “myCurrentFunction”
}

myCurrentFunction();

1

2

3

4

5

6

7

8

9

10

11

12

13

function getCallingFunctionName() {

var re = /function (.*?)\(/

var s = getFunctionName.caller.toString();

var m = re.exec( s )

return m[1];

}

function myCurrentFunction(){

var func_name = getCallingFunctionName();

alert(func_name); //displays “myCurrentFunction”

}

myCurrentFunction();

Source: Can I get the name of the currently running function in JavaScript?

March 4, 2016

Google Maps get coordinates on click or drag and drop

With this tutorial you’ll see how we can place a Google map with search box on your web page, and then get coordinates (i.e. latitude and longitude) based on where you click or where you drag and drop the marker into. The JavaScript API of Google Maps will help us achieve this.

This kind of map will be useful if you want to save coordinates from a Google map into your database. For example, if you’d like to save coordinates of a user-defined location, you can incorporate this map into your registration process — ask your users to point the marker to their location by clicking on the map or by dragging then dropping the marker.

There will be two types of icons in this map. First, a red default marker. Wherever you move it, we’ll get the coordinates that it points to. Second, white square markers which will appear to point to the location you searched for using the search box.

Map Demo

Try the map below — this is more or less how our map will look like later at the end of this tutorial. 🙂 Please read on and soon I’ll share the codes with you.

Get coordinates from Google Map

Latitude: Longitude:

Click on any point or drag the marker to get coordinates.

This tutorial will cover the following:

Google map on a web page
Search box for map
Get map coordinates on click
Get map coordinates on drag and drop of the marker

And you will need these:

Familiarity with HTML and JavaScript
Internet connection
Google account
Development environment (I used XAMPP on Windows 7 for this)
Code editor (I use Sublime Text)

(more…)

October 12, 2015

JavaScript: Setting the selected dropdown option by its index number

Long time no new entry. 🙂 Internship is keeping me very busy. In this blog entry I’ll show you how to select a drop down option by specifying its index number.
(more…)

August 10, 2010

Fix PNG images with transparency in older Windows Internet Explorer versions

I wonder if this post would still get hits from search engine result pages. So many other web pages feature this fix for IE 5.5 and IE 6 web browser, that the Catzie.net Blog’s entry might just show up on the… 10th page or so. lol.

Anyways, I’m still posting this, in case there are some visitors browsing around who need help with properly displaying the transparency of .PNG images in IE5.5 and IE6. This also helps me easily find the needed code to fix the display. I need it from time to time when I design website layouts. 🙂

Tip: Most of us are probably using the newer versions of Internet Explorer. I suggest that you download and use the IE Tester. It’s a web browser that lets you see how web pages render in different versions of IE – 5.5, 6, 7, and 8.

I assume that as you read this, you are using Internet Explorer version 5.5, or the version 5.5 tab on the IE Tester.
(more…)

November 16, 2009

Inline Frame that automatically adjusts its height for the source page

Last year, I was working on our MULPROJ layout, and the type of layout I was making needed an iframe whose height is auto resized according to the source page’s content. This means that there should be no vertical scrollbar in the iframe, it simply adjusts itself vertically.

I thought that it wasn’t possible to do this but I found a JavaScript code that can do the trick, and I just want to share it with you. 😉
(more…)

October 31, 2009

Tag: JavaScript