Click here to Skip to main content
15,042,814 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I added some javascript to a specific collection on my Shopify. I wanted to make it as the background of the collection but instead it renders the javascript that was added into a duplicate version of the original page.

So it essentially extends the page beneath the footer and places the javascript there. Any suggestions on how I can make sure that this javascript begins at the top of the collection page as a background rather than below the footer?

Here is what is in place in the collection page's html liquid file:


What I have tried:

<style>
  body {
  background: #000;
  margin: 0;
   }
  
 

 </style>

    <script>
     var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
     context = canvas.getContext( '2d' );
     context.globalCompositeOperation = 'lighter';
     canvas.width = 1480;
    canvas.height = 800;
    draw();

  var textStrip = ['S', 'P', 'O', 'T'];

  var stripCount = 60, stripX = new Array(), stripY = new Array(), dY = new Array(), 
   stripFontSize = new Array();

  for (var i = 0; i < stripCount; i++) {
    stripX[i] = Math.floor(Math.random()*1265);
    stripY[i] = -100;
    dY[i] = Math.floor(Math.random()*7)+3;
    stripFontSize[i] = Math.floor(Math.random()*16)+8;
    }

  var theColors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', '#43c728'];

  var elem, context, timer;

  function drawStrip(x, y) {
   for (var k = 0; k <= 20; k++) {
        var randChar = textStrip[Math.floor(Math.random()*textStrip.length)];
         if (context.fillText) {
          switch (k) {
          case 0:
            context.fillStyle = theColors[0]; break;
        case 1:
            context.fillStyle = theColors[1]; break;
        case 3:
            context.fillStyle = theColors[2]; break;
        case 7:
            context.fillStyle = theColors[3]; break;
        case 13:
            context.fillStyle = theColors[4]; break;
        case 17:
            context.fillStyle = theColors[5]; break;
        }
        context.fillText(randChar, x, y);
    }
    y -= stripFontSize[k];
    }
   }

 function draw() {
    // clear the canvas and set the properties
     context.clearRect(0, 0, canvas.width, canvas.height);
    context.shadowOffsetX = context.shadowOffsetY = 0;
    context.shadowBlur = 8;
    context.shadowColor = '#94f475';

    for (var j = 0; j < stripCount; j++) {
    context.font = stripFontSize[j]+'px MatrixCode';
    context.textBaseline = 'top';
    context.textAlign = 'center';
    
    if (stripY[j] > 1358) {
        stripX[j] = Math.floor(Math.random()*canvas.width);
        stripY[j] = -100;
        dY[j] = Math.floor(Math.random()*7)+3;
        stripFontSize[j] = Math.floor(Math.random()*16)+8;
        drawStrip(stripX[j], stripY[j]);
    } else drawStrip(stripX[j], stripY[j]);
    
    stripY[j] += dY[j];
    }
   setTimeout(draw, 70);
 }

   </script> 
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900