What I Believe Buttons

by Koubenec

HTML

<div id="upbuttoncontainer" onclick = "top.location.href='http://wacaustin.org/home/'"><div id="uptopdiv"><div id="uptoparrow-border-left"></div><div id="uptoparrow-border-right"></div><div id="uptoparrow-up-internal"></div><div id="uptoparrow-up"></div></div><div id="upbottomdiv"><div id="uparrow-border-left"></div><div id="uparrow-border-right"></div><div id="uparrow-up-internal"></div><div id="uparrow-up"></div></div></div>

<div id="downbuttoncontainer" onclick = "top.location.href='http://wacaustin.org/home/'"><div id="downtopdiv"><div id="downtoparrow-border-left"></div><div id="downtoparrow-border-right"></div><div id="downtoparrow-up-internal"></div><div id="downtoparrow-up"></div></div><div id="downbottomdiv"><div id="downarrow-border-left"></div><div id="downarrow-border-right"></div><div id="downarrow-up-internal"></div><div id="downarrow-up"></div></div></div>

<script src="http://www.marcatectura.com/wp-content/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://www.marcatectura.com/wp-content/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="http://www.marcatectura.com/wp-content/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.marcatectura.com/wp-content/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="wrapper">    
        <div id="intro">
            This area can house any content within the wrapper prior to the actual slider, but is best left empty for the Adrienne Adams feature.
        </div>
        <div class="scrollButtons left"></div>
        <div id="slider">    
           <div class="scroll">
                <div class="scrollContainer">
                    <div class="panel" id="wib1">wib1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<a href="#editor">Editor</a>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

CSS

#uparrow-border-left {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom:22px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 180px;
  position: absolute;
  z-index: 100;
}

#uparrow-border-right {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom:22px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 250px;
  position: absolute;
  z-index: 100;
}

#uparrow-up {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom:22px solid #fff; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 214px;
  position: absolute;
  z-index: 98;
}

#uparrow-up-internal {
  width:0px; 
  height:0px; 
  border-left:13px solid transparent;  /* left arrow slant */
  border-right:13px solid transparent; /* right arrow slant */
  border-bottom:13px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 19px;
  left: 223px;
  z-index: 99;
}

#upbottomdiv {
width: 450px;
height: 40px;
background-color: #E27AC2;
position: absolute;
overflow: hidden;
left: 0px;
bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 17px;
letter-spacing: 2px;
text-align: center;
line-height: 30px;
color: #dc2d18;
z-index: 1;
}

#uptopdiv {
width: 450px;
height: 40px;
background-color: #fff;
position: absolute;
overflow: hidden;
left: 0px;
bottom:...

JavaScript

$(document).ready(function() {
    $("#downtopdiv").hover(function() {
        $(this).stop().animate({
            "opacity": "0"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, 'fast');   
    });
    $("#uptopdiv").hover(function() {
        $(this).stop().animate({
            "opacity": "0"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, 'fast');   
    });
});