X-Cart X-Mas Lights

donavichi · #11 11-03-2005, 04:39 AM

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

care to post the snow?

TelaFirma · #12 11-03-2005, 05:08 AM

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}

donavichi · #13 11-03-2005, 06:01 AM

quality!

donavichi · #14 11-03-2005, 06:18 AM

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:

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

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="1920px" HEIGHT="70px" id="lights" ALIGN="center">
<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=movie VALUE="/skin1/images/lights.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/skin1/images/lights.swf" menu=false quality=high bgcolor=#FFFFFF wmode="transparent" WIDTH="1920px" HEIGHT="70px" NAME="lights" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</DIV>

B00MER · #15 11-03-2005, 06:26 AM

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.

TelaFirma · #16 11-03-2005, 06:31 AM

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

B00MER · #17 11-03-2005, 06:48 AM

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.

groovico · #18 11-03-2005, 10:06 AM

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

Everybody come on

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

cotc2001 · #19 11-03-2005, 12:46 PM

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

Bah Humbug and all that stuff.

BCSE · #20 11-03-2005, 01:04 PM

Quote:

Originally Posted by cotc2001

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

Bah Humbug and all that stuff.

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

Carrie

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search