Tag Archives: css

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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.teks{
text-decoration:blink;
}
.teks{ text-decoration:blink; }
.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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function blink(yangDituju){
$(yangDituju).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.teks');
function blink(yangDituju){ $(yangDituju).fadeOut('slow', function(){ $(this).fadeIn('slow', function(){ blink(this); }); }); } blink('.teks');
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:

Efek “Word Wrap” Di Elemen “DIV” Dengan “CSS”

Posted on by
Word Wrap CSS

Word Wrap CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.wordwrap{
word-wrap: break-word; /* IE 5.5+ */
white-space: pre-wrap; /* CSS-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
}
.wordwrap{ word-wrap: break-word; /* IE 5.5+ */ white-space: pre-wrap; /* CSS-3 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -o-pre-wrap; /* Opera 7 */ }
.wordwrap{
	word-wrap: break-word; /* IE 5.5+ */
	white-space: pre-wrap; /* CSS-3 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -o-pre-wrap; /* Opera 7 */
}

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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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