Javascript onLoad()
HTML(javascript.html)
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
Jquery show and hide
Example : Show/hide
HTML (jquery.html)
<html>
<head>
<title>www.qwebsite.blogspot.com</title>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv">
Isi konten anda di sini <a href="#" class="show_hide">hide</a>
</div>
</div>
</body>
</html>
Onclick event
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>
Example :
Field1:
Field2:
Alert Javascript
HTML( alert.html )
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Tekan Tombol!");
if (r==true)
{
alert("Anda menekan Ok!");
}
else
{
alert("Anda menekan No!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
Tutorial Dasar DOM
HTML (Dom.html)
Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
<html>
<head><title>Belajar DOM</title>
</head>
<body>
Ini text html biasa<br>
<table id="dom"><tr><td>one</td>
<td>two</td>
<td>three</td></tr>
<tr><td>four</td>
<td>five</td>
<td>six</td></tr></table>
<br><br><br>
Ini text yang dihasilkan Dom :<br>
<script type="text/javascript">
x=document.getElementById("dom").getElementsByTagName("td");
for (i=0;i<x.length;i++){
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>
Awesome Slideshow Javascript
Download Jquery plugin in here
HTML (slideshow.html)
<html>
<head><title>Javascript Slide Show</title>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>
<script type="text/javascript" href="jquery.min"></script> \\download Jquery min in this blog
<style>#slideshow {
position:relative;
height:393px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width: 153px;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
<body>
<div id="slideshow">
<img src="1.jpg" alt="Slideshow Image 1" width="153" height="393" class="active" />
<img src="2.jpg" alt="Slideshow Image 2" width="153" height="393" />
<img src="3.jpg" alt="Slideshow Image 3" width="153" height="393" />
</div>
</body>
</html>
Download all files in here
Contoh Lain ada di sini
Popular Posts
-
Cara membuka situs yang diblokir Oke disini saya hanya ingin memberikan sedikit ilmu yang saya punya yaitu cara membuka situs yang di blok...
-
Javascript onLoad() HTML(javascript.html) <html> <head> <script type="text/javascript"> function getCookie(c_nam...
-
Session PHP Session merupakan script yang berfungsi menyimpan data sementara dari website. Contoh Pengguna an Session : 1. Memulai...
-
Membuat Kode Transaksi Unik Otomatis Berdasarkan Tanggal Selengkapnya Click Here Fungsi... -
Assalamualaikum Wr.Wb Cara ganti nama facebook terbaru , Caranya : login faebook masing masing .. kalau suda... -
PHP Fungsi Contoh fungsi yang sederhana : PHP (fungsi.php) <html> <body> <?php function tulisnama() { echo "Muhammad Nur...
-
"Blue screen" ialah sebuah pesan error yang terjadi pada komputer anda terutama kalau anda memakai windows, yang bisa dijadik... -
saya mau share tentang cara buat status facebook kosong atau blank dan juga komentar nya, komentar kosong , hehheh .. buat yang udah tau ...
-
Pasang Password Di Flash Disk Tanpa Software Okeh Kita Langsung aja ke TKP Cekibrottt... 1. Buka Notepad lalu masukkan scrip...
-
Core i7 resmi diluncurkan dalam tiga versi quad-core. Ditilik dari harganya, Core i7 memang tidak murah. Namun jika Anda ingin merakit ...
Tidak ada komentar:
Posting Komentar