ไร้คอนเซปต์

Smart Phone Club & Computer Webmaster Programmer => Webmaster Am i : เว็บมาสเตอร์ & โปรแกรมเมอร์ => ข้อความที่เริ่มโดย: อาร์ตทูบี ที่ กุมภาพันธ์ 26, 2007, 10:21:41 PM



หัวข้อ: ทำ IFrame เล็กๆให้เลื่อนตาม Scroll Bar บนเวป
เริ่มหัวข้อโดย: อาร์ตทูบี ที่ กุมภาพันธ์ 26, 2007, 10:21:41 PM
ทำ IFrame เล็กๆให้เลื่อนตาม Scroll Bar บนเวป 
 
เพื่อนๆคงเคยเห็น โฆษณาที่เลื่อนตามสกอลบาร์ อันนี้สามารถเอาไปประยุกต์ใช้งานได้หลายอย่างครับ..... ดูตัวอย่างได้ที่นี่ครับ ตัวอย่างจาก thaimisc.com (http://www.thaimisc.com/perl/iframe_scroll.html)

วิธีการทำ
1. ให้นำเอา Tag Java ข้างล่างนี้ไปใส่ใน Tag HTML ส่วน <BODY>.....</BODY>
โค๊ด:
<script type="text/javascript">

//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="iframe.html" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -500px; top: -500px;"></iframe>'

//specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px"

//specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom"

var ie=(document.all window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

if (ie)
document.write(iframetag)

function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
}

function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
}

if (window.attachEvent)
window.attachEvent("onload", positionit)

</script>
โดยให้เปลี่ยนชื่อ File HTML ที่จะแสดงใน IFrame (ตัวหนังสือ สีน้ำเงิน) ให้เป็นชื่อ File ที่คุณต้องการครับ

 

2. ทำการสร้าง File HTML ที่จะใช้แสดงใน IFrame ครับ ในกรณีที่ใช้ Code Java จากข้อ 1 เลยให้คุณสร้าง file html ชื่อ iframe.html ครับ
ใน file html นี้คุณสามารถใส่ Tag html Java หรือลูกเล่นๆต่างๆลงไปได้ครับ และหากใครที่ต้องการใส่ Link สำหรับ ปิดหน้าต่าง IFrame ก็ให้ใส่ Code Java ข้างล่างนี้ลงไปใน file นี้ได้เลยครับ


โค๊ด:
<script>
function closeiframe(){
parent.document.getElementById("masterdiv").style.display="none"
}
</script>
<a href="javascript:closeiframe()">ปิดหน้าต่างนี้</a>