3.11.2010

Membuat typing teks (Javascript)

Pernahkah temen2 semua membaca artikel saya tentang tag? klo belum lihat klik aja di sini. Tag itu saya buat menggunakan typing-text javascript. Tapi ada satu kelemahan fatal dalam teknik tersebut, apakah itu? kelemahanya adalah, anda di wajibkan menaruh form teks area (yang jadi kotak hitam) di posisi paling atas dalam satu kolom, misal template saya ini kan 3 kolom dengan side bar kanan dan kiri......maka teks area yang di jadikan tempat memunculkan type-text tersebut harus di letakan pada posisi paling atas....dan di atas teks area tersebut tidak boleh ada form lain misal text-field, bottom, option, dan jenis-jenis form yang lain.
Kenapa? jawabanya adalah agar efek typing text tetap berada pada si kotak hitam / teks area tersebut, bila itu di langgar, maka efek typing teks akan muncul pada form di atasnya. bingung? mending coba aja sendiri, anda tinggal buka artikel ini , tekan ctrl + u dan copas aja kodenya..... contoh :

Tampilan di atas adalah gabungan antara teks area untuk typing text effect dan form submit / bottom,Coba anda klik di kotak putihnya, Nah, selain itu dalam satu halaman web hanya boleh ada satu efek yang di pasang...klo di langgar lagi........typing teks ndak bisa jalan seperti yang kita inginkan......

Saya bertemu dengan sebuah situs tutorial javascript yang ajib banget, ini URL nya http://www.dynamicdrive.com/
Di situ saya mendapatkan trik untuk membuat typing teks tanpa form dan bisa di masukan ke dalam widget maupun postingan sebagai contoh buka aja link ini .
Kalau tertarik membuatnya silahkan anda kopas script berikut e dalam postingan atau widget anda :

<script type="text/javascript">
TypingText = function(element, interval, cursor, finishedCallback) {
  if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {
    this.running = true;    // Never run.
    return;
  }
  this.element = element;
  this.finishedCallback = (finishedCallback ? finishedCallback : function() { return; });
  this.interval = (typeof interval == "undefined" ? 100 : interval);
  this.origText = this.element.innerHTML;
  this.unparsedOrigText = this.origText;
  this.cursor = (cursor ? cursor : "");
  this.currentText = "";
  this.currentChar = 0;
  this.element.typingText = this;
  if(this.element.id == "") this.element.id = "typingtext" + TypingText.currentIndex++;
  TypingText.all.push(this);
  this.running = false;
  this.inTag = false;
  this.tagBuffer = "";
  this.inHTMLEntity = false;
  this.HTMLEntityBuffer = "";
}
TypingText.all = new Array();
TypingText.currentIndex = 0;
TypingText.runAll = function() {
  for(var i = 0; i < TypingText.all.length; i++) TypingText.all[i].run();
}
TypingText.prototype.run = function() {
  if(this.running) return;
  if(typeof this.origText == "undefined") {
    setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);    // We haven't finished loading yet.   Have patience.
    return;
  }
  if(this.currentText == "") this.element.innerHTML = "";
//  this.origText = this.origText.replace(/<([^<])*>/, "");     // Strip HTML from text.
  if(this.currentChar < this.origText.length) {
    if(this.origText.charAt(this.currentChar) == "<" && !this.inTag) {
      this.tagBuffer = "<";
      this.inTag = true;
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
      this.tagBuffer += ">";
      this.inTag = false;
      this.currentText += this.tagBuffer;
      this.currentChar++;
      this.run();
      return;
    } else if(this.inTag) {
      this.tagBuffer += this.origText.charAt(this.currentChar);
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == "&" && !this.inHTMLEntity) {
      this.HTMLEntityBuffer = "&";
      this.inHTMLEntity = true;
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == ";" && this.inHTMLEntity) {
      this.HTMLEntityBuffer += ";";
      this.inHTMLEntity = false;
      this.currentText += this.HTMLEntityBuffer;
      this.currentChar++;
      this.run();
      return;
    } else if(this.inHTMLEntity) {
      this.HTMLEntityBuffer += this.origText.charAt(this.currentChar);
      this.currentChar++;
      this.run();
      return;
    } else {
      this.currentText += this.origText.charAt(this.currentChar);
    }
    this.element.innerHTML = this.currentText;
    this.element.innerHTML += (this.currentChar < this.origText.length - 1 ? (typeof this.cursor == "function" ? this.cursor(this.currentText) :  this.cursor) : "");
    this.currentChar++;
    setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);
  } else {
    this.currentText = "";
    this.currentChar = 0;
        this.running = false;
        this.finishedCallback();
  }
}
</script>
<div id="typing">Taruh teks disini untuk efek pertama<br/>edit bagian ini <br/> kalau pengen lebih ringkas ubah script di atas menjadi eksternal</div>
<script type="text/javascript">
new TypingText(document.getElementById("typing"), 100, function(i){ var ar = new Array("_", "_", "_", "_"); return " " + ar[i.length % ar.length];  });
TypingText.runAll();
</script>
Edit bagian yang berwarna merah dengan kata-kata yang anda inginkan.
Script ini telah mengalami modifikasi dari awalnya dua baris menjadi satu baris, jadi anda tidak akan menemukan script yang sama dengan tutorial di situs asli maupun milik orang lain.


30 komentar temen:

aditya mengatakan...

Oke deh met malem semua......

Ivan Kavalera mengatakan...

Wah, gawat nih. Budaya kopas kayaknya semakin memprihatinkan.

ivan mengatakan...

MET MALEM MAS. WAAAAAHH, BLOGGER COPAS DONG NAMANYA TUH MAS. HARUS DIBASMI. TAPI GIMANA CARANYA YA?

Seiri Hanako mengatakan...

thanks sharingnya
gimana caranya memberantas copas ya??

jha mengatakan...

tqx tipsnya sahabat

jha mengatakan...

terimakasih tipsnya sahabat

Rock mengatakan...

Makasih untuk sharingnya kawand...

Dees mengatakan...

heheheheh saya tidak begitu ngerti mas,,,,,tapi bagus sekali mas ini untuk mengantisipasi orang yang dengan seenaknya sendiri ngopas gitu ya mas,,,

Unknown mengatakan...

Trims tutorialnya tentang membuat typing teks.
Apakah masih banyak yang copy paste tanpa diedit dan tidak mencantumkan link sumber ? Apakah mereka tidak takut terkena 'banned' Google ? Apakah 'banned' sudah tidak berlaku lagi sekarang ini ? Salam sukses.

Anonim mengatakan...

Iyah, banyak banget yang ngaku-ngaku tutorial bikinan sendiri, padahal copas...

Btw: Blog ane dah terlalu berat buat ditambah javascript, hehehe//

antokcupu mengatakan...

iya stop plagiat hehe stujuhh

blogwalking

Blogger Admin mengatakan...

YA AMPUN,MASIH ADA AJA YANG MENYERTAKAN KOMENTAR LINK,MENDING KASIH URL SAHABAT AJA,JANGAN DI BUAT LINK,MOHON MAAF BAGI KOMEN SOBAT YANG TERFILTER OTOMATIS KARENA MENGANDUNG LINK,OH YA KAWAN,SATU LAGI,INI BKAN POSTING TTG PENJIPLAKAN TUTORIAL,TAPI CARA MEMBUAT TYPE-TEXT MOHON KOMENY MENYANGKUT TOPIK YAH,HAHAHA

Ninda Rahadi mengatakan...

blog mana lagi yg njiplak blogmu mas? klik..

mading-kun mengatakan...

oh, gitu ya bro..
baru tau saya :)

Mine Always mengatakan...

hemmmm...gak ngerti aq hehe

Amdhas mengatakan...

bener mas adit,,ini bagus sekali,dymanicdrive di sana baru saja saya kunjungi karna tau dari blognya mas adit,keren banget memang

catatan kecilku mengatakan...

Dapat ilmu baru lagi disini... ^_^
Thanks ya.

reni mengatakan...

Maaf tadi nyari buku tamu tak ada disini.
Makasih dah mampir ke tempatku, akun FBku Reni Judhanto

ceritatugu mengatakan...

hehe..kelihatannya kok agak susah dikit.trims

NURA mengatakan...

salam sobat
trims tutorialnya mas,,
bisa dicoba nich,,java scriptnya.

blogdunia mengatakan...

sebenarnya sih pengen banget pake ,,
tapi takut jadi eror,, nanti aja deh,,
tapi makasih neh,, ilmunya akan saya tampung,,
ilmu itu tidak ada yang sia2 semuanya pasti berguna.
makasih kang adit

Amdhas mengatakan...

dengan tidak mengurangi rasa hormat,,saya membuat postingan untuk mas adit,di blog saya..
maaf komennya tidak sesuai dengan tema postingan...

funny vintage t shirts mengatakan...

Wah bagus nih .. thanks untuk infonya.

attayaya mengatakan...

bisa untuk 1 postingan ya?
aku coba aaaaah

fb keknya udah ku approve semua tadi malem

tukang komen mengatakan...

Saya juga bingung nih,kayaknya artikelnya bukan tentang copas, tapi kok pada komen copas yah..... btw.. saya suka tutorialnya... semangat....

Ngeposting ni yee mengatakan...

tHanks udh dI share sObat,..,

Saung Web mengatakan...

Mampir disiang bolong .. hehe banyak banget kodenya yah.. but makasih deh siapa tahu ntar perlu.. hehe

Blogger mengatakan...

wah ketinggalan yg ini sob haha..mantep nech buat di coba sob mudah2an berhasil dah...
sukses sobat!

blogdunia mengatakan...

wah terima kasih kang adit,, ternyata saya sudah hadir,,

Anonim mengatakan...

WAH WAH... COPASER GENTAYANGAN .. HAHAHA....