JWPlayer and FlowPlayer vs. Adobe Flash Player

JWPlayer and FlowPlayer are video players that support Flash video. What confusing is they’re referred as Flash Video Players sometimes. (e.g. FlowPlayer claims itself as Flash Video Player for the Web.) Why do I need another Flash Video Player if I already have Adobe Flash Player installed?

Adobe Flash Player is actually a virtual machine that runs Flash files, which end with an extension of .swf. SWF files can contain animations, video/audio and web UI. Both JWPlayer and FlowPlayer consist SWF files which is downloaded to browsers’ cache and played by Adobe Flash Player. In other words, JWPlayer and FlowPlayer are “played” by Adobe Flash Player. It’s like Adobe Flash is the JVM (Java Virtual Machine), and JWPlayer and FlowPlayer are two Java programs.

JWPlayer actually supports more than just Flash, it also supports HTML5 video for iPhone and iPad device. In essence, JWPlayer and FlowPlayer are just a collection of javascript and SWF files that allow a website publisher to embed video into a web page, customize the outlook of the video display area, and control the behavior of the video play out etc. And Flash video is one (and probably most important one) of the technologies/platforms they support.

Simple HTML Modal Window Based on jQuery

A modal window is a pop up window which requires user to interact with it before continuing operation on its parent window. This post covers how to construct a basic modal window based on jQuery and a third-party javascript.

First, in the parent page, we’ll need to provide a link to the modal window, which is basically what we want to show on the modal window. The link can be a static link, or we can use javascript to pass the url of the link. The sample page is given below,

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Simple Modal Window Test</title>

        <link rel="stylesheet" href="styles/modal-window.css" />

        <script type="text/javascript" language="javascript" src="scripts/jquery-1.3.2.min.js"></script>

        <script type="text/javascript" language="javascript" src="scripts/modal-window.min.js"></script>

        <script type="text/javascript">

            function open_modal() {

                $(this).modal({width:533, height:153, src:"modal.html"}).open();

            }

        </script>

    </head>

    <body>

        <div style="position:relative; margin-left: 200px; top:80px">

            <h3 style="margin-top:50px;"><a href="modal.html" onclick="$(this).modal({width:833, height:453}).open(); return false;">&rarr; Modal iFrame</a></h3>

            <h3 style="margin-top:50px;"><a href="images/test.jpg" onclick="$(this).modal({width:500, height:375}).open(); return false;">&rarr; Modal Image</a></h3>

            <input type="button" value="open modal" onclick="open_modal();">

        </div>

    </body>

</html>

The page has two anchor elements that contains link to a html page and an image respectively. It also has a button which will trigger opening of a modal window once it’s clicked.

The effect can be seen below, or here as a separate page.

For the first option, we want to open another html page at the modal window, the sample html page is given below,

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Modal Window Sample</title>

        <script type="text/javascript">

            function finish() {

                parent.$.modal().close();

            }

        </script>

    </head>

    <body>

        <div style="margin-top:20px; text-align:center;">

            <h2>Modal Window Sample</h2>

            <button onclick="finish()">Submit and Close</button>

        </div>

    </body>

</html>

One can add more HTML tags.

This modal window works well for images and pop up window. However, if I want to pass info between parent window and child window, then it’s not so obvious how to handle it. I’ll continue to look for better solutions.

Note: this post is a study notes for the A Simple Modal – Redux. You can download the source file from the original article here.

HTML Dropdown Menu–with CSS and JavaScript

This post gives step-by-step instruction to build a cool HTML dropdown menu as below or here (as a separate page),

1. Structure the Menu by HTML

HTML is originally designed to be a markup language to indicate the different parts of a document. This is how HTML is used in our dropdown menu. Below is the HTML code,

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="robots" content="noindex" />

        <title>Dropdown Menu Step 1</title>

    </head>

    <body>

        <div class="nav">

            <ul class="menu" id="menu">

                <li><a href="#">Home</a></li>

                <li><a href="#">Menu One</a>

                    <ul>

                        <li><a href="#">Menu Item 1</a></li>

                        <li><a href="#">Menu Item 2</a></li>

                        <li class="submenu">

                            <a href="#">Menu Item 3</a>

                            <ul>

                                <li><a href="#">Menu Item 31</a></li>

                                <li><a href="#">Menu Item 32</a></li>

                                <li><a href="#">Menu Item 33</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#">Menu Two</a>

                    <ul>

                        <li><a href="#">Menu Item 21</a></li>

                        <li><a href="#">Menu Item 22</a></li>

                        <li><a href="#">Menu Item 23</a></li>

                        <li class="submenu">

                            <a href="#">Menu Item 24</a>

                            <ul>

                                <li><a href="#">Menu Item 241</a></li>

                                <li><a href="#">Menu Item 242</a></li>

                                <li><a href="#">Menu Item 243</a></li>

                                <li><a href="#">Menu Item 244</a></li>

                                <li><a href="#">Menu Item 245</a></li>

                            </ul>                        

                        </li>

                        <li><a href="#">Menu Item 25</a></li>

                        <li><a href="#">Menu Item 26</a></li>

                    </ul>

                </li>

                <li><a href="#">Menu Three</a>

                    <ul>

                        <li><a href="#">Menu Item 31</a></li>

                        <li><a href="#">Menu Item 32</a></li>

                        <li><a href="#">Menu Item 33</a></li>

                    </ul>

                </li>

                <li><a href="#">Menu Four</a>

                </li>

            </ul>

        </div>

    </body>

</html>

The web page will look like below,

2. Apply CSS Style to HTML

After defining the structure of the dropdown menu, we’ll need to apply CSS style to make it looks like a dropdown menu, the html code is as below,

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="robots" content="noindex" />

        <link rel="stylesheet" href="dropdown_menu_step2.css" />

        <title>Dropdown Menu Step 2</title>

    </head>

    <body>

        <div class="nav">

            <ul class="menu" id="menu">

                <li><a href="#">Home</a></li>

                <li><a href="#">Menu One</a>

                    <ul>

                        <li><a href="#">Menu Item 1</a></li>

                        <li><a href="#">Menu Item 2</a></li>

                        <li class="submenu">

                            <a href="#">Menu Item 3</a>

                            <ul>

                                <li><a href="#">Menu Item 31</a></li>

                                <li><a href="#">Menu Item 32</a></li>

                                <li><a href="#">Menu Item 33</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#">Menu Two</a>

                    <ul>

                        <li><a href="#">Menu Item 21</a></li>

                        <li><a href="#">Menu Item 22</a></li>

                        <li><a href="#">Menu Item 23</a></li>

                        <li class="submenu">

                            <a href="#">Menu Item 24</a>

                            <ul>

                                <li><a href="#">Menu Item 241</a></li>

                                <li><a href="#">Menu Item 242</a></li>

                                <li><a href="#">Menu Item 243</a></li>

                                <li><a href="#">Menu Item 244</a></li>

                                <li><a href="#">Menu Item 245</a></li>

                            </ul>                        

                        </li>

                        <li><a href="#">Menu Item 25</a></li>

                        <li><a href="#">Menu Item 26</a></li>

                    </ul>

                </li>

                <li><a href="#">Menu Three</a>

                    <ul>

                        <li><a href="#">Menu Item 31</a></li>

                        <li><a href="#">Menu Item 32</a></li>

                        <li><a href="#">Menu Item 33</a></li>

                    </ul>

                </li>

                <li><a href="#">Menu Four</a>

                </li>

            </ul>

        </div>

    </body>

</html>

The code is almost the same as the previous page, with the addition of

<link rel=”stylesheet” href=”dropdown_menu_step2.css” />

The CSS file dropdown_menu_step2.css is as below,

* {

    margin:0px;

    padding:0px;

}

.nav {

    height:36px;

    background:#aaaaaa;

    color:#ffffff;

    text-shadow:1px 1px #888888;

    z-index:1000;

    margin:0px;

}

 

.menu {

    list-style:none;

    font-family:Arial,Verdana,Serif;

    font-size:16px;

    text-align:center;

    width:600px;

    margin:0 auto;

}

 

.menu a {

    float:left;

    color: #eeeeee;

    text-decoration:none;

    width:120px;

    height:26px;

    padding:8px 0px 0px 0px;

}

 

.menu a:hover {

    color:#ffffff;

}

 

.menu li {

    position:relative;

    float:left;

    width:120px;

}

 

.menu ul {

    list-style:none;

    font-family:Arial,Verdana,Serif;

    font-size:13px;

    font-weight:normal;

    background:#aaaaaa;

    position:absolute;

    top:36px;

    left:0;

}

 

.menu ul ul {

    left:120px;

    top:0;

}

 

.menu li.submenu {

    font-weight:bold;

}

 

.menu li.submenu li {

    z-index:1001;    /*uncomment this line to see the overlapping effect of menu item 31, 32, 33 with 23, 24, 25*/

}

The key idea is to set the list-style as none so the menu items won’t appear as menu items. The dropdown menu items and the submenu are put into relative layout, so they will appear right under the top menu and at the right side of the menu item respectively. The page will look like below,

3. Add JavaScript for Dynamic Effect and Update CSS

There is only one simple change to the CSS file, which is simply set the drop down menu item display as display:none.

The CSS file dropdown_menu_step3.css is as below,

* {

    margin:0px;

    padding:0px;

}

.nav {

    height:36px;

    background:#aaaaaa;

    color:#ffffff;

    text-shadow:1px 1px #888888;

    z-index:1000;

    margin:0px;

}

 

.menu {

    list-style:none;

    font-family:Arial,Verdana,Serif;

    font-size:16px;

    text-align:center;

    width:600px;

    margin:0 auto;

}

 

.menu a {

    float:left;

    color: #eeeeee;

    text-decoration:none;

    width:120px;

    height:26px;

    padding:8px 0px 0px 0px;

}

 

.menu a:hover {

    color:#ffffff;

}

 

.menu li {

    position:relative;

    float:left;

    width:120px;

}

 

.menu ul {

    list-style:none;

    font-family:Arial,Verdana,Serif;

    font-size:13px;

    font-weight:normal;

    background:#aaaaaa;

    position:absolute;

    top:36px;

    left:0;

    display:none;              /*only this line is added compared with step 2*/

}

 

.menu ul ul {

    left:120px;

    top:0;

}

 

.menu li.submenu {

    font-weight:bold;

}

 

.menu li.submenu li {

    z-index:1001;    /*uncomment this line to see the overlapping effect of menu item 31, 32, 33 with 23, 24, 25*/

}

The dynamic effects are programmed using JavaScript, the code is as below,

var TINY = {};

 

TINY.dropdown = function() {

    var p = {fade:1, slide:1, active:0, timeout:200};

    var init = function(n, o) {

        for(s in o) {

            p[s] = o[s];            //p.id = "menu", active = "menuhover"

        }        

        p.n = n;                //p.n = "dropdown"

        this.build();

    };

    init.prototype.build = function() {

        this.h = [];

        this.c = [];

        this.z = 1000;                            //the initial z-index value

        var s=document.getElementById(p.id).getElementsByTagName('ul');    //get all ul elements

        var l = s.length;

        var i = 0;

        p.speed = p.speed? p.speed*.1:.75;     //note that the speed is slower as the value increase

        for (; i < l; ++i) {

            var h = s[i].parentNode;                 //get the li element for each ul element

            this.h[i] = h;

            this.c[i] = s[i];

            h.onmouseover = new Function(p.n + '.show(' + i + ', 1)');

            h.onmouseout = new Function(p.n + '.show(' + i + ')');

        }

    };

    init.prototype.show = function(x, d) {        //the element index and the direction

        var c = this.c[x];        //get the sub menu ul

        var h = this.h[x];        //get the top level menu item li

        clearInterval(c.t);

        clearInterval(c.i);

        c.style.overflow = 'hidden';    //The overflow is clipped, and the rest of the content will be invisible

        if (d) {            //show the dropdown menu        

            if (p.active && h.className.indexOf(p.active) == -1) {

                h.className += ' ' + p.active;

            }

            if (p.fade || p.slide) {

                c.style.display = 'block';

                if (!c.m) {

                //the menu is mouse over for the first time, we do some initializaition here.

                    if (p.slide) {

                        c.style.visibility = 'hidden';

                        c.m = c.offsetHeight;

                        c.style.height = '0';

                        c.style.visibility = '';

                    } else {

                        c.m = 100;                                            

                        c.style.opacity = 0;

                        c.style.filter = 'alpha(opacity=0)';

                    }

                    c.v = 0;

                }

                if (p.slide) {

                    if (c.m == c.v) {                            //if the element is fully shown

                        c.style.overflow = 'visible';        //The overflow is not clipped. It renders outside the element's box.    

                    } else {

                        c.style.zIndex = this.z;

                        ++this.z;

                        c.i = setInterval(function() {

                            slide(c, c.m, 1)            //open up the submenu

                        }, 20);

                    }

                } else {

                    c.style.zIndex = this.z;

                    ++this.z;

                    c.i = setInterval(function() {

                        slide(c, c.m, 1);                //open up the submenu

                    }, 20);

                }

            } else {

                c.style.zIndex = this.z;

                c.style.display = 'block';

            }

        } else {

            c.t = setTimeout(function() {

                hide(c, p.fade||p.slide? 1:0, h, p.active);    

            }, p.timeout);

        }

    }

    function hide(c, t, h, s) {

        if (s) {

            h.className = h.className.replace(s, '');        

        }

        if (t) {                                                //if fade or slide effect is defined

            c.i = setInterval(function() {

                slide(c, 0, -1);                            //close up the sub menu

            }, 20);

        } else {                                                //if no special effect, just make the submenu not visible

            c.style.display = 'none';

        }

    }

    function slide(c, t, d) {                        //d is the slide direction

        if (c.v == t) {        //when the visible part (c.v) reached the preset limit (t), we stop the function

            clearInterval(c.i); 

            c.i = 0;

            if (d == 1) {

                if (p.fade) {

                    c.style.filter = '';

                    c.style.opacity = 1;

                } 

                c.style.overflow = 'visible';

            }

        } else {

            c.v = (t - Math.floor(Math.abs(t - c.v) * p.speed) * d);    

            if (p.slide) {

                c.style.height = c.v + 'px';

            }

            if (p.fade) {

                var o = c.v/c.m;

                c.style.opacity = o;

                c.style.filter = 'alpha(opacity=' + (o*100) + ')';

            }

        }

     }

     return {init:init}

}();

The dynamic effects are using event handler for onmouseover and onmouseout events of the menu, including the submenu.

The basic idea for slide effect is to use the overflow property. When set to hidden, the content of the html element will be clipped. In our case, the menu item will be shown partially. As we increase the html element height, more and more content will be shown, therefore a slide effect is seen.

For the fade effect, the opacity property is used. For IE, one shall use filter:alpha(opacity=x), where x is in the range of 0 to 100. For other browsers, use opacity:x, where x is from 0.0 to 1.0.

The web page is also similar to step 2. The main difference is the line that links to javascript file,

<script type=”text/javascript” src=”dropdown_menu.js”></script>

and the script to call the function defined in dropdown_menu.js right before the closing tag of body element,

<script type=”text/javascript”>
            var dropdown=new TINY.dropdown.init(“dropdown”, {id:’menu’, active:’menuhover’});
</script>

The dropdown menu will be like what you saw at the beginning of this post.

Note: This post is the study notes of the HTML dropdown menu written by Michael Leigeber. One can find the original post at here.