Thaimisc.com : ทำ Link แบบพอคลิ๊กแล้วมีหน้าต่างสไลด์ลงมา
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำ Link แบบพอคลิ๊กแล้วมีหน้าต่างสไลด์ลงมา
เขียนโดย Poj , 27-04-2007
ทำ Link แบบพอคลิ๊กแล้วมีหน้าต่างสไลด์ลงมาข้างๆ เมื่อคลิ๊กที่ Link อีกครั้งก็จะเป็นการปิดหน้าต่าง ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<!-- แก้ไขรูปแบบของหน้าต่างที่เลื่อนมาด้านล่างนี้ครับ -->
<style>
#dhtmlgoodies_contentBox {
border:1px solid #317082;
height:0px;
visibility:hidden;
position:absolute;
background-color:#E2EBED;
overflow:hidden;
padding:2px;
width:250px;
}

#dhtmlgoodies_content {
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}

#dhtmlgoodies_slidedown {
position:relative;
width:250px;
}
</style>

<script>

var initHeight = 0;
var slidedown_direction = 1;
var slidedownContentBox = false;
var slidedownContent = false;
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3; // Higher value = faster script
var slidedownTimer = 7; // Lower value = faster script

function slidedown_showHide() {
if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1;
if(!slidedownContentBox) {
slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox');
slidedownContent = document.getElementById('dhtmlgoodies_content');
contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight;
}
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start();
}

function slidedown_showHide_start() {
if(!slidedownActive)return;
initHeight = initHeight/1 + slidedown_direction;
if(initHeight <= 0) {
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
initHeight = 0;
}
if(initHeight>contentHeight) {
slidedownActive = false;
}
slidedownContentBox.style.height = initHeight + 'px';
slidedownContent.style.top = initHeight - contentHeight + 'px';
setTimeout('slidedown_showHide_start()',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}

function setslidedownWidth(newWidth) {
document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px';
document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';
}

function setSlideDownSpeed(newSpeed) {
slidedownSpeed = newSpeed;
}
</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<script type="text/javascript">
setSlideDownSpeed(4);
</script>
<div id="dhtmlgoodies_slidedown">
<div id="dhtmlgoodies_control">
<font face="MS Sans Serif" size="1">
<a href="#" onclick="slidedown_showHide();return false;">Click Here !!</a>
</font>
</div>
<div id="dhtmlgoodies_contentBox">
<div id="dhtmlgoodies_content">
<!-- แก้ไขข้อความที่จะให้อยู่ในกรอบที่ด้านล่างครับ ใช้ HTML ช่วยได้ -->
<font face="MS Sans Serif" size="1">
เป็นแบบที่เห็นนี่ครับ คลิ๊กที่ LINK อีกทีเพื่อให้หน้าต่างนี้เลื่อนกลับไป <a target="_blank" href="http://www.thaimisc.com">ไปหน้าหลัก</a>
</font><br><br>
<!-- สิ้นสุดการแก้ไขข้อความที่จะให้อยู่ในกรอบที่ด้านล่างครับ ใช้ HTML ช่วยได้ -->
</div>
</div>
</div>


Credit - Codetukyang

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com