How to detect if a div is visible in order to trigger another event (LazyLine Painter)

Question

I have searched through dozens of posts to try to find the solution to this but I am very new to jQuery and can't seem to figure it out. Basically I have two elements that are hidden on page load.

<div id="correct" class="hidden">
    <h5> CORRECT! </h5>
</div>

<div id="wrong" class="hidden">
    <h5> NOPE! TRY AGAIN </h5>
</div>

I have an input box. When the user inputs the correct answer and presses submit the #correct div is shown.

function guessAnswer() {
  $("button.guess-submit").click(function(event) {

  if ( $('#guess-input').val() == answer) {
      $('#correct').show();
      $('#wrong').hide();
  } else {
     $('#wrong').show();
 }

I am also using LazyLine Painter for svg drawing. When the #correct div is shown I want to edit one of the LazyLine options so that the drawing speed increases. Below is the basic code for LazyLine:

    var $logo = $('#sketch');

      $logo.lazylinepainter({
          'svgData': svgData,
          'strokeWidth': 1,
          'speedMultiplier': 3,
          'delay': 5,
          'strokeColor': '#b5287b',
              'drawSequential': true,
              'ease': 'easeInOutQuad'
      });

      setTimeout(function(){
          $logo.lazylinepainter('paint');
      }, 10)

current demo live on codepen

Possible duplicate of [jQuery event to trigger action when a div is made visible](http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible) — choz, Jan 27 '16 at 01:41
Based on your update, you can use a keyup function to check if there is a match even before the submit function. See edited answer below. — sideroxylon, Jan 27 '16 at 08:24

sideroxylon · Accepted Answer · 2016-01-27T08:20:18.163

EDIT: Based on the OP's update, wanting to trigger a function (alert) before the button click, the following may help:

$('#guess-input').on('keyup', function() {
      var answer = 'answer';
      if ($(this).val() == answer) {
                    alert('hi');
        }
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id = "guess-input">

This will check against the answer variable after each keystroke, and trigger an event when there is a match.

score 0 · Answer 2 · answered Jan 27 '16 at 01:41

I assume you would put it right after $('#correct').show() and there is no need for the check for $('#correct').css('display') condition. You can also look into delay(), to ensure that the user sees the correct div before your alert pops up.

Hope that answered your question?

Sleek Geek · Answer 3 · 2016-01-27T01:48:58.950

Move the alert line of code to just below $('#correct').show(); and you will be just fine.

var answer = document.getElementById('guess-input').name;

function guessAnswer() {
  $("button.guess-submit").click(function(event) {

    if ( $('#guess-input').val() == "answer") {
      $('#correct').show();
      alert('hi');
      $('#wrong').hide();
    } else {
      $('#wrong').show();
    }

  });

}

function enterSubmit() {
   $("#guess-input").keyup(function(event){
      if(event.keyCode == 13){
          $("#guess-submit").click();
      }
   });

  guessAnswer();
}

enterSubmit();

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="question-one">

  <!--SUPERHERO QUESTION + ANSWER-->
  <div class="question">

    <!--QUESTION FORM + BUTTON-->
      <input id="guess-input" type="text" name="quip"/>

    <button id="guess-submit" class="guess-submit">Submit</button>

  </div>

  <!-- ---MESSAGES--- -->
  <div id="messages">

    <div class="hidden" id="correct">
      <h5> CORRECT! </h5>
    </div>

    <div class="hidden" id="wrong">
      <h5> NOPE! TRY AGAIN </h5>
    </div>

  </div>

</section>

Thanks for your response! So I realized that I should have worded the question a little more clearer (my apologies). The reason why I want to have the alert show outside of the button click is because I when the answer is correct I want to run another function that stops an SVG line drawing (via LazyLinePainter). The alert was a test to see if I could check if the answer is correct outside of the guessAnswer function. — mellobird, Jan 27 '16 at 03:00

score 0 · Answer 4 · answered Jan 27 '16 at 01:50

Below code is enough! you can replace this with your js script.


$( document ).ready(function() {
    $('#correct').hide();
    $('#wrong').hide();
    var answer = document.getElementById('guess-input').name;
  $("button.guess-submit").click(function(event) {
    if ( $('#guess-input').val() == answer) {
      $('#correct').show();
      $('#wrong').hide();
      alert("hi");
    } else {
      $('#wrong').show();
      $('#correct').hide();
    }

  });
});

How to detect if a div is visible in order to trigger another event (LazyLine Painter)

4 Answers4