Results 1 to 4 of 4

Thread: Jerky Horizontal Movement in Firefox

Hybrid View

  1. #1
    Join Date
    Feb 2010

    Jerky Horizontal Movement in Firefox

    I have some JS code that works beautifully for a horizontal scrolling effect in IE, Safari, and Chrome, but in Firefox it seems the CSS "overflow: hidden;" is not clipping the content quickly enough. Does anyone have any suggestions on how to get this to function correctly? Visit here in Firefox and click any of the names on the left-hand column to see what I'm talking about:


    Try another browser and you will notice the much cleaner effect.

  2. #2
    Join Date
    Apr 2003
    Not seeing any difference. Perhaps a user with a very slow PC may see a difference.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2010
    I see it too, instead of letting people find the responsible javascript you might have pasted it here..
    function aPanel(pageElement, valueFunction, movementDelay)
      this.movementDelay = movementDelay;
      if (!movementDelay) this.movementDelay = 0;
      this.pageElement = pageElement;
      this.pageElement.codeObject = this;
      this.pageElement.style.overflow = "hidden";
      this.inside = document.createElement("div");
      var content = pageElement.innerHTML;
      pageElement.innerHTML = "";
      pageElement.insertBefore(this.inside, null);
      this.inside.className = "inside-panel";
      this.inside.innerHTML = content;
      this.pageElement.style.display = "block";
      this.origin = 0;
      this.destination = 0;
      this.autoToggle = 0;
      this.moveTo = valueFunction;
      this.step = function()
        var difference = this.destination - this.origin;
        if (parseInt(difference) != 0)
          this.origin += (difference / 10)
          this.inside.style.left = (-parseInt(this.origin) -2) + 'px';
        if (this.movementDelay != 0)
          if (this.autoToggle == this.movementDelay) this.moveTo("random");
      this.move = function(value)
        this.destination = value;
        this.autoToggle = 0;
    selectPanel = function(panel)
      var SCALE = 472;
      panelSlider.move(panel * SCALE);
    function stepper()
      setTimeout("stepper();", 30);
    var panelSlider = new aPanel(document.getElementById('panel-column'), selectPanel, 0);
    var toPage = self.location.hash.replace('#', '');
    if (toPage != '') document.getElementById('to-' + toPage).onclick();

    You can try to do something with the z-index of the sides but i have not really looked into the script.. or pray for some devine insight ofcourse

  4. #4
    Join Date
    Feb 2010
    I tried setting "display: none;", changing "left" value, and then setting it back to "display: block;" to see if it would avoid the clipping bleed, but it didn't make any difference. I'm running out of ideas. It bleeds unto the page background image as well, so I'm not sure z-index will make a difference, but I may go ahead and try that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles