X-Cart forums - X-Cart X-Mas Lights

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - X-Cart X-Mas Lights (https://forum.x-cart.com/showthread.php?t=17695)

nice site! could look at that all day long..!

care to post the snow?

Sure... just a little something I found out there.

Step 1:

Create a file in your /skin1/ directory named snow.js with this content:

Code:

  //Configure below to change URL path to the snow image

  var snowsrc="/snow3.gif"

  // Configure below to change number of snow to render

  var no = 10;



  var ns4up = (document.layers) ? 1 : 0;  // browser sniffer

  var ie4up = (document.all) ? 1 : 0;

  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;



  var dx, xp, yp;    // coordinate and position variables

  var am, stx, sty;  // amplitude and step variables

  var i, doc_width = 800, doc_height = 600;

  

  if (ns4up||ns6up) {

    doc_width = self.innerWidth;

    doc_height = self.innerHeight;

  } else if (ie4up) {

    doc_width = document.body.clientWidth;

    doc_height = document.body.clientHeight;

  }



  dx = new Array();

  xp = new Array();

  yp = new Array();

  am = new Array();

  stx = new Array();

  sty = new Array();

  

  for (i = 0; i < no; ++ i) {  

    dx[i] = 0;                        // set coordinate variables

    xp[i] = Math.random()*(doc_width-50);  // set position variables

    yp[i] = Math.random()*doc_height;

    am[i] = Math.random()*20;         // set amplitude variables

    stx[i] = 0.02 + Math.random()/10; // set step variables

    sty[i] = 0.7 + Math.random();     // set step variables

    if (ns4up) {                      // set layers

      if (i == 0) {

        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\">[img]"+snowsrc+"[/img]</a></layer>");

      } else {

        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\">[img]"+snowsrc+"[/img]</layer>");

      }

    } else if (ie4up||ns6up) {

      if (i == 0) {

        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\">[img]"+snowsrc+"[/img]</a></div>");

      } else {

        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\">[img]"+snowsrc+"[/img]</div>");

      }

    }

  }

  

  function snowNS() {  // Netscape main animation function

    for (i = 0; i < no; ++ i) {  // iterate for every dot

      yp[i] += sty[i];

      if (yp[i] > doc_height-50) {

        xp[i] = Math.random()*(doc_width-am[i]-30);

        yp[i] = 0;

        stx[i] = 0.02 + Math.random()/10;

        sty[i] = 0.7 + Math.random();

        doc_width = self.innerWidth;

        doc_height = self.innerHeight;

      }

      dx[i] += stx[i];

      document.layers["dot"+i].top = yp[i];

      document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

    }

    setTimeout("snowNS()", 10);

  }



  function snowIE_NS6() {  // IE and NS6 main animation function

    for (i = 0; i < no; ++ i) {  // iterate for every dot

      yp[i] += sty[i];

      if (yp[i] > doc_height-50) {

        xp[i] = Math.random()*(doc_width-am[i]-30);

        yp[i] = 0;

        stx[i] = 0.02 + Math.random()/10;

        sty[i] = 0.7 + Math.random();

        doc_width = ns6up?window.innerWidth : document.body.clientWidth;

        doc_height = ns6up?window.innerHeight : document.body.clientHeight;

      }

      dx[i] += stx[i];

      if (ie4up){

      document.all["dot"+i].style.pixelTop = yp[i];

      document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

      }

      else if (ns6up){

      document.getElementById("dot"+i).style.top=yp[i];

      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);

      }   

    }

    setTimeout("snowIE_NS6()", 10);

  }



  if (ns4up) {

    snowNS();

  } else if (ie4up||ns6up) {

    snowIE_NS6();

  }

Step 2:

Download this image (or create your own snow GIF) and upload it to the root of your website:

http://www.angelacarol.com/snow3.gif

Step 3:

Add this line to the <BODY> section of your /skin1/customer/home.tpl file

Code:

<script language="JavaScript" src="{$SkinDir}/snow.js" type="text/javascript"></script>

Alternatively, if you only want this displayed on your home page (and not on every page) add these lines to the <BODY> section instead

Code:

{if $main eq "catalog" and $current_category.category eq ""}

<script language="JavaScript" src="{$SkinDir}/snow.js" type="text/javascript"></script>

{/if}

I've discovered the problem with the flash xmas lights not filling the screen...
I have modified BOOMER's code and it now works in FF and IE and reaches right across the screen.

Quote:

Here's a test.html file I used to get the lights to spread at 100% with no cut ups.

Code:

<HTML>

<TITLE></TITLE>

<style>

BODY {

        padding: 0px 0px 0px 0px;

        margin: 0px;

}

</style>        

<BODY>

<DIV id="top" style="position: absolute;top:0;left:0;width:100%;" width="100%">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="60" id="lights" ALIGN="">

<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=movie VALUE="lights.swf">

<PARAM NAME=menu VALUE=false>

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="lights.swf" menu=false quality=high bgcolor=#FFFFFF wmode="transparent" WIDTH="100%" HEIGHT="60" NAME="lights" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

</DIV>

</BODY>

</HTML>

:!: Note I removed the {$ImagesDir}/ call before the lights.swf file for local testing. Think the <style> will fix the issue. 8)

I really like those lights, but since my sites have menus right up at the top of the screen, the lights overlay them and you can not click on them :(

I normally just add padding-top: and push the content down 10-15 pixels so its not completely overlapping just barely over the content. Not always easy for some site designs though. :?

Ahhh with all these lights and snow it puts me in the singing mood

Everybody come on :D

1

2

3

Oh the weather outside is frightful

But the fire is so delightful

And since we've no place to go

Let It Snow! Let It Snow! Let It Snow!

It doesn't show signs of stopping

And I've bought some corn for popping

The lights are turned way down low

Let It Snow! Let It Snow! Let It Snow!

When we finally kissgoodnight

How I'll hate going out in the storm!

But if you'll really hold me tight

All the way home I'll be warm

The fire is slowly dying

And, my dear, we're still goodbying

But as long as you love me so

Let It Snow! Let It Snow! Let It Snow! :P

I've got a gun and im not afraid of using it!!!!

Bah Humbug and all that stuff.

Quote:

Originally Posted by cotc2001

I've got a gun and im not afraid of using it!!!!

Bah Humbug and all that stuff.

:lol: It is a BIT too early for that Groovico!! I might side on Cotc on this one. ;)

Carrie