Kategori: HTML

Memindahkan Context console Firebug pada iframe HTML

Kita dapat melakukan ujicoba javascript secara langsung di halaman html, yaitu dengan menggunakan console firebug. Kami pernah mengalami kesulitan dalam melakukan ujicoba javascript, yang mana javascript tersebut diload di salah satu halaman iframe html. Dan ini sebagai catatan kami ketika lupa, jalankan skrip ini di console firebug. Skrip ini bertujuan untuk memindahkan context console firebug ke iframe HTML tertentu:


javascript:with(_FirebugCommandLine){

cd($$("#mainFrame")[0].contentWindow)

};

dimana #mainFrame adalah iframe yang akan diuji. Setelah itu lakukan pengujian skrip di iframe tersebut. Semoga bermanfaat.

.reset() form jQuery

Lakukan:


$('#idForm')[0].reset();

nilai pada input didalam form dengan id=’idForm’ di reset.

Source code nya:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#b_refresh').click(function(){
$('#idForm')[0].reset();
});
});
</script>
</head>
<body>
<form id='idForm'>
Nama: <input type='text' name='nama' value=''><br>
Alamat: <input type='text' name='nama' value=''><br>
No. Telpon: <input type='text' name='nama' value=''><br>
Gaji: <input type='text' name='nama' value=''><br>
<input type='submit' value='Go'>&nbsp;<input type='button' id='b_refresh' value='Reset'>
</form>
</body>
</html>

Demo disini.

Corat-coret 06 – jquery.live()

Dengan menggunakan jquery.live():

$(".tombol_dgn").live("click", function(){
$('#dgn_live').after("<button class='tombol_dgn'>Tombol dengan live</button>");
});

Dengan menggunakan jquery.click():

$(".tombol_bkn").click(function(){
$('#bkn_live').after("<button class='tombol_bkn'>Tombol tanpa live</button>");
});

Skrip lengkap untuk demo:

<html>
<head>
<title>Live Jquery</title>
<script src='jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tombol_dgn").live("click", function(){
$('#dgn_live').after("<button class='tombol_dgn'>Tombol dengan live</button>");
});

$(".tombol_bkn").click(function(){
$('#bkn_live').after("<button class='tombol_bkn'>Tombol tanpa live</button>");
});
});
</script>
</head>
<body>
<div id='dgn_live'>
<button class='tombol_dgn'>Tombol dengan live</button>
</div>
<div id='bkn_live'>
<button class='tombol_bkn'>Tombol tanpa live</button>
</div>
</body>
</html>

Lihat Demo

corat-coret04

<pre><?php 
include('include/init.php'); 
//include('include/xajax/xajax.inc.php');

/***************************************************
 * ajax from slide show random product (no smooth)
 ***************************************************/
function randomproduct(){
	$xjresp = new xajaxResponse();

	$randomproduct = "<a href='javascript:;' onclick=\"xajax_randomproduct();\" >
			<h2 title=\"Etalase produk\">Etalase Produk ...</h2></a>".produk()."
			<div class=\"clear\"></div>";
	
	$xjresp->assign('randomproduct','innerHTML',$randomproduct);

	return $xjresp;
}

/**************************************
 * Initialization xajax js framework
 **************************************/
$xajax = new xajax();

$xajax->registerFunction("randomproduct");

$xajax->processRequest();

//$include_xajax = 'include/xajax/';

$xajax_js = $xajax->getJavascript('include/xajax/');
?>

<!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">

<?php 
/******************
 * head HTML
 ******************/
echo headstart();
echo $xajax_js;
echo headend();

/******************
 * All content
 ******************/ 
$content = "<div id=\"content-wrapper\">		
	  		<img src=\"images/home-photo.jpg\" class=\"float-left\" alt=\"Logo PT. Bangun Citra Fajar\" />
	  		<h2>Selamat Datang di PT. BCF</h2>
	  		<p>Bangun Citra Fajar adalah perusahaan rekanan 
	  		PT. Trikarya, kami bergerak di bidang produksi pagar. 
	  		Bangun Citra Fajar mampu mengerjakan dan 
	  		memproduksi pagar sesuai dengan standart 
	  		atau permintaan pelanggan.</p>
	  		<p>Kami dapat dihubungi <a href='tentangkami.php'>disini</a>
	  		atau melalui Yahoo! Mesenger:</p>
	  		<center>
	  		<p><a href=\"http://messenger.yahoo.com/edit/send/?.target=bcf_riyanto\"> 
	  		<img src=\"http://opi.yahoo.com/yahooonline/u=abu_mushab78/m=g/t=2/l=us/opi.jpg\" border=\"1\" />
	  		</a>
	  		<a href=\"http://messenger.yahoo.com/edit/send/?.target=bcf_riyanto\"> </a>
	  		</p>
	  		</center>
	  		<div class=\"clear\"></div>
  		</div>
  
		<div id=\"randomproduct\">
			<div class=\"clear\"></div>
		</div>";

/******************
 * HTML Viewer 
 ******************/
$bodi = new view();
$bodi->body("home","xajax_randomproduct()");
$bodi->menu(menu());
$bodi->content($content);
$bodi->menu_footer(menu_footer());
$bodi->footer(footer());

echo $bodi->tampilkan();
?>
</html></pre>