Slide div from outside website at certain time

Hi,

I am looking to create sliding div that have the same sort of information as hotels.com use where a message appears saying something along the lines of “3 people currently viewing this page”. I haven’t got to the dynamic part of it, as I’m trying to get a div to hide off screen then slide into the page after 5 seconds, and be placed at the bottom of the browser window, then after another 5 seconds id like it to slide back off again.

I have the first part working, but cant get the rest of it to work.

#lead_form{background:#000; height:200px; width:200px; display:none; position: fixed; bottom: 77px; right:0px;}

<div id="lead_form"></div>
<script>
$(document).ready(function() {
 setTimeout(function(){
 $('#lead_form').show();
 }, 3000);
});
</script>

Can someone help me expand this to what I described above, as although I’m using the show function, its not really the right one, as I think I need to position the div off screen and then slide it in, and not make it appear, so ye thinking about it that’s wrong isn’t it

1 Like

Something like this perhaps, but the function is wrong somewhere.

#lead_form{background:#000; height:200px; width:200px; position: fixed; bottom: 77px; right:-250px;}

<div id="lead_form"></div>
<script> 
$(document).ready(function() {
$('#lead_form').animate({
left: "300"
 }, 5000, function() {
 });
});    
</script>

Ok tried that and although sort of correct, it just slides from the left for 5 seconds, so its not right, what I want is for it to be hidden away on the right, then slide left after 5 seconds.

Here’s a css version only just for interests sake.

1 Like

Oh right, so just css, that’s interesting, cheers Paul

Or with jquery.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#lead_form {
	background:#000;
	color:#fff;
	background:rgba(0,0,0,0.7);
	height:200px;
	width:200px;
	position: fixed;
	bottom:-220px;
	right:0;
	padding:10px;
}

</style>
</head>

<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="lead_form">testing</div>

<script>
$(document).ready(function() {
$('#lead_form').delay(5000).animate({
 bottom: "77px"
 }, 5000, function() {
 $(this).delay(5000).animate({
	bottom: "-220px"
 })
 });
});    

</script>

</body>
</html>
1 Like

Yes modern browsers should all handle that quite well.

(Note I just corrected a typo in the keyframe in case you copied the code earlier).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.