Category Archives: Javascript

Select & Block Text Website

jQuery Prevent Blocking Text

Posted on by

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();
});

jQuery Input Numeric Only

Posted on by

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 http://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

Posted on by

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

Posted on by

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 🙂

Related Articles

Contoh Aplikasi Penjadwalan Ujian Tugas Akhir Kuliah Menggunakan PHP

Posted on by

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:

Menambahkan text pada di posisi cursor yang aktif di dalam TextArea

Posted on by 
function insertText(myField, myValue) {
	if (document.selection) {
		myField.focus();
		sel = document.selection.createRange();
		sel.text = myValue;
	} else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		myField.value = myField.value.substring(0, startPos)
		+ myValue
		+ myField.value.substring(endPos, myField.value.length);
	} else {
		myField.value += myValue;
	}
}

Penggunaan dari fungsi javascript diatas adalah sebagai berikut :

<a href="javascript:void(0);" onclick="insertAtCursor(document.smsMessage.textareaMessage, '%cust_name%');">%cust_name%</a>
<form name="smsMessage" action="" method="post">
	<textarea name="textareaMessage" cols="30" rows="3"></textarea>
</form>

Fungsi validasi HTML Form – Javascript

Posted on by

Untuk dapat memakai fungsi validasi ini dibutuhkan beberapa fungsi tambahan seperti fungsi ucwords(), startsWith() dan isEmail(), sedangkan fungsi pemanggilnya adalah validasi(). Berikut source code javascriptnya :

function validasi(delimiter,elementId){
	var formElement;
	var jumlahArray;
	var i;
	var formName = "";
	var messageAlert = "";

	formElement = elementId.split(delimiter);

	for(i=0;i<formElement.length;i++){
		if(formElement[i].startsWith("email")){
			if(document.getElementById(formElement[i]).value == ""){
				formName = formElement[i];
				messageAlert = "Form Email masih kosong";
				break;
			}else if(!isEmail(document.getElementById(formElement[i]).value)){
				formName = formElement[i];
				messageAlert = "Format Email Anda kurang tepat";
				break;
			}
		}else if(document.getElementById(formElement[i]).value == ""){
			formName = formElement[i];
			messageAlert = 'Maaf, silahkan isi form '+ucwords(formName);
			break;
		}
	}

	if(formName != ""){
		document.getElementById(formName).focus();
		alert(messageAlert);
		return false;
	}else{
		return true;
	}
}

Diatas hanyalah fungsi pemanggil, untuk mendapatkan fungsi pendukungnya silahkan download source file aslinya disini. Untuk implementasi dari fungsi tersebut diatas silahkan lihat source berikut :

<form method="post" action="">
	<table border="0" cellpadding="1" cellspacing="1">
		<tr>
			<td width="15%">Nama Lengkap</td>
			<td align="left"><input type="text" name="nama" id="nama lengkap"></td>
		</tr>
		<tr>
			<td align="left">Email</td>
			<td align="left"><input type="text" name="email" id="email"></td>
		</tr>
		<tr>
			<td align="left">Alamat Lengkap</td>
			<td align="left"><textarea name="address" id="alamat"></textarea></td>
		</tr>
		<tr>
			<td align="left" style="border:0px;">&nbsp;</td>
			<td align="left" style="border:0px;">
				<input type="submit" name="register" onclick="return validasiDaftar(',','nama lengkap,email,alamat')" value="Daftar Sekarang">
			</td>
		</tr>
	</table>
</form>

Script untuk TextArea Tinggi Otomatis dengan Javascript

Posted on by

Script ini digunakan untuk membuat textarea yang meninggi secara otomatis saat kita menulis artikel / kalimat yang barisnya lebih dari tinggi maksimal dari textarea itu sendiri. Ini menggunakan JavaScript, yang mana nantinya fungsi ini aktif ketika kita mengetik pada textarea terpilih. Ok, untuk source codenya silahkan lihat dibawah ini :

Fungsi JavaScript, taruh di bagian <head></head> adalah sebagai berikut :

<script type="text/javascript">
function textareaOtomatis(f, tinggiMaksimal) {
	// set untuk tinggi maksimal textarea
	var tinggiMaksimal = (typeof tinggiMaksimal == 'undefined') ? 1000 : tinggiMaksimal;
	// pencegahan jika tinggi = tinggi minimal yang ditentukan
	// maka textarea tidak akan berubah tingginya
	if (f.scrollHeight > tinggiMaksimal) {
		if (f.style.overflowY != 'scroll') { f.style.overflowY = 'scroll' }
		return;
	}
	// agar scroller bar tidak nampak
	if (f.style.overflowY != 'hidden') { f.style.overflowY = 'hidden' }

	var scrollH = f.scrollHeight;
	if( scrollH > f.style.height.replace(/[^0-9]/g,'') ){
		f.style.height = scrollH+'px';
	}
}
</script>

Kemudian, untuk pengujiannya silahkan gunakan sintaks textarea dengan HTML sebagai berikut :

<form method="post" action="">
<textarea name="textarea" style="width:370px; height:100px; overflow-y:hidden;" onkeyup="textareaOtomatis(this,300)">Beberapa Text</textarea>
</form>

Untuk contohnya secara langsung, silahkan kunjungi link berikut : http://www.xeongas.com/test.php

Related Articles

Deteksi Add On AdBlock Plus Dengan Script PHP

Posted on by
Deteksi AdBlock dengan PHP

Kalo kamu pernah download di IDWS dulu, dan kebetulan di Browser kamu pakai / pasang Add On / Plugin Ad Blocker dan sejenisnya, dan AdBlock tersebut sedang dalam keadaan Enable, maka dari halaman download di IDWS akan muncul pesan warning semacam ini :
Maaf, Anda menggunakan AdBlock, tolong di Disabled terlebih dahulu

Ya, mungkin seperti itulah kata – katanya, aku juga udah lupa secara detail pesan warning tersebut. Intinya, kok bisa tahu bahwa kita sedang menggunakan Add On AdBlock ??? Nah,,, ni kebetulan aku ada contoh scriptnya. Script untuk Deteksi AdBlock menggunakan gabungan dari PHP dan Javascript. Contoh potongan scripntnya, seperti dibawah ini :

function checkBlock(){
        // untuk deteksi lebar gambar Ads / iklan (browser selain Opera / IE)
	var width = parseInt(document.getElementById('tesGambar').naturalWidth);
        // untuk deteksi lebar gambar Ads / iklan (browser Opera / IE)
	var widthOpera = parseInt(document.getElementById('tesGambar').width);
        // deteksi browser yang sedang digunakan
	var browser = navigator.appName;

	if((browser == "Opera" && widthOpera <= 0) || (browser != "Opera" && width <= 0)){
		// jika terdeteksi menggunakan AdBlock, diredirect ke halaman block.html
                location.href = 'block.html';
	}
}

Untuk source code lengkapnya, silahkan download scriptnya di halaman download Script PHP Deteksi AdBlock