www.webdeveloper.com
Results 1 to 4 of 4

Thread: Jerky Horizontal Movement in Firefox

Hybrid View

  1. #1
    Join Date
    Feb 2010
    Posts
    2

    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:

    http://hickory1st.com/leadership.asp

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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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
    Location
    Amsterdam
    Posts
    174
    I see it too, instead of letting people find the responsible javascript you might have pasted it here..
    Code:
    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)
        {
          this.autoToggle++;
          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()
    {
      panelSlider.step();
      setTimeout("stepper();", 30);
    }
    
    var panelSlider = new aPanel(document.getElementById('panel-column'), selectPanel, 0);
    stepper();
    var toPage = self.location.hash.replace('#', '');
    if (toPage != '') document.getElementById('to-' + toPage).onclick();
    (@http://hickory1st.com/j/panel-column-slider.js)

    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
    Posts
    2
    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