CODEWITHSUNDEEP
javascriptjqueryhtmlcssmedia-queries
Patrick
Patrick

Reputation: 820

javascript button breaking media query styles

So I am making this header design. It is responsive. When you take the viewport width down just past 550px it should turn to mobile. Display buttons instead of the slider widget on the right. If you click the appropriate button it brings in the correct slider.

Here is a sample link of the header: http://portalpacific.net/HAMGO_SmartBanner/

Once the slider is visible for either option. You have the option of a "back button"

So my problem currently: When you press the back button and then re-expand the viewports width. You then lose one of the sliders. this ONLY happens if you press the back button before re-expanding the viewport.

Any solutions would be much appreciated. Open to ideas.

Here is my Mobile button's javascript. Im not the best with javascript. 

<script>
$('.mobileAdultBtn').on('click', function () {
    $('#vContentLeft').css('display', 'block');  
    $('.vSlide-markersWrapper').css('margin-left', '-80px');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productInfo_mobile').css('visibility', 'hidden');
});

$('.mobileYoungAdultBtn').on('click', function () {
    $('#vContentRight').css('display', 'block');  
    $('.vSlide-markersWrapper').css('margin-left', '-43px');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productInfo_mobile').css('visibility', 'hidden');
});

$('.backBtn').on('click', function () {
    $('#vContentRight').css('display', 'none');
    $('#vContentLeft').css('display', 'none');
    $('.vSlide-markersWrapper').css('margin-left', '-19px');
    $('.backBtn').css('display', 'none');
    $('.mobileAdultBtn').css('display', 'block');
    $('.mobileYoungAdultBtn').css('display', 'block');
    $('.productInfo_mobile').css('visibility', 'visible');
});
</script>

Thanks!

Upvotes: 0

Views: 86

Answers (1)

Gonzalo
Gonzalo

Reputation: 1876

You have an error in your css

@media only screen and (min-width: 515px){
    #vContentRight, #vContentleft {
        display: block!important;
    }
}

Change for this:

@media only screen and (min-width: 515px){
    #vContentRight, #vContentLeft {
        display: block!important;
    }
}

Upvotes: 1

Related Questions