Bo-Blog Việt Nam

**daicahuy** · #1 24-06-2010, 09:47 PM

<?

  
<html>
<head>
<**** **********="Content-Type" content="text/html; charset=iso-8859-1" />
<title>uoon demo Set Position</title>
<style type="text/css">
.float {
    width: 115px;  
    height: 200px;  
    border: solid 1px blue;
}

</style>
</head>
<body>
    <div style="width: 2000px;height: 2000px;">
        <div id="a" class="float">a</div>
        <div id="b" class="float">b</div>
        <div id="c" class="float">c</div>
    </div>
</body>

<script type="text/javascript">
    
    function setPosition(id, position) {
        
        var store = {
            ram : {
                top : 0,
                left : 0,
                right : 0,
                bottom : 0
            },
            rom : {
                top : null,
                left : null,
                right : null,
                bottom : null
            }
        };
        
        
        for (var i in position) {store.rom[i] = position[i];}
        
        var element = document.getElementById(id);
        
        for (i in store) {element[i] = store[i];}
        
        element.rom.move = function() {
            
            if (window.innerHeight) {
                var topPage = window.pageYOffset;
                var leftPage = window.pageXOffset;
                var rightPage = leftPage + window.innerWidth - element.offsetWidth;
                var bottomPage = topPage + window.innerHeight - element.offsetHeight;
            }
            else {
                var topPage = document.body.scrollTop;  
                var leftPage = document.body.scrollLeft;
                var rightPage = leftPage + document.body.clientWidth - element.offsetWidth;
                var bottomPage = topPage + document.body.clientHeight - element.offsetHeight;
            }
            

            element.style.position = "absolute";
            
            if (element.rom.top != null) {
                element.ram.top += Math.round((topPage + element.rom.top - element.ram.top)/20);
                element.style.top = element.ram.top;
            }
            if (element.rom.left != null) {
                element.ram.left += Math.round((leftPage + element.rom.left - element.ram.left)/20);
                element.style.left = element.ram.left;
            }
            if (element.rom.right != null) {
                element.ram.right += Math.round((rightPage - element.rom.right - element.ram.right)/20);
                element.style.left = element.ram.right;
            }
            if (element.rom.bottom != null) {
                element.ram.bottom += Math.round((bottomPage - element.rom.bottom - element.ram.bottom)/20);
                element.style.top = element.ram.bottom;
            }
            
            setTimeout("document.getElementById('"+element.id+"').rom.move()",10);
        
        };    
        
        element.rom.move();
    }
    

    setPosition("a", {top: 20, right: 30});
    setPosition("b", {bottom: 20, right: 30});
    setPosition("c", {top: 20, left: 30});
            
    

</script>
</body>
</html>
  
?>

Trích:

Muốn đặt một vùng quảng cáo ở vị trí nào bạn chỉ cần gọi hàm setPosition và truyền vào cho nó id của vùng quảng cáo và vị trí mà bạn muốn nó xuất hiện như sau:

Vd:
setPosition("ad", {top: 20, left: 100});

hàm này chỉ hỗ trợ 4 loại định vị là top, left, right, bottom
khi sử dụng tùy ý thiết lập.

Cái này mình thấy bên FCVN nên mình post qua đây cho anh em nghiên cứu.

Mình gà quá bỏ vào boblog mà mãi chưa dc....

View more the latest threads:

**khanGPro** · #2 25-06-2010, 07:01 AM

cái này được đấy

**Eyes** · #3 26-10-2010, 09:21 PM

Chèn Vào đâu zị bạn

**MinhBlog.Com** · #4 27-10-2010, 08:07 AM

cột bên .

**BlackRose007** · #5 01-07-2011, 01:25 AM

chi tiết chút đi pro đọc xong ko biết nhét vào đâu hết

**xuandan22** · #6 01-07-2011, 09:24 AM

mình đưa lên bị lỗi ko hiển thị mà!

**somihanquoc** · #7 11-08-2012, 10:39 AM

Mình viết 1 plugin quảng cáo trượt 2 bên rất tiện cho các bạn dùng wordpress. Các bạn download tại đây nhé: wordpress.org/extend/plugins/float-left-right-advertising/