Moving DIV up

Hi, I want to move my DIV up for only 50px when my page is load. I have find same code and I have changed same things. Now, my DIV go up and don't stop at all, it goes from the browser page.

This is java script:

var bottom = 0;
var padding = 230;
var X = 5;
var Y = 0;

function dropMyPopup() {
Y--;
if( Y > bottom ) return;
document.getElementById("styled_popup").style.top = Y + "px";
setTimeout("dropMyPopup()", 25);
}

function fireMyPopup() {
var scrolledY;
if( self.pageYOffset ) {
scrolledY = 530;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledY = 530;
} else if( document.body ) {
scrolledY = 530;
}

var centerY;
if( self.innerHeight ) {
centerY = 480;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerY = 480;
} else if( document.body ) {
centerY = 480;
}

bottom = scrolledY + centerY - padding - 158;
Y = scrolledY;

document.getElementById("styled_popup").style.right = X + "px";
document.getElementById("styled_popup").style.display = "block";
dropMyPopup();
}




window.setTimeout("closeMyPopup()", 15000);
}

function closeMyPopup() {
document.getElementById("styled_popup").style.display = "none"
}


document.body.onload = window.setTimeout("fireMyPopup()", 5000);


and
html part:

<div id='styled_popup' name='styled_popup' style='position: absolute; width: 468px; height: 60px; display: none; left:257px; border: 0px solid #000; zoom: 1'>
bla, bla, bla...
</div>

Can someone find my mistake or give any other idea or code example?

 

Hi,

I tried your code, and it's working. The only problem was syntax error. More exactly, this line window.setTimeout("closeMyPopup()", 15000); should be inside the function fireMyPopup() after calling dropMyPopup(). Then it will close the popup after 15secs.
Another problem there, 'Y' is never greater than 'bottom', so function dropMyPopup() is in infinite loop. And function closeMyPopup() hides the div but doesn't stop the loop. I would suggest to create reference to setTimeout and clear it when closeMyPopup() is executed and adjust the value of bottom, so it has some meaning (why is there centerY). And as you are decreasing Y, the condition should be ( Y < bottom ). Hope it helps...

All together:

var timer; //reference to setTimeout
var bottom = 0;
var padding = 230;
var X = 5;
var Y = 0;

function dropMyPopup() {
Y--;
if( Y < bottom ) return;
document.getElementById("styled_popup").style.top = Y + "px";
timer = setTimeout("dropMyPopup()", 25);
}

function fireMyPopup() {
var scrolledY;
if( self.pageYOffset ) {
scrolledY = 530;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledY = 530;
} else if( document.body ) {
scrolledY = 530;
}

var centerY;
if( self.innerHeight ) {
centerY = 480;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerY = 480;
} else if( document.body ) {
centerY = 480;
}

bottom = scrolledY - padding - 158;
Y = scrolledY;

document.getElementById("styled_popup").style.right = X + "px";
document.getElementById("styled_popup").style.display = "block";
dropMyPopup();
window.setTimeout("closeMyPopup()", 15000);
}

function closeMyPopup() {
document.getElementById("styled_popup").style.display = "none"
window.clearTimeout(timer);
}


document.body.onload = window.setTimeout("fireMyPopup()", 5000);

 

Thanks man,
I had problem with 'Y' and 'bottom', but now it's fixed, thanks to you. I will work around little bit for closing ( I want to be closed when user click close button) I will put some background image as close button, and if user don't close it will close for some time ( 30 sec per example). Anyway thanks a lot.