CODEWITHSUNDEEP
javascriptjqueryhtml
Townim Faisal
Townim Faisal

Reputation: 325

hide() jquery doesn't work

I want to make an alarm which starts and stop after some time. So I put setInterval in code. Also I want to show a message when the alarm rings. For this, I make a text in my last div and make it hide by jQuery hide(). Here in my code, p.show doesn't hide by jQuery hide() . 

<!DOCTYPE html>
<html>

<head>
  <title>My Rest Alarm</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>
<div class="container">
  <div class="row">
    <form class="form-inline">
      <div class="form-group">
        <label for="sel1">Alarm will ring after :</label>
        <input type="text" class="form-control" id="minute"> minute
      </div>
    </form>  
  </div>

  <div class="row">
    <div class="alarm" style="display:none;"></div>
    <button class="btn btn-success start"> Start </button>
    <button class="btn btn-danger stop"> Stop </button>
  </div>

  <div class="row">
    <center><p><b id="clock"></b></p></center>
  </div>
  
  <div class="row">
    <p class="show">It's time to rest</p>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
  $("p.show").hide();

  //show clock
  var myVar = setInterval(myTimer ,1000);
  function myTimer() {
      var d = new Date();
      document.getElementById("clock").innerHTML = d.toLocaleTimeString();
  }

  //start alarm
  var alarm;
  $("button.start").click(function(){
    var alarmVal = $("input").val();
    //console.log(alarmVal*60000);
    $("p.show").delay(alarmVal*60000).fadeIn();
    alarm = setInterval(function(){ 
      //alert("Hello"); 
      $('div.alarm').append("<audio autoplay><source src='http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3' type='audio/mpeg'></audio>");
    }, 
      alarmVal*60000);
  });

  //stop alarm
  $("button.stop").click(function(){
    clearInterval(alarm);
    $("p.show").fadeOut();
  });
});
</script>
</body>

</html>

Why doesn't it hide?

Upvotes: 2

Views: 1655

Answers (1)

adeneo
adeneo

Reputation: 318342

It doesn't work because Bootstrap also uses the class .show and sets the style

display : block!important;

on it, and !important styles override inline styles.

To fix the issue, just use a className other than .show

Upvotes: 4

Related Questions