Fixed top slider, it will now work for multiple sliders.

This commit is contained in:
Mark McDowall 2011-10-24 00:00:25 -07:00
parent c42518b34e
commit 4c6287827c
3 changed files with 35 additions and 17 deletions

View File

@ -25,20 +25,17 @@
-webkit-border-bottom-left-radius: 8px;
}
.openCloseWrapper {
width: 100%;
text-align: center;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
.sliderButtonContainer {
.sliderButton {
width: 70px;
margin-left:auto;
margin-right:auto;
background-color:#333333;
cursor:pointer;
font-size:12px;
font-weight:bold;
text-align: center;
color:#FFFFFF;
@*Rounded Edges*@
border: 1px solid #444444;

View File

@ -1,13 +1,36 @@
$(document).ready(function () {
$(".sliderButtonContainer").live('click', function () {
sliderToggle();
$(".sliderButton").live('click', function () {
sliderToggle(this);
});
});
function sliderToggle() {
$('.sliderContent').slideToggle('slow');
function sliderToggle(sliderButton) {
//Get sliderContent
var sliderContent = $(sliderButton).siblings('.sliderContent');
//Open the slider
sliderContent.slideToggle('slow');
//Change the slider Image
$(".sliderButtonContainer").children('.sliderImage').toggleClass('sliderOpened sliderClosed');
//Focus in the search box
$(sliderContent).children('.localSeriesLookup').focus();
//Hide the sliders
hideSliders(sliderContent);
//Prevent the Address Bar from changing
return false;
}
function hideSliders(newlyOpenedSlider) {
$('.sliderContent').each(function (index, value) {
var newlyOpenedSliderId = $(newlyOpenedSlider).parent('.top-slider').attr('id');
var id = $(this).parent('.top-slider').attr('id');
//If the ID's of the top-sliders don't match then hide it
if (id != newlyOpenedSliderId)
$(this).slideUp();
});
}

View File

@ -21,9 +21,7 @@
Local Series Search
<input class="localSeriesLookup" type="text" />
</div>
<div class="openCloseWrapper">
<div class="sliderButtonContainer">
Search<div class="sliderImage sliderClosed"></div>
</div>
<div class="sliderButton">
Search<div class="sliderImage sliderClosed"></div>
</div>
</div>