Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript adds useless scroll bars to my page?

    I've found this modification for tumblr. Scroll down to downoad a recording of my problem.
    Javascript:
    Code:
    var colour="#00baff";
    var sparkles=120;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    
    window.onload=function() { if (document.getElementById) {
      var i, rats, rlef, rdow;
      for (var i=0; i<sparkles; i++) {
        var rats=createDiv(3, 3);
        rats.style.visibility="hidden";
        document.body.appendChild(tiny[i]=rats);
        starv[i]=0;
        tinyv[i]=0;
        var rats=createDiv(5, 5);
        rats.style.backgroundColor="transparent";
        rats.style.visibility="hidden";
        var rlef=createDiv(1, 5);
        var rdow=createDiv(5, 1);
        rats.appendChild(rlef);
        rats.appendChild(rdow);
        rlef.style.top="2px";
        rlef.style.left="0px";
        rdow.style.top="0px";
        rdow.style.left="2px";
        document.body.appendChild(star[i]=rats);
      }
      set_width();
      sparkle();
    }}
    
    function sparkle() {
      var c;
      if (x!=ox || y!=oy) {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c]) {
          star[c].style.left=(starx[c]=x)+"px";
          star[c].style.top=(stary[c]=y)+"px";
          star[c].style.clip="rect(0px, 5px, 5px, 0px)";
          star[c].style.visibility="visible";
          starv[c]=50;
          break;
        }
      }
      for (c=0; c<sparkles; c++) {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
      }
      setTimeout("sparkle()", 40);
    }
    
    function update_star(i) {
      if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
      if (starv[i]) {
        stary[i]+=1+Math.random()*3;
        if (stary[i]<shigh+sdown) {
          star[i].style.top=stary[i]+"px";
          starx[i]+=(i%5-2)/5;
          star[i].style.left=starx[i]+"px";
        }
        else {
          star[i].style.visibility="hidden";
          starv[i]=0;
          return;
        }
      }
      else {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.visibility="hidden";
        tiny[i].style.visibility="visible"
      }
    }
    
    function update_tiny(i) {
      if (--tinyv[i]==25) {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
      }
      if (tinyv[i]) {
        tinyy[i]+=1+Math.random()*3;
        if (tinyy[i]<shigh+sdown) {
          tiny[i].style.top=tinyy[i]+"px";
          tinyx[i]+=(i%5-2)/5;
          tiny[i].style.left=tinyx[i]+"px";
        }
        else {
          tiny[i].style.visibility="hidden";
          tinyv[i]=0;
          return;
        }
      }
      else tiny[i].style.visibility="hidden";
    }
    
    document.onmousemove=mouse;
    function mouse(e) {
      set_scroll();
      y=(e)?e.pageY:event.y+sdown;
      x=(e)?e.pageX:event.x+sleft;
    }
    
    function set_scroll() {
      if (typeof(self.pageYOffset)=="number") {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
      }
      else if (document.body.scrollTop || document.body.scrollLeft) {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft=document.documentElement.scrollLeft;
    	sdown=document.documentElement.scrollTop;
      }
      else {
        sdown=0;
        sleft=0;
      }
    }
    
    window.onresize=set_width;
    function set_width() {
      if (typeof(self.innerWidth)=="number") {
        swide=self.innerWidth;
        shigh=self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientWidth) {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
      }
      else if (document.body.clientWidth) {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
      }
    }
    
    function createDiv(height, width) {
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.height=height+"px";
      div.style.width=width+"px";
      div.style.overflow="hidden";
      div.style.backgroundColor=colour;
      return (div);
    }
    Since I don't think I can explain this to you, here's a recording of the problem:
    link

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Name User View Post
    Since I don't think I can explain this to you, here's a recording of the problem:
    The problem is that the sparkles (div elements) are being allowed to fall beyond the bottom edge of the page. That's triggering the scrollbar.

    They're being hidden via visibility: hidden. Elements hidden that way still take up space and that space is what's makes the scrollbar get progressively taller as the sparkles are allowed to fall progressively further past the initial page bottom. You can fix that problem by changing all instances of element.style.visibility = "hidden" to element.style.display= "none" and element.style.visibility = "visible" to element.style.display= "block" so that the hidden sparkles no longer take up any space.

    However, you'll still have the other problem: the sparkles will fall below the page's bottom boundary and the scrollbar will flicker "on" until the sparkles below the boundary disappear. Not sure how to fix that one aside from disabling the scrollbar entirely (via overflow-y: hidden) since the script is not documented and doesn't use particularly descriptive variable names. Basically, you'll need to perform a check so that a sparkle vanishes the moment it hits the bottom of the page.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    The problem is that the sparkles (div elements) are being allowed to fall beyond the bottom edge of the page. That's triggering the scrollbar.

    They're being hidden via visibility: hidden. Elements hidden that way still take up space and that space is what's makes the scrollbar get progressively taller as the sparkles are allowed to fall progressively further past the initial page bottom. You can fix that problem by changing all instances of element.style.visibility = "hidden" to element.style.display= "none" and element.style.visibility = "visible" to element.style.display= "block" so that the hidden sparkles no longer take up any space.

    However, you'll still have the other problem: the sparkles will fall below the page's bottom boundary and the scrollbar will flicker "on" until the sparkles below the boundary disappear. Not sure how to fix that one aside from disabling the scrollbar entirely (via overflow-y: hidden) since the script is not documented and doesn't use particularly descriptive variable names. Basically, you'll need to perform a check so that a sparkle vanishes the moment it hits the bottom of the page.
    OK, I've done what you've said but my pge should scroll down, how else can my visitors see it's contents?
    Here's a test page I've made:
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-us">
    <head>
    <title>Test</title>
    <style type="text/css">
    html, body {
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    var colour="#00baff";
    var sparkles=120;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    
    window.onload=function() { if (document.getElementById) {
      var i, rats, rlef, rdow;
      for (var i=0; i<sparkles; i++) {
        var rats=createDiv(3, 3);
        rats.style.display="none";
        document.body.appendChild(tiny[i]=rats);
        starv[i]=0;
        tinyv[i]=0;
        var rats=createDiv(5, 5);
        rats.style.backgroundColor="transparent";
        rats.style.dysplay="none";
        var rlef=createDiv(1, 5);
        var rdow=createDiv(5, 1);
        rats.appendChild(rlef);
        rats.appendChild(rdow);
        rlef.style.top="2px";
        rlef.style.left="0px";
        rdow.style.top="0px";
        rdow.style.left="2px";
        document.body.appendChild(star[i]=rats);
      }
      set_width();
      sparkle();
    }}
    
    function sparkle() {
      var c;
      if (x!=ox || y!=oy) {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c]) {
          star[c].style.left=(starx[c]=x)+"px";
          star[c].style.top=(stary[c]=y)+"px";
          star[c].style.clip="rect(0px, 5px, 5px, 0px)";
          star[c].style.display="block";
          starv[c]=50;
          break;
        }
      }
      for (c=0; c<sparkles; c++) {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
      }
      setTimeout("sparkle()", 40);
    }
    
    function update_star(i) {
      if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
      if (starv[i]) {
        stary[i]+=1+Math.random()*3;
        if (stary[i]<shigh+sdown) {
          star[i].style.top=stary[i]+"px";
          starx[i]+=(i%5-2)/5;
          star[i].style.left=starx[i]+"px";
        }
        else {
          star[i].style.display="none";
          starv[i]=0;
          return;
        }
      }
      else {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.display="none";
        tiny[i].style.display="block"
      }
    }
    
    function update_tiny(i) {
      if (--tinyv[i]==25) {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
      }
      if (tinyv[i]) {
        tinyy[i]+=1+Math.random()*3;
        if (tinyy[i]<shigh+sdown) {
          tiny[i].style.top=tinyy[i]+"px";
          tinyx[i]+=(i%5-2)/5;
          tiny[i].style.left=tinyx[i]+"px";
        }
        else {
          tiny[i].style.display="none";
          tinyv[i]=0;
          return;
        }
      }
      else tiny[i].style.display="none";
    }
    
    document.onmousemove=mouse;
    function mouse(e) {
      set_scroll();
      y=(e)?e.pageY:event.y+sdown;
      x=(e)?e.pageX:event.x+sleft;
    }
    
    function set_scroll() {
      if (typeof(self.pageYOffset)=="number") {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
      }
      else if (document.body.scrollTop || document.body.scrollLeft) {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft=document.documentElement.scrollLeft;
    	sdown=document.documentElement.scrollTop;
      }
      else {
        sdown=0;
        sleft=0;
      }
    }
    
    window.onresize=set_width;
    function set_width() {
      if (typeof(self.innerWidth)=="number") {
        swide=self.innerWidth;
        shigh=self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientWidth) {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
      }
      else if (document.body.clientWidth) {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
      }
    }
    
    function createDiv(height, width) {
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.height=height+"px";
      div.style.width=width+"px";
      div.style.overflow="hidden";
      div.style.backgroundColor=colour;
      return (div);
    }
    </script>
    </body>
    </html>

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Name User View Post
    OK, I've done what you've said but my pge should scroll down, how else can my visitors see it's contents?
    Without reverse engineering the script, here's a fix that works in everything I tested except Opera 12.1, which doesn't support the pointer-events property on HTML elements. Opera is about to transition to Google Chrome's rendering engine, so I wouldn't worry about that though.

    1. Add this below the list of variables:
      Code:
      var sparkle_layer = document.createElement("div");
      sparkle_layer.setAttribute("id", "sparkle_layer");
    2. Change both document.body references to sparkle_layer.
    3. Immediately before set_width(); sparkle();, add document.body.appendChild(sparkle_layer);
    4. Add the following CSS to your style sheet:
      Code:
      #sparkle_layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-us">
    <head>
    <title>Test</title>
    <style type="text/css">
    html, body {
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    var colour="#00baff";
    var sparkles=120;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    
    window.onload=function() { if (document.getElementById) {
      var i, rats, rlef, rdow;
      for (var i=0; i<sparkles; i++) {
        var rats=createDiv(3, 3);
        rats.style.display="none";
        document.body.appendChild(tiny[i]=rats);
        starv[i]=0;
        tinyv[i]=0;
        var rats=createDiv(5, 5);
        rats.style.backgroundColor="transparent";
        rats.style.dysplay="none";
        var rlef=createDiv(1, 5);
        var rdow=createDiv(5, 1);
        rats.appendChild(rlef);
        rats.appendChild(rdow);
        rlef.style.top="2px";
        rlef.style.left="0px";
        rdow.style.top="0px";
        rdow.style.left="2px";
        document.body.appendChild(star[i]=rats);
      }
      set_width();
      sparkle();
    }}
    
    function sparkle() {
      var c;
      if (x!=ox || y!=oy) {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c]) {
          star[c].style.left=(starx[c]=x)+"px";
          star[c].style.top=(stary[c]=y)+"px";
          star[c].style.clip="rect(0px, 5px, 5px, 0px)";
          star[c].style.display="block";
          starv[c]=50;
          break;
        }
      }
      for (c=0; c<sparkles; c++) {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
      }
      setTimeout("sparkle()", 40);
    }
    
    function update_star(i) {
      if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
      if (starv[i]) {
        stary[i]+=1+Math.random()*3;
        stary[i]=Math.min(stary[i],shigh+sdown-10);
        if (stary[i]<shigh+sdown-10) {
          star[i].style.top=stary[i]+"px";
          starx[i]+=(i%5-2)/5;
          starx[i]=Math.min(starx[i],swide+sleft-10)
          star[i].style.left=starx[i]+"px";
        }
        else {
          star[i].style.display="none";
          starv[i]=0;
          return;
        }
      }
      else {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.display="none";
        tiny[i].style.display="block"
      }
    }
    
    function update_tiny(i) {
      if (--tinyv[i]==25) {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
      }
      if (tinyv[i]) {
        tinyy[i]+=1+Math.random()*3;
        tinyy=Math.min(tinyy,shigh+sdown-10);
        if (tinyy[i]<shigh+sdown-10) {
          tiny[i].style.top=tinyy[i]+"px";
          tinyx[i]+=(i%5-2)/5;
          tinyx[i]=Math.min(tinyx[i],swide+sleft-10)
          tiny[i].style.left=tinyx[i]+"px";
        }
        else {
          tiny[i].style.display="none";
          tinyv[i]=0;
          return;
        }
      }
      else tiny[i].style.display="none";
    }
    
    document.onmousemove=mouse;
    function mouse(e) {
      set_scroll();
      y=(e)?e.pageY:event.y+sdown;
      x=(e)?e.pageX:event.x+sleft;
    }
    
    function set_scroll() {
      if (typeof(self.pageYOffset)=="number") {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
      }
      else if (document.body.scrollTop || document.body.scrollLeft) {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft=document.documentElement.scrollLeft;
    	sdown=document.documentElement.scrollTop;
      }
      else {
        sdown=0;
        sleft=0;
      }
    }
    
    window.onresize=set_width;
    function set_width() {
      if (typeof(self.innerWidth)=="number") {
        swide=self.innerWidth;
        shigh=self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientWidth) {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
      }
      else if (document.body.clientWidth) {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
      }
    }
    
    function createDiv(height, width) {
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.height=height+"px";
      div.style.width=width+"px";
      div.style.overflow="hidden";
      div.style.backgroundColor=colour;
      return (div);
    }
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-us">
    <head>
    <title>Test</title>
    <style type="text/css">
    html, body {
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    var colour="#00baff";
    var sparkles=120;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    
    window.onload=function() { if (document.getElementById) {
      var i, rats, rlef, rdow;
      for (var i=0; i<sparkles; i++) {
        var rats=createDiv(3, 3);
        rats.style.display="none";
        document.body.appendChild(tiny[i]=rats);
        starv[i]=0;
        tinyv[i]=0;
        var rats=createDiv(5, 5);
        rats.style.backgroundColor="transparent";
        rats.style.dysplay="none";
        var rlef=createDiv(1, 5);
        var rdow=createDiv(5, 1);
        rats.appendChild(rlef);
        rats.appendChild(rdow);
        rlef.style.top="2px";
        rlef.style.left="0px";
        rdow.style.top="0px";
        rdow.style.left="2px";
        document.body.appendChild(star[i]=rats);
      }
      set_width();
      sparkle();
    }}
    
    function sparkle() {
      var c;
      if (x!=ox || y!=oy) {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c]) {
          star[c].style.left=(starx[c]=x)+"px";
          star[c].style.top=(stary[c]=y)+"px";
          star[c].style.clip="rect(0px, 5px, 5px, 0px)";
          star[c].style.display="block";
          starv[c]=50;
          break;
        }
      }
      for (c=0; c<sparkles; c++) {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
      }
      setTimeout("sparkle()", 40);
    }
    
    function update_star(i) {
      if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
      if (starv[i]) {
        stary[i]+=1+Math.random()*3;
        stary[i]=Math.min(stary[i],shigh+sdown-10);
        if (stary[i]<shigh+sdown-10) {
          star[i].style.top=stary[i]+"px";
          starx[i]+=(i%5-2)/5;
          starx[i]=Math.min(starx[i],swide+sleft-10)
          star[i].style.left=starx[i]+"px";
        }
        else {
          star[i].style.display="none";
          starv[i]=0;
          return;
        }
      }
      else {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.display="none";
        tiny[i].style.display="block"
      }
    }
    
    function update_tiny(i) {
      if (--tinyv[i]==25) {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
      }
      if (tinyv[i]) {
        tinyy[i]+=1+Math.random()*3;
        tinyy=Math.min(tinyy,shigh+sdown-10);
        if (tinyy[i]<shigh+sdown-10) {
          tiny[i].style.top=tinyy[i]+"px";
          tinyx[i]+=(i%5-2)/5;
          tinyx[i]=Math.min(tinyx[i],swide+sleft-10)
          tiny[i].style.left=tinyx[i]+"px";
        }
        else {
          tiny[i].style.display="none";
          tinyv[i]=0;
          return;
        }
      }
      else tiny[i].style.display="none";
    }
    
    document.onmousemove=mouse;
    function mouse(e) {
      set_scroll();
      y=(e)?e.pageY:event.y+sdown;
      x=(e)?e.pageX:event.x+sleft;
    }
    
    function set_scroll() {
      if (typeof(self.pageYOffset)=="number") {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
      }
      else if (document.body.scrollTop || document.body.scrollLeft) {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft=document.documentElement.scrollLeft;
    	sdown=document.documentElement.scrollTop;
      }
      else {
        sdown=0;
        sleft=0;
      }
    }
    
    window.onresize=set_width;
    function set_width() {
      if (typeof(self.innerWidth)=="number") {
        swide=self.innerWidth;
        shigh=self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientWidth) {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
      }
      else if (document.body.clientWidth) {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
      }
    }
    
    function createDiv(height, width) {
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.height=height+"px";
      div.style.width=width+"px";
      div.style.overflow="hidden";
      div.style.backgroundColor=colour;
      return (div);
    }
    </script>
    </body>
    </html>
    Quote Originally Posted by Arbitrator View Post
    Without reverse engineering the script, here's a fix that works in everything I tested except Opera 12.1, which doesn't support the pointer-events property on HTML elements. Opera is about to transition to Google Chrome's rendering engine, so I wouldn't worry about that though.

    1. Add this below the list of variables:
      Code:
      var sparkle_layer = document.createElement("div");
      sparkle_layer.setAttribute("id", "sparkle_layer");
    2. Change both document.body references to sparkle_layer.
    3. Immediately before set_width(); sparkle();, add document.body.appendChild(sparkle_layer);
    4. Add the following CSS to your style sheet:
      Code:
      #sparkle_layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
    Yes, I'm new to javascript and I didn't understand the meaning of "reference". Can you explain it better to me?

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-us">
    <head>
    <title>Test</title>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    var colour="#00baff";
    var sparkles=120;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    
    window.onload=function() { if (document.getElementById) {
      var i, rats, rlef, rdow;
      for (var i=0; i<sparkles; i++) {
        var rats=createDiv(3, 3);
        rats.style.display="none";
        document.body.appendChild(tiny[i]=rats);
        starv[i]=0;
        tinyv[i]=0;
        var rats=createDiv(5, 5);
        rats.style.backgroundColor="transparent";
        rats.style.dysplay="none";
        var rlef=createDiv(1, 5);
        var rdow=createDiv(5, 1);
        rats.appendChild(rlef);
        rats.appendChild(rdow);
        rlef.style.top="2px";
        rlef.style.left="0px";
        rdow.style.top="0px";
        rdow.style.left="2px";
        document.body.appendChild(star[i]=rats);
      }
      set_width();
      sparkle();
    }}
    
    function sparkle() {
      var c;
      if (x!=ox || y!=oy) {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c]) {
          star[c].style.left=(starx[c]=x)+"px";
          star[c].style.top=(stary[c]=y)+"px";
          star[c].style.clip="rect(0px, 5px, 5px, 0px)";
          star[c].style.display="block";
          starv[c]=50;
          break;
        }
      }
      for (c=0; c<sparkles; c++) {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
      }
      setTimeout("sparkle()", 40);
    }
    
    function update_star(i) {
      if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
      if (starv[i]) {
        stary[i]+=1+Math.random()*3;
        stary[i]=Math.min(stary[i],shigh+sdown-10);
        if (stary[i]<shigh+sdown-10) {
          star[i].style.top=stary[i]+"px";
          starx[i]+=(i%5-2)/5;
          starx[i]=Math.min(starx[i],swide+sleft-10)
          star[i].style.left=starx[i]+"px";
        }
        else {
          star[i].style.display="none";
          starv[i]=0;
          return;
        }
      }
      else {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.display="none";
        tiny[i].style.display="block"
      }
    }
    
    function update_tiny(i) {
      if (--tinyv[i]==25) {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
      }
      if (tinyv[i]) {
        tinyy[i]+=1+Math.random()*3;
        tinyy=Math.min(tinyy,shigh+sdown-10);
        if (tinyy[i]<shigh+sdown-10) {
          tiny[i].style.top=tinyy[i]+"px";
          tinyx[i]+=(i%5-2)/5;
          tinyx[i]=Math.min(tinyx[i],swide+sleft-10)
          tiny[i].style.left=tinyx[i]+"px";
        }
        else {
          tiny[i].style.display="none";
          tinyv[i]=0;
          return;
        }
      }
      else tiny[i].style.display="none";
    }
    
    document.onmousemove=mouse;
    function mouse(e) {
      set_scroll();
      y=(e)?e.pageY:event.y+sdown;
      x=(e)?e.pageX:event.x+sleft;
    }
    
    function set_scroll() {
      if (typeof(self.pageYOffset)=="number") {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
      }
      else if (document.body.scrollTop || document.body.scrollLeft) {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft=document.documentElement.scrollLeft;
    	sdown=document.documentElement.scrollTop;
      }
      else {
        sdown=0;
        sleft=0;
      }
    }
    
    window.onresize=set_width;
    function set_width() {
      if (typeof(self.innerWidth)=="number") {
        swide=self.innerWidth;
        shigh=self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientWidth) {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
      }
      else if (document.body.clientWidth) {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
      }
    }
    
    function createDiv(height, width) {
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.height=height+"px";
      div.style.width=width+"px";
      div.style.overflow="hidden";
      div.style.backgroundColor=colour;
      return (div);
    }
    </script>
    </body>
    </html>
    Thanks! Your code worked but I want to try @Arbitrator's code too and compare both.
    Last edited by Name User; 06-18-2013 at 04:05 PM.

  • #7
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Fail - after testing on my webpage (which has so much divs on it!) the javascript added 2 vertcall scrollbars. Any suggestions?
    I JUST WANTED A COMET-LIKE TAIL FOR MY CURSOR IS IT SO D*MN HARD?!?!
    Last edited by Name User; 06-18-2013 at 04:42 PM.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Name User View Post
    Yes, I'm new to javascript and I didn't understand the meaning of "reference". Can you explain it better to me?
    The concept is pretty simple: document.body is a reference to the document's HTML body element. So if you have document.body.appendChild(element), replacing the element reference would result in code like sparkle_layer.appendChild(element).

    Quote Originally Posted by Name User View Post
    Fail - after testing on my webpage (which has so much divs on it!) the javascript added 2 vertcall scrollbars. Any suggestions?
    Hmm... My fix seemed to work fine when there wasn't enough content on the page to invoke an active scrollbar. You don't get all the phantom space appearing at the bottom of the document. However, I just noticed that I didn't account for scrolling when I was testing.

    The obvious adjustment was to use position: fixed on #sparkle_layer so it would move when you scroll the page, but the sparkles still only appear when mousing over the top part of the page. (I only see one scrollbar in my testing though so maybe you were referring to vwphillips script?) In any case, I guess this fix won't work for you. :/

    Quote Originally Posted by Name User View Post
    I JUST WANTED A COMET-LIKE TAIL FOR MY CURSOR IS IT SO D*MN HARD?!?!
    It's a complicated script without any documentation. When people don't write readable code with comments, the next person that comes along to modify it has a much harder time of doing it.

    The apparent origin of the script is http://mf2fm.com/rv/dhtmltinkerbell.php—which features a more up-to-date and complicated version featuring multiple colors—and it doesn't even work right on the author's site with regard to the scrollbar issue. I guess the script is just poorly designed.

    There's a contact form on the site, and the site has apparently been updated within the last six days, so maybe you should drop the author a line. The author's FAQ says "By all means drop me a line if you have a good idea for an improvement or for a new script that you would like to see, but don't be offended if the answer is 'no'."
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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