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

pull/7/merge
Mark McDowall 13 years ago
parent c42518b34e
commit 4c6287827c

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

@ -1,13 +1,36 @@
$(document).ready(function () { $(document).ready(function () {
$(".sliderButtonContainer").live('click', function () { $(".sliderButton").live('click', function () {
sliderToggle(); sliderToggle(this);
}); });
}); });
function sliderToggle() { function sliderToggle(sliderButton) {
$('.sliderContent').slideToggle('slow'); //Get sliderContent
var sliderContent = $(sliderButton).siblings('.sliderContent');
//Open the slider
sliderContent.slideToggle('slow');
//Change the slider Image
$(".sliderButtonContainer").children('.sliderImage').toggleClass('sliderOpened sliderClosed'); $(".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 //Prevent the Address Bar from changing
return false; 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();
});
} }

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