Showing posts with label Java Script. Show all posts
Showing posts with label Java Script. Show all posts

Saturday, July 18, 2009

Open Source Photo Gallery Designed with Mootools Javascript Library


(E) 2 Photo Gallery adalah sebuah galeri open source yang dibangun dengan Javascript Mootools Perpustakaan yang kompak, modular, Object-Oriented javascript framework. Dirancang untuk memungkinkan Anda untuk meng-upload foto ke folder yang dikehendaki, memberitahu (E) 2 Galeri Foto apa folder untuk melihat dan secara otomatis akan mengambil foto dengan menggunakan PHP.

Download source code lengkap disini

atau

http://www.ziddu.com/download/5665824/e2_photo_gallery_full.zip.html

Friday, May 15, 2009

Membuat check all dan uncheck all

Tulisan ini cukup sederhana yaitu bagaimana kita membuat tombol untuk menangani checklist yang banyak, check all dan uncheck all.
Disini saya membuatnya dengan javascript, silahkan lihat kode nya 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=utf-8" />
<title>Latihan Javascript :: membuat check all dan uncheck all</title>
</head>

<script type="text/javascript">
function Check(){
//Ambil semua elemen dalam id formCheck
allCheckList = document.getElementById("formCheck").elements;
//Hitung banyaknya elemen
jumlahCheckList = allCheckList.length;
//Jika tombolCheck bernilai "Check All"
if(document.getElementById("tombolCheck").value == "Check All"){
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset true (dicentang)
allCheckList[i].checked = true;
}
//Set nilai tombolCheck menjadi "Uncheck All"
document.getElementById("tombolCheck").value = "Uncheck All";
//Jika tombolCheck tidak bernilai "Check All" (sudah dirubah menjadi Uncheck All)
}else{
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset false (tidak dicentang)
allCheckList[i].checked = false;
}
//Set nilai tombolCheck menjadi "Check All"
document.getElementById("tombolCheck").value = "Check All";
}
}
</script>

< ?php
$hobi = $_POST['hobi'];
if(empty($hobi)){
?>

<b>Silahkan Pilih Hobi Anda :</b>
<form id="formCheck" method="POST" action="check_all.php">
<input type="checkbox" name="hobi[1]" value="Baca Koran" />Baca Koran<br />
<input type="checkbox" name="hobi[2]" value="Memancing" />Memancing<br />
<input type="checkbox" name="hobi[3]" value="Bikin Susah Orang" />Bikin Susah Orang<br />
<input type="checkbox" name="hobi[4]" value="Menulis" />Menulis<br />
<input type="checkbox" name="hobi[5]" value="Demonstrasi" />Demonstrasi<br />

<input type="button" id="tombolCheck" value="Check All" onClick="Check();"/>
<input type="submit" value="Submit" />
</form>

< ?php
}

if(is_array($hobi)){
echo '<b>Hobi yang anda pilih : <br />';
foreach($hobi as $indek=>$namahobi){
echo 'Hobi indek '.$indek.' : '.$namahobi.'<br />';
}
echo '<a href="check_all.php">Back »</a>';
}
?>

</script></html>

Silahkan lihat Demo nya disini
Atau Download disini

Saturday, September 20, 2008

Klik Kanan Gempa

-------
Script ini hanya jalan di Internet Explorer

Jika anda klik kanan maka browser akan bergetar !!
-------



contoh buka: http://www.ilmuwebsite.com/javascript/klik-gempa.htm

<html>
<head>
</head>
<body bgcolor="#000000">

<SCRIPT language=JavaScript>
<!--inizio-----mess per copiare

document.onmousedown=click
function click() {
times2=0
if ((event.button==2) || (event.button==3))
{
alert("Jangan klik kanan !!");
shake(20)
}
}
function shake(n) {
if (parent.moveBy) {
for (i = 20; i > 0; i--) {
for (j = n; j > 0; j--) {
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
         }
      }
   }
}
//fine copia-->
</SCRIPT>

</body>

</html>

Friday, August 15, 2008

Kalkulator dengan java script

Mari kita bahas tentang "java script".
Disini saya akan menjelaskan sedikit tentang pembuatan kalkulator dengan menggunakan java script yang nantinya akan bisa ditampilkan dalam web (berbasis web). Berikut ini contoh tampilan kalkulator tersebut dan asih bisa dirubah sesuai dengan keinginan desain anda:



Dan disini untuk scriptnya:

<CENTER>
<FORM name="Keypad" action="">

<!-- Original: http://www.dummyproof.com/javascripts -->

<! >
<! >

<TABLE>
<B>

<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0"
width=100%>
</TD>
<TD
</TD>
<TD>
<input name="btnClear" type="Button" value=" C "
onclick="Clear()">
</TD>
<TD><input name="btnClearEntry" type="Button" value="
CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD>
<input name="btnSeven" type="Button" value=" 7 "
onclick="NumPressed(7)">
</TD>
<TD>
<input name="btnEight" type="Button" value=" 8 "
onclick="NumPressed(8)">
</TD>
<TD>
<input name="btnNine" type="Button" value=" 9 "
onclick="NumPressed(9)">
</TD>
<TD>
</TD>
<TD>
<input name="btnNeg" type="Button" value=" +/- "
onclick="Neg()">
</TD>
<TD>
<input name="btnPercent" type="Button" value=" %
" onclick="Percent()">
</TD>
</TR>
<TR>
<TD>
<input name="btnFour" type="Button" value=" 4 "
onclick="NumPressed(4)">
</TD>
<TD>
<input name="btnFive" type="Button" value=" 5 "
onclick="NumPressed(5)">
</TD>
<TD>
<input name="btnSix" type="Button" value=" 6 "
onclick="NumPressed(6)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnPlus" type="Button"
value=" + " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button"
value=" - " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD>
<input name="btnOne" type="Button" value=" 1 "
onclick="NumPressed(1)">
</TD>
<TD>
<input name="btnTwo" type="Button" value=" 2 "
onclick="NumPressed(2)">
</TD>
<TD>
<input name="btnThree" type="Button" value=" 3 "
onclick="NumPressed(3)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnMultiply" type="Button"
value=" * " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button"
value=" / " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD>
<input name="btnZero" type="Button" value=" 0 "
onclick="NumPressed(0)">
</TD>
<TD>
<input name="btnDecimal" type="Button" value=" .
" onclick="Decimal()">
</TD>
<TD colspan=3>
</TD>
<TD>
<input name="btnEquals" type="Button" value=" =
" onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{

if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}

FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</SCRIPT>