Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Sunday, January 9, 2011

Hanya angka yang bisa diinput ...

Sebelumnya saya pernah membahas bagaimana cara menginputkan angka saja pada form delphi tetapi kali ini saya ingin memberikan contoh kepada sobat bagaimana cara menginputkan angka saja pada field html contohnya seperti ini untuk mudahnya langsung copas aja dech trus save dengan nama terserah sobat yang penting ekstensinya .html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>textbox to accept only numbers (digits)</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
   
    //called when key is pressed in textbox
    $("#quantity").keypress(function (e) 
    {
      //if the letter is not digit then display error and don't type anything
      if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
      {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
        return false;
      }   
    });

  });
  </script>

</script>
<style type="text/css">
body {
    font: 12px Verdana,Arial, Helvetica, sans-serif;
    margin: 10px auto;
    width: 400px;
}
 p { color:blue; }
  #errmsg { color:red; }
</style>
</head>
<body>

<p>
    The textbox below only accepts digits, Try typing alphabates
  </p>
  Quantity : &nbsp;<input type="text" name="quantity" id="quantity" />&nbsp;<span id="errmsg"></span>

</body>
</html>

Selamat Mencoba ...

Thursday, November 11, 2010

Images Zoom Menggunakan Mootools

Kali ini saya ingin berbagi dengan agan2 semua tentang bagaimana cara membuat "Images Zoom" yang sangat menarik dan patut dicoba tentunya. Ok, daripada lama ga' jelas mending langsung kita mulai aja ... yang pertama buka notepad atau editor lainnya setelah itu copas code dibawah ini.
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zoom Images - mootools</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox.js"></script>
</head>

<body>
<table width="40%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;
        </td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" valign="top"><marquee behavior="alternate">Sample images zoom menggunakan mootools 1.2.1</marquee></td>
  </tr>
  <tr>
    <td width="23%" valign="top"><div align="center"><a href="images/imutz banget.jpg" class="bumpbox" rel="300-450"><img src="images_small/imutz banget.jpg" width="120" height="175" border="0" /></a></div></td>
    <td width="1%" valign="top">&nbsp;</td>
    <td width="23%" valign="top"><div align="center"><a href="images/Cewek Seksi.jpg" class="bumpbox" rel="300-450"><img src="images_small/Cewek Seksi.jpg" width="120" height="175" border="0" /></a></div></td>
    <td width="2%" valign="top">&nbsp;</td>
    <td width="23%" valign="top"><div align="center"><a href="images/816881236352661.jpg" class="bumpbox" rel="300-450"><img src="images_small/816881236352661.jpg" width="120" height="175" border="0" /></a></div></td>
  
    <td width="1%" valign="top">&nbsp;</td>
    <td width="12%" valign="top"><div align="center"><a href="images/816881275603115.jpg" class="bumpbox" rel="300-450"><img src="images_small/816881275603115.jpg" width="120" height="175" border="0" /></a></div></td>
  </tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
alo sudah selesai copas-nya simpan dengan nama "index.htm" tanpa tanda ("). Selamat mencoba ...

Lihat Demo bisa dilihat disini :
Versi Demo
Download Source code

Langganan Via E-mail

Berbagi Inspirasi Tentang Komputer

Free Submit Your Site

Free Submit Your Site
Submit Your Site To The Web's Top 50 Search Engines for Free!

Add a Link To SonicRun.com

Add a Link To SonicRun.com
Add a Link To SonicRun.com

Tantangan50 Juta

Tantangan50 Juta
blakblakan.com