NGOBAR #2 : Membuat NAVBAR & SMOOTH SCROLLING dengan BOOTSTRAP 3 & JQUERY
PENTING! : jika teman2 ada yang scrollnya tidak jalan, silahkan cek komentar pertama (dari Rizal Hasan) yang saya pin di video ini.. mudah2an membantu
—
NGOBAR episode 2!!!
di video ini kita akan memperbaiki website portfolio kita di video sebelumnya, dengan menambahkan fitur NAVBAR dan SMOOTH SCROLLING menggunakan Bootstrap 3 dan JQuery
Song :
TITLE: Pacific Sun
ARTIST: NICOLAI HEIDLAS
—
Video Sebelumnya (NGOBAR #1)
https://www.youtube.com/watch?v=NNW7Tg8CgAQ
—
PLAYLIST
– HTML Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIVuONHysfOK0ZtiqUWvrx4F
– CSS Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIUBrbm6Gdh6k7ZUvPIAZm7p
– Tutorial Sublime Text
https://www.youtube.com/playlist?list=PLFIM0718LjIWE-Ot9V9qcALx5OMAZY67c
– CSS Layouting
https://www.youtube.com/playlist?list=PLFIM0718LjIUu4Ju9GUL5zpLcuq08TKYr
– Javascript Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIWXagluzROrA-iBY9eeUt4w
—
SOSIAL MEDIA
– https://www.facebook.com/WebProgrammingUNPAS
– http://codepen.io/webprogrammingunpas
– https://github.com/webprogrammingunpas
– http://twitter.com/sandhikagalih
– http://instagram.com/sandhikagalih
NGOBAR #2 : Membuat NAVBAR & SMOOTH SCROLLING dengan BOOTSTRAP 3 & JQUERY
NGOBAR #2 : Membuat NAVBAR & SMOOTH SCROLLING dengan BOOTSTRAP 3 & JQUERY
punteun pak dosen sedikit membantu menjawab buat teman-teman yang fungsi js scroll nya belum jalan
tinggal tambahkan kata html sebelum kata body dan jangan lupa pake tanda koma ( , )
copy paste aja script di bawah ini, insya allah jalan
pami masih error taroskeun ka pak dosen saya mah masih newbie 🙂
$('.page-scroll').on('click', function(e) {
var tujuan = $(this).attr('href');
var elemenTujuan = $(tujuan);
$('html , body').animate({
scrollTop: elemenTujuan.offset().top – 50
});
e.preventDefault();
});
Bang mau tanya, vidio yg membahas website kita terhubung dengan instagram dan youtube itu judulnya apa yahh.??
punya saya kenapa ya scrollTop nya selalu bernilai 0
kode di atas jika di localhost jalan, tapi ketika saya pindah ke hosting bagian css body margin-topnya tidak jalan. itu kenapa ya mas?
Mas, di browser Chrome kok tidak bekerja ya smooth scrollingnya
consolenya tampil sepeti
script.js:7 Uncaught TypeError: $(…).Att is not a function
at HTMLAnchorElement.<anonymous> (script.js:7)
at HTMLAnchorElement.dispatch (jQuery-3.1.1.min.js:3)
at HTMLAnchorElement.q.handle (jQuery-3.1.1.min.js:3)
(anonymous) @ script.js:7
dispatch @ jQuery-3.1.1.min.js:3
q.handle @ jQuery-3.1.1.min.js:3
gimana ngatsinya
mkasi
Terimakasih pak sandhika tutornya…
// event pada saat link di klik
$('.page-scroll').on('click', function(e){
//ambil isi href
var tujuan = $(this).attr('href');
//tangkap elemen yang bersangkuttan
var elemenTujuan= $(tujuan);
// pindahkan scroll
$('html').animate({
scrollTop: elemenTujuan.offset().top – 50
}, 1000, 'easeInOutExpo');
e.preventDefault();
});
yang error pake yang ini !
Saya suka chanel ini. Mantapppp bang sandhi . Gaspolll
Saya suka chanel ini. Mantapppp bang sandhi . Gaspolll
Pak..jquery yg untuk tombol pokok Kiri sy udh download jquery yg offline tp va muncul jg ya..
untuk mengatasi scroll yang tidak jalan bisa menambahkan 'html' sebelum kata 'body' seperti cara pak Rizal, tapi bisa juga hanya menambahkan 'html' tanpa 'body' , source codenya seperti berikut :
$('.page-scroll').on('click', function(e) {
var tujuan = $(this).attr('href');
var elementTujuan = $(tujuan);
$('html').animate({
scrollTop: elementTujuan.offset().top – 50
}, 1500, 'easeInOutExpo');
e.preventDefault();
});
Thanks ilmu bootstrap-nya https://herogodragomir.github.io/portfolio/
pak, apabila saya membuat web menggunakan bootstrap apakah saya mempunyai kemungkinan bahwa template yang saya gunakan bisa jadi seragam/sama dengan pembuat wevsite lain yang menggunakan bootstrap juga? sehingga Mungkin bagi para pengembang front end website akan cukup merasa familiar ketika melihat sebuah template yang dibuat dengan bootstrap
Kereeeen asli bang!!!!
kodingan jQuery pas smooth scroll sy ga jalan mulu Hixx…tapi nemu cara lain akkhirnya…
$('.page-scroll').on('click', function(e){
if(this.hash !== ''){
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
},800);
}
});
sehariann bingung XD
Thk u Pak
maaf skrip jquery yang scrolltop nya tidak jalan masih ketutup sama navbar yang – 50 itu harus di bagaimanakan ?
Pak, saya udah megikuti tahap tahapannya, nah tapi ketika masuk javascript dan sudah selesai dimasukkan efek scroll nya, pas di test gabisa. Tapi kalo dihapus e nya bisa ngescroll tapi acak acakan. Padahal udah ikut dari awal tahapannya. Itu kira kira ada kesalahan apa ya pak?
bang ni fungsi jsnya ga jalan padahal saya udah tambahin htmlnya tetap juga ga jalan. gima ni bang?
Saya punya masalah smooth scrolling tidak bekerja di video pak sandhika dengan error animate is not a function, di sini saya menggunakan bootstrap versi 4. Kalo ada yg sama punya masalah sama seperti saya fix nya di sini https://stackoverflow.com/questions/38647190/jquery-animate-is-not-a-function
mantap pak
sekedar membantu. bagi yang pakek bs4 tp animate gak jalan,tambah jquery yang full
https://code.jquery.com/jquery-3.1.0.js
semoga membantu
bang punya saya ngak muncul footernya knapa ya kira kira knpa ya
mesti belajar javascript dlu nih di channel pak dika.. masih buta bangett .. trimakasih pak dosen ilmu nya sangat membantuu
saya yg baru tonton apa versi jquery udah beda ya
soalnya bootstrap nya juga udah beda sekarang v4. nuhun kang
assalamualaikum pak sandhika
saya mau nanya kenapa punya saya navbarnya tidak bisa ya diclick tidak bisa kenapa yaa….
tapi ketika saya hapus
$('body').animate({
scrollTop: elemenTujuan.offset().top – 50
}, 1250, 'easeInOutExpo');
e.preventDefault();
bagian ini tetap bisa di click
dan saya juga mendownload file bapak di github tetap juga nggak bisa. tapi kalo dihapus bagian itu
mohon bantuanya pak saya sudah stack disini ????
selamat malam pak dosen bolehkh saya minta file cssnya
ko yang saya navbarnya ngaco terus ya, udan dimasukin fixed-top masih gabisa fix posisinya, udah dikasih right juga tetep aja dikiri, dikasih inverse ga ngaruh, tolong bales pa, terimakasih
mantaffff bingit pakkkkk..thankkkk banget
Assalamualaikum Pak Sandika, Saya mau tanya klo mau buat tampilan menunya keluar dari samping menggunakan boostrap4 ketika ditampilan handphone bagaimna caranya? klo bisa mohon dibuatkan video tutorialnya.
bang mau nanya punya saya uncaught type error di animatenya gimana ya
assalamualaikum Pak Dosen,saya masih pemula.& terus mencoba mengikuti materi yang bapak berikan. namun didlm file script.js untuk scrol halus saya sdh coba mengikuti tapi tetep hasilnya masih kasar pak. kenapa ya pak ? mohon arahan&bimbingan Bapak.. haturnuhun….. 🙂
Kalau saya koding gak dari nol hehehe. Cukup searching saja tinggal copy paste kode orang 😅😅
Kalau ngoding bikin fungsi dr nol kadang gak jalan, dan itu sulit perbaikinya.
pak mw tanya klo <a href="#about">About</a> ini diganti dengan link php agar effectnya masih g berubah, seperti dlm kondisi html gmn solusinya?
Pak. Mau tanya
kenapa animate saya engak bisa jalan y??
dan apakah scroll itu bahasa js atau kita buat sendiri??
pak, kenapa yah yg saya eror di animatenya jd gak smooth scroll
Gmn cara bikin isi dari navbar
kalau kita pengen ubah dengan warna lain gimna?
dan background di prifil kita ganti warna lain tau ganti dengan gambar gimna?. apakah boostrap punya itu atau harus buat manual di CSS
pada saat console tidak muncul ""ok"" kira kira salahnya dmn ya ?