jQuery slideDown() - absolute positioned div sliding down from top of page, need to slide from specific area on page - how?

jquery css html css-position slidedown

14,541

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.

14,541

Author by

katura

Updated on June 18, 2022

Comments

katura almost 2 years

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">&nbsp;</div><img src="PNG/MyLogo.png"/>
              &nbsp;&nbsp;
              <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>