Monday, November 21, 2011

two frame chatbox animation | jQuery

image

atas pertanyaan ni, aku pun buat entri ni. sebenarnya senang je buat macam aku. bukan nak cakap besar, tapi kalau dah faham macam mana dia berfungsi, memang akan jadi senang. tapi kena banyak ingat la. haha

HTML code:

<div class="chat">
   <div id="chathead">HEAD FRAME</div>
   <div id="chatbody" style="display:none;">BODY FRAME</div>
</div>

jQuery code:

<script>
$(document).ready(function(){
    $("#chathead").mouseenter(function(){
        $("#chatbody").slideDown("slow");});
    $(".chat").mouseleave(function(){
        $("#chatbody").slideUp("slow");});
});
</script>

simple explanation:

HEAD FRAME = form frame. ambil code dari tag <iframe> sampai </iframe>
BODY FRAME = body frame. ambil code dari tag <iframe> sampai </iframe>
$("#chathead").mouseenter(function(){ = mouse entering head frame event
$("#chatbody").slideDown("slow"); = show chatbody
$(".chat").mouseleave(function(){ = mouse leaving chat box function
$("#chatbody").slideUp("slow"); = hide chatbody

this happen to be working only if the message box have two frames. if you’re using single frame message box, the code will be different.

I’m sorry saida. your message box seems to be single frame.

No comments:

Post a Comment