1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Navbar glitches upon scrolling down

Discussion in 'Styling and Customization Questions' started by teerialegends, Mar 19, 2015.

  1. teerialegends

    teerialegends New Member

    Hello, I do not know if this is the actual right section to post this in. If it is not, please move it.

    So as you can see on http://forums.teeria.net/ I've added a firefly background which requires JS/jQuery and I noticed that when you scroll down the Navbar glitches out/disappears. I know for a fact that it has to do with the JS/jQuery but I have no idea what is affecting the Navbar to fall apart.

    Here is my code:
    Code:
    var WIDTH;
    var HEIGHT;
    var canvas;
    var con;
    var g;
    var pxs = new Array();
    var rint = 50;
    
    $(document).ready(function(){
      WIDTH = window.outerWidth;
      HEIGHT = window.outerHeight;
        $('#container123').width(WIDTH).height(HEIGHT);
        canvas = document.getElementById('pixie');
        $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
        con = canvas.getContext('2d');
        for(var i = 0; i < 50; i++) {
            pxs[i] = new Circle();
            pxs[i].reset();
        }
        setInterval(draw,rint);
    
    });
    
    function draw() {
        con.clearRect(0,0,WIDTH,HEIGHT);
        for(var i = 0; i < pxs.length; i++) {
            pxs[i].fade();
            pxs[i].move();
            pxs[i].draw();
        }
    }
    
    function Circle() {
        this.s = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};
    
        this.reset = function() {
            this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
            this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
            this.r = ((this.s.rmax-1)*Math.random()) + 1;
            this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
            this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
            this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
            this.rt = Math.random()*this.hl;
            this.s.rt = Math.random()+1;
            this.stop = Math.random()*.2+.4;
            this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
            this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
        }
    
        this.fade = function() {
            this.rt += this.s.rt;
        }
    
        this.draw = function() {
            if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1;
            else if(this.rt >= this.hl) this.reset();
            var newo = 1-(this.rt/this.hl);
            con.beginPath();
            con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            con.closePath();
            var cr = this.r*newo;
            g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
            g.addColorStop(0.0, 'rgba(238,180,28,'+newo+')');
            g.addColorStop(this.stop, 'rgba(238,180,28,'+(newo*.2)+')');
            g.addColorStop(1.0, 'rgba(238,180,28,0)');
            con.fillStyle = g;
            con.fill();
        }
    
        this.move = function() {
            this.x += (this.rt/this.hl)*this.dx;
            this.y += (this.rt/this.hl)*this.dy;
            if(this.x > WIDTH || this.x < 0) this.dx *= -1;
            if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
        }
    
        this.getX = function() { return this.x; }
        this.getY = function() { return this.y; }
    }
    I already changed the container name because I thought that would cause the problem but it did in fact not.
     
  2. teerialegends

    teerialegends New Member

    Code:
    function draw() {
        con.clearRect(0,0,WIDTH,HEIGHT);
        for(var i = 0; i < pxs.length; i++) {
            pxs[i].fade();
            pxs[i].move();
            pxs[i].draw();
        }
    }
    con.clearRect(0,0,WIDTH,HEIGHT); seems to be causing the issue.
     
  3. teerialegends

    teerialegends New Member

    Okay so it has to do with the background positioning.. is there any way to fix that? It seems to bug with both relative,absolute and fixed..


    EDIT: Took the background off for now, you can still find it @ http://codepen.io/andrewreifman/pen/vgGjb
     
    Last edited: Mar 19, 2015

Share This Page