CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
SamSmith
SamSmith

Reputation: 177

Stop carousel on menu click

I have a Bootstrap "hamburger" menu and a Bootstrap carousel. The carousel sliding is very distracting once the user clicks the "hamburger" menu allowing a list to pop downward.

I know that <div id="myCarousel" class="carousel slide" data-interval="false data-ride="carousel"> would stop the carousel. I am trying to accomplish this when the user clicks on the "hamburger" menu.

I was thinking that I need a jQuery click() function to execute when the "hamburger menu" is clicked like so:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".navbar-toggle collapsed").click(function(){
        alert("Clicked.");
    });
});
</script>
</head>
<body>


 <nav class="navbar" id="skew">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar" id="slider-nav"></span>
        <span class="icon-bar" id="slider-nav"></span>
        <span class="icon-bar" id="slider-nav"></span>
      </button>
    </div>    
    <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right" id="second-navbar">
        <li><a href="/about/">ABOUT</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </nav>


</body>
</html>

However, this clicking is not working as I am not receiving an alert message. I am new to jQuery so I am not understanding what is incorrect.

Here I can stop the carousel when the page is loaded:

<script>
$(document).ready(function(){
      $('#myCarousel').carousel({
         pause: true,
            interval: false
      });

});
</script>

Any suggestions as how I should combine the clicking and stopping to stop the carousel when the "hamburger" menu is clicked are appreciated.

--UPDATE:--- Typing the whole class with no spaces allowed for the following and it worked:

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
});

Now, per my original question, I am attempting to stop the carousel from sliding when the user clicks the hamburger menu button.

I was thinking something like this:

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
$('#myCarousel').carousel({
         pause: true,
            interval: false
      });
});

which appears incorrect. Any suggestions are appreciated.

Upvotes: 0

Views: 3148

Answers (4)

Richard Housham
Richard Housham

Reputation: 1680

right back to the beginning what you are first doing is selecting the element and adding on the click method here. The document.ready part is just a wait for the page to finish loading. Putting them together .navbar-toggle.collapsed is waiting adding the click to the element when collapsed.

So now we have done that, we need to play with the carousel and get it to stop. So lets look at the docs. http://getbootstrap.com/javascript/#carousel

We have a function .carousel('pause') that we can use. From the looks of things you have to start it as well. So hence $('#myCarousel').carousel()

and the finished product ....

$(document).ready(function(){

    $('#myCarousel').carousel();

    $(".navbar-toggle.collapsed").click(function(){
        $('#myCarousel').carousel('pause');
    });
});

I hope that helps and gets you started with jquery - which fyi that and bootstrap are excellent tools to have on your side.

Upvotes: 2

SimonSolutions
SimonSolutions

Reputation: 97

OMG! That's quiet easy. Just do this:

$(document).ready(function(){
    $(".navbar-toggle.collapsed").click(function(){
        $("script").remove();
    });
});

Upvotes: -1

Greg
Greg

Reputation: 78

It looks like you are missing a '.' from the collapsed selector so JQuery knows its a class.

$(document).ready(function(){
    $(".navbar-toggle.collapsed").click(function(){
        alert("Clicked.");
    });
});

Upvotes: 1

DBS
DBS

Reputation: 9994

I think you want something closer to:

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
});

.navbar-toggle.collapsed Will select any element with both the "navbar-toggle" and "collapsed" classes (Assuming that the button has the .collapsed class at the time of clicking)

Upvotes: 1

Related Questions