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

Button working on chrome but not on firefox – Twitter API

I made a button in HTML that work fine on Google Chrome but does not react at all on Firefox.

My code:

function fbs_click() {
  var u = location.href;
  var t = document.title;
  window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t) + '&s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
}


function rSign() {
  var test = Math.random();
  return test > 0.5 ? 1 : -1;
}
var CQuote = "",
  CAuthor = "";

function getQuote() {
  $.ajax({
    jsonp: "jsonp",
    dataType: "jsonp",
    contentType: "application/jsonp",
    url: "https://api.forismatic.com/api/1.0/?",
    data: {
      method: "getQuote",
      lang: "en",
      format: "jsonp",
    },
    success: function(quote) {
      //  document.getElementById("quote").innerHTML =  
      CQuote = quote.quoteText;
      // document.getElementById("author").innerHTML = 
      CAuthor = quote.quoteAuthor;
      document.getElementById("author").innerHTML = CAuthor;
      document.getElementById("quote").innerHTML = CQuote;
    }

  });
}


$(document).ready(function() {
  getQuote();
})


var background = document.getElementById('backimg');
var huetarget = 0;
var huecurrent = 0;
var bright = 1;

function abyssmal() {
  background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
  if (huecurrent < huetarget) {
    huecurrent += Math.abs(huetarget - huecurrent) / 20
  }
  if (huecurrent >= huetarget) {
    huecurrent -= Math.abs(huetarget - huecurrent) / 20
  }
}
var interval = setInterval(abyssmal, 25);

$("#btnAnimate").on("click", function() {
  huetarget += (Math.random() * 50 + 50) * rSign();
  getQuote();
});

$('#tweet').on("click", function() {
  window.open("https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + CQuote + '"   -' + CAuthor), "_blank")
});

$('#facebook').on("click", function() {
  fbs_click();

});
/*#myDiv{
  background-color: green;
  transition : background-color 2s,opacity 2s;
    
}

#myDiv:hover{
    background-color : red;
  opacity : 0.5
  
} */

#quotebox {
  font-size: 30px;
  height: auto;
}

#authorbox {
  text-align: right;
}

.box {
  height: auto;
  margin: auto;
}

#btnAnimate {
  width: 150px;
}

.share {
  width: 50px;
  float: right;
}

.button {
  height: 50px;
  padding: 0px;
  vertical-align: middle;
  margin-top: 40px;
  color: white;
  background-color: #333c5b;
  border-radius: 3px;
  border: none;
}

button:hover {
  opacity: .8;
}

.background-tile {
  background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
  background-size: 1500px 900px;
  height: 900px;
  width: 1515px;
  padding-top: 270px;
  z-index: -1;
}

#backimg {
  filter: hue-rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="background-tile" id="backimg">
  <div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870">
    <div id="quotebox">
      <i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "></i>
      <span id="quote"></span>
      <p id=a uthorbox>-<span id="author"></span>
        <p>
    </div>

    <button class="button quotebutton" id="btnAnimate">get quote</button>
    <button class=" share button fa fa-facebook" id="facebook"></button>
    <button class=" share button fa fa-twitter" id="tweet" style="  margin-right: 25px;"></button>
  </div>
</div>

I doublechecked that only phrasing elements were nested inside the button.

Question: Why does the button not react on Firefox.

Tags:

2

Answers


  1. 0

    Some HTML methodologies are not supported via crossed-browsers.

    For example, some features can work on Mozilla and Internet Explorer, but not on Chrome.

    However, in this case it’s demonstrating the BODY tag is overlapping your content. It may be an error with Mozilla in particular with Codepen.io, as W3schools validated that the button feature works on this browser.

    Login or Signup to reply.
  2. 0

    You placed everything inside #backimg, which has z-index: -1, thus sending all its contents below its parent, which is <body>. This means that, even though visible, your contents sit below an invisible click-catcher (<body>).

    Firefox seems to apply the z-index, although, AFAIK, the element should be position-ed (have a position value set to anything except static, which is default) for z-index to apply. Chrome doesn’t apply it, because #backimg has the implicit position:static.

    Closing #backimg before opening #mydiv fixes the problem and makes your HTML valid. It’s not really clear how your layout is supposed to look, but here’s my attempt at fixing it: https://codepen.io/anon/pen/ZvXXqP

    Another problem with your pen had was that it was loading jQuery after Bootstrap’s JavaScript, which requires jQuery.

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

Back To Top
Search