Cách tạo banner floating site chạy dọc trên Xenforo?

Thực ra thì mình có đọc bài này của bác Alucar (http://vietxf.org/threads/quang-cao-truot-2-ben-cho-xenforo.25/) và áp dụng thành công trên forum demo của mình (http://forum2.vietdesigner.net/).



Tuy nhiên sau khi áp dụng mình thấy có sự bật cập khi để banner floating kiểu này, đó là khi rê chuột, chính xác là dùng con lăn ở giữa chuột để di chuyển lên xuống thì banner nó cứ nhảy nhảy theo nhìn rất rối mắt, mình muốn nó nằm yên mà di chuyển lên xuống thôi thì làm như thế nào nhỉ?


P/s: mấy nay VietXF lại đơ đơ nữa rồi, ko biết bác Alucar lại làm gì forum thế nhỉ

 

Nếu muốn nằm yên thì ko dùng java nữa, mà chỉnh css thôi, để thuộc tính position là fixed là đứng yên ngay

 

Nghĩa là sẽ bỏ đoạn script ở phía dưới đi hả bác?

Mã:

<script>
    function FloatTopDiv()
    {
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
        var d = document;
        function ml(id)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id)
        {
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft=function()
        {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY =  document.documentElement.scrollTop;
            else if (document.body)
                var pY =  document.body.scrollTop;
            if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
            ftlObj.y += (pY+startRY-ftlObj.y)/16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv()
    {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000)
        {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else
        {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

 

bạn chỉ cần 1 đoạn này thôi

Mã:

<div id="divadright" style="position: fixed; top: 100px; float:right; right:0">
<a href="http://vietdesigner.net"><img src="https://dl.dropbox.com/u/41564288/120x600.jpg" width="125"></a>
</div>
 
<div id="divadleft" style="position: fixed; top:100px; float:left ">
<a href=" http://vietdesigner.net"><img src="https://dl.dropbox.com/u/41564288/120x600.jpg" width="125"></a>
</div>

các giá trị top, right, left bạn chỉnh cho phù hợp

 

Như thế này thì ok thật, cơ mà đặt thế này thì khi dùng màn hình vuông thì 2 cái quảng cáo này sẽ chèn vào trong che mất nội dung rất khó chịu! Có cách nào đẩy nó ra ngoài ko? Nghĩa là những ng dùng màn hình vuông sẽ ko thấy quảng cáo này, còn những người dùng màn hình wide mới thấy?

 

vuông hay gì thì nó tùy thuộc vào độ phân giải màn hình bạn đặt là bao nhiêu, mình mới test thì nếu xuống đến 1024x768 là bị đè rồi, còn cao hơn thì vẫn ok, nhưng bây giờ còn ai xài loại màn hình độ phân giải 1024 nữa bạn

 

vuông hay gì thì nó tùy thuộc vào độ phân giải màn hình bạn đặt là bao nhiêu, mình mới test thì nếu xuống đến 1024x768 là bị đè rồi, còn cao hơn thì vẫn ok, nhưng bây giờ còn ai xài loại màn hình độ phân giải 1024 nữa bạn

 

Mình thấy vẫn còn nhiều người dùng ấy chứ, trong đó có mình nè! Nói chung là cần phải toàn vẹn 1 chút, mình thấy cái code khi có script là ổn, nhưng mà chỉ bực 1 cái là nó chạy nhảy tưng tưng thôi, phải chỉ nó nằm im mà chạy thì hay wá

 

css thuần mà bạn, muốn vậy thì phải chạy script rồi, mình cứ nghĩ ko xài để phân giải cỡ đó nữa

 

em đang sài 1280x1024 nè ! 19p

 

chèn js chạy được không bác Dư

 

Đã fix đc rồi, nó đã đứng yên khi chạy và ko hiện đè lên màn hình 768x1024, tuy nhiên còn 1 cái cần khắc phục là khi kéo xuống cuối thì nó bị đè lên cái background footer trông khá mất thẩm mỹ, làm sao để đến footer nó dừng lại nhỉ

Demo: http://forum2.vietdesigner.net/

 

Bác fix như thế nào, cho xem code của bác.

Còn muốn dừng lại ở footer thì bác kết hợp với cái này xem

Mã:

<script>
var $stickyHeight = 460; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 1060; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 90; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
    var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
        var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
        $('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
 
    }else if($(window).scrollTop() + $padding > $topOffset) {
        $('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
        $('#sticky').attr('style', 'position:relative;');
    }
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>

 

Code này nè bác:

Mã:

<div id="divAdRight" style="display: block; position: fixed; top: 100px;">
<a href="http://vietdesigner.net"><img src="https://dl.dropbox.com/u/41564288/120x600.jpg" width="125" /></a>
</div>
<div id="divAdLeft" style="display: block; position: fixed; top: 100px;">
<a href=" http://vietdesigner.net"><img src="https://dl.dropbox.com/u/41564288/120x600.jpg" width="125" /></a>
</div>
<script>
    function FloatTopDiv()
    {
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
        var d = document;
        function ml(id)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id)
        {
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft=function()
        {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY =  document.documentElement;
            else if (document.body)
                var pY =  document.body;
            if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
            ftlObj.y += (pY+startRY-ftlObj.y)/16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv()
    {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000)
        {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else
        {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

Vừa chạy wa xem code bác share bên topic kia, đã làm ok nhưng ko biết cách kết hợp vs code dừng chân trang này

 

Thử thêm cái script:

Mã:

<script>
var $stickyHeight = 460; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 3560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 300; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
 
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>

Nhưng vẫn ko thấy nó áp dụng !

 

css là link thuần nên chắc kô làm được rồi

 

để 2 cai quảng cáo nhìn buồn cười như hai khúc gỗ treo trước cửa nhà thu gọn nó đi

 

Thu gọn là sao bạn?

 

thì đừng để nó tràn lên Banner và footer, cho nhỏ ảnh lại thế là xong cần gì bắt buộc ảnh đó to bao nhiêu bao nhiêu, miễn sao nhìn quảng cáo hiểu rõ nội dung là được

 

Tràn lên banner là sao nhỉ? chỉ có tràn lên footer thôi