Add topics
facebox tweeter Emotion

 Tạo vùng quảng cáo trổi nổi trên trang web. 2007-07-30 10:46:01


Các bạn chắc đã quen thuộc với việc 1 trang web có 2 vùng quảng cáo chạy dọc biên. Hiện tại trên mạng có khá nhiều code giải quyết bài toán này, nhưng thường khá là phức tạp, rườm rà. Mấy hôm trước có 1 người bạn nhờ mình viết, tiện thể post lên để anh em tham khảo và áp dụng.
Code của mình có thể còn dài dòng hơn, nhưng có ưu điểm là dùng rất dễ và có thể áp dụng cho rất nhiều trường hợp.
<?

<html>
<head>
<meta http-equiv="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>

?>

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.

Tra loi 47 comment(s) uoon 2007-07-30 10:46:01

e-learning 2007-07-30 02:24:04

Bạn có thể cho xem demo được không?

Tra loi

Quan Tran Anh 2007-07-31 01:50:38

Trời, copy nguyên đoạn của Uoon về, save thành file .htm là xong thôi. Hôm nọ nó cho tui xem rùi, hay lắm :D đã kịp khoe trên này rùi :D

Tra loi

toiyeuphp 2007-07-31 03:04:51

Lỗi scroll bar trong FF

Tra loi

uoon 2007-07-31 06:20:07

Cãi một tí: Có thấy lỗi đấy đâu.
Nhưng  có một lỗi làm đau cả đầu .
Đấy là việc cho thêm dòng code này vào đầu file:
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

thế là script chết toi luôn.
buồn thật.

Tra loi

Nguyễn Minh Tân 2007-07-31 08:19:02

Mong các bác giải thích hộ em đoạn này cái , em chưa gặp và cũng chưa viết kiểu này bao giờ T_T

var store = {
ram : {top : 0,left : 0,right : 0,bottom : 0},
rom : {top : null,left : null,right : null,bottom : null}
};

Bác nào có link tham khảo càng tốt T_T , em cám ơn

Tra loi

NguyÅn Minh Tân 2007-07-31 10:44:25

Thui cám ơn bác , em kiếm được link tham khảo rùi , chắc là phải học javascript thui T_T

Tra loi

009900 2007-10-25 01:11:08

Vẫn là chủ đề này em mong admin và mọi người giúp đỡ với....nghĩa là em dùng lại code của mọi người cho thôi...xong không tài nào nó giống được, thứ nhăt là ở FF đứng im thứ 2 là ỏ IE nó bị lệnh ko cân nhở ở site họ.......Mong mọi người giải thích với nha..vidụ một code ở trang :nhac.vui.vn em lưu lại như sau :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

<DIV id=divAdLeft style="DISPLAY: none; LEFT: -110px; WIDTH: 120px; POSITION: absolute; TOP: 0px" align="left">
<A href="http://qctt24h.24h.com.vn/banner/phim_HBO.htm" target="_blank">
<img border="0" width="112" height="480" src="http://www5.nhac.vui.vn/Home/logo/115x480hbo.gif">
</A>
</DIV>

<DIV id=divAdRight style="DISPLAY: none; LEFT: -110px; WIDTH: 120px; POSITION: absolute; TOP: 0px" align="right">
<A href="http://nhac.vui.vn" target="_blank">
<img border="0" width="112" height="480" src="http://www5.nhac.vui.vn/Home/logo/115x480hbo.gif">
</A></DIV>


<script language="javascript" type="text/javascript">
var adRWidth=120;
var adLWidth=1003;
function FloatTopDiv()
{
startX = document.body.clientWidth - adRWidth, startY = 0;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;

if (document.body.clientWidth < 980) startX = -adRWidth;


function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
el.y = startY;
return el;
}

window.stayTopLeft=function()
{

if (document.documentElement && document.documentElement.scrollTop)
var pY = ns ? pageYOffset : document.documentElement.scrollTop;
else if (document.body)
var pY = ns ? pageYOffset : document.body.scrollTop;

if (document.body.scrollTop > 2){startY = 0} else {startY = 0};
ftlObj.y += (pY + startY - ftlObj.y)/8;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 1);
}
ftlObj = ml("divAdRight");
stayTopLeft();
}

function FloatTopDiv2()
{
startX2 = document.body.clientWidth - adLWidth, startY2 =0;
var ns2 = (navigator.appName.indexOf("Netscape") != -1);
var d2 = document;

if (document.body.clientWidth < 980) startX2 = -adLWidth;


function ml2(id)
{
var el2=d2.getElementById?d2.getElementById(id):d2.all?d2.all[id]:d2.layers[id];
if(d2.layers)el2.style=el2;
el2.sP=function(x,y){this.style.left=x;this.style.top=y;};
el2.x = startX2;
el2.y = startY2;
return el2;
}

window.stayTopLeft2=function()
{
if (document.body.clientWidth < 980)
{
ftlObj2.x = - 115;ftlObj2.y = 0; ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
else
{
if (document.documentElement && document.documentElement.scrollTop)
var pY2 = ns2 ? pageYOffset : document.documentElement.scrollTop;
else if (document.body)
var pY2 = ns2 ? pageYOffset : document.body.scrollTop;

if (document.body.scrollTop >2){startY2 = 0} else {startY2 =0};

if (document.body.clientWidth >= 1024)
{
ftlObj2.x = 0;ftlObj2.y += (pY2 + startY2 - ftlObj2.y)/8; ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
else
{

ftlObj2.x = startX2;
ftlObj2.y += (pY2 + startY2 - ftlObj2.y)/8;
ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
}
setTimeout("stayTopLeft2()", 1);
}

ftlObj2 = ml2("divAdLeft");
stayTopLeft2();

}



function ShowAdDiv()
{
var objAdDivRight = document.getElementById("divAdRight");
var objAdDivLeft = document.getElementById("divAdLeft");
objAdDivLeft.style.display="block"
objAdDivRight.style.display="block"
if (document.body.clientWidth < 980)
{
objAdDivRight.style.left = - adRWidth;
objAdDivLeft.style.left = - adLWidth;
}
else
{
objAdDivLeft.style.left = 0;
objAdDivRight.style.left = document.body.clientWidth - adRWidth;
}
FloatTopDiv();
FloatTopDiv2();
}
ShowAdDiv();
LComplete = 1;
</script>
</body>
</html>
Mọi người trả lời cho em với nha...em mới vào diễn đàn bài viết số 1 có gì ko đúng mọi người chỉ bảo nhé..Thank all

Tra loi

TG 2007-10-25 08:15:22

TG copy code demo của uoon và chay ok trên cả FF và IE,

Tra loi

Lamborghini 2007-10-25 09:28:50

code của anh uoon chạy ok.
chẳng biết có xung đột vũ trang j với W3C ko, lỗi anh uoon đưa ra lần nào cũng gặp, toàn phải bỏ nó đi!

Tra loi

009900 2007-10-25 10:48:18

cái của bạn uoon khi mình thu bé lại trang web thì 2 cái quảng cáo đó không mất và vẫn được load trên màn hình......như vậy thì khó coi lắm....bạn uoon đã có phiên bản mới chưa vậy...? Dậy bọn tớ với nha...tớ mới newbie quá......hi`...Thank all

Tra loi

uoon 2007-10-25 10:49:09


Hì thấy mọi người quan tâm đến nó nên đã cố thử lại, code bây giờ có thể chạy tốt với cả DOCTYPE phiền anh em tham khảo thêm lần nữa.

@: Lamborghini, đồng chí có thể cho xem cái lỗi đó không. hì đã có công fix thì fix cho một thể mà. Cảm ơn nhé.

Code demo:
<?php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="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 {
if (document.documentElement && document.documentElement.clientHeight) {
var topPage = document.documentElement.scrollTop;
var leftPage = document.documentElement.scrollLeft;
var browserHeight = document.documentElement.clientHeight;
var browserWidth = document.documentElement.clientWidth
} else if (document.body) {
var topPage = document.body.scrollTop;
var leftPage = document.body.scrollLeft;
var browserHeight = document.body.clientHeight;
var browserWidth = document.body.clientWidth;
}
var rightPage = leftPage + browserWidth - element.offsetWidth;
var bottomPage = topPage + browserHeight - 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 + "px";
}
if (element.rom.left != null) {
element.ram.left += Math.round((leftPage + element.rom.left - element.ram.left)/20);
element.style.left = element.ram.left + "px";
}
if (element.rom.right != null) {
element.ram.right += Math.round((rightPage - element.rom.right - element.ram.right)/20);
element.style.left = element.ram.right + "px";
}
if (element.rom.bottom != null) {
element.ram.bottom += Math.round((bottomPage - element.rom.bottom - element.ram.bottom)/20);
element.style.top = element.ram.bottom + "px";
}

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>


?>

Tra loi

009900 2007-10-25 03:37:36

Cái của bạn rất đễ sửa xong khi thu nhỏ cửa sổ lại thì nó trèn vào nội dung web và bị lộn xộn lắm.....Bạn có thể viết thêm code để sao cho khi mình thu nhỏ lại trình duyệt một đơn vị nào đó thì cái quảng cáo này ko load được ko ???Như mấy trang web họ sét thêm trình duyệt của phía client ý...
----------
Thank you.

Tra loi

uoon 2007-10-25 06:08:19

Bạn tìm và sửa như sau nhé.
tìm cái đoạn này;
  rom: {
   top: null,
   left: null,
   right: null,
   bottom: null
  }


Sửa thêm thành như sau:
  rom: {
   top: null,
   left: null,
   right: null,
   bottom: null,
   limit: 0
  }


tiếp theo tìm đến dòng này:

element.style.position = "absolute";


chèn thêm 2 dòng code sau vào phía trước nó:

if (browserWidth < element.rom.limit) element.style.display ="none";
else element.style.display = "block";
element.style.position = "absolute";


như vậy là được.

Khi dùng thì thêm kích thước giới hạn vào như sau:
setPosition("a", {top: 20, right: 30, limit: 777});
lúc này nếu site của bạn được thu vào nhỏ hơn 777px sẽ làm biến mất cái div đó.

Các bạn thử hộ, có lỗi hoặc còn yêu cầu gì thì post lên mình sửa nốt cho nó hoàn thiện.

Tra loi

009900 2007-10-25 11:57:25

uoon ơi cái này chạy tốt trên IE còn FF thì vẫn vậy bạn à......Mình rất cảm ơn bạn đã cho mình biết cái code này...nó rất dễ điều chỉnh vị trí ảnh ...Mình mong bạn hoàn thiện nó để chạy trên cả FF nhé......
Lovely...

Tra loi

uoon 2007-10-26 09:21:05

Hì, bạn lại sửa tiếp nhé, tìm dòng code sau :
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;
}


thay bằng đoạn sau :

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;
var browserHeight = window.innerHeight;
var browserWidth = window.innerWidth;
}


đại khái là mình quên không tạo 2 biến browserHeight và browserWidth cho FF :D, chỉ cần thêm vào là được.

Vẫn không phải bản cuối.

Tra loi

e-learning 2007-10-26 11:58:47

Bravo uoon, :D Đợi bản cuối xài luôn

Tra loi

009900 2007-10-26 02:09:53

Good job...Mình cũng chờ bản full của cậu đấy...chia sẻ cho anh em với nhé...Thank you.

Tra loi

e-learning 2007-10-26 02:45:18

Hehe, bản full của uoon nếu có luôn âm thanh nữa thì tuyệt

P/s: âm thanh hướng dẫn sử dụng đó, nghĩ bậy kô hà ^_^

Tra loi

cocbay 2007-10-26 04:53:05

Code chạy good quá,
Mình nghĩ bản cuối là user click vào banner nào thì banner đó fullscreen, click again thì chuyển về vị trí cũ.
Thansk uoon

Tra loi

uoon 2007-10-26 05:40:44

Ý tưởng của bác cocbay hay đấy. Hì hì, bản cuối cùng đợi ý tưởng của anh em thôi. Anh em có ý kiến gì post lên, mình làm một thể :D.
Thax

Tra loi

009900 2007-10-26 05:48:08

Bạn uoon ơi hình như là lúc mình thu nhỏ màn hình rùi lại phóng to màn hình ra thì những cái ảnh đó ko đứng đúng vị trí của nó.bị sô lệch một chút bạn à.......nẻu refresh lại thì nó mới như lúc đầu...Các bạn xem nó bị vậy sử lý sao nha....

Tra loi

009900 2007-10-26 10:04:33

Mình thấy còn một vấn đề nữa là vị trí của 2 cái khung bên phải  thì ở IE và FF nó hiện khác nhau...một cái gần lề và một cái xa lền bên phải quá.......bạn có thể viết thêm code kiểm tra trình duyệt người dùng ko và định lại style cho từng loại trình duyệt để nó dễ sử lý cái wide của trang web.....Mình mới học do vậy ko biết viết gì cả nếu bạn có thời gian thì làm thêm cái này nhé....Chúc thành công..

Tra loi

cocbay 2007-10-27 08:16:50

Có thông số top, right, bottom, đó, bạn tha hồ chỉ canh lề. Dùng JavaScript check trình duyệt dạng gì, rồi định dạng kích thước là xong, Uoon viết vậy quá rõ ràng, code sạch, mình chỉ scare và đó và phát triển nhé.

Tra loi

009900 2007-10-27 11:43:42

:D...mình mới học có 20 ngày...cả html, css, javascript...do vậy chưa đủ trình độ như bạn nói được.......Cảm ơn bạn nhiều nha.....

Tra loi

uoon 2007-10-30 09:15:47


Đây là bản cuối cho vấn đề này:
<?php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="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="height: 2000px; width: 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(r) {
// create by uoon
var store = {
ram : {
top : 0,
left : 0,
right : 0,
bottom : 0
},
rom : {
element: null,
minWidth: 0,
minHeight: 0,
top : null,
left : null,
right : null,
bottom : null
}
};

for (var i in r) {store.rom[i] = r[i];}

var element = document.getElementById(store.rom.element);

if (!element) {
alert("Please check the argument: 'element'.");
return false;
}

for (i in store) {element[i] = store[i];}

element.rom.move = function() {

if (window.innerHeight) {
var htmlTag = document.getElementsByTagName("html")[0];
var topPage = window.pageYOffset;
var leftPage = window.pageXOffset;
var rightPage = leftPage + window.innerWidth - element.offsetWidth;
if (htmlTag.scrollHeight > window.innerHeight) rightPage -= 17;
var bottomPage = topPage + window.innerHeight - element.offsetHeight;
if (htmlTag.scrollWidth > window.innerWidth) bottomPage -= 17;
var browserHeight = window.innerHeight;
var browserWidth = window.innerWidth;
} else {
if (document.documentElement && document.documentElement.clientWidth) {
var topPage = document.documentElement.scrollTop;
var leftPage = document.documentElement.scrollLeft;
var browserHeight = document.documentElement.clientHeight;
var browserWidth = document.documentElement.clientWidth;
} else if (document.body) {
var topPage = document.body.scrollTop;
var leftPage = document.body.scrollLeft;
var browserHeight = document.body.clientHeight;
var browserWidth = document.body.clientWidth;
}
var rightPage = leftPage + browserWidth - element.offsetWidth;
var bottomPage = topPage + browserHeight - element.offsetHeight;
}

if ((browserWidth < element.rom.minWidth) || (browserHeight < element.rom.minHeight)) element.style.display = "none";
else element.style.display = "block";

element.style.position = "absolute";

if (element.rom.top != null) {
element.ram.top += ((topPage + element.rom.top - element.ram.top) / 20);
if (Math.abs(topPage + element.rom.top - element.ram.top) < 2) element.ram.top = topPage + element.rom.top;
element.style.top = element.ram.top + "px";
}
if (element.rom.left != null) {
element.ram.left += ((leftPage + element.rom.left - element.ram.left) / 20);
if (Math.abs(leftPage + element.rom.left - element.ram.left) < 2) element.ram.left = leftPage + element.rom.left;
element.style.left = element.ram.left + "px";
}
if (element.rom.right != null) {
element.ram.right += ((rightPage - element.rom.right - element.ram.right) / 20);
if (Math.abs(rightPage - element.rom.right - element.ram.right) < 2) element.ram.right = rightPage - element.rom.right;
element.style.left = element.ram.right + "px";
}
if (element.rom.bottom != null) {
element.ram.bottom += ((bottomPage - element.rom.bottom - element.ram.bottom) / 20);
if (Math.abs(bottomPage - element.rom.bottom - element.ram.bottom) < 2) element.ram.bottom = bottomPage - element.rom.bottom;
element.style.top = element.ram.bottom + "px";
}

setTimeout("document.getElementById('"+element.id+"').rom.move()", 20);

};

element.rom.move();

};

setPosition({element: "a", top: 20, right: 0});
setPosition({element: "b", left: 20 , top: 10});
setPosition({element: "c", left: 300 , bottom: 0});

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

?>

Cách sử dụng có khác một chút so với những lần trước.
Cụ thể trước đây :
setPosition("a",{top: 20, right: 0, limit: 777});

Bây giờ dùng cú pháp sau:
setPosition({element: "a", top: 20, right: 0, minWidth: 777});

chỉ vậy thôi.

Thêm 2 tham số nữa minWidth và minHeight dùng để tạo giới hạn hiển thị.
VD: khi muốn trang web thu nhỏ xuống dưới 800px thì tắt đi, các bạn chỉ cần đặt minWidth: 800 là ok.
Dùng tương tự cho minHeight.
Chúc thành công.



Tra loi

noone 2007-11-08 03:03:53

mình thấy cái quảng cáo chạy từ bên này sáng bên kia rối mắt quá,làm cách nào để bỏ nó hả bạn.Mình muốn nó chỉ ở nguyên 1 chỗ thôi

Tra loi

curua 2007-11-09 11:21:24

ừ mình thấy để cái quảng cáo chạy từ bên trái sang phải mỗi lần refresh lại hơi vướng mắt

Tra loi

noone 2007-11-10 09:13:32

uoon giúp với,mình đang rất cần cái này :((

Tra loi

uoon 2007-11-10 01:39:41


Hi vọng đây là bản cuối:
<?
function setPosition(r) {
// create by uoon
var store = {
ram : {
top : 0,
left : 0,
right : 0,
bottom : 0
},
rom : {
element: null,
minWidth: 0,
minHeight: 0,
top : null,
left : null,
right : null,
bottom : null
}
};

for (var i in r) {store.rom[i] = r[i];}

var element = document.getElementById(store.rom.element);

if (!element) {
alert("Please check the argument: 'element'.");
return false;
}

for (i in store) {element[i] = store[i];}

element.rom.move = function() {


if (window.innerHeight) {
var htmlTag = document.getElementsByTagName("html")[0];
var topPage = window.pageYOffset;
var leftPage = window.pageXOffset;
var rightPage = leftPage + window.innerWidth - element.offsetWidth;
if (htmlTag.scrollHeight > window.innerHeight) rightPage -= 17;
var bottomPage = topPage + window.innerHeight - element.offsetHeight;
if (htmlTag.scrollWidth > window.innerWidth) bottomPage -= 17;
var browserHeight = window.innerHeight;
var browserWidth = window.innerWidth;
} else {
if (document.documentElement && document.documentElement.clientWidth) {
var topPage = document.documentElement.scrollTop;
var leftPage = document.documentElement.scrollLeft;
var browserHeight = document.documentElement.clientHeight;
var browserWidth = document.documentElement.clientWidth;
} else if (document.body) {
var topPage = document.body.scrollTop;
var leftPage = document.body.scrollLeft;
var browserHeight = document.body.clientHeight;
var browserWidth = document.body.clientWidth;
}
var rightPage = leftPage + browserWidth - element.offsetWidth;
var bottomPage = topPage + browserHeight - element.offsetHeight;
}

if ((browserWidth < element.rom.minWidth) || (browserHeight < element.rom.minHeight)) element.style.display = "none";
else element.style.display = "block";

element.style.position = "absolute";

if (element.rom.top != null) {
var Condition = (Math.abs(topPage + element.rom.top - element.ram.top) < 2 || !element.firstTime);
if (Condition) element.ram.top = topPage + element.rom.top;
else element.ram.top += ((topPage + element.rom.top - element.ram.top) / 20);
element.style.top = element.ram.top + "px";
}
if (element.rom.left != null) {
var Condition = (Math.abs(leftPage + element.rom.left - element.ram.left) < 2 || !element.firstTime);
if (Condition) element.ram.left = leftPage + element.rom.left;
else element.ram.left += ((leftPage + element.rom.left - element.ram.left) / 20);
element.style.left = element.ram.left + "px";
}
if (element.rom.right != null) {
var Condition = (Math.abs(rightPage - element.rom.right - element.ram.right) < 2 || !element.firstTime);
if (Condition) element.ram.right = rightPage - element.rom.right;
else element.ram.right += ((rightPage - element.rom.right - element.ram.right) / 20);
element.style.left = element.ram.right + "px";
}
if (element.rom.bottom != null) {
var Condition = (Math.abs(bottomPage - element.rom.bottom - element.ram.bottom) < 2 || !element.firstTime);
if (Condition) element.ram.bottom = bottomPage - element.rom.bottom;
else element.ram.bottom += ((bottomPage - element.rom.bottom - element.ram.bottom) / 20);
element.style.top = element.ram.bottom + "px";
}
element.firstTime = true;
setTimeout("document.getElementById('"+element.id+"').rom.move()", 20);

};
element.rom.move();
};
?>

Tra loi

julienarchille 2007-12-18 07:47:23

Cám ơn Uoon nhiều lắm !

Tra loi

Ròm 2008-01-13 03:21:22

Cám ơn Uoon nhé, bài viết mình đang kiếm :D

Tra loi

Anhspy007 2008-01-24 09:24:48

Thanks Uoon nhiu lam nhưng mình xin Uoon hoàn thiện thêm dùm mình :
Thứ 1 mình mún cho nó canh lề sát bên góc mép trái và phải cũng như góc trên và dưới giống trang Sonic.vn/music.
Thứ 2 mình muốn duyệt bằng FF hay IE thì cho kết quả như nhau, điều này có bạn ở trên chỉ cách làm nhưng mình k bit:D.
Thứ 3 nếu mình không muốn canh trên dưới mà muốn canh giữa thì sao ha bạn

Tra loi

123456 2008-01-24 05:02:45

view source của mấy trang good như dantri mà xem :d

Tra loi

Anhpy007 2008-02-02 11:28:01

Mình đã xem code dantri va copy ve doan code do paste vào index.php cua templates, kết quả chạy tốt trên IE, trên FF không chạy, và còn vấn đề nữa xảy ra là mình khôg thể nào sử dụng dịa chỉ trong <img> là dạng /images/file.gif mà chỉ sử dụng được dạng địa chỉ trong HDD là file:///path/file.gif.
Xin nhờ các BRO chỉ mình với, sau đây là code của mình:

<DIV id="divAdRight" align="right" style="LEFT: -110px; WIDTH: 110px; POSITION: absolute; TOP: 71px">
<div id="BannerChayDocPhai1_myPanel">


<img border="0" src="file:///C:/AppServ/www/test/templates/estore_plazza/images/megastar.gif" width="110" height="200">
<!-- <img src="/Library/ads//milk-110x280.gif" border = '0'>    -->
    

</div>
</div>


<DIV id="divAdLeft" style="LEFT: -110px; WIDTH: 110px; POSITION: absolute; TOP: 71px">
<div id="BannerChayDocTrai1_myPanel">


<img border="0" src="file:///C:/AppServ/www/test/templates/estore_plazza/images/thegioididong.gif" width="100" height="180">

<!-- <a  target="_blank" href ='/vn/adv/318'><img src="/Library/ads//110x200-megastar.gif" border = '0'></a>   -->
    

</div>
</DIV>



<script language="JavaScript">
function FloatTopDiv()
{
startX = document.body.clientWidth - 110, startY = 71;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;

if (document.body.clientWidth < 980) startX = -110;


function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
el.y = startY;
return el;
}

window.stayTopLeft=function()
{

if (document.body.clientWidth < 980)
{
ftlObj.x = - 115;ftlObj.y = 0; ftlObj.sP(ftlObj.x, ftlObj.y);
}

else
{
if (document.documentElement && document.documentElement.scrollTop)
var pY = ns ? pageYOffset : document.documentElement.scrollTop;
else if (document.body)
var pY = ns ? pageYOffset : document.body.scrollTop;

if (document.body.scrollTop > 71){startY = 3} else {startY = 71};

if (document.body.clientWidth >= 1024)
{
ftlObj.x = document.body.clientWidth - 110;ftlObj.y += (pY + startY - ftlObj.y)/32;ftlObj.sP(ftlObj.x, ftlObj.y);
}
else
{


ftlObj.x  = startX;
ftlObj.y += (pY + startY - ftlObj.y)/32;
ftlObj.sP(ftlObj.x, ftlObj.y);
}
}
setTimeout("stayTopLeft()", 1);
}

ftlObj = ml("divAdRight");
stayTopLeft();

}
function FloatTopDiv2()
{
startX2 = document.body.clientWidth - 1004, startY2 = 71;
var ns2 = (navigator.appName.indexOf("Netscape") != -1);
var d2 = document;

if (document.body.clientWidth < 980) startX2 = -110;


function ml2(id)
{
var el2=d2.getElementById?d2.getElementById(id):d2.all?d2.all[id]:d2.layers[id];
if(d2.layers)el2.style=el2;
el2.sP=function(x,y){this.style.left=x;this.style.top=y;};
el2.x = startX2;
el2.y = startY2;
return el2;
}

window.stayTopLeft2=function()
{
if (document.body.clientWidth < 980)
{
ftlObj2.x = - 115;ftlObj2.y = 0; ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
else
{
if (document.documentElement && document.documentElement.scrollTop)
var pY2 = ns2 ? pageYOffset : document.documentElement.scrollTop;
else if (document.body)
var pY2 = ns2 ? pageYOffset : document.body.scrollTop;

if (document.body.scrollTop > 71){startY2 = 3} else {startY2 = 71};

if (document.body.clientWidth >= 1024)
{
ftlObj2.x =  0;ftlObj2.y += (pY2 + startY2 - ftlObj2.y)/32; ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
else
{



ftlObj2.x  = startX2;
ftlObj2.y += (pY2 + startY2 - ftlObj2.y)/32;
ftlObj2.sP(ftlObj2.x, ftlObj2.y);
}
}
setTimeout("stayTopLeft2()", 1);
}

ftlObj2 = ml2("divAdLeft");
stayTopLeft2();

}


function ShowAdDiv()
{
var objAdDivLeft  = document.getElementById("divAdLeft");
var objAdDivRight = document.getElementById("divAdRight");
if (document.body.clientWidth < 980)
{
objAdDivLeft.style.left  = - 110;
objAdDivRight.style.left = - 110;
}

else
{
objAdDivLeft.style.left  = 0;
objAdDivRight.style.left = document.body.clientWidth - 110;
}
FloatTopDiv();
FloatTopDiv2();
}
ShowAdDiv();

</script>
thanks

Tra loi

ttnhon 2008-03-26 10:18:30

Hi uoon,
Mình copy code cua bạn, sửa lại thành
setPosition({element: "a", top: 20, left: 0, minWidth: 1024});
setPosition({element: "b", top: 20, right: 0, minWidth: 1024});

Nhưng nó ko cáo tác dụng, mình dùng màn hinh 19inch.
Khi kéo trình duyet ve 800x600 thi 2 cai banner mat di nhung khi keo ve 1024x800 thi no van hien 2 cai banner. Xin chi giup.

Tra loi

uoon 2008-03-26 03:43:42

Hi,
bạn thử giới hạn cái minwith nhỏ đi một chút xíu.
Căn bản khi để kích thước màn hình là 1024 thì cái vùng hiển thị ở phía trong é nó nhỏ hơn 1024. Nó còn border của browser nữa mà.

Tra loi

ttnhon 2008-03-27 02:33:02

sorry uoon, hom qua minh thi 1024 ko duoc minh thu 1020 1015 ma khong thu 1023 bua nay thu 1023 thi ok roi.
Thanks ban.

Tra loi

vb 2008-06-09 12:49:12

bvbvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvbbbbbbbbbbbbbbbbbbbbb

Tra loi

Newbe 2008-08-12 03:56:05

Cam on ban Uoon. minh la NewBe. Ban vui lòng hướng dẫn thêm 1 tý giúp mình. Mình có 1 trang .html, mình chèn hàm setPosition của bạn vào trang .htm rồi. Mình có 1 file Quảng cáo là ad.gif (hoặc ad.swf)
Vậy mình làm thế nào để tạo Quảng Cáo trên trang .htm với 2 cái file có sẵn ad.gì va ad.swf?

Giúp mình với. Cảm ơn bạn thật nhìu

Tra loi

ohay 2008-08-13 05:24:32

Bạn đặt cái ảnh ad.gif vào trong một div như thế này:

<div id="adLeft"><img src="ad.gif"></div>

đại khái như thế :D. Sau đấy bạn gọi hàm setPosition như sau:

setPosition({element: "adLeft", top: 20, left: 0});

chú ý cái id là adLeft phải giống nhau.

Thế nhá.

Tra loi

Newbe 2008-08-21 11:34:59

Cam on ban Ohay nhiu. Minh se thu

Tra loi

Newbe 2008-08-21 11:37:00

Cho minh hoi them: File ad.swf thi sao a? Co phai cung lam tuong tu khong a.

Tra loi

Bút chì đầu đỏ 2008-09-01 01:38:07

khổ cho uoon nhỉ ! một bài viết mà trả lời tới trợn mắt lên. ^__^ bài này cũng hay lắm ! nếu có chấm điểm kiểu gì cũng vote cho 1 phát ^++^

Tra loi

TNguyễn 2008-11-07 11:52:21

Nếu có vote chắc chắn vote cho bác uoon phát.
Good code.

Tra loi

Kitten 2009-06-26 02:03:13

Cho mình hỏi, mình đưa đoạn javascript ra 1 file riêng, vậy trong file .html làm sao gọi được hàm setPosition("ad", {top: 20, left: 100}); ?

Tra loi

uoon 2009-06-26 05:45:11

đặt đoạn code này vào trong file .html
<script type="text/javscript" src="file_rieng.js"></script>
sau đó thì gọi như bạn muốn.
bạn nên tham khảo thêm ở đây http://vnjs.net/?id=1000000038

Tra loi

Kay 2010-03-15 04:53:24

cám ơn bạn Uoon đã viết 1 js cực hay. Cám ơn rất nhiều :x
P/s: Các bạn nào muốn bỏ đi hiện tượng banner bên phải lúc load trang nó bay từ bên trái qua bên phải thì tìm dòng này:
element.style.left = element.ram.right + "px";

đổi lại thành
element.style.right = element.ram.left + "px";

Tra loi

Y kien