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');   
    });
});

$(document).ready(function () {

    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');

    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = false;

    // float the panels left if we're going horizontal
    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
    $scroll
        .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
        .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

    // handle nav selection
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el =...