CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nicolas Hochard
Nicolas Hochard

Reputation: 45

Hover doesn't reset after click

When clicking to get a new quote, colors change for all the page, including the button. However, if the user keep the mouse on the button (hovering it), the color won't change. Messing up the entire design.

Do you know how I could fix that?

$("#getQuote").html(function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

$("#getQuote").on("click", function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

// Twitter share button
$("#tweetIt").on("click", function() {
  var quote = document.getElementById("result").innerText;
  var author = document.getElementById("title").innerText;
  var tweetUrl =
    "https://twitter.com/share?text=" +
    encodeURIComponent(quote + " " + author + " #quote") +
    "&url=" +
    "www.qod.com/";

  window.open(tweetUrl);
});

$(document).ready(function() {
  $("#getQuote").click(function() {
    var col = Math.floor(Math.random() * 12);

    var color = [
      "#16a085",
      "#27ae60",
      "#2c3e50",
      "#f39c12",
      "#e74c3c",
      "#9b59b6",
      "#FB6964",
      "#342224",
      "#472E32",
      "#BDBB99",
      "#77B1A9",
      "#73A857"
    ];

    $(".twitter, #tweetIt")
      .css({
        background: color[col],
        "border-radius": "3px"
      })
      .addClass("animated fadeIn 8000");
    $("i, span, p, .quote")
      .css("color", color[col])
      .addClass("animated fadeIn");

    $(".quote").hover(
      function() {
        $(this).css({
          background: color[col],
          "border-radius": "4px"
        });
        $(this).css("color", "white");
      },
      function() {
        $(this).css("background-color", "white");
        $(this).css("color", color[col]);
      }
    );

    $("#tweetIt").hover(
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1.1,1.1)");
      },
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1,1)");
      }
    );

    setTimeout(function() {
      $("i, span, p, background").removeClass("animated fadeIn");
    }, 500);
  });
});
.container {
  margin-top: 200px;
}

.row {
  height: auto;
}

.test4 {
  position: relative;
  bottom: 10;
  right: 0;
}

.iconLeft {
  float: right;
  right: 16px;
  font-size: 5em;
  color: #555555;
}

.iconRight {
  float: bottom right;
  right: 16px;
  font-size: 5em;
  color: #555555;
}

.cont {
  font-size: 2em;
  color: #555555;
}

.title {
  text-align: right;
  font-size: 1.3em;
  margin-top: 1em;
  color: #555555;
}

.main {
  display: flex;
  justify-content: center;
}

.quote {
  width: 300px;
  border-radius: 3px;
  margin-top: 20px;
  font-size: 20px;
  padding: px;
  height: 60px;
  line-height: 0px;
  background: white;
  color: #555555;
  margin-bottom: 300px;
  border: solid 2px;
}

.quote:hover {
  background: #555555;
  color: white;
  border-radius: 4px;
}

.twitter {
  float: left;
  color: white;
}

.twitter:hover {
  transform: scale(1.1, 1.1);
  color: white;
}

button {
  background-color: #555555;
  font-size: 3em;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='row'>
    <div class='col-sm-2 test2'>
      <i class="fa fa-quote-left iconLeft"> </i>
    </div>
    <div class='col-sm-8 test3'>

      <span class="cont" id="result" onclick="myFunction()"></span>

      <p class="title" id="title"></p>

      <div class="twitter">
        <button id="tweetIt" class="btn fab fa-twitter" title="Tweet this quote!"> Tweet</button>
      </div>

    </div>
    <div class='col-sm-2 test4'>
      <i class="fa fa-quote-right iconRight"> </i>
    </div>
  </div>

</div>

<div class="row container-fluid main">
  <button id="getQuote" class="quote btn btn-outline-secondary">New Quote</button>
</div>

Upvotes: 2

Views: 2766

Answers (5)

Saravanan I
Saravanan I

Reputation: 1229

You just have to trigger mouseleave on click $(this).trigger('mouseleave'); here is a working codepen. Also function definition should be moved to the top in order to call/trigger the event.

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

On click... You redefine the hover handlers.

So if the mouseleave did not occur yet... The color do not change.

But you can force a mouseleave at the very beginning of the click handler... And since we know the mouse is supposed to be over the button, also force a mouseenter at the end of the click handler (after the hover has been redefined).

$("#getQuote").click(function() {
   $(this).trigger("mouseleave");          // Force mouseleave

   //... you whole code is unchanged

   $(this).trigger("mouseenter");          // Force mouseenter
});

Here is your CodePen updated

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 77053

You will need to track somehow if the mouse is hovering the button and to make sure that if it is, you call mouseleave and mouseenter, to trigger the event you are missing here. A solution is:

$("#getQuote").html(function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

$("#getQuote").on("click", function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

// Twitter share button
$("#tweetIt").on("click", function() {
  var quote = document.getElementById("result").innerText;
  var author = document.getElementById("title").innerText;
  var tweetUrl =
    "https://twitter.com/share?text=" +
    encodeURIComponent(quote + " " + author + " #quote") +
    "&url=" +
    "www.qod.com/";

  window.open(tweetUrl);
});

var isInside = false;
$(document).ready(function() {
  $("#getQuote").mouseenter(function() {
        isInside = true;
  });
  $("#getQuote").mouseleave(function() {
        isInside = false;
  });
  $("#getQuote").click(function() {
    var col = Math.floor(Math.random() * 12);

    var color = [
      "#16a085",
      "#27ae60",
      "#2c3e50",
      "#f39c12",
      "#e74c3c",
      "#9b59b6",
      "#FB6964",
      "#342224",
      "#472E32",
      "#BDBB99",
      "#77B1A9",
      "#73A857"
    ];

    $(".twitter, #tweetIt")
      .css({ background: color[col], "border-radius": "3px" })
      .addClass("animated fadeIn 8000");
    $("i, span, p, .quote")
      .css("color", color[col])
      .addClass("animated fadeIn");

    $(".quote").hover(
      function() {
        $(this).css({ background: color[col], "border-radius": "4px" });
        $(this).css("color", "white");
      },
      function() {
        $(this).css("background-color", "white");
        $(this).css("color", color[col]);
      }
    );

    $("#tweetIt").hover(
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1.1,1.1)");
      },
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1,1)");
      }
    );

    setTimeout(() => {
      $("i, span, p, background").removeClass("animated fadeIn");
      if (isInside) {
        $(this).mouseleave().mouseenter();
      }
    }, 500);
  });
});

Upvotes: 0

Terry
Terry

Reputation: 66228

The reason why the hover effect appears to be broken after clicking is because the mouseover event is not fired. From a purist point of view, this behavior can be easily handled using some CSS: all you need to do is to create a custom <style> element whose text content is constantly updating for each color change. Basically what you want is:

.quote {
  background-color: #fff;
  color: <<customColor>>;
}
.quote:hover {
  background-color: <<customColor>>;
  color: #fff;
}

At the top of your file, you can create a custom <style> element with a certain ID, so you can easily select it later. We leave it empty for now:

var style = document.createElement("style");
style.id = 'customQuoteHover';
document.getElementsByTagName("head")[0].appendChild(style);

Instead of binding the .hover() event, you simply overwrite the text content of the custom <style> element with the correct rules:

var css = ".quote { background-color: #fff; color: "+color[col]+"; } .quote:hover { background-color: "+color[col]+"; color: #fff; }";
var styleElent = document.getElementById('customQuoteHover');
while (styleElent.hasChildNodes()) {
  styleElent.removeChild(styleElent.lastChild);
}
styleElent.appendChild(document.createTextNode(css));

See working CodePen: https://codepen.io/terrymun/pen/oqMjXB

There is still some issues with your code, especially when it comes to creating new .hover() bindings for each .click(). This is not ideal because every time the user cycles through your quotes, new bindings are created. This will bog your app down very quickly.

Upvotes: 1

Dilip Solanki
Dilip Solanki

Reputation: 437

Try last two line add in your code...

$(".twitter, #tweetIt")
  .css({ background: color[col], "border-radius": "3px" })
  .addClass("animated fadeIn 8000");

$("i, span, p, .quote")
  .css("color", color[col])
  .addClass("animated fadeIn");

$(".quote").css({ background: color[col], "border-radius": "4px" });
$(".quote").css("color", "white");

Upvotes: 0

Related Questions