SEO mudah: Jquery

Showing posts with label Jquery. Show all posts

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 :

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

CSS HTML Javascript Jquery

Wafik ulinnuha 14:59 Add Comment

Wafik ulinnuha

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,

Hasilnya akan menjadi =>

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.

Memfilter CSS dengan Jquery

CSS HTML Jquery

Wafik ulinnuha 16:00 2 Comments

Wafik ulinnuha

Mengenal Fungsi Filtering Pada Jquery ( Recognize filtering in jquery )

Filter Css with Jquery

Hi Bloggers ,

Selamat sore, Bagi para Bloggers yang lagi belajar tentang Jquery .
untuk mempercantik blog nya biar makin Ciamik . :D

Nah kali ini Mudah-loh.blogspot.com
ingin mencoba membahas tentang

Mengenal Fungsi Filtering Pada Jquery
Fungsi Filter dan Not pada Jquery disini saya contohkan untuk
digunakan memfilter CSS anda , anda meFilter (memilih) warna
yang berbeda pada satu Tag HTML .

konsep nya sederhana jika anda menggunakan
fungsi Filter maka Tag tersebut yang di filter .
Sedangkan fungsi Not merupakan Invers ( kebalikan) dari fungsi Filter,
nah Sudah paham kan dengan Konsep nya .

Mari langsung saja Mengenal Fungsi Filtering Pada Jquery
Hal Hal yang perlu di siapkan .
file Jquery , bisa download di sini
Editor ( Notepad ++);
Browser ( Mozila , Google Chrome);
langsung saja buat sebuah file test.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".gaya").css("background-color", "yellow");
$("p").not(".gaya").css("background-color", "blue");
});
</script>
</head>
<body>
<h1>Hy Selamat Datang</h1>
<p>Hy di sini mudah-loh.blogspot.com.</p>
<p class="gaya">kita sedang mengetes .</p>
<p>pragraf tanpa class.</p>
<p class="gaya">paragraf dengan class</p>
</body>
</html>

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

Sekian Mengenal Fungsi Filtering Pada JquerySemoga Bermanfaat.

Cara Mengambil Attribut Data dengan Jquery

CSS HTML Jquery

Wafik ulinnuha 12:37 Add Comment

Wafik ulinnuha

Cara Mengambil Attribut Data Dari Select dengan Jquery ( How to get attribut data with jquery )

Hi bloggers,
selamat siang , kali ini Mudah-loh.blogspot.com

Bisanya kita hanya mengambil value dari select ,
Nah kali ini beda loh , kita akan membahas tentang

Cara Mengambil Attribut Data Dari Select dengan Jquery.

atrribut di sini biasanya di gunakan sebagai data tambahan .

Seperti contoh ketika anda memilih select X10 maka pada input
akan otomatis muncul Rp.12000 .

Konsep Cara Mengambil Attribut Data Dari Select dengan Jquery.

yaitu kita menambahkan attribut pada tag select (misal : data-id) dan
mengisinya sesuai kebutuhan ( misal 12000) .
setelah itu kita buat sebuah script Jquery , dengan logika ketika page terload ,

dan ketika kita memilih option misal X20 maka akan mencari data-id dari
option yang selected ( terpilih ) . Lalu akan kita masukan ke value input.

Masih bingung ? coba lihat script berikut

<select class="select2">
<option data-id="12000" value="2"> X10</option>
<option data-id="22000" value="2"> X20 </option>
<option data-id="51000" value="2"> X50</option>
</select>
<input type="text" id="nama" name="nama">
<script>
$(document).ready(function(){
$('.select2').change(function(){

var ee = $(this).find('option:selected').data('id');
$("#nama").val(ee);
});});</script>

Oh iya jangan lupa download dulu file Jquery.com sebelum menggunakannya.

Coba sekarang kita tes ,
jika berhasil maka hasilnya akan seperti ini

How to get attribut value with jquery, mengambil atrribut data dari select dengan jquery

Nah Sekian mudah-blogspot.com Cara Mengambil Attribut Data Dari Select dengan Jquery semoga bermanfaat.

Cara Membuat Inline Editing dengan jquery.

CSS HTML Jquery PHP

Wafik ulinnuha 12:50 Add Comment

Wafik ulinnuha

Cara Membuat Inline Editing dengan jquery ( how to make inline editing with jquery)

Selamat siang , kali ini Mudah-loh.blogspot.com
akan membahas tentang Cara Membuat Inline Editing dengan jquery.
Inline Editing yang di maksud itu yang seperti

Seperti Contoh di atas ketika anda mengeklik edit maka data akan berubah menjadi input
Dan tombol ubah ganti dengan Update .

Konsep Cara Membuat Inline Editing dengan jquery
Yaitu ketika kita klik ubah , Data pada tabel akan di ganti dengan Input yang berisi data ,
Jadi kita buat 2 buah file data yang satu biasa , dan yang satu dalam input dan Tombol ubah ,
Digantikan oleh Update dengan funsi hide and Show pada Jquery.

Jadi anda dapat langsung menggantinya , setelah itu klik tombol Update .
Sudah mudeng kan dengan konsep Cara Membuat Inline Editing dengan jquery.
sekarang kita buat scriptnya oke ,

<?php
include('../koneksi.php');
//tampilkan ke halaman
$i=1;
$tmpl=mysql_query("SELECT * FROM tbl_tambah ");
?>
<div>
<table id="urutkan" style="border:2px #ccc">
<thead><tr>
<th>ID</th>
<th>Nama</th>
<th>Nomer</a></th>
<th>Pengaturan</th></tr>
<tbody><?php
while($row=mysql_fetch_assoc($tmpl)){
?><form id="formnya<?php echo $row['id_pelanggan']; ?>" action="<?php echo$link;?>code/ubah_langganan.php" method="post">
<td><?php echo "$i"; ?>
<input name="id_pelanggan" type="hidden" id="id<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['id_pelanggan']; ?>">
</td>
<td><p id="tampilnama<?php echo $row['id_pelanggan']; ?>"><?php echo $row['nama']; ?></p>
<input style="display:none;" name="nama" type="text" id="nama<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['nama']; ?>">
</td>
<td >
<p id="tampilnomerlang<?php echo $row['id_pelanggan']; ?>"><?php echo substr($row[nomerlang],0,9);?>xxx</p>
<input style="display:none;" name="nomerlang" type="text" id="nomerlang<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['nomerlang']; ?>">
</td>
<td>
<a id="ubah<?php echo $row['id_pelanggan']; ?>"><button type="button"><span></span>Ubah</button></a>
<a style="display:none;" id="btn_ubah<?php echo $row['id_pelanggan']; ?>"><button type="submit"><span></span>Update</button></a>
<a href="../code/delete.php?id_pelanggan=<?php echo $row['id_pelanggan']; ?>"><button><span></span>Hapus</button></a>
</td>
</form>
</tr>

Setelah itu taruh file Cara Membuat Inline Editing dengan jquery di bawah dalam 1 file.

<script>
$(document).ready(function(){
$("#ubah<?php echo $row['id_pelanggan']; ?>").click(function(){
$("#tampilnama<?php echo $row['id_pelanggan']; ?>").hide();
$("#tampilnomerlang<?php echo $row['id_pelanggan']; ?>").hide();
$("#ubah<?php echo $row['id_pelanggan']; ?>").hide();
$("#btn_ubah<?php echo $row['id_pelanggan']; ?>").show();
$("#nama<?php echo $row['id_pelanggan']; ?>").show();
$("#nomerlang<?php echo $row['id_pelanggan']; ?>").show();
});
$("tbody").mouseover(function(){
$("#btn_ubah<?php echo $row['id_pelanggan']; ?>").hide();
$("#nama<?php echo $row['id_pelanggan']; ?>").hide();
$("#nomerlang<?php echo $row['id_pelanggan']; ?>").hide();
$("#tampilnama<?php echo $row['id_pelanggan']; ?>").show();
$("#tampilnomerlang<?php echo $row['id_pelanggan']; ?>").show();
$("#ubah<?php echo $row['id_pelanggan']; ?>").show();
});
});
</script>
<?php
$i++;}?>
</tbody></table>

Oh iya pastikan anda telah mendownload file Jquery , bisa download di jquery.com
Sekian Cara Membuat Inline Editing dengan jquery semoga bermanfaat.

Cara Membuat hitung mundur dengan jquery

CSS HTML Jquery PHP Tips And Trik

Wafik ulinnuha 08:15 Add Comment

Wafik ulinnuha

Cara Membuat hitung mundur dengan jquery ( How To Make Countdown with Jquery )

Make Countdown with Jquery

Hi Bloggers ,
Selamat siang , kembali lagi dengan Mudah-loh.blogspot.com

Pernah ngelihat countdown pada website ? (seperti pada saat login di kaskus )
untuk membuat countdown ( hitung mundur ).
Yang perlu anda siapkan yaitu file jquery , bisa unduh di Jquery
jika sudah siap semua , mari langsung ke topik
Cara Membuat hitung mundur dengan jquery,
tuliskan script :

<script type="text/javascript" src="../../js/jquery1.9.1.js"></script> 
<script type="text/javascript">
var WaktunyaBro = 5; 
$(document).ready(function() { startCountdown(); });
function startCountdown() {
if((WaktunyaBro - 1) >= 0){
WaktunyaBro = WaktunyaBro - 1;
$("#tungguyabro").html('Sabar ya tinggal<font style="font-size:125%;"> <b>' + WaktunyaBro + '</b></font> detik, Tunggu ya bro..!');
setTimeout(startCountdown, 1000);
}
else{
$("#tungguyabro").html('<a href="../dasbhoard">Klik untuk masuk ke dasbhoard</a>'); 
}
}
</script>
<div id="tungguyabro"></div>

Konsep dari script di atas yaitu anda mendefinisikan hitung mundur ( countdown) dari angka berapa ,
setelah selesai akan muncul link baru.
Sekian Membuat hitung mundur dengan jquery dari Mudah-loh.blogspot.com semoga bermanfaat.