Select & Block Text Website

jQuery Prevent Blocking Text

Hai hai…. 😀 Selamat Pagi

Hmmmm,,, kali ini saya coba berbagi pengalaman mengenai salah satu kemampuan JavaScript menggunakan framework jQuery. Jadi begini permasalahannya, apakah kalian pernah ingin meng-copy artikel di suatu halaman website? Pastinya pernah :mrgreen:
Biasanya kalo kalian selecting/milih text atau artikel mana yang ingin di copy, pasti kan harus di blok/selecting dulu mana saja. Nah, biasanya untuk melakukan selecting text pasti pake shift + click pada akhir point dimana itu merupakan kata terakhir yang ingin kalian copy kan? (Semoga kalian ngerti apa yang sebenernya pengen aku sampaikan :D)

Nah disini, adalah cara bagaimana agar user tidak bisa melakukan blocking/selecting text atau artikel pada suatu halaman website kita, ini berguna agar artikel kita tidak dicopy oleh user secara mudah 😀
Script ini juga bisa digunakan pada suatu area element html atau di salah satu area halaman website kita, jadi tidak harus ke seleuruh halaman diproteksi agar tidak bisa diblok text-nya. Oke, berikut ini adalah source codenya :

$(function(){
	var area_name = '.tablesorter tbody';
	$.extend($.fn.disableTextSelect = function() {
		return this.each(function(){
			if($.browser.mozilla){
				// untuk browser firefox
				$(this).css('MozUserSelect','none');
			}else if($.browser.msie){
				// untuk browser IE
				$(this).bind('selectstart',function(){return false;});
			}else{
				// selain kedua browser diatas
				$(this).mousedown(function(){return false;});
			}
		});
	});
	$(area_name).disableTextSelect();
});
Advertisements

jQuery Input Numeric Only

Selamat pagi semuanya 🙂

Sebenernya masih bingung mau posting apaan, akhirnya kuputuskan untuk sharing mengenai input numeric only pada suatu textbox, jadi intinya bagaimana saat kita ketik di suatu textbox, hanya input angka yang diterima, untuk inputa huruf dan karakter lainnya tidak bisa. Saya sudah pernah posting mengenai hal yang sama di https://rendramm2.wordpress.com/2009/10/16/input-numeric-only/, cuman yang ini pake framework jQuery, yang dulu hanya pake javascript biasa.

Kenapa kok posting lagi, toh sama2 javascriptnya? Jawabannya adalah untuk opsi yang lebih advance dan lebih compatible :D, script berikut ini saya dapatkan dari http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery

Oke, berikut adalah source codenya :

$(document).ready(function(){
	$("input[name='handphone']").keydown(function(event) {
		// Allow: backspace, delete, tab and escape
		if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
			// Allow: Ctrl+A
			(event.keyCode == 65 && event.ctrlKey === true) ||
			// Allow: home, end, left, right
			(event.keyCode >= 35 && event.keyCode <= 39)) {
				// let it happen, don't do anything
				return;
        }else{
			// Ensure that it is a number and stop the keypress
			if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
				event.preventDefault();
			}
		}
	});
});

Cara Alternatif Untuk Efek Text Decoration Blink Yang Tidak Berjalan

Selamat siang 🙂
Thread kali ini membahas mengenai salah satu effect text-decoration dari CSS yaitu “blink”, yang mana jika syntax ini digunakan maka teks yang dimaksud akan berefek kedip-kedip / blinking. Syntax normal di CSS nya adalah sebagai berikut :

.teks{
	text-decoration:blink;
}

Namun, effect tersebut pasti tidak bisa berjalan seperti yang seharusnya jika kalian menggunakan browser Google Chrome, IE atau sejenisnya. Karena itu, saya mencoba untuk mencari alternatif lain untuk bagaimana caranya effect blink/kedip-kedip pada teks itu bisa berjalan di semua browser. Akhirnya saya memutuskan untuk menggunakan tag-tag jQuery sedemikian rupa hingga bisa menghasilkan effect yang sama (blink).
Mungkin ada cara lain dengan CSS atau sejenisnya cuma saya belum tahu caranya 😀 jadi saya pakai cara yag mudah menurut saya sendiri dulu deh :D, oke… scriptnya adalah sebagai berikut :

function blink(yangDituju){
	$(yangDituju).fadeOut('slow', function(){
		$(this).fadeIn('slow', function(){
			blink(this);
		});
	});
}

blink('.teks');

Konsepnya adalah menggunakan teknik Rekursi dari fungsi blink yang dibuat, dengan parameter yan menuju pada tag HTML atau teks yang diinginkan akan berkedip nantinya.
Oke, sekian semoga bisa bermanfaat :mrgreen:

Membuat TextArea Yang Auto Height

Lama ga posting thread,,, :mrgreen:
Thread kali ini membahas tentang bagaimana caranya membuat suatu textarea yang sudah berisi text agar tidak mempunyai border, scrollbar dan yang lebih utama adalah textarea tersebut bisa otomatis menyesuaikan tingginya dengan isi / text yang ada, backgroundnya pun transparan jadi seakan tidak ada textarea 🙂
Pertama mari kita buat file style css nya ( misal beri nama style.css ) dengan sintaks berikut :

.isiTextArea{
	font-family:"Lucida Sans Unicode",Corbel,TrebuchetMS,Verdana,sans-serif;
	font-weight:bold;
	letter-spacing:-1px;
	font-size:24px;
	line-height:1.2em;
	color:#333;
	border:0;
	overflow:auto;
	width:725px;
	background:transparent;
}

Kemudian buat suatu file html ( misal dengan nama index.html ) dengan isi sebagai berikut :

<html>
    <head>
        <title>Coba Text Area</title>
        <script>
        function autoHeightText(){
            var textArea = document.getElementById('textJudulArea');
            if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0){
	        textArea.style.overflow = 'visible';
	        return;
            }

            while (textArea.scrollHeight > textArea.offsetHeight){
	        textArea.rows++;
            }
        }

        window.onload = autoHeightText;
        </script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
<textarea readonly id="textJudulArea" class="isiTextArea">isi</textarea>
</body>
</html>

Dan coba jalankan / buka file index.html tadi menggunakan browser yang ada, semoga berhasil dan bermanfaat 🙂

Contoh Aplikasi Penjadwalan Ujian Tugas Akhir Kuliah Menggunakan PHP

Dalam sistem ini ada beberapa golongan user / hak otorisasi seperti Administrator, Mahasiswa dan Dosen. Dilengkapi dengan messages, reminder dan beberapa fitur lain yang menarik. Jika ingin lebih tahu langsung download saja aplikasi Penjadwalan Tugas Akhir dengan PHP melalui link berikut ini : Download Aplikasi Penjadwalan Tugas Akhir

Tidak lupa juga, database untuk aplikasi tersebut, silahkan download Databasenya disini
Semoga bermanfaat :mrgreen: