0

I have a panel that will be layered behind the header of my website with a tab sticking out beneath the header... Ideally, when a user clicks the tab, the panel slides down from behind the header and, when the user clicks the tab again, slides back up behind the header. I have never attempted to utilize javascript myself, so this is something I've cobbled together...

Can someone point me towards what I am doing wrong? I just want the panel to slide down, and then back up... and for the code to be as concise as possibl. My test site is currently at http://test.vtisvc.com

CSS (Note, I have temporarily increased the z-index of this element just to show where it is on the header.

#panel-hhs
{
  position: relative;
  height: 166px;
  width: 206px;
  top: 0;
  left: 0;
  margin-top: -137px;
  margin-left: 998px;
  background: url('images/hhs_panel.png');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 130;
}

HTML (Included my entire header, the javascript is at the bottom)

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQuery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQueryUI.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

</head>
<body>
<div id="banner-wrap">
  <div id="banner-bar">
    <div id="banner-hood">
      <center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
        <div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
        <div id="banner-text"><center><a href="#"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
        <div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
    </div>
  </div>
<script type="text/javascript">

jQuery(document).ready(function() {
    jquery("#panel-hhs").toggle(function() {
        jquery(this).animate({top: "-=100px"});
    }, function() {
        jquery(this).animate({top: "+=100px"});
    });
});

</script>
<div id="panel-hhs"><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/hhs_pic2.png"></div>
</div>
proxlars
  • 35
  • 7
  • you want to fixed that header??? – maverickosama92 Sep 09 '13 at 16:41
  • yeah, the header is pretty messy... but it works at the moment. I just need to get this jquery animation figured out. I created a simplified jsFiddle for testing [link](http://jsfiddle.net/proxlars/gKfKW/6/) but no good so far... – proxlars Sep 09 '13 at 16:54
  • You mean `hover()` instead of `toggle()`? – Rudie Sep 09 '13 at 19:25
  • Well, what I want is for only the "tab" of the panel to stick out of the header... once the tab is clicked, I want the panel to slide down from behind the header, and when the tab is clicked again, it returns behind the header. Just a simple, slide-down panel. It is currently ontop of the header on my test site, just until I get the animation right. – proxlars Sep 09 '13 at 19:29

1 Answers1

0

Something like http://jsfiddle.net/gKfKW/76/ ?

You were missing:

position: relative;
top: -150px;

in the default state.

Rudie
  • 52,220
  • 42
  • 131
  • 173
  • That seems to work great! I was thinking clicking instead of hovering but, honestly, I think I like the hovering better. Sorry for the total noob question, but where exactly do I stick the javascript into my site? I changed 1 or 2 things here (http://jsfiddle.net/proxlars/gKfKW/81/) (might have to scroll to the right due to the margin) and it seems to work fine... but I can't quite figure out where to place the javascript on my site. (http://test.vtisvc.com) Any help? – proxlars Sep 09 '13 at 19:48
  • Nevermind... I just put it at the bottom of the section of my header.php and that seemed to work... it is slightly jumpy, but I'll take it! – proxlars Sep 09 '13 at 19:52