menyembunyikan widget / tulisan jQuery fadeIn() fadeOut()

Bagaimanakah cara menuliskan / membuat tulisan , gambar , widget tersembunyi dan terlihat menggunakan script jQuery fadeIn() fadeOut() . . .?
jumpa lagi dengan mastony yang sudah lama gak update dikarenakan sibuk di ofline ,, bailkah pada kesempatan kita kali ini kita akan bahas cara menyembunyikan widget / gambar , tulisan sekalipun yaitu menggunakan script jquery fadeIn() fadeOut() .
oy , pada artikel mastony sebelumnya sudah membahas cara menyembunyikan widget / tulisan / gambar juga namun menggunakan javascript silahkan anda baca disini jika sudah baca mari kita lanjut
contoh :
$("SELECTOR / #").click(function(){$("P").fadeOut();});
adapun beberapa value untuk fadeOut() maupun fadeIn() untuk mengontrol kecepatan element tersebut menghilang atau menampakkan selengkapnya silahkan lihat pada tabel dibawah :
valuedescription
("slow")perubahan element akan lambat
("fast")perubahan element akan cepat
(2000)sesuaikan perubahan menggunakan milisecond
baiklah kita akan membuat sebuah 3 element div dengan ID div1 , div2 dan div3 ..

fadeOut()
fadeOut("slow")
fadeOut(2000)


nah hasil diatas seperti berikut ini penulisannya ..

<button>HIDE ELEMENT DIV</button>
<div id="div1" style="width:100px;height:100px;background:red;color:white;font-weight:bold;text-align:center;">fadeOut()</div>
<div id="div2" style="width:100px;height:100px;background:blue;color:white;font-weight:bold;text-align:center;">fadeOut("slow")</div>
<div id="div3" style="width:100px;height:100px;background:green;color:white;font-weight:bold;text-align:center;">fadeOut(2000)</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(2000);
});});
CATATAN : jQuery instal
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
untuk penginstalan script jquery anda bisa meletakkan di widget element blog di pakai langsung juga bisa .
untuk penulisan script jquery
 $(document).ready(function(){$("SELECTOR").click(function(){$("SELECTOR") .. ubah disini .. });});

contoh berikutnya seperti berikut :
SHOW HIDE

PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN


atas seperti berikut ini penulisan jquery script nya ..
<span id="show">SHOW </span> <span id="hide">HIDE</span>
<p style="color: green; font-family: courier;">
PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN</p>
<script>
$(document).ready(function(){$("#show").hover(function(){$("p").fadeIn();}); $("#hide").hover(function(){$("p").fadeOut();});});
</script>
dan mungkin saya rasa cukup sekian mengenai pembahasan cara menyembunyikan widget / tulisan menggunakan script jQuery semoga bermanfaat untuk sobat ..
Continue Reading ..

Mengatur Jarak Element ( CSS margin , padding )

Bagaimanakah cara Mengatur Jarak Element div , img , p dan lain sebagainya . . ( CSS margin , padding )
Apa Itu Margin ?, dan Apa Itu Padding ,,
margin adalah sebuah property dari css yang berfungsi untuk mengatur jarak Element dengan Element lain Sedangkan Padding property yang berfungsi untuk mengatur jarak content / isi dengan Element itu sendiri atau bisa kita samakan dengan ketebalan Element . Sedikit penjelasan mengenai CSS margin , padding di atas .
baiklah , Tutorial kita kali ini yaitu cara mengatur jarak Element baik itu div , img , p dan lain sebagainya .oy , bagi sobat yang belum baca Artikel sebelumnya silahkan baca disini yaitu Tips Mengatur Letak Element CSS FLOAT , CLEAR atau baca saja nanti setelah menyimak cara mengatur jarak Element .
Adapun beberapa property dan value untuk CSS margin , padding ini . selengkapnya silahkan lihat pada tabel di bawah ini :
PROPERTYDESCRIPTION
marginmenyesuaikan jarak element dengan element lain
margin-topmenyesuaikan jarak element hanya pada bagian atas element
margin-rightmenyesuaikan jarak element hanya pada bagian kanan element
margin-bottommenyesuaikan jarak element hanya pada bagian bawah element
margin-leftmenyesuaikan jarak element hanya pada bagian kiri element
paddingmenyesuaikan jarak element dengan isi element
padding-topmenyesuaikan jarak element dengan isi element hanya pada bagian atas content
padding-rightmenyesuaikan jarak element dengan isi element hanya pada bagian kanan content
padding-bottommenyesuaikan jarak element dengan isi element hanya pada bagian bawah content
padding-leftmenyesuaikan jarak element dengan isi element hanya pada bagian kiri content

VALUE KETERANGAN
pxmenyesuaikan jarak Element menggunakan pixels
emmenyesuaikan jarak Element menggunakan em
ptmenyesuaikan jarak Element menggunakan pt
cmmenyesuaikan jarak Element menggunakan centi meter

dibawah ini adalah gambar border , content , margin , padding :
GAMBAR

margin padding

Contoh 1 :
#img {margin:8px 0 8px;}
CSS di atas menyebutkan bahwa jarak element bagian atas dan bawah 8px , sedangkan pada bagian kiri dan kana adalah 0 .
contoh 2 :
#img {margin:8px 8px;}
code CSS di atas sama dengan code 
#img {margin:8px;}
contoh 3:
#img {margin:4px 8px 16px 32px;}
code CSS di atas menyebutkan bahwa jarak atas 4px , kanan 8px , bawah 16px , kiri 32px . Aturan css seperti di atas sama dengan aturan css padding . click button di bawah ini untuk mengetahui posisi margin dan padding beserta code css nya ,, POSISI MARGIN
Source Code
#box img {width:60px;height:60px;padding:0;margin:0;}
POSISI PADDING
contoh di atas hanya beberapa code css saja untuk keseluruhan akan seperty berikut ini :
<style> #BOX {width:200px;height:200px;margin-top:20px;padding:0;border:1px solid black;position:relative;clear:both;} #BOX img{width:80px;height:80px;padding:0;margin:0;} </style> <div id="BOX"> <img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/> <img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/> </div>
untuk CSS positioning silahkan baca disini yaitu cara mengatur posisi Element (CSS POSITION PROPERTY ) . dan mungkin saya rasa cukup disini pembahasan mengenai CSS margin padding di cara mengatur jarak Element . . Dan semoga Artikelnya bermanfaat untuk sobat ,,,,
Continue Reading ..

Tips mengatur letak Element blog ( CSS Float,Clear )

Bagaimanakah Cara Mengatur Letak Element div , img , p dan lainnya pada Blog ,, ( CSS FLOAT , CLEAR PROPERTY )
Sebetulnya saya masih perlu belajar banyak mengenai CSS ini , Tpi rasanya sangat pusing Alias mumet dengan RATUSAN bahkan RIBUAN Property dan Value pada css ini .Oke!! Topik kita kali ini yaitu Cara menempatkan / mengatur letak suatu Element div , img , p di blog Anda menggunakan property clear dan float . oy,pada artikel sebelumnya mastony sudah membahas mengenai cara mengatur posisi Element ( CSS POSITION PROPERTY ) Silahkan Baca disini Dan untuk property Value selengkapnya silahkan anda lihat pada tabel di bawah ini :

PROPERTYVALUEKETERANGAN
floatleftElement akan menempel ke kiri element induk dan Element lainnya berada disebelah kanannya .
rightElement akan menempel ke kanan element induk dan Element lainnya berada disebelah kirinya
noneElement akan tidak menempel ke kiri ataupun ke kanan element akan menempel ke atas element induk element lainnya berada di bawahnya
inheritElement akan mengikuti aturan css sebelumnya
clearleftElement Akan Menempel ke kiri Element induk dan Element lain akan selalu berada dibawahnya
rightElement Akan Menempel ke kanan Element induk dan Element lain akan selalu berada dibawahnya
bothElement Akan Menempel ke Atas Element induk dan Element lain akan selalu berada dibawahnya
inheritElement akan mengikuti aturan css sebelumnya
klick button dibawah ini untuk melihat letak gambar mengikuti aturan CSS float , beserta kode penulisannya ,,

Source Code
#FloatLeft img{width:60px;height:60px;display:block;margin:5px;float:left;}

Float Property







KETERANGAN : code di atas hanya beberapa kode css saja , sedangkan untuk penerapan keseluruhan seperti code dibawah ini:

<style>#FLOAT {margin:5px;padding:0;width:500px;height:400px;border:1px solid black;}
#FLOAT  img{width:60px;height:60px;display:block;margin:5px;float:left;padding:0;}
</style>
<div id="FLOAT">
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
</div>

dan saya rasa cukup sekian Tutorial mengenai CSS float , untuk property CLEAR silahkan anda mencobanya sendiri .. dan semoga artikelnya bermanfaat ...




Continue Reading ..

Tips Membuat Popup Window ( javascript )

Tips membuat popup window yaitu menggunakan text javascript ..
sebetulnya saya masih belajar mengenai text javascript ini , namun disini saya akan membagikan tips yaitu cara membuat popup window ketika user menekan navigasi terpilih . yang mastony maksud yaitu menambahkan text javascript kedalam navigasi tersebut .
adapun beberapa dari text javascript yang dapat kita buat popup window misalnya :
  • javascript Alert .
  • javascript Prompt Dialog .
  • javascript Confirm Dialog .
  • javascript window open Method .
contoh kita akan buat popup window (window open method ) yang linknya mengarah ke http://id-mastony.blogspot.com
seperti berikut ini :


click button diatas untuk membuka popup window ..
nah hasil code diatas seperti berikut ini :

<script>var mywin; function popup_window(){mywin=window.open("http://id-mastony.blogspot.com/","_blank","toolbar=yes,location=yes,menubar=yes,copyhistory=yes,directories=no,status=no,resizable=no,width=500,height=400");
mywin.moveTo(100,100);}</script>
<form>
<input onclick="popup_window()" type="button" value="Open Popup Window1">
</form>
KETERANGAN : menubar=yes , toolbar=yes adalah menu dan toolbar pada browser anda masing - masing history=yes adalah riwayat browser untuk merubah lebar anda rubah pada bagian width=500px dan tinggi height=400px sedangkan untuk merubah posisi window silahkan rubah pada bagian mywin.moveTo(100px,100px) .
contoh 2 seperti berikut ini :



click button diatas untuk membuka popup window ..
Hasil code diatas seperti berikut :

<script>
var mywind; function popup_window2(){mywind=window.open("http://id-mastony.blogspot.com/","_blank","toolbar=no,location=no,menubar=no,copyhistory=no,directories=no,status=no,resizable=no,width=500,height=400"); mywind.moveTo(200,300);}
</script>
<form>
<input onclick="popup_window2()" type="button" value="Open Poup Window2">
</form>

contoh window / jendela kosong dan di isi hanya dengan text / tulisan seperti berikut ini :



<button onclick="open_new()">open new window</button>
<script>function open_new(){var newW=window.open("","","width=400,height=400"); newW.document.write("this is my window ");}</script>
nah gimana ,, saya rasa cukup disini pembahasan mengenai Cara membuat popup window menggunakan text javascript . semoga artikelnya bermanfaat ,,
Continue Reading ..