Script works fine in any WebKit based browser but doesn't in Firefox

Question

I have a script in (using wordpress) header.php which looks like this:

window.addEventListener("DOMContentLoaded", function(event) {
  fixedMenu.init("header-container", 0);
  fixedMenu.init("event-type-wrapper", 20);
  window.addEventListener('scroll', function(fid){
    fixedMenu.top("header-container");
    fixedMenu.top("event-type-wrapper");
  });
  var sessionvar = "<?php echo $_SESSION['lang'] ?>";
});

after this script I include a longer one script with the script scr="" tag.

In that script I have

window.addEventListener("DOMContentLoaded", function(event) {
    todays = document.getElementById("todays-events");
    upcomming = document.getElementById("upcomming-events");
    past = document.getElementById("past-events");
    texter = document.getElementById("event-type");

    changeMessage();
});

It works fine in any webkit browser, the code is launched, but firefox doesn't load second event listener (I do not know how to debug if it loads or not, but I don't see result in the webpage).

Any ideas?

UPDATE

If there is need, here is the full source for the script embedded through script src=

var todays;
var upcomming;
var past;
var texter;

window.addEventListener("DOMContentLoaded", function(event) {
    todays = document.getElementById("todays-events");
    upcomming = document.getElementById("upcomming-events");
    past = document.getElementById("past-events");
    texter = document.getElementById("event-type");

    changeMessage();
});

window.onscroll = function(){
  changeMessage();
}

function isElementInViewport (el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= document.body.scrollHeight &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function changeMessage(){
  if(texter && todays && isElementInViewport(todays)){
    texter.textContent = returnString("Šiandien", "Today", "Сегодня");
  }
  else {
    if(texter && upcomming && isElementInViewport(upcomming)){
        texter.textContent = returnString("Artėjantys","Upcomming","Предстоящие");
    }
    else{
        if(texter && past && isElementInViewport(past)){
            texter.textContent = returnString("Praėję", "Past", "Прошлое");
        }
    }
  }
}

function returnString(lt, en, ru){
  if (!(typeof sessionvar === 'undefined')) {
    if(sessionvar == 'en_EN'){
        return en;
    }
    else if(sessionvar == 'ru_RU'){
        return ru;
    }
  }
  return lt;
}

look there : http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code — Kaiido, Jul 31 '14 at 19:38
@Kaiido I understand the debugger with breakpoints, but I don't understand how to watch events in that debugger. — Ežiukas Stebintis Pasaulį, Aug 01 '14 at 05:26
Well I would use firebug and `console.log(event)` in the event function, then I would move my console.log until I find where it breaks and why. Don't you have any error thrown? — Kaiido, Aug 01 '14 at 09:38
I ended up logging to console the change message and and those ifs inside and they all gave me false. The problem was that firefox reports document.body.scrollHeight as 0... — Ežiukas Stebintis Pasaulį, Aug 01 '14 at 15:56

score 1 · Accepted Answer · edited May 23 '17 at 11:49

The problem was that firefox reports

document.body.scrollHeight

as 0, because of that every if inside changeMessage() failed by returning false.

The solution was found in SO: .body.scrollHeight doesn't work in Firefox

quote:

function getDocHeight() {
  var D = document;
  return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
  );
}

score 0 · Answer 2 · answered Jul 31 '14 at 19:47

0

I think that what is not working is the code inside changeMessage function, because Firefox doesn't understand element.innerText, and you have to change to element.textContent

answered Jul 31 '14 at 19:47

sheldonled

118
7

you are right about that I set the message with `*.inner*`, just not with `innerText`, but with `innerHTML`, if I do in firefox console `element.innerHTML = "test"` then it works without problems. Tried `textContent` - didn't work. – Ežiukas Stebintis Pasaulį Aug 01 '14 at 05:25
what happens when you put the inline script like this: var sessionvar = ""; window.addEventListener("DOMContentLoaded", function(event) { fixedMenu.init("header-container", 0); fixedMenu.init("event-type-wrapper", 20); window.addEventListener('scroll', function(fid){ fixedMenu.top("header-container"); fixedMenu.top("event-type-wrapper"); }); }); – sheldonled Aug 01 '14 at 12:10

Script works fine in any WebKit based browser but doesn't in Firefox

2 Answers2