Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Membuat Konversi Suhu Dengan Javascript Dan Bootstrap

Membuat Konversi Suhu Dengan Javascript Dan Bootstrap


Membuat Konversi Suhu Dengan Javascript Dan Bootstrap , Dengan bantuan Javascript kita akan membuat Konversi Suhu dinamis dengan html dan  . selain akan lebih indah dilihat, tampilan dari html akan lebih menarik  karena tampilan akan di buat rapih dengan Bootstrap.
Langkah awal kita perlu menginstall library bootstrap pada html yaitu dengan mendownload  file bootstrap , bisa di download di sini .
Atau bisa juga langsung download template Binary Admin nya disini
Letakkan file bootstrap tadi dalam 1 folder , 
 

Membuat Progressbar Dengan Jquery

cara mudah membuat progress bar dengan jqeury


Selamat Datang sahabat mudah , kali ini kita akan membahas Cara Membuat Progressbar Dengan Jquery .
Pasti sahabat sudah tahu tentang progressbar, tertanya mudah loh caranya membuat dengan menggunakan jquery.
Progressbar di gunakan untuk melihat bagaimana proses yang kita jalankan untuk membuka suatu dokumen , upload photo.





Langsung Saja Kita ke kodingnya
Silahkan copy kode di bawah ini
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="http://www.tutorialspoint.com/jquery/src/progressbar/jQuery-plugin-progressbar.css">
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="http://www.tutorialspoint.com/jquery/src/progressbar/jQuery-plugin-progressbar.js"></script>
</head>
<body>

 <div class="progress-bar position"></div>
 <div class="progress-bar position" data-percent="40" data-duration="1000" data-color="#ccc,yellow"></div>
 <div class="progress-bar position" data-percent="90" data-color="#a456b1,#12b321"></div>
 <input type="submit" value="reload">
 <script>
  $(".progress-bar").loading();
  $('input').on('click', function () {
    $(".progress-bar").loading();
  });
 </script>

</body>
</html>
 Script dan CSS diatas anda dapat download , karena masih online .

Baca juga artikel tentang membuat-option-tanpa-klik-submit-dengan Jquery 

Sekilas penjelasan script :

Pada bagian data-percent kita dapat ganti , berapa persen data yang di ingin kan , 
Pada data-duration merupakan durasi dalam menjalankan progress tersebut .

Maka hasilnya akan terlihat seperti di bawah ini ,

s Cara Membuat Progressbar Dengan Jquery .  Pasti sahabat sudah tahu tentang progressbar, tertanya mudah loh caranya membuat dengan menggunakan jquery.  Progressbar di gunakan untuk melihat bagaimana proses yang kita jalankan untuk membuka suatu dokumen , upload photo. #jquery , #Tutorial,#javascript,#mudah#progressbar
Tutorial Membuat progressbar

Setelah di klik reload hasilnya akan seperti ini :

s Cara Membuat Progressbar Dengan Jquery .  Pasti sahabat sudah tahu tentang progressbar, tertanya mudah loh caranya membuat dengan menggunakan jquery.  Progressbar di gunakan untuk melihat bagaimana proses yang kita jalankan untuk membuka suatu dokumen , upload photo. #jquery , #Tutorial,#javascript,#mudah#progressbar
Tutorial Membuat progressbar

Baca juga artikel tentang Cara-mengambil-attribut-data-dengan jquery


Sekian tutorial Cara Membuat Progressbar Dengan Jquery , semoga dapat membantu .
Bagian tutorial ini agar bertambah ilmu kita :)
Wassalamu'alaikum Wr.Wb

Membuat option tanpa klik submit dengan onChange Javascript

Membuat option tanpa klik submit dengan onChange Javascript

Membuat input tanpa submit dengan javascript
Hi Bloggers ,

Selamat siang sahabat mudah-loh , kali ini kita akan mencoba
Membuat option tanpa klik submit dengan onChange Javascript
mungkin biasanya sahabat mudah-loh membuat input data biasanya
harus klik tombol submit, (untuk contoh seperti pengaturan privasi apada Facebook).
Nah disini saya buat tutorial Membuat option tanpa klik submit dengan
onChange Javascript ,jadi kita ga perlu klik tombol submit untuk menginput data.
Gimana sudah ada gambarannya ?
jika sudah ayo kita lanjut menuliskan scriptnya .

<form id="form3" method="post" action="" >
<select  id="tahun"name="tahun" onchange="document.getElementById('form3').submit();"><?php
//Membuat pengulangan data menggunakan for
for($thn=1990;$thn<=$year;$thn++){
echo "<option value=".$thn.">".$thn."</option>";
}?></select></form>
<?php
$tahun=$_POST['tahun'];
echo "$tahun";
?>
maka hasil dari script diatas akan seperti ini,

77Hasilnya akan menjadi => 44

Perhatikan gambar diatas terdapat nilai option 2001 .

Konsep dari script diatas anda menambahkan onchange pada select , maksud dari
document.getElementById('form3').submit();  yaitu mengambil id form3 dan klik submit .
intinya kita memaksa form3 untuk men Submit .
dan pada tag PHP , kita mengambil post tahun , lalu menampilkannya
$tahun=$_POST['tahun'];
echo "$tahun";

Nah Ternyata  Mudah-loh  eBelajar Jquery .
yang penting mau mencoba dan penuh kreasi .

Sekian Membuat option tanpa klik submit dengan onChange Javascript.