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">&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>

      

+3


source to share


1 answer


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.

+3


source







All Articles