Wednesday, September 25, 2013

ActionScript 3 (AS3): list all child MovieClip

List all child MovieClip and make interaction between children.
For example in AS3, we want to check if MovieClip dragger, volume_btn and vol_slider have same parent, we can list all children of parent:
    for (var i:uint = 0; i < this.parent.numChildren; i++){
    trace ('\t|\t ' +i+'.\t name:' + this.parent.getChildAt(i).name + '\t type:' + typeof (this.parent.getChildAt(i))+ '\t' + this.parent.getChildAt(i));}

When I mouse up for dragger, I want volume_btn in out status of button, and vol_slider invisible, we can use
      var mc:MovieClip = this.parent.getChildByName("volume_btn") as MovieClip;
     if(mc)
     {
         mc.gotoAndStop('out');
      }
       var mc1:MovieClip = this.parent.getChildByName("vol_slider") as MovieClip;
     if(mc1)
     {
         mc1.visible = false;
      }

put together:
dragger.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseUpHandler(e:MouseEvent):void{

           dragger.stopDrag();


      var mc:MovieClip = this.parent.getChildByName("volume_btn") as MovieClip;
     if(mc)
     {
         mc.gotoAndStop('out');
      }
       var mc1:MovieClip = this.parent.getChildByName("vol_slider") as MovieClip;
     if(mc1)
     {
         mc1.visible = false;
      }
    /*
    for (var i:uint = 0; i < this.parent.numChildren; i++){
    trace ('\t|\t ' +i+'.\t name:' + this.parent.getChildAt(i).name + '\t type:' + typeof (this.parent.getChildAt(i))+ '\t' + this.parent.getChildAt(i));
      }
    */

    delete this.onEnterFrame;
}

Wednesday, September 18, 2013

CSS -look into float property

1) Suppose we have a parent div and 3 child divs, first we do not set any float property in the child divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    margin:15px;
    font-family:Arial; font-size:12px;
}
.parent {
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;
    width: 500px;
}
.parent div {
    padding:10px;
    margin:15px;
    border:1px dashed #111111;
    background-color:#90baff;
}
.parent p {
    border:1px dashed #111111;
    background-color:#ff90ba;
}
.child1 {
}
.child2 {
}
.child3 {
}
</style>
</head>
<body>
   <h1>CSS -Get more understings of float property</h1>
    <div class="parent">
        <div class="child1">Box-1</div>
        <div class="child2">Box-2</div>
        <div class="child3">Box-3</div>
        <p>This is text. This is text. This is text. This is text
           This is text. This is text. This is text. This is text.</p>
    </div>
</body>
</html>
Result:

2) set the first child box float to left
.child1 {
float: left;
}
The second box will move up and take the right space of box 1
Result:

3) set the first and second child box float to left
.child1 {
float: left;
}
.child2 {
float: left;
}
The third box will move up in the same line as the first and second box:
Result:

4) Set all three child box float to left
.child1 {
      float: left;
}
.child2 {
      float: left;
}
.child3 {
      float: left;
}
All child boxes and text are in the same line.
Result:

5) Set the first two child boxes float to left and the third float to right
.child1 {
    float: left;
}
.child2 {
    float: left;
}
.child3 {
    float: right;
}
Now text is between the second box and third box.
Result:

Monday, September 16, 2013

Different between top and margin-top in CSS.

Difference between top and margin-top?

top property in CSS combing with position property measures the top position without considering nearby elements.
margin-top property is to measure the top position of the element to its parent element.
This example may explain the difference between top and margin-top:
        <h1>CSS top position</h1>
             <div class="sessionTitle">
                <img src="http://www3.telus.net/jianlu58/white_plus.gif" />
                <div class="white_detail">
                Tablet computer
                </div>
When we used margin-top: 10px; for .white_detail class and use position: absolute
.white_detail{
      position: absolute;
       margin-top: 10px;
       border: 1px solid red;
   }
We can see the effect: the top of red box (.white_detail) has 10px distance from top of green box (..sessionTitle)

If we changed margin-top: 10px; to top: 10px;
.white_detail{
      position: absolute;
       top: 10px;
       border: 1px solid red;
   }
   We can see the effect: the top of red box (.white_detail)moved to the top of the page and ignore the position of its parent element.

Friday, September 13, 2013

load external web page into a div using jQuery

To load external web page into a div using jQuery, first we create a link with class menu_top:
<a class="menu_top" href="home.php>Home </p>
We want to load home.php into the div with id content_area: when the link is clicked:
<div id="content_area"></div>
jQuery function load is used:
$('.menu_top').click(function(){
       var href= $(this).attr('href');
       $('#content_area').load(href);
       return false;
});
If we want to load home.php into the div automatically without click the link:
$(document).ready(function(){
       var href= $('.menu_top:first').attr('href');
       $('#content_area').load(href);
}).
assume we have several div with class menu_top, we want to load the first one.

Thursday, September 12, 2013

PHP, verify input date format

MySQL DATETIME type is used for values that contain both date and time parts. MySQL retrieves and displays DATETIME values in 'YYYY-MM-DD HH:MM:SS'.

How to verify date input format is 'YYYY-MM-DD HH:MM:SS', i.e."Y-m-d H:i:s" in PHP?

Method 1:

function checkDateTime($data) {

    if (date('Y-m-d H:i:s', strtotime($data)) == $data) {

        return true;

    } else {

        return false;

    }

}

Method 2:

function validateDate($date, $format = 'Y-m-d H:i:s')

{

    $d = DateTime::createFromFormat($format, $date);

    return $d && $d->format($format) == $date;

}

Mote detail: create a table edu_tests in mysql using datetime format

CREATE TABLE  edu_tests (
  `test_id` mediumint(8) unsigned NOT NULL auto_increment,
  `course_id` mediumint(8) unsigned NOT NULL default '0',
  `title` varchar(100) NOT NULL default '',
  `format` tinyint(4) NOT NULL default '0',
`start_date` datetime NOT NULL default '0000-00-00 00:00:00',
  `end_date` datetime NOT NULL default '0000-00-00 00:00:00',
    primary key (test_id)
  )

Example PHP code to verify input date format with the same format as MYSQL datetime format:

<html>
    <h1>PHP, verify input date format</h1>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label for="release">Release Date </label><br />
      <input name="date" id="date" type="text" size="40" 
      value="<?php if(!isset($_POST['date'])) 
      echo date("Y-m-d H:i:s"); 
      else echo $_POST['date'];?>" /><br>
   <input type="submit" name="submit" value="Submit Form"><br>
    </form>
<?php
function checkDateTime($data) {
    if (date('Y-m-d H:i:s', strtotime($data)) == $data) {
        return true;
    } else {
        return false;
    }
}    
if(isset($_POST['submit']))
{ 
    if(!checkDateTime($_POST['date']))
     echo '<h2>Input date format is wrong.</h2>';
    else echo '<h2>Input date format is <i>correct.</i></h2>';
}
?>
</html>

Wednesday, September 11, 2013

Difference between margin and padding in CSS

This example may explain better difference between margin and padding:
             <div class="sessionTitle">
                <img src="http://www3.telus.net/jianlu58/white_plus.gif" />
                <div class="white_detail">
                Tablet computer
                </div>
When we used margin-top: 10px; for .white_detail class
.white_detail{
       margin-top: 10px;
       border: 1px solid red;
   }
We can see the effect: the top of red box (.white_detail) has 10px distance from top of green box (..sessionTitle)

If we changed margin-top: 10px; to padding-top: 10px;
.white_detail{
       padding-top: 10px;
       border: 1px solid red;
   }
   We can see the effect: the height of red box (.white_detail) increased 10px, while 0px distance from top of green box (..sessionTitle), and the position of text "Tablet computer" remains the same.

If we remove border: 1px solid red; in .white_detail class, margin-top: 10px; and padding-top: 10px; show the effect in this case.

Tuesday, September 10, 2013

Hide and show a text paragraph using jQuery

Sometimes we may need to hid and show a paragraph.
code:
<html>
<head>
<style>
    .sessionTitle {
        width: 750px;
        height: 43px;
        background: green;
        border: 1px solid #CCCCCC;
        display: block;
        border-radius:5px;
    }
   .sessionTitle:hover {
          background: red;

   }
   .sessionTitle img{
      float: left;
      padding-left: 18px;
      padding-top: 17px;
   }

    .detailInfo {
       display: block;
       width: 750px;
       padding: 20px 0;
       background: lightblue;
       border-radius:5px;
    }
   .sessionTitle .white_detail{
       display: block;
      color: #FFF;
      font-size: 17px;
      font-weight: bold;
      padding-left: 40px;
      margin-top: 10px;
   }

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //Detailed Info expand and collapse
        $(".detailInfo").hide();
             $(".sessionTitle").click(function(){
            if($(this).next(".detailInfo").css("display")=="none"){
                $(this).next(".detailInfo").show();
                $(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_minus.gif");
            }
            else{
                $(this).next(".detailInfo").hide();
                $(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_plus.gif");
            }
        });

    });
</script>
</head>
<body>
<h1>Hide and show a text paragraph using jQuery</h1>

            <div class="sessionTitle">
                <img src="http://www3.telus.net/jianlu58/white_plus.gif" />
                <div class="white_detail">
                Tablet computer
                </div>

            </div>
            <div class="detailInfo">

                    <p>A tablet computer, or simply tablet,
                        is a mobile computer with display, circuitry and battery in a single unit.</p>

            </div>

</body>
</html>
Demo

Hide and show a text paragraph using jQuery

Tablet computer

A tablet computer, or simply tablet, is a mobile computer with display, circuitry and battery in a single unit.

Monday, September 9, 2013

Show and hide password checkbox for user password input

We may need to add a show password checkbox when users enter password. When users click "Show password" checkbox, the password will be switched from hidden to plain text, so users can check it for typos.
We can design a check box and use onchange event handler to switch input type between password and text.
code:
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password
Demo:

Show password

Thursday, September 5, 2013

Select and deselect all checkbox using jQuery

Select and deselect all checkbox using jQuery:
First link to jQuery library

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Create a checkbox with id selectall to select all:
<input type="checkbox" id="selectall">Select all</input><br />
Create three checkboxs with class selectId
<input type="checkbox" class="selectedId" name="selectedId" id="1" />1 <br />
<input type="checkbox" class="selectedId" name="selectedId" id="2" />2 <br />
<input type="checkbox" class="selectedId" name="selectedId" id="3" />3 <br />
iQuery code: $(this).is(":checked") is the same as $(#selectall).is(":checked"), which return true when the slect all checkbox is checked, else false. Set the attribute of class selectedId for checkbox
the same as select all.
<script>
$('#selectall').on('click', function() {
    $('.selectedId').attr('checked',$(this).is(":checked"));
});
</script>
Demo: put all these together, check Select all, 1,2,3 are checked, un-check Select all, 1,2,3 are unchecked.
Select all
1
2
3
This code only works for the first and second, but failed for third click for selectall check box after.
Better code: work for any click for selectall checkbox
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script>

function selectAll(status) {
   $('input[name=selectedId]').each(function(){
      $(this).prop('checked', status);
   });
}
</script>
</head>
<body>
<h1>Select and deselect all checkbox using jQuery</h1>
<input type="checkbox" id="selectall" onclick='selectAll(this.checked)'/>Select all<br />
<input type="checkbox" class="selectedId" name="selectedId" id="1" />1 <br />
<input type="checkbox" class="selectedId" name="selectedId" id="2" />2 <br />
<input type="checkbox" class="selectedId" name="selectedId" id="3" />3 <br />
</body>
</html>

Wednesday, September 4, 2013

Hover over for a text hint box Using jQuery

First we create a div with id hintbox to hold text hint box
<div id="hintbox"></div>
Using CSS to difine hintbox border, background color, text color; using position: absolute so we can modify top and left later.
#hintbox{
    display:none;
    position: absolute;
    font-size: 12 px;
    background-color: #161616;
    color: #fff;
    border: 1px solid red;
    padding: 8px;
    border-radius:5px;
}
create a button and input text boxfor mouse over, define hinttext to hold the text showing in hint text box
<button type="button" class="hover" hinttext="Click to submit">Submit</button>
<input type="text" class="hover" hinttext="Enter your name" />
jQuery code, using mousemove to show text box when mouse over, using mouseout to hid text box:
$(document).ready(function() {
$('.hover').mousemove(function(e){
       var hovertext = $(this).attr('hinttext');
         $('#hintbox').text(hovertext).show();
    $('#hintbox').css('top',e.clientY+15).css('left',e.clientX+15);})
     .mouseout(function(){
    $('#hintbox').hide();
});
});
Complet example:
<html>
<head>
<style>
#hintbox{
    display:none;
    position: absolute;
    font-size: 12 px;
    background-color: #161616;
    color: #fff;
    border: 1px solid red;
    padding: 8px;
    border-radius:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.hover').mousemove(function(e){
       var hovertext = $(this).attr('hinttext');
         $('#hintbox').text(hovertext).show();
    $('#hintbox').css('top',e.clientY+15).css('left',e.clientX+15);})
     .mouseout(function(){
    $('#hintbox').hide();
});
});
</script>
</head>
<body>
<h1>Hover over for a text hint box using jQuery</h1>
<div id="hintbox"></div>
<h2>Applied to a button</h2>
<button type="button" class="hover" hinttext="Click to submit">Submit</button>

<h2>Applied to a input field</h2>
<input type="text" class="hover" hinttext="Enter your name" />
</body>
</html>

Counting number of characters typed on textarea using jQuery

There is textarea for input with id mytext

A div with id char_counter for counting number of characters typed in textarea

<div id="char_counter"></div>

jQuery code: using keyup to update the characters typed.

$(document).ready(function(){

$('#mytext').keyup( function(){

var text_length = $('#mytext').val().length;

$('#char_counter').html(text_length + ' characters are typed');

});

});

if space is not counted, we should use
var text_length = $.trim($('#mytext').val()).length;

Jiansen Lu's Computing Blog

Pages

Adsense

Popular Posts

Wednesday, September 25, 2013

ActionScript 3 (AS3): list all child MovieClip

Wednesday, September 18, 2013

CSS -look into float property

Monday, September 16, 2013

Different between top and margin-top in CSS.

Friday, September 13, 2013

load external web page into a div using jQuery

Thursday, September 12, 2013

PHP, verify input date format

Wednesday, September 11, 2013

Difference between margin and padding in CSS

Tuesday, September 10, 2013

Hide and show a text paragraph using jQuery

Hide and show a text paragraph using jQuery

Monday, September 9, 2013

Show and hide password checkbox for user password input

Thursday, September 5, 2013

Select and deselect all checkbox using jQuery

Wednesday, September 4, 2013

Hover over for a text hint box Using jQuery

Counting number of characters typed on textarea using jQuery