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

Membuat Progress Bar Seperti YouTube Menggunakan Plugin Jquery

2:34 AM Add Comment


Dalam posting kali  ini kita akan membuat  Progress Bar Seperti  YouTube menggunakan jquery. Mungkin anda sering nonton ataupun upload video di youtube, maka Anda sering melihat progress bar  warna merah di halaman atas YouTube saat proses loading halaman   nah  Progress Bar Seperti  YouTube yang akan coba kita implementasikan untuk kode fulny di sini



Kita langsung saja apa saja  yang di butuhkan 
1. jquery.min.js
2. jquery.transit.js
3. ytLoad.jquery.js

Setelah bahan sudah siap lalu ikuti langkah-langkah di bawah ini untuk menampilkan Progress Bar   di bagian atas halaman.

Langkah 1 :
Letakan file file jquery tadi
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script> >

Langkah 2 :
Sertakan skrip jquery.transit.js untuk efek transisi CSS  
<script type = "text / javascript" src = "jquery.transit.js"> </ script>

Langkah - :
Panggil fungsi jquery di bawah ini untuk menampilkan Progress Bar di bagian atas halaman.
$ (document) .ready (function () {
    $ .ytLoad ();
    // Lakukan panggilan ajax ...
    $ ('# displayAjaxContent'). load ('ajax.php');
 });

Langkah-4:
Pastekan code di bawah  untuk menampilkan data
<div id = "displayAjaxContent"> </ div>

Sampai di  sini kitas sudah  selesai dengan bagian konfigurasi. Pada dasarnya Plugin ini menampilkan Progress Bar, ketika kita  mencoba memuat halaman  .
untuk source code lengkapnya bisa anda donload di sini atau copy code di bawah
index.html
Halaman ini terdiri dari file library jquery, ajax progress bar css dan file jquery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery ytLoad demo</title>
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
    $.ytLoad();
    // Perform ajax call...
    $('#displayAjaxContent').load('ajax.php');              
 });
</script>
           
<style>
body {
margin: 0px;
padding: 0px;
background-color: #EBEBEB;
border-bottom: 1px solid #e8e8e8;
}
#displayAjaxContent {
width: 800px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>

<div id="displayAjaxContent"> </div>

</body>
</html>
Cukup sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan berkomentar

Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

5:21 AM Add Comment

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook  yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?



ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan
Langkah 1:
Kita butuh file jquery dan css yakni  :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />
Langkah ke 2:
Kita buat file dengan nama tes.php copy kode di bawah
<div id="chat-sidebar">

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar2.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nani')">nani</a> </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nini')">nini</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('lala')">lala</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar5.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('deni')">deni</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a>  </span>
      </div>     

       
</div>     

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan  donlod di sini
Sekian postingan kali ini semoga bermanfaat terima kasih

Tutorial Membuat Game ular menggunakan HTML dan Jquery

4:59 AM Add Comment

Bismilah

Lama tidak posting kali ini saya akan membagikan game ular atau game snake sebenarnya game ini bukan buatan saya namun dengan game ini saya banyak belajar ok langsung saja Let,s  go pertama apa saja yang di butuhkan tentunya file jquery.min.js setelah itu kita buat file dengan nama index.hml lalu pastekan kode di bawah



 <!DOCTYPE html>
<html>
<head>
 <title> Snake Game </title>
 <link rel="stylesheet" href="snake.css">
 <!-- jQuery -->
<script src="jquery.min.js" type="text/javascript"></script>
<style>
#container {
 margin: auto;
 width: 600px;
}

#myCanvas {
 background-color: black;
 border: 3px white solid;

}

#gameover {
 position : absolute;
 top: 200px;
 left: 600px;
 font-size: 25px;
 text-align: center;
 color: #FFFFFF;
 display: none;
}

#score {
 width: 600px;
 height: 100px;
 margin: auto;
 background-color: white;
 border: 3px black solid;
color: black; 
-webkit-box-shadow:0 0 20px #000;
 -moz-box-shadow: 0 0 20px #000;
 box-shadow:0 0 20px #000; 
 padding-left:5px; 

}

#current, #highest {
 font-size : 25px;
 color: black;
 text-align: center;

}

a {
 text-decoration: none;
 color : #FFFFFF;
 background-color: #9c27b0; 
 padding-left:5px; 
  padding-right:5px; 
  border-radius: 7px;
}
a:hover{
 text-decoration: none;
 color : #FFFFFF;
 background-color: #673ab7; 
 padding-left:5px; 
  padding-right:5px; 
  border-radius: 7px;
}
span {
 color : #FFFFFF;
}
</style>

<script>
$(document).ready(function() {

 var canvas = $("#myCanvas")[0];
 var ctx = canvas.getContext("2d");
 var w = $("#myCanvas").width();
 var h = $("#myCanvas").height();
 var cw = 15;
 var food;
 var snake;
 var d = "RIGHT";

 var gameloop = setInterval(update, 100);

 function update() {
  if (d == "RIGHT")
   snake.x = snake.x + 1;
  else if (d == "LEFT")
   snake.x = snake.x - 1;
  else if (d == "UP")
   snake.y = snake.y - 1;
  else if (d == "DOWN")
   snake.y = snake.y + 1;

  check_borders();
  check_food();
  blank();
  paint_cell(food.x, food.y, "grey");
  paint_cell(snake.x, snake.y, "green");
 }

 function showGameOver() {

  var current = $('#current').text();
  $('#final').text(current);
  $('#gameover').fadeIn();
 }

 function updateHighScore() {
  var current = $("#current").text();
  var highest = $("#highest").text();
  if (parseInt(current) > parseInt(highest)) {
   $('#highest').text(current)
  }
 
 }

 function placeFood() {
  food = {
   x : Math.round(Math.random()*(w-cw)/cw),
   y : Math.round(Math.random()*(h-cw)/cw)
  }
 }

 function placeSnake() {
  snake = {
   x : Math.round(Math.random()*(w-cw)/cw),
   y : Math.round(Math.random()*(h-cw)/cw)  
  }
 }

 function blank(){
  //Paint The Canvas
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "white";
  ctx.strokeRect(0, 0, w, h);

 }

 function check_borders() {
  if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {
   clearInterval(gameloop);
   showGameOver();
  }
 }

 function paint_cell(x,y, color){
  ctx.fillStyle=color;
  ctx.fillRect(x*cw,y*cw,cw,cw);
  ctx.strokeStyle="white";
  ctx.strokeRect(x*cw,y*cw,cw,cw);
 }

 function check_food() {
  if (food.x == snake.x && food.y == snake.y) {
   var current = parseInt($('#current').text());
   current += 1;
   $('#current').text(current);
   placeFood();
  }
 

 }

 placeFood();
 paint_cell(food.x, food.y, "grey");
 placeSnake();
 paint_cell(snake.x, snake.y, "green");

 //Keyboard Controller
 $(document).keydown(function(e){
  //39: RIGHT
  //37: LEFT
  //38: UP
  //40: DOWN
  var key = e.which;
  if(key == "37") {
   snake.x -= 1;
   d = "LEFT";
  }
  else if(key == "38") {
   snake.y -= 1;
   d = "UP";
  }
  else if(key == "39") {
   snake.x += 1;
   d = "RIGHT";
  }
  else if(key == "40") {
   snake.y += 1;
   d = "DOWN";
  }

  check_food();
  blank();
  color = "grey";
  paint_cell(food.x, food.y);
  color = "green";
  paint_cell(snake.x, snake.y);

 });

});
</script>
</head>
<body>
 <div id="container">
  <div id="gameover">
   Game over!
   <br>
    skor kamu <span id="final"></span>
   <br>
   <a onClick="window.location.reload()" href="#">klik untuk main lagi</a>
  </div>
  <canvas id="myCanvas" width="600" height="450">
   Your browser does not support the canvas feature
  </canvas>
  <div id="score">
   <div>skor kamu:<span id="current">0</span>
   </div>
   <div>gunakan panah ke kiri kanan atas dan bawah untuk menggerakan  <span id="highest"></span>
   </div>
  </div>
 </div>



</body>
</html>
Cukup sekian postingan kali ini semoga bermanfaat untuk source codenya silahkan download di sini

Subscribe to: Posts (Atom)