Kategori: HTML5, CSS & JavaScript

Diposkan pada

Source code program HTML5 untuk menggambar

Halo, kamu perlu source code program menggambar pada di halaman web dengan mengunakan HTML5 dan JavaScript?

Dua program yang saya bagikan ini mungkin bisa membantu, kamu bisa menggambar doodle dan bahkan bisa mengganti ukuran brush serta warnanya.

Program HTML5 untuk menggambar ini dibuat dengan menggunakan library JavaScript PhaserJS. Berikut link-link yang kamu lihat di video di atas:

https://github.com/habibieamrullah/OmPuter/tree/main/menggambar

https://github.com/habibieamrullah/Simple-Phaser-Drawing-Program

Diposkan pada

Cara melakukan redirect dari http menuju https dengan JavaScript

Domain kamu ada fitur https nya, tapi sering kali website kamu waktu dibuka orang suka yang kebuka yang http, tidak pakai s. Nah caranya supaya situs kamu terus menerus dibuka dengan https ada berbagai cara, misal dengan cara membuat file htaccess secara langsung di server side nya, atau melakukan pengaturan redirect di cpanel / panel hostingnya, dan lain sebagainya.

Di postingan ini saya tunjukkan cara sederhana redirect dengan JavaScript.

Dengan script di bawah ini, JavaScript akan mendeteksi url yang dibuka oleh user, jika ada http:// di dalam url itu, maka akan otomatis direplace menjadi https dan redirect ke https.

if(location.href.indexOf("localhost") < 0){
			if(location.href.indexOf("http://") > -1){
				location.href = location.href.replace("http://", "https://");
			}
		}
Diposkan pada

Cara membuat tombol “scroll to top” yang jika diklik akan mengembalikan posisi scroller ke atas halaman dengan halus

Jika kita menggunakan jQuery, kita bisa membuat tombol scroll to top atau kembali ke atas dengan mudah dan keren, yang jika kita klik kita bisa scrolling ke bagian atas halaman dengan animasi yang halus.

Coba kita buat tombol dengan id backToTop dan buat script seperti ini:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

Saat posisi layar kita di atas halaman, tombol scroll to top itu tersembunyi. Begitu kita scroll ke bawah sedikit, maka akan muncul tombol itu, lalu kita bisa klik untuk kembali ke atas.

Diposkan pada

Membuat element sticky (yang menempel) pada desain webmu

Di postingan ini saya akan membagikan tips yang sangat sederhana untuk membuat sebuah elemen html di halaman web kamu tampil sticky, yang artinya jika kamu scroll, ke atas ataupun ke bawah elemen tersebut tetap diam di situ, nempel dan idak bergerak. Contohnya seperti header halaman web kita buat sticky supaya saat discroll ke bawah, menu-menu yang ada di header halaman tetap kelihatan dan bisa diklik sewaktu-waktu.

Cara membuat sebuah elemn html menjadi sticky cukup mudah, kamu tinggal menambahkan css ini, misal pada class “nempel”:

.nempel{
   position: sticky;
   top: 0;
}

Alternatifnya, kita juga bisa membuat styling seperti ini:

.nempel{
   position: fixed;
   top: 0;
}

Misal kita mau membuat tombol “scroll to top” di pojok kanan bawah halaman web kita, bisa kita buat stylingnya begini:

.scrolltotop{
   position: fixed;
   bottom: 0;
   right: 0;
}
Diposkan pada

Cara memrogram pengambilan gambar/foto webcam dengan HTML dan JavaScript

Di postingan ini akan saya bagikan full script html dan JavaScript yang berguna untuk menggambil jepretan foto/gambar dari webcam/kamera laptop/pc maupun hp, yang mana hasil jepretan itu akan muncul pada elemen Canvas di halaman web percobaan kita. Kamu bisa klik kanan lalu save untuk mendownloadnya.

Berikut ini source codenya:

<!DOCTYPE html>
<html>
	<head>
		<title>Tutorial OmPuter</title>
		<style>
			body{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<video id="webcamVideo" width="854" height="480" style="border: 1px black solid;" autoplay></video>
		<canvas id="webcamCanvas" width="854" height="480" style="border: 1px black solid;"></canvas>
		
		<button onclick="startCamera();">Mulai Kamera</button>
		<button onclick="ambilGambar();">Ambil Gambar</button>
		
		<script>
			var wVideo = document.querySelector("#webcamVideo");
			var wCanvas = document.querySelector("#webcamCanvas"); 
			
			async function startCamera(){
				var stream = null;
				try{
					stream = await navigator.mediaDevices.getUserMedia({ video : true, audio : false });
				}catch(error){
					alert(error.message);
					return;
				}
				
				wVideo.srcObject = stream;
			}
			
			function ambilGambar(){
				wCanvas.getContext("2d").drawImage(wVideo, 0, 0, 854, 480);
				var imageData = wCanvas.toDataURL("image/jpeg");
				
				console.log(imageData);
			}
		</script>
	</body>
</html>