JQuery slideDown () - an absolute positioned div sliding from the top of the page should slide from a specific area on the page - how?
I am creating a website where there is a picture of a house on the home page. The house has several windows and a door. When the user clicks on a specific window, it <div>
appears with some text. The door has the same functionality, only I would like it to <div>
appear with a "slide down" effect , and I want the position of this to <div>
be under the door. Thus, it <div>
will slide down / expand from the location of the door.
I am using the jQuery slideDown () method , but the result I get is that the "popup div" slides off the top and not from the absolute position <div>
, which is the door in the image.
Below is a snippet of my code.
How can I get the results I'm looking for?
Here is the code on the 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>
source to share
See below script for your solution
Fiddle: http://jsfiddle.net/A36Fw/2/
Demo: http://jsfiddle.net/A36Fw/2/embedded/result/
Note. You can adjust the position of the left and top of the poem div according to your needs.
source to share