Fixed top slider, it will now work for multiple sliders.
This commit is contained in:
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…
Reference in New Issue