Twitter API Question posted in
The official Twitter API documentation can be found here.

Hover doesn't reset after click – Twitter API

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>
Tags:

5

Answers


  1. 0

    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");
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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);
  });
});
    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search