jQuery slideDown() - absolute positioned div sliding down from top of page, need to slide from specific area on page - how?
I'm creating a website where the homepage has an image of a house. The house has a few windows and a door. When a user clicks on a particular window, a <div> pops up with some text. The door has the same functionality, only I would like for the <div> that pops up to having a 'sliding down' effect and I want the position of this <div> to be beneath the door. So the <div> would slide down/expand from where the door is positioned.
I'm using jQuery's slideDown() method, but the result I'm getting is that the 'pop up div' is sliding down from the top of the page, and not from the absolute positioned <div> which represents the door on the image.
A snippet of my code is posted below.
How can I get the results I'm looking for?
Here is the code on JsFiddle -
jsfiddle.net/katura99/A36Fw <html>
<head>
<script src="JQuery/jquery-1.7.1.js"></script>
<script>
$('#door').click(function() {
$("#Poem").slideDown(3000);
});
</script>
</head>
<style type="text/css">
.main {
width:100%;
}
.mainContentBox {
width:900px;
height:55px;
margin:auto;
margin-top:15px;
}
#Poem {
width:285px;
height:350px;
background:#ffffcc;
border:1px solid #cccccc;
position:absolute;
z-index:5;
margin-top:435px;
margin-left:312px;
}
#Close {
position:absolute;
top:0px;
right:15px;
color:blue;
cursor:pointer;
background: url('PNG/close.png');
width:36px;
height:36px;
}
#HouseLogo {
width:900px;
height:721px;
margin:auto;
position:relative;
margin-top:0px;
background:url('PNG/HouseLogo.png') no-repeat;
}
#spacer {
width:20px;
float:left;
}
#mission {
width:300px;
height:80px;
font-size:13px;
font-weight:bold;
color:#ffffff;
bottom:390px;
right:485px;
position:absolute;
}
#window1 {
width:37px;
height:42px;
bottom:388px;
right:433px;
position:absolute;
cursor:pointer;
}
#door {
width:37px;
height:52px;
bottom:336px;
right:420px;
position:absolute;
cursor:pointer;
}
</style>
<body>
<div class="main">
<!--main box -->
<div class="mainContentBox">
<!-- P O E M -->
<div id="Poem" align="center">
<div rel="scrollcontent1">
Content text here
</div>
<div id="Close" onclick="closeDiv('Poem')"></div>
</div>
<div id="spacer"> </div><img src="PNG/MyLogo.png"/>
<img src="PNG/LogoSubText.png"/>
</div>
<div id="HouseLogo">
<div id="mission" style="">
additional content here
<br/><br/>
<table align="center">
<tr>
<td style="font-size:13px;font-weight:bold;color:#FFFF00;">
<div id="showMissionStatement" style="cursor:pointer">... Click here to Learn More About Us!... </div>
</td>
</tr>
</table>
</div><!--HouseLogo-->
<div id="window1" onmouseover="largeWindow('window1')" onmouseout="this.style.background='';">
</div>
<div id="door" onmouseover="largeDoor()" onmouseout="this.style.background='';">
</div>
</div>
</body>
</html>
Answer
See the below fiddle for your solution
Fiddle: http://jsfiddle.net/A36Fw/2/
Demo: http://jsfiddle.net/A36Fw/2/embedded/result/
Note: you can adjust the position of left and top of poem div as per your need.