CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user6173198
user6173198

Reputation:

Disable a div for mobile screen sizes?

I upgraded from bootstrap 2.0 to 3.0. I have this slider that refreshes itself in every animation so it gets in the way of the top mobile menu when you click it. I tried Display: none;, and it doesn't show, but because it still is running it gets in the way of the mobile nav bar. How can I disable the div or make it not load on a smaller screen? Would it be a JQuery command?

<style>
@media (max-width: 767px) {    #hiddenslider{
  display:none;
}
}

</style>

<!-- start: Slider -->
<div class="slider-wrapper" ID="hiddenslider">

    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2>Certified Techs </h2>
            <p>Text in Here</p>
            <a href="about.html" class="da-link">Read more</a>
            <div class="da-img"><img class='img-responsive'  src="img/parallax-slider/twitter.png" alt="image01" /></div>
        </div>
        <div class="da-slide">
            <h2>Is your Computer Slow?</h2>
            <p>Text in here</p>
            <a href="about.html" class="da-link">Read more</a>
            <div class="da-img"><img class='img-responsive' src="img/parallax-slider/responsive.png" alt="image02" /></div>
        </div>

        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
        </nav>
    </div>

</div>
<!-- end: Slider -->

Upvotes: 0

Views: 4162

Answers (4)

Elliot Starks
Elliot Starks

Reputation: 153

Using display: none; merely hides the element from view and does not remove it from the DOM flow.

Use visibility: none; to achieve what you want.

You can use pure CSS to change this via media queries:

@media (max-width: 767px) {
    #hiddenslider {
        visibility: none;
    }
}

Upvotes: 0

Marcelo Martins
Marcelo Martins

Reputation: 150

Simple:

<style>
/*
@media (max-width: 767px) {    #hiddenslider{
  display:none;
}
}
*/
</style>

<!-- start: Slider -->
<div class="slider-wrapper hidden-sm hidden-xs" ID="hiddenslider">

That's all there is to it. Let Bootstrap handle everything. There's no need to come with your own CSS to handle this scenario.

Upvotes: 0

Sleek Geek
Sleek Geek

Reputation: 4686

Try removing the element with jQuery .remove() method which removes the element from the DOM. You can also set when you want the element removed.

if ($(window).width() <= 768) { // Set when you want it removed

 $("the-element").remove();

}

Upvotes: 0

Dan Weber
Dan Weber

Reputation: 1237

You can use bootstraps "hidden" classes as well: hidden-xs for extra small devices. For example: 

<div class="slider-wrapper hidden-xs" ID="hiddenslider">

Upvotes: 2

Related Questions