Berita Anda: JavaScript | Berita dalam dan luar negeri Dengan Multi Bahasa

Home » Penelusuran JavaScript

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut.

File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/js.js"></script>
</head>
<body>
<div class="menu_atas">
<div class="kiri">
<div class="logo">
<img src="asset/icon/logo.png">
</div>
<div class="cari">
<div class="input">
<input type="text" name="cari" placeholder="Cari">
<div class="cr">
<img src="asset/icon/cari.png">
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="menu">
<div class="m">
<div class="ic_prof">

</div>
<div class="nama">
<a href="#">Coding</a>
</div>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Beranda</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Buat</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m2">
<div class="ic">

</div>
</div>
<div class="m2">
<div class="ic2">

</div>
</div>
<div class="m2">
<div class="ic3">

</div>
</div>
<div class="m2">
<div class="ic4">

</div>
</div>
<div class="m2">
<div class="ic5" id="drop">

</div>
<div class="ii" style="display: none;">

</div>
<div class="menu_drop" style="display: none;">
<div class="menud">
<a>Grup</a>
</div>
<div class="menud">
<a>Halaman</a>
</div>
<div class="menud">
<a>Aktivitas</a>
</div>
<div class="menud">
<a>Pengaturan</a>
</div>
<div class="menud">
<a>Keluar</a>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="content">

</div>
<script type="text/javascript">
$('#drop').click(function () {
var clas = $(this).attr('class');
if (clas=="ic5_putih") {
$(this).attr('class', 'ic5');
$('.menu_drop').attr('style','display: none;');
$('.ii').attr('style','display: none;');
}
if (clas=="ic5") {
$(this).attr('class', 'ic5_putih');
$('.menu_drop').attr('style','display: block;');
$('.ii').attr('style','display: block;');
}
})
</script>
</body>
</html>

Css.css

body{
margin: unset;
background: #dedede;
}
.menu_atas{
width: 100%;
height: 43px;
background: #ea4335;
border-bottom: 1px solid #7d2929;
}.kiri{
margin-left: 5%;
width: 50%;
height: 100%;
float: left;
}
.kanan{
width: 35%;
height: 100%;
float: left;
}.logo{
padding: 10px;
width: 50px;
float: left;
padding-right: 0px;
}.logo img{
width: 50%;
}.cari{
padding: 10px;
padding-left: 0px;
float: left;
width: 70%;
}.cari input{
width: 90%;
padding: 3px;
float: left;
font-size: 100%;
border:unset;

}.input{
background: white;
border-radius: 2px;
overflow: hidden;
display: flex;

}.cr{
float: left;
padding-top: 5px;
width: 9%;
text-align: center;
cursor: pointer;
}.cr img{
width: 15px;
}.cr:hover{
background: #ebedf0;
}.cr:active{
background: unset;
}.menu{
padding: 7px;
display: flex;
font-family: calibri;

}.menu a{
color: white;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}.m{
padding: 5px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}.m2{
padding: 3px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}
.m:hover{
background: #7d2929;
border-radius: 4px;
}.mn{
padding: 5px;
padding-right: unset;
padding-left: unset;

}.g{
border-right:1px solid #ce3232;
height: 100%;
}.ic_prof{
width: 20px;
height: 20px;
background-image: url('../icon/a.jpg');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
border-radius: 100%;
float: left;

}.nama{
margin-left: 7px;
float: left;
}.ic{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -25px -319px;
}.ic2{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -75px -319px;
}
.ic3{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -50px -294px;
}
.ic4 {
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: 0 -344px;
}.ic5{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -101px -294px;
}.ic5_putih{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -76px -294px;
}
.menu_drop{
width: 150px;
background: white;
position: absolute;
box-shadow: 0px 0px 8px -2px;
border-radius: 2px;
top: 48px;
right: 192px;
border: 1px solid #b6b2b2;
overflow: hidden;
}.ii{
width: 16px;
height: 8px;
background-image: url('../icon/ic2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -401px -245px;
position: absolute;
top: 36px;
right: 215px;
}.menud{
padding: 5px;
padding-left: 30px;
}.menud a{
color: black;
font-family: roboto;
font-weight: 300;
font-size: 12px;
}.menud:hover{
background: red;
}.menud:hover a{
color: white;
}

Untuk folder dan atribut lengkap silahkan download file projectnya disini.

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan...

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini.

Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah.

Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut :

Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php". Isi dari kedua file tersebut seperti berikut :

Index.php

<!DOCTYPE html>
<html>
<head>
<title>WHM</title>
<link rel="stylesheet" type="text/css" href="asset/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/jq.inview.js"></script>
</head>
<body>
<div class="atas">
<div class="menu_atas">
<div class="logo">
<h3>Aplikasi Percobaan</h3>
</div>
<div class="search">
<input type="text" name="cari" id="input" placeholder="Masukkan Kata Kunci">
</div>
<div class="menu">
<h3>Kategori</h3>
</div>
</div>
</div>
<div class="tengah">

</div>
<div class="bawah" id="bawah">
<div class="loader">
<img src="asset/gambar/loading.gif" class="load" id="load" style="visibility: hidden;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#bawah').on('inview', function(event, isInView) {
$('#load').attr('style', 'visibility:visible');
if (isInView) {

$.ajax({
type: 'POST',
url: 'data.php',
data: { page: 3 },
success: function(data){
if(data != ''){
$('.tengah').append(data);
// $('#load').attr('style', 'visibility:hidden');
} else {
$("#loader").hide();
}
}
});
}
});
});
</script>
</body>
</html>

Hal yang perlu anda garis bawahi atau pahamai terdapat pada code javascript. Pada kode tersebut di setel bahwa ketika "$("#bawah")" tampil atau inview maka data.php akan di muat kedalam div yang memiliki nama class "tengah" menggunakan bantuan ajax.

Data.php

<?php
for ($i=0; $i < 5 ; $i++) {
?>
<div class="card">
<div class="gambar">
<img src="asset/gambar/1.png">
</div>
<div class="atribut">
<div class="nama">
<a>SAMSUNG Galaxy Tab S4 2018</a>
</div>
<div class="harga">
<h2>Rp 30.000</h2>
</div>
<div class="deskripsi">

</div>
</div>

</div>

<?php } ?>

Kode di atas kita menampilkan card view yang berjumlah 5, dengan menggunakan proses perulangan. Teman-teman bisa memodifikasi file ini untuk menampilkan data dari database.

Untuk file projectnya bisa teman-teman download disini

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui...

Hai sobat coding rakitan, kali ini kita akan membahas tentang bagaimana caranya agar suatu text atau element bisa selalu mengikuti mouse pada html. Dalam pembuatan web terkadang kita memerlukan suatu hal menarik yang akan membuat pengunjung terkagum-kagum dengan web yang kita miliki.

Salah satu caranya dengan membuat tulisan bergerak mengikuti mouse kemanapun dia berada. Eits tapi masih di dalam layar browser yah.

Untuk menambahkan cara ini anda memerlukan bantuan library javascript yaitu jquery. Library ini akan sangat membantu kita dalam menyederhanakan kode-kode javascript.

Berikut adalah tampilan yang akan muncul bila anda menjalankan coding di bawah.

Agar bisa menampilkan seperti di atas anda bisa menggunakan kode javascript seperti ini :

Class .kotak adalah tag div yang berwarna biru, dimana tag ini akan membatasi agar ketika kursor melewatinya tulisan tidak akan mengikut. Jika anda berniat untuk membuat tulisan mengikut kesemua sisi halaman atau full halaman maka anda bisa mengganti $('.kotak') menjadi $(document). Atau lebih jelasnya seperti ini :

Kode lengkap untuk tampilan di atas seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: unset;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}.kotak{
width: 500px;
height: 500px;
background-image: linear-gradient(#000c4e, blue);
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="kotak">
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>
</div>

<script type="text/javascript">
$('.kotak').mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>

Kode untuk membuat full halaman :

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: red;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}
</style>
</head>
<body>
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>

<script type="text/javascript">
$(document).mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>

Demikian postingan kali ini tentang Membuat Text dan Tag Element Selalu Mengikuti Mouse atau Cursor. Semoga bermanfaat, silahkan tinggalkan komentar anda di bawah tentang postingan atau apa saja tentang blog ini.

Aziz Blogger December 06, 2018 Admin Bandung Indonesia

Membuat Text dan Tag Element Selalu Mengikuti Mouse atau Cursor

Hai sobat coding rakitan, kali ini kita akan membahas tentang bagaimana caranya agar suatu text atau element bisa selalu mengikuti mouse pada html. Dalam...

Halo sobat coding rakitan, dimanapun kalian berada. Kali ini kita akan belajar bagaimana cara membuat sebuah scroll pada halamanselalu berada di bawah. Cara ini juga saya temukan ketika membuat sebuah aplikasi Web untuk chatingan. Jadi intinya dalam aplikasi yang saya buat itu ketika pesan dikirim dan bertambah ke tampilan pesan maka scroll akan langsung berada di bawah.

Untuk lebih jelas tentang aplikasi yang sudah saya buat itu bisa anda lihat gambarnya seperti dibawah.

Agar dapat membuat scroll bar selalu di bwah seperti di atas anda perlu menggunakan bantuan jquery, sebuah library java script yang sangat memudahkan dalam penggunaan javascript. Jquery membuat perintah-perintah umum dalam javascript menjadi lebih singkat sehingga script javascript kita menjadi lebih pendek.

Berikut perintah untuk membuat scroll selalu di bawah.

$('#pesan').scrollTop($('#pesan')[0].scrollHeight);

Ganti id '#pesan' sesuai dengan id elemen dimana tempat scroll bar kalian berada. Sebagai contoh anda bisa melihat di bawah ini penggunaanya.

isi 1
isi 2
isi 3
isi 4
isi 5
isi 6
isi 7
isi 8
isi 9
isi 10
isi 11
isi 12
isi 13
isi 14

Coding

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.s{
width: 100%;
height: 200px;
background: #6fc1ad;
padding: 10px;
}.scroll{
background: white;
width: 90%;
height: 90%;
overflow: auto;
font-size: 20px;
padding: 5px;

}
</style>
</head>
<body>
<div class="s">
<div class="scroll" id="scroll">
<ul>
<li>isi 1</li>
<li>isi 2</li>
<li>isi 3</li>
<li>isi 4</li>
<li>isi 5</li>
<li>isi 6</li>
<li>isi 7</li>
<li>isi 8</li>
<li>isi 9</li>
<li>isi 10</li>
<li>isi 11</li>
<li>isi 12</li>
<li>isi 13</li>
<li>isi 14</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#scroll').scrollTop($('#scroll')[0].scrollHeight);
</script>

</body>
</html>

Demikian pembelajaran kali ini semoga sukses selalu. Dan bila ada yang kurang jelas atau belum di pahami silahkan tinggalkan pertanyaan di kolom komentar. Terima kasih.

Aziz Blogger December 04, 2018 Admin Bandung Indonesia

Cara Membuat Scroll Pada Web Selalu Berada di Bawah

Halo sobat coding rakitan, dimanapun kalian berada. Kali ini kita akan belajar bagaimana cara membuat sebuah scroll pada halamanselalu berada di bawah....

Sesuai dengan judulnya Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery. Kali ini kita akan membuat sebuah slide dengan menggunakan kode JavaScript, disini kita tidak akan menggunakan bantuan plugin dan juga Jquery. Kode yang akan kita gunakan benar-benar asli Javascript.

Membuat sebuah slide pada sebuah website akan membuat daya tarik tersendiri bagi pangunjung yang berkunjung ke website anda. Biasanya slide akan berisi gambar-gambar menarik. Tidak jarang website lain seperti bukalapak menggunakan slide pada halaman utamanya untuk mempromosikan fitur baru mereka.

Bila anda tertarik maka ini saatnya kita untuk belajar membuat sebuah slide. Yang akan saya ajarkan disini adalah contoh slide sederhana dimana transisi gambar hanya satu fariasi, yaitu gambar bergeser ke kiri.

Sebelum memulai ada baiknya anda menyiapkan gambar yang akan di jadikan slide terlebih dahulu. Jika sudah silahkan buat sebuah folder dengan nama "Slide", didalam folder slide buat lagi folder dengan nama gambar. Letakkan gambar anda di dalam folder gambar. Sekarang buat sebuah file dengan nama "index.html". Isi index ini sebagai berikut.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Slide Dengan Javascript</title>
<style type="text/css">
body{
margin: unset;
overflow: hidden;
}
.utama{
width: 100%;
overflow: hidden;
}.isi{
width: 50%;
height: 100%;
margin: auto;
overflow: hidden;
}.isi_gambar{
width: 25%;
float: left;
}.isi2{
width: 400%;

}
.utama img{
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="utama">
<div class="isi">
<div class="isi2" id="slide">
<div class="isi_gambar" >
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/1.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/2.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/3.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/4.jpg">
</div>
</div>

</div>

</div>
<script type="text/javascript">
var a=-100;
setInterval(function(){
if (a!=0) {
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;transition: 1s ease-in;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;

}else{
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}

}, 2000);
</script>
</body>
</html>

Hasilnya akan seperti ini:

Ingat ganti lokasi pada src="" sesuai dengan lokasi gambar anda. Jika tidak berjalan seperti yang saya terapkan di atas berarti anda perlu melihat apakah lokasi gambar sudah sesuai atau belum. Jika memang sudah sesuai coba periksa lagi koding anda.
Aziz Blogger November 27, 2018 Admin Bandung Indonesia

Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery

Sesuai dengan judulnya Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery. Kali ini kita akan membuat sebuah slide dengan menggunakan kode JavaScript,...

Pages 2 of 3 Prev 123 Next