5

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>
katura
  • 2,177
  • 14
  • 39
  • 48
  • Where is the door div in your HTML? You're targeting it in the jQuery but it doesn't appear in the html. Maybe that's why the poem is positioned at the top of the page? Because the "door" element doesn't exist? – itsmequinn Mar 19 '12 at 14:18
  • Mistake on my part, when I was putting my post together, I neglected to include the code for the 'door'. I just edited my post to include it. – katura Mar 19 '12 at 14:49
  • I don't see any reference to jQuery in your code. Please clean up your code and if possible post a jsFiddle example. – j08691 Mar 19 '12 at 15:06
  • Dear please provide fiddle that will be very helpful to solve your issues. – w3uiguru Mar 19 '12 at 16:32
  • sorry, again, i must have left it out as i was constructing the code snippet to post here - will make another edit to fix it now. – katura Mar 19 '12 at 16:33
  • @Happy Singh - I just signed up for JsFiddle and here is my fiddle - http://jsfiddle.net/katura99/A36Fw/ – katura Mar 19 '12 at 16:50
  • Dear see my answer and let me know if i am lagging some where or understanding your problem in wrong direction. – w3uiguru Mar 19 '12 at 17:05

1 Answers1

4

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.

w3uiguru
  • 5,864
  • 2
  • 21
  • 25
  • Amazing! It works! Thank you so much for your help. I will use jsFiddle more often, thanks for bringing it to my attention as well. – katura Mar 19 '12 at 17:15
  • I am feeling glad to solve your issue... if any help in future i am here my friend. – w3uiguru Mar 19 '12 at 17:17