Text rotation using HTML/CSS

Have you ever needed to create a vertical text? Something like:

Sample Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility.

Code

Let's start creating a simple div with a class ("VerticalText" for our example):

<div class="VerticalText">Sample Text</div>

As said, the problem is giving full compatibility with the rendered text. To do so, we need to treat Webkit, Mozilla, Opera and IE in different way. This time, Internet Explorer is the easiest: we will use the writing-mode and flip properties. For all other browsers, we are going to use transform with rotate.
Here is our final style:

<style type="text/css">
.VerticalText {
    color: green;
    writing-mode:tb-rl;
     filter: flipv fliph;
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    white-space:nowrap;
    width:60px; font-family: calibri;
    font-size:20pt;
    font-weight:bold;
}
</style>

For Internet Explorer we change the writing mode to top to bottom, right to left, then we flip it vertically and horizontally.
For Webkit, Mozilla and Opera, we use transform and rotate (270deg).
The result will work in Opera 10.5+, IE6+, FF and Webkit based browsers.

Happy coding…

Child window (popup) close event in parent window

This is the most useful and most wanted code for raising window close event of child window from parent window.

<script type="text/javascript">

   var childWindow = null;

   var timer;

   var flag = 1;

   function openChildWindow() {

       childWindow = window.open('child.htm', 'My popup', 'width=400,height=250');

       childWindow.focus();

   }

   function checkChildWindowStatus() {

       if (childWindow.closed) {

           if (flag == 1)

                window.location.reload();

                flag = 0;

           }

           else {

                timer = 0;

                flag = 1;

           }

   }

   window.onload = function () {

       timer = setInterval('checkChildWindowStatus()', 1000);

   }

</script>

In the above code childWindow is the variable which reference to the popup window. Using this window status can be identified.

checkChildWindowStatus() is the function where the popup window status is checking and based on this some action (page refresh) can be performed in parent window. This function is getting called for frequent interval of time using serInterval() method.

Happy coding…