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
<textarea id="mytext" ></textarea>
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;