Simple File Uploading using PHP

This is my first post for PHP, a server-side scripting language widely used for web development. As I’m new to this language, the techniques may sounds naive. 🙂

To receive file uploaded through http, you can use the PHP script below (let’s call it receive.php),

<?php

    ini_set('display_errors', 'On');

    error_reporting(E_ALL);

    $target_path = "./upload/";

    $target_path = $target_path . basename( $_FILES['myfile']['name']); 

    echo $target_path;

    if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {

        echo "The file ".  basename( $_FILES['myfile']['name']). 

        " has been uploaded";

    } else{

        echo "There was an error uploading the file, please try again!";

    }

?>

PHP does a lot of things for you and keep the interface simple. For file uploading, it will save the received the file data to a temporary file. The temporary file is going to be removed at the end of execution of the script. To get the file, one needs to use move_uploaded_file.

move_uploaded_file method takes two parameters, the temporary file and the destination. The temporary file name can be retrieved using $_FILES[‘myfile’][‘tmp_name’], where myfile is the name of of the name of the file input type you defined in your html page. The code above construct the target_path as the upload folder + the uploaded file name.

The first two lines enable the error reporting. It’s convenient for debugging.
To test the code, one can use the following html page (let’s call it test.html),

<html>

<body>

<form action="receive.php" method="post"

enctype="multipart/form-data">

<input type="file" name="myfile"><br>

<br />

<input type="submit" name="submit" value="Submit" />

</form>

</body>

</html>

The html page declares an input of file type with name “myfile”. It uses html post message to upload the file, and the file data is encrypted using multipart. We indicates receive.php to handle the post message.

If you have your testing web server set up with php configured properly. You can place the receive.php and test.html files into the web directory. Create a upload folder with proper permission. And open up test.html page in a browser as shown below,

Figure 1. Upload Test Page Interface

You can browse for a file and click submit, then the file upload will be handled by receive.php.

Figure 2. Upload Result Page

Note that the html page and php scripts are for illustration and study only. The actually production script should consider a lot of other stuff, like error handling, security etc.

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.

How to Create Image Gallery/Slideshow with noobSlide (2)

This is follow up post of the previous blog, which covers the sample 2 and sample 7 of the noobSlide image gallery library.

This blog covers a modified version of sample 6. You can refer to the effect below or here (as a separate page),

[iframe width=”100%” height=”480″ src=”http://roman10.net/noobslide/sample6.html”]

First, one needs to include the javascript and css files in head part of the html page as below,

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />     

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />     

<script type="text/javascript" src="mootools-1.2-core.js"></script>     

<script type="text/javascript" src="_class.noobSlide.packed.js"></script>

Next, in the html body part, include the photos and thumbnails, their styles and formats are defined in the css files.

<div id="cont6">

        <div class="sample sample6">

            <div class="mask6">

                <div id="box6">

                    <span><img src="img1.jpg" alt="Photo" style="width: 300; height: 200;"/></span>

                    <span><img src="img2.jpg" alt="Photo" style="width: 300; height: 200;"/></span>

                    <span><img src="img3.jpg" alt="Photo" style="width: 300; height: 200;"/></span>

                    <span><img src="img4.jpg" alt="Photo" style="width: 300; height: 200;"/></span>

                </div>

                <div class="info"></div>

            </div> 

            <div class="thumbs" id="handles6_2"> 

                <div><img src="img1.jpg" alt="Photo Thumb"/></div>

                <div><img src="img2.jpg" alt="Photo Thumb"/></div>

                <div><img src="img3.jpg" alt="Photo Thumb"/></div>

                <div><img src="img4.jpg" alt="Photo Thumb"/></div>

            </div>

            <p class="buttons">

            </p>

        </div>

    </div>

Lastly, call noobslide function within the head part of html,

<script type="text/javascript">

    window.addEvent('domready',function(){

        var sampleObjectItems =[

            {title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},

            {title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},

            {title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},

            {title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},

            /*{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},

            {title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},

            {title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},

            {title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}*/

        ];

        var info6 = $('box6').getNext().set('opacity',0.5);

        var nS6 = new noobSlide({

            /*mode: 'vertical',*/

            box: $('box6'),

            //items: sampleObjectItems,

            items:[1,2,3,4],

            //size: 180,

            size: 300,

            handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),

            handle_event: 'mouseenter',

            /*addButtons: {

                previous: $('prev6'),

                play: $('play6'),

                stop: $('stop6'),

                playback: $('playback6'),

                next: $('next6')

            },*/

            button_event: 'click',

            fxOptions: {

                duration: 1000,

                transition: Fx.Transitions.Back.easeOut,

                wait: false

            },

            onWalk: function(currentItem,currentHandle){

                info6.empty();

                //new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);

                //new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);

                this.handles.set('opacity',0.3);

                currentHandle.set('opacity',1);

            },

            autoPlay:true

        });

        //walk to next item

        nS6.next();

 

    });

    </script>

Remember to check out the css file by viewing the page source of the sample.

How to Create Image Gallery/Slideshow with noobSlide (1)

Noobslide is a MooTools based javascript library allows you to create a web-based image gallery or slideshow easily. (MooTools is a compact JavaScript framework designed for intermediate to advanced JavaScript developer.)

To download the noobslide code, one can refer to the official website here. The package contains the MooTools script, the noobSlide script, two css files, a couple of images and a sample page.

The examples provided are quite easy to understand, here we illustrate two examples, sample 2 and sample 7.

To get started, one need to include the javascript library and the CSS files in the head part of the html page.

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<script type="text/javascript" src="mootools-1.2-core.js"></script>

<script type="text/javascript" src="_class.noobSlide.packed.js"></script>

Sample 2

In the body of the html page, one needs to include the following html code,

<div id="cont">

    <div class="sample">

        <div class="mask2">

            <div id="box2">

                <span><img src="img1.jpg" alt="Photo" /></span>

                <span><img src="img2.jpg" alt="Photo" /></span>

                <span><img src="img3.jpg" alt="Photo" /></span>

                <span><img src="img4.jpg" alt="Photo" /></span>

                <span><img src="img5.jpg" alt="Photo" /></span>

                <span><img src="img6.jpg" alt="Photo" /></span>

                <span><img src="img7.jpg" alt="Photo" /></span>

                <span><img src="img8.jpg" alt="Photo" /></span>

            </div>

        </div>

        <p class="buttons">

            <span id="prev1">&lt;&lt; Previous</span>

            <span id="play1">Play &gt;</span>

            <span id="stop1">Stop</span>

            <span id="next1">Next &gt;&gt;</span>

        </p>

    </div>

</div>

The code should be clear and easy to understand.

Then in the head part, we call javascript function defined in noobSlide library to achieve the slideshow effects.

<script type="text/javascript">

    window.addEvent('domready',function(){

        //SAMPLE 2 (transition: Bounce.easeOut)

        var nS2 = new noobSlide({

            box: $('box2'),

            items: [0,1,2,3,4,5,6,7],

            interval: 3000,

            fxOptions: {

                duration: 1000,

                transition: Fx.Transitions.Bounce.easeOut,

                wait: false

            },

            addButtons: {

                previous: $('prev1'),

                play: $('play1'),

                stop: $('stop1'),

                next: $('next1')

            },

            autoPlay:true

        });

    });

    </script>

The autoPlay parameter set to true will let the slideshow start automatically once the page is loaded.

You can view the effect of the sample here (as a separate page) or below.

[iframe width=”100%” height=”480″ src=”http://roman10.net/noobslide/sample2.html”]

Sample 7

In the body part, insert the following html code,

<div id="cont">

        <div class="sample">

            <div class="mask6">

                <div id="box7">

                    <span><img src="img1.jpg" alt="Photo" style="width:300;"/></span>

                    <span><img src="img2.jpg" alt="Photo" style="width:300;"/></span>

                    <span><img src="img3.jpg" alt="Photo" style="width:300;"/></span>

                    <span><img src="img4.jpg" alt="Photo" style="width:300;"/></span>

                </div>

            </div>

            <div id="thumbs7">

                <div class="thumbs">

                    <div><img src="img1.jpg" alt="Photo Thumb" /></div>

                    <div><img src="img2.jpg" alt="Photo Thumb" /></div>

                    <div><img src="img3.jpg" alt="Photo Thumb" /></div>

                    <div><img src="img4.jpg" alt="Photo Thumb" /></div>

                </div>

 

                <div id="thumbs_mask7"></div>

 

                <p id="thumbs_handles7">

                    <span></span>

                    <span></span>

                    <span></span>

                    <span></span>

                </p>

            </div>

        </div>

    </div>

Then in the head part of the html page, insert the JavaScript code,

<script type="text/javascript">

        window.addEvent('domready',function(){

            //SAMPLE 7

            var startItem = 3; //or   0   or any

            var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*100-550)+'px').set('opacity',0.8);

            var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}

            var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);

            var nS7 = new noobSlide({

                box: $('box7'),

                items: [0,1,2,3],

                size: 300,

                handles: $$('#thumbs_handles7 span'),

                fxOptions: fxOptions7,

                onWalk: function(currentItem){

                    thumbsFx.start(currentItem*100-550);

                },

                startItem: startItem,

                autoPlay:true

            });

            //walk to first with fx

            nS7.walk(0);

        });

    </script>

Note that if you want to adjust the image or thumbnail size, there’re a few places needs to be changed, including the size parameter value and several places in the style.css file. Also, the thumbs_mask.gif file needs to resized properly to fit the thumbnail size you want.

You can refer here (as a separate page) or below for the effect of sample 7.

[iframe width=”100%” height=”480″ src=”http://roman10.net/noobslide/sample7.html”]

 

You can refer here for another sample.

Space in HTML Page

There’re several methods to add spaces in html web page. This blog entry is a summary of several approaches I’ve used.

1. Line Break

If you want to start a new line, you can use <br>, the line break tag. It has no end tag, and can be used anywhere within <body></body> tags.

Below is a simple html page,

<html>
    <head>
    </head>
    <body>
    test line 1<br>
    test line 2
    </body>
</html>

When open it up in a web browser, this is what you see,

Untitled4

2. Blank Space

html page collapse multiple normal space into one. For example, if you write 1          2, it will be seen as 1 2. The ten space are reduced to one. HTML defines &nbsp; character entitity for no-break space. (character entities are used to represent reserved characters.) The &nbsp; character entity is normally used in two situations,

  • Create multiple spaces: multiple &nbsp; won’t shrink to a single space.
  • Keep elements together: browsers won’t break up two elements with &nbsp; in between.

Below is a sample html page,

<html>
    <head>
    </head>
    <body>
    a                              line<br>
    a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line<br>
    </body>
</html>

If you save the page and open it up in a web browser, this is what you see,

Untitled2

3. Padding with <span>

<span> tag is used to group elements of a document, it can be used to add styles to part of a text or document.

Below is a sample html page,

<html>
    <body>
    here<span style="padding-left:20px">am I</span>
    </body>
</html>

And if you save the page and open it using a browser, this is what you see,

Untitled1

4. Pre-format tag <pre>

<pre> tag defines preformatted text. Text within in <tag></tag> is displayed using fixed-width font, and both line breaks and spaces are preserved.

Below is a sample html page,

<html>
    <body>
    <pre>
    here I
        am!
    </pre>
    </body>
</html>

And if you save the page and open it up in a web browser, this is what you see,

Untitled

A First Touch on AJAX

Side Note: First Draft on Apr 12 2011. I once had a chance to work part-time on AJAX web development during undergrad, but my friend and I quit half way. Recently, I had the chance to develop some simple AJAX pages, so it’s kind of first touch. Smile

AJAX, stands for Asynchronous JavaScript and XML, is a group of popular technologies used in client-side web development for interactive applications. The main idea of AJAX is to retrieve data from server at the background and dynamically update the web page.

The advantage of this technique is it allows client web page to be updated partially without refreshing the entire page. Therefore, less data is exchanged between client and server, and the web application becomes more responsive.

One of the earliest example of AJAX is Google’s search keyword auto-completion. The web page is constantly sending the letters you typed into the search box back to Google servers, and Google’s backend servers will do the analysis and return a list of possible keywords. Then client side page will parse this data and do the auto-completion for you.

The difference between the traditional web application and AJAX application is as below,

clip_image002

Picture from interakt

The AJAX engine is nothing but some JavaScript downloaded from the web to the user’s browser.

In AJAX apps, data is usually retrieved using XMLHttpRequest object and JavaScript is written to parse the received data and dynamically change the website. XMLHttpRequest object was implemented as ActiveX object in IE and later on become a native JavaScript object in most browsers, including FireFox, Safari and Chrome.

A typical HTTP request using XMLHttpRequest looks like below,

http://127.0.0.1:8080/update.xml

GET /update.xml HTTP/1.1

Host: 127.0.0.1:8080

User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.16) Gecko/20110323 Ubuntu/9.10 (karmic) Firefox/3.6.16

Accept: application/xml, text/xml, */*; q=0.01

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 115

Connection: keep-alive

X-Requested-With: XMLHttpRequest

Referer: http://127.0.0.1:8080/update.html

And once the server returned the requested XML file with data, the JavaScript in the web page can parse it and update the web page. The data can be in other formats as well, for example, JSON.

The request and parsing can be simplified by using some JavaScript, for example, the popular JQuery library.

A typical JavaScript function using JQuery JavaScript library is as below,

function receiveServerData() {
    $.ajax({
        type: "GET",
        url: "update.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('s').each(function() {
            //further parsing the xml 
            }
       }
   });
}

This simple script will request for an xml file and then parse the xml file if it returns successfully.