Home JavaScript

Sample Use of JavaScript OnFocus and OnBlur Event

You can see this example on many sites today such as yahoomail.

When you click on the search box, the word “Search” will gone. When you click on other part of the webpage, the word “Search” comes back in it.

HOW TOs.

Step 1: Create your index.html file and put the following codes:

<html>
     <head>
          <title>Sample Use of JavaScript OnFocus and OnBlur Event</title>
     </head>
<body>
     <input type="text" value="Type keywords here..." size="40"
       OnFocus="if(this.value=='Type keywords here...') this.value='';"
       OnBlur="if(this.value=='') this.value = 'Type keywords here...';" />
</body>
</html>

TIPs

This thing is used often in search boxes. You will save webpage space ‘coz you won’t have to put a label “Search” before the search box

Download Source Code

You can download all the code used in this tutorial for only $5 $1!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Thank you for reading! Belated Merry Christmas and Advanced Happy New Year Everyone! :)

How To Refresh Greybox Parent Page

I wonder why its hard to find this tutorial on the web. So I decided to make my own. This snippet is useful if you’re editing data in the greybox pop up window and then you want to reflect the changes in its parent window by refreshing it.

In case you want to test this code instantly, you may download the code or see the result of this tutorial live:

DOWNLOAD SOURCE CODE LIVE DEMO

Step 1: Download Greybox here and place it inside you js/ directory.

Step 2: Create your index.php file, with these codes inside:

<html>
     <head>
          <title>How To Refresh Greybox Parent Page</title>

          <script type="text/javascript">
               var GB_ROOT_DIR = "js/greybox/";
          </script>
          
          <script src="js/greybox/AJS.js" type="text/javascript">
          </script>
          <script src="js/greybox/AJS_fx.js" type="text/javascript">
          </script>
          <script src="js/greybox/gb_scripts.js" type="text/javascript">
          </script>
          <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">       

          <script language="javascript" type="text/javascript">
               // we will use greybox' afterclose function to reload the parent page
               // after closing the grebox pop up window
             <!--
                    function afterclose() {
                         window.location.reload();
                    }        
               // -->
          </script>

     </head>
<body>

     <b>This is the greybox parent window</b>
     <p>
          <a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
               Click this link to greybox pop up
          </a>
     </p>

     Textbox with default input: 
     <input name="sample_textbox" size="40" type="text" value="some predefined value" />

</body>
</html>

Step 3: Create your greybox pop up page which is greybox_pop_up.php with these codes inside:

<html>
     <head>
          <title>This is the greybox pop up</title>
          <script type='text/javascript'>
          function redirect_to_parent(){
               parent.parent.window.location = "index.php";
               parent.parent.GB_hide();
          }
          </script>
     </head>
<body onunload="redirect_to_parent();"> <-- The important part -->


     <h2>This is the greybox pop up window</h2>
     <form>
          <input type="button" value="Close This Window" onclick="parent.parent.GB_hide();"> 
     </form>


</body>
</html>

Step 4: You should have this files by now:

How To Refresh Greybox Parent Page

Final files in this tutorial

Step 5: Testing

  • If you’re gonna run index.php, you should see this in your browser:
  • Our index.php file

    Our index.php file

  • Change the predefined textbox value to any values you want, like the following:
  • Textbox with changed predefined value

    Textbox with changed predefined value

  • Click the link to show the greybox pop up
  • Greybox pop up window

    Greybox pop up window

  • Close the pop up window, if the textbox value returned to “some predefined value”, it means that the parent page was refreshed.

By the way, if you’re not yet familiar with greybox, I also have a tutorial on how to use greybox. That’s it! Hope it helps :)

Home jQuery

How To Use jQuery Table Sorter With A Database

jquery-tutorial
Hi there! Today we’re going to do a script that:

  1. Get list of data from a database.
  2. Arrange those data into a table, so that
  3. It will be sortable (without page refresh) once you click its header.

How To Use Table Sorter With A Database

All of these are done with the help of TableSorter. It is a jQuery plugin that lets you sort your tables without refreshing page.

tablesorter
 

Flexible client-side table sorting

This one is beautiful when you want to sort hundreds of table rows really quick. A thousand table rows could be sorted a bit slower, but still effective.

Step 1: Download tablesorter and place it inside your js/ directory
Step 2: You can also download a theme here (I used Blue Skin) for your table.
Step 3: Create your database table. You could have this one, just add more records if you want:

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(32) NOT NULL,
  `lastname` varchar(32) NOT NULL,
  `email` varchar(32) NOT NULL,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `firstname`, `lastname`, `email`, `username`, `password`) VALUES
(1, 'John', 'Doe', 'john@gmail.com', 'johnny', 'john'),
(2, 'Albert', 'Minston', 'albert@gmail.com', 'albert', 'albert');

Step 4: Create your database configuration file (i got config_open_db.php) and index.php file. Place the following codes inside the index.php file.

<html>
   <head>
        <title>How To Use Table Sorter With A Database</title>
        <!-- we will use the 'blue' theme -->
        <link href='blue/style.css' rel='stylesheet' type='text/css' />
   </head>
<body>
<?php
//connect to database
include 'config_open_db.php';

//query the database
$sql = "select * from users";
$rs = mysql_query ( $sql );

//construct the table with id 'your-table'
echo "<table id='your-table' class='tablesorter'>";
    echo "<thead>"; //thead tag is required for using tablesorter
        echo "<tr>";
            echo "<th>Lastname";
            echo "<th>Firstname";
            echo "<th>Email";
            echo "<th>Username";
            echo "<th>Password";
        echo "</tr>";
    echo "</thead>";
echo "<tbody>"; //tbody tag is required for using tablesorter

//looping through retrieved data
while ( $row = mysql_fetch_array ( $rs ) ){
    extract ( $row );
    echo "<tr>";
        echo "<td>$lastname</td>";
        echo "<td>$firstname</td>";
        echo "<td>$email</td>";
        echo "<td>$username</td>";
        echo "<td>******</td>";
    echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
    
<!-- include jQuery library and table sorter plugin -->
<script type='text/javascript' src='js/tablesorter/jquery-latest.js'>
</script>
<script type='text/javascript' src='js/tablesorter/jquery.tablesorter.min.js'>
</script>

<script type='text/javascript'>
    $(document).ready(function() { 
        $("#your-table").tablesorter({ 
            //for example we want to disable the 
            //password column (5th column) from sorting
            //we will specify '4' since it was indexed
            //(count starts at '0')
            //and set its property to 'false'
            headers: { 
                4: {    
                    sorter: false 
                }
            }
        }); 
    });
</script>
</body>
</html>

Hope this helps. :)

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Thank you for learning from our post about: How To Use jQuery Table Sorter With A Database.

SHA1 Hashing Algorithm

If you're feeling lazy right now to create your own hashing algorithm (like me haha!), here's one of best built in hashing algorithm with its new feature in PHP5 - SHA1. It uses US Secure Hash Algorithm 1.

I didn't hear any successful hacking attempts or tools for sha1 yet. (If you have, please pm me or comment to this post! thanks... ) Unlike for MD5 hashing, there are successful hacking attempts discovered.


HOW TO's
*Comments on codes serves as its explanation

Step 1: Put the following PHP code in your index.php file.

<?php
$str = 'dalisay'; // we're gonna hash this string

echo sha1( 'dalisay' ); // to be seen on the page

echo nl2br("nn"); // just some line breaks

// in this part, we're just gonna test if sha1 is working in your server
// the random number and digits is the hash code for string 'dalisay'
// the condition for a login system with sha1 passwords goes like this
if ( sha1( $str ) == '49d8801436095c7a0445a3c53c7d31270223069c' ){
    echo "Yes";
}else{
    echo "No";
}
?>

Step 2: Testing. If you end up something like this, sha1 is working fine.


Final output for the codes above


TIPs
If you're going to use sha1 for passwords to be stored in the database, make the datatype of your password field to BLOB type, just to make it more secure. :)



Thank you for reading! :)

How To Use Greybox

Greybox is another beautiful way not only to display your site contents or websites in a pop up window but also to do database operations in it. 
Image from http://orangoo.com

How To's.
*Comments on codes serves as its explanations.
Step 1: Download Greybox here.
Step 2: Create your js/ directory and place greybox in it.
Step 3: Create your index.php file and it should have the following codes in it:

<html>
<head>
<title>How To Use Greybox</title>

<script type="text/javascript">
var GB_ROOT_DIR = "js/greybox/";
</script>

<script src="js/greybox/AJS.js" type="text/javascript"></script>
<script src="js/greybox/AJS_fx.js" type="text/javascript"></script>
<script src="js/greybox/gb_scripts.js" type="text/javascript"></script>
<link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">

</head>
<body>

<b>This is the greybox parent window</b>
<p>
<a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
Click this link to greybox pop up
</a>
</p>

</body>
</html>

Step 4: Create your greybox_pop_up.php with these codes in it:

<html>
<head>
<title>This is the greybox pop up</title>
</head>
<body>
<h2>This is the greybox pop up window</h2>
</body>
</html>

Step 5: Run your index.php, click the link to test if greybox is working.
our index.php
Greybox pop up after clicking the "Show greybox pop up link"
Tips.

You can do many things with greybox. It prevents you from the hassle of refreshing the whole page.