Make verticall scrolling banner

When surfing some websites ,I see vertical banners scroll along left side and right side . That's a good idea for attracting visitors to banner ads and increase the clickthrough rate of sites .

Live Demo

Do you want to make a scrolling banner for your sites ? here is script for you

Just copy this script and paste it right after <body> tag

.float {

width: 150px;

height: 800px;

border: solid 1px white;

}

</style>

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: 0, left: 880});

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

</script>

Remember to change the image link to your banner's and change the target url (I marked them in bold)
Position of two banners are set by two code lines

setPosition("rightbanner", {top: 0, left: 880});

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

The line

setPosition("rightbanner", {top: 0, left: 880});

mean :
-The distance between right banner and top of browser window is 0
-The distance between right banner and left of browser window is 880 pixel

Left banner is similar to rightbanner

You can change these values for the best display in your site .
That's all .I hope this tip helpful to you