Articles

Our Services

Mendisable halaman web

Dalam aplikasi web, kita ingin supaya user memperhatikan form yang harus diisi. Untuk memaksa user mengisi form, kita ingin mendisable seluruh content halaman tersebut dan kita isi dengan suatu tampilan tertentu. Berikut tutorial untuk mendisable suatu halaman web.

Misal pada halaman tersebut ada 2 tempat:
a. content: yang akan didisable
b. control: tempat form akan diletakkan

Untuk itu halamannya sebagai berikut:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blok</title>
<style type="text/css">

</style>
</head>

<body>

    <div id="content"><a href="index.html" target="_blank"><img src="hd1.jpg" border="0"/></a><br />
        <br>Tulisan apa saja ada <a href="index.html" target="_blank">link</a> juga
        <br>
        <br><a href="javascript:blok()"> Blok!</a>
    </div>

    <div id="control"><div style="background-color:white;width:200px;"><a href="javascript:buka_blok()">Close</style></a></div>
    </div>

Sesudah tersebut kita membuat javascript untuk mendisable dan mengenable:
<script language="javascript">
function blok()
{
    var content=document.getElementById("content");
    var w=content.offsetWidth;
    var h=content.offsetHeight;

    w=w+20;
    h=h+20;
    var control=document.getElementById("control");
    control.style.width=w + "px";
    control.style.height=h + "px";
    control.style.visibility="visible";
}

function buka_blok()
{
    var control=document.getElementById("control");
    control.style.width="0px";
    control.style.height="0px";
    control.style.visibility="hidden";
}

</script>

Atau secara keseluruhan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blok</title>
<style type="text/css">

</style>
</head>

<body>

    <div id="content"><a href="index.html" target="_blank"><img src="hd1.jpg" border="0"/></a><br />
        <br>Tulisan apa saja ada <a href="index.html" target="_blank">link</a> juga
        <br>
        <br><a href="javascript:blok()"> Blok!</a>
    </div>

    <div id="control"><div style="background-color:white;width:200px;"><a href="javascript:buka_blok()">Close</style></a></div>
    </div>

<script language="javascript">
function blok()
{
    var content=document.getElementById("content");
    var w=content.offsetWidth;
    var h=content.offsetHeight;

    w=w+20;
    h=h+20;
    var control=document.getElementById("control");
    control.style.width=w + "px";
    control.style.height=h + "px";
    control.style.visibility="visible";
}

function buka_blok()
{
    var control=document.getElementById("control");
    control.style.width="0px";
    control.style.height="0px";
    control.style.visibility="hidden";
}

</script>

</body>
</html>