Code Christmas lights stopped working.

[smurfavr]

@Ange Tuteur Code Christmas lights that you make stopped working. Can you fix it?

Code:

$(function(){$(function(){
  var padTop = true,
  frame = document.createElement('IFRAME'), body = document.body, s = '';
  frame.setAttribute('style','position:absolute;left:0;right:0;top:0;width:100%;height:100px;border:none;z-index:1000;');
  frame.src = 'http://opensource.olympe.in/lights/?size=tiny';
  frame.id = 'schillmania-lights';
  body.insertBefore(frame, body.firstChild);
 
  if (document.getElementById('fa_toolbar')) {
    frame.style.top = '28px';
    document.getElementById('fa_hide').onclick = function() { frame.style.top = '0px' };
    document.getElementById('fa_show').onclick = function() { frame.style.top = '28px' }
  }
  if (padTop == true) {
    if (body.getAttribute('style')) s = body.getAttribute('style');
    body.setAttribute('style',s + 'padding-top:100px !important;');
  }
})});

[Wolfuryo]

Hello,

The problem is with this link:http://opensource.olympe.in/lights/?size=tiny
For some reason, it is not working anymore.

[Ange TuteurAdministrator]

It's probably related to the difficulties my web host is having. There's nothing I can do at the moment.

[GuestGuest]

*** Topic solved, locked and archived ***

[smurfavr]

@Ange Tuteur I uploaded the files from the folder lights here 000webhost.com, but I can not take the link address to put in js code. Can you help me?

[smurfavr]

@Ange Tuteur I fixed files to work in the code, but there were some inscriptions (keys) under the lights. How can I remove these buttons.

Code:

$(function(){$(function(){
  var padTop = true,
  frame = document.createElement('IFRAME'), body = document.body, s = '';
  frame.setAttribute('style','position:absolute;left:0;right:0;top:0;width:100%;height:80px;border:none;z-index:1000;');
  frame.src = 'http://hl-club.net16.net/lights/?size=tiny';
  frame.id = 'schillmania-lights';
  body.insertBefore(frame, body.firstChild);
 
  if (document.getElementById('fa_toolbar')) {
    frame.style.top = '28px';
    document.getElementById('fa_hide').onclick = function() { frame.style.top = '0px' };
    document.getElementById('fa_show').onclick = function() { frame.style.top = '28px' }
  }
  if (padTop == true) {
    if (body.getAttribute('style')) s = body.getAttribute('style');
    body.setAttribute('style',s + 'padding-top:80px !important;');
  }
})});

[ValoishGraphic Designer]

I'm not a JS expert (Honestly, I've never even coded in JS LOL) but we might be able to hide them with CSS.. Is the code currently up on your forum?

[smurfavr]

You want my css?

[ValoishGraphic Designer]

Not the CSS you're thinking of.. 
If you can give me the link to the forum where these buttons are showing up, I can find the div container using devtools and probably hide it with CSS.

[smurfavr]

Not the CSS you're thinking of.. 
If you can give me the link to the forum where these buttons are showing up, I can find the div container using devtools and probably hide it with CSS.

http://vracatestforum.bulgarianforum.net/forum

[ValoishGraphic Designer]

I looked over the original code Ange has, and compared it to yours and it seems that you're hosting this file correct? 

Code:

http://hl-club.net16.net/lights/?size=tiny

If you are, can you open (edit) the content of it, and take out the following:

Code:

 <div style="position:absolute;bottom:3px;left:3px">
  <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a>
 </div>

**Save the entire original code in a notepad file before removing the div above, just in case.**
That should remove the div that's adding the buttons. 
The downside to this method is that you won't be able to control the size of the lightbulbs anymore. ><

[smurfavr]

Can you make the code and give it here in the topic because I did not understand well what do I remove it.

[smurfavr]

These buttons can be removed from the file which I attach but I do not know which lines to remove.
http://dox.bg/files/dw?a=d8a3f158ca

[ValoishGraphic Designer]

What needs to be removed is not in the JS code directly. It's linked into the JS. If you look in line 5 of the code you posted:

Code:

$(function(){$(function(){
  var padTop = true,
  frame = document.createElement('IFRAME'), body = document.body, s = '';
  frame.setAttribute('style','position:absolute;left:0;right:0;top:0;width:100%;height:80px;border:none;z-index:1000;');
  frame.src = 'http://hl-club.net16.net/lights/?size=tiny';
  frame.id = 'schillmania-lights';
  body.insertBefore(frame, body.firstChild);
 
  if (document.getElementById('fa_toolbar')) {
    frame.style.top = '28px';
    document.getElementById('fa_hide').onclick = function() { frame.style.top = '0px' };
    document.getElementById('fa_show').onclick = function() { frame.style.top = '28px' }
  }
  if (padTop == true) {
    if (body.getAttribute('style')) s = body.getAttribute('style');
    body.setAttribute('style',s + 'padding-top:80px !important;');
  }
})});

You'll see this link:

Code:

http://hl-club.net16.net/lights/?size=tiny

Which contains coding that makes the lights appear on the page. 
I compared the original code Ange had before with the one you just posted and that line (line 5) has a different link than the original JS. So I'm assuming that you used http://hl-club.net16.net to host the old broken file, correct?

If you did, you should be able to open and edit the text found in http://hl-club.net16.net/lights/?size=tiny.
It should look something like this:

Code:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>

<body>

<div>

 <div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
 </div>

 <div id="lights">
  <!-- lights go here -->
 </div>

 <div style="position:absolute;bottom:3px;left:3px">
  <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a>
 </div>

</div>



</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

Replace that ^ with this:

Code:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>

<body>

<div>

 <div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
 </div>

 <div id="lights">
  <!-- lights go here -->
 </div>

</div>



</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

[smurfavr]

I did not understand what to change and where to change it. I use gogle translator and do not understand well.

psp
These buttons can be removed from the file which I attach but I do not know which lines to remove.
http://dox.bg/files/dw?a=d8a3f158ca

[ValoishGraphic Designer]

I'm not too sure how to explain it any other way x_x
Since I'm not experienced with Javascript, I guess we'll have to wait for Ange to come back from his break.

[smurfavr]

@Ange Tuteur Can you help?
These buttons can be removed from the file which I attach but I do not know which lines to remove. If they can remain size tiny.
http://dox.bg/files/dw?a=6f67bd3df2

[Ange TuteurAdministrator]

Edit the file you have here :
http://hl-club.net16.net/lights/

and remove this line of code :

Code:

 <div style="position:absolute;bottom:3px;left:3px">
  <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a>
 </div>

[smurfavr]

@Ange Tuteur
I do not find these lines. file christmaslights

Code:

// Christmas Light Smashfest
// Adapted from XLSF 2007 as originally used on http://schillmania.com/?theme=2007&christmas=1

function $(sID) {
  return document.getElementById(sID);
}

var Y = {
 // shortcuts
 A: YAHOO.util.Anim,
 D: YAHOO.util.Dom,
 E: YAHOO.util.Event,
 UE: YAHOO.util.Easing,
 CA: YAHOO.util.ColorAnim,
 BG: YAHOO.util.BgPosAnim
}

function XLSF(oTarget,urlBase) {
  var writeDebug = soundManager._wD;
  var urlBase = (urlBase?urlBase:'lights/');
  writeDebug('XLSF()');
  var IS_MOON_COMPUTER = false;
  var isIE = navigator.userAgent.match(/msie/i);
  var self = this;
  var xlsf = self;
  var animDuration = 1;
  this.oFrag = document.createDocumentFragment();
  this.oTarget = (oTarget?oTarget:document.documentElement);
  this.oExplosionBox = document.createElement('div');
  this.oExplosionBox.className = 'xlsf-fragment-box';
  this.oExplosionFrag = document.createElement('div');
  this.oExplosionFrag.className = 'xlsf-fragment';
  this.lights = [];
  this.lightClasses = {
    pico: 32,
    tiny: 50,
    small: 64,
    medium: 72,
    large: 96   
  }

  if (window.innerWidth || window.innerHeight) {
    var screenX = window.innerWidth; // -(!isIE?24:2);
    var screenY = window.innerHeight;
  } else {
    var screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth); // -(!isIE?8:0);
    var screenY = (document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
  }

  this.lightClass = (screenX>1800?'small':'pico'); // kind of light to show (32px to 96px square)

  if (window.location.href.match(/size=/i)) {
    this.lightClass = window.location.href.substr(window.location.href.indexOf('size=')+5);
  }

  this.lightXY = this.lightClasses[this.lightClass]; // shortcut to w/h

  this.lightGroups = {
    left: [],
    top: [],
    right: [],
    bottom: []
  }
  this.lightSmashCounter = 0;
  this.lightIndex = 0;
  this.lightInterval = 500;
  this.timer = null;
  this.bgBaseX = 0;
  this.bgBaseY = 0;
  this.soundIDs = 0;
  this.soundPan = {
    panValue: 75,
    left: 0,
    mid: 481,
    right: 962
  }

  this.cover = document.createElement('div');
  this.cover.className = 'xlsf-cover';
  document.documentElement.appendChild(this.cover);

  this.initSounds = function() {
   for (var i=0; i<6; i++) {
     soundManager.createSound({
       id: 'smash'+i,
       url: urlBase+'sound/glass'+i+'.mp3',
       autoLoad: true,
       multiShot: true,
      volume:50
     });
   }
    self.initSounds = function() {} // safety net
  }

  this.appendLights = function() {
   writeDebug('xlsf.appendLights()');
    self.oTarget.appendChild(self.oFrag);
    self.oFrag = document.createDocumentFragment();
  }

  function ExplosionFragment(nType,sClass,x,y,vX,vY) {
    var self = this;
    this.o = xlsf.oExplosionFrag.cloneNode(true);
    this.nType = nType;
    this.sClass = sClass;
    this.x = x;
    this.y = y;
    this.w = 50;
    this.h = 50;
    this.bgBaseX = 0;
    this.bgBaseY = this.h*this.nType;
    this.vX = vX*(1.5+Math.random());
    this.vY = vY*(1.5+Math.random());
    this.oA = null;
    this.oA2 = null;
    this.burstPhase = 1; // starting background offset point
    this.burstPhases = 4; // 1+offset (ignore large size)
    this.o.style.backgroundPosition = ((this.w*-this.burstPhase)+'px '+(this.h*-nType)+'px');

    // boundary checks
    if (self.sClass == 'left') {
      this.vX = Math.abs(this.vX);
    } else if (self.sClass == 'right') {
      this.vX = Math.abs(this.vX)*-1;
    }

    this.burstTween = function() {
      // determine frame to show
      var phase = 1+Math.floor((this.currentFrame/this.totalFrames)*self.burstPhases);
      if (phase != self.burstPhase) {
        self.burstPhase = phase;
        self.o.style.backgroundPosition = ((self.w*-self.burstPhase)+'px '+(self.h*-nType)+'px');
      }
    }

    this.burst = function() {
      self.oA = new Y.A(self.o,{marginLeft:{to:(self.vX*8)},marginTop:{to:(self.vY*8)}},animDuration,Y.UE.easeOutStrong);
      self.oA.onTween.subscribe(self.burstTween);
      self.oA.animate();
    }

    this.hide = function() {
      if (!isIE) self.o.style.opacity = 0;
    }

    this.reset = function() {
      self.o.style.left = '0px';
      self.o.style.top = '0px';
      self.o.style.marginLeft = '0px';
      self.o.style.marginTop = '0px';
      if (!isIE) self.o.style.opacity = 1;
    }

    this.animate = function() {
      self.reset();
      self.burst();
    }

  }

  function Explosion(nType,sClass,x,y) {
    var oParent = this;
    var self = this;
    this.o = null;
    this.nType = nType;
    this.sClass = sClass;
    this.x = x;
    this.y = y;
    this.boxVX = 0;
    this.boxVY = 0;
    this.o = xlsf.oExplosionBox.cloneNode(true);
    this.o.style.left = x+'px';
    this.o.style.top = y+'px';
    this.fragments = [];

    var mX = x;
    var mY = y;

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,-5,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,0,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,-5));

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,-5,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,0,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,0));

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,5));

    this.init = function() {
      for (var i=self.fragments.length; i--;) {
        self.o.appendChild(self.fragments[i].o);
      }
      if (!IS_MOON_COMPUTER) {
        // faster rendering, particles get cropped
        xlsf.oFrag.appendChild(self.o);
      } else {
        // slower rendering, can overlay body
        xlsf.oFrag.appendChild(self.o);
      }
    }

    this.reset = function() {
      // clean-up
      // self.o.parentNode.removeChild(self.o);
      self.o.style.display = 'none';
      self.o.style.marginLeft = '0px';
      self.o.style.marginTop = '0px';
      self.o.style.left = self.x+'px';
      self.o.style.top = self.y+'px';
      if (!isIE) self.o.style.opacity = 1;
      for (var i=self.fragments.length; i--;) {
        self.fragments[i].reset();
      }
    }

    this.trigger = function(boxVX,boxVY) {
      self.o.style.display = 'block';
      self.boxVX = boxVX;
      self.boxVY = boxVY;
      // boundary checks
      if (self.sClass == 'right') {
        self.boxVX = Math.abs(self.boxVX)*-1;
      } else if (self.sClass == 'left') {
        self.boxVX = Math.abs(self.boxVX);
      }
      for (var i=self.fragments.length; i--;) {
        self.fragments[i].animate();
      }
      if (!isIE && (IS_MOON_COMPUTER)) {
        var oAExplode = new Y.A(self.o,{marginLeft:{to:100*self.boxVX},marginTop:{to:150*self.boxVY},opacity:{to:0.01}},animDuration,Y.UE.easeInStrong);
      } else {
        // even IE 7 sucks w/alpha-transparent PNG + CSS opacity. Boo urns.
        var oAExplode = new Y.A(self.o,{marginLeft:{to:100*self.boxVX},marginTop:{to:150*self.boxVY}},animDuration,Y.UE.easeInStrong);
      }
      oAExplode.onComplete.subscribe(self.reset);
      oAExplode.animate();
    }

    this.init();

  }

  function Light(sSizeClass,sClass,nType,x,y) {
    var self = this;
    this.o = document.createElement('div');
    this.sClass = sClass;
    this.sSizeClass = sSizeClass;
    this.nType = (nType||0);
    this.useY = (sClass == 'left' || sClass == 'right');
    this.state = null;
    this.broken = 0;
    this.w = xlsf.lightClasses[sSizeClass];
    this.h = xlsf.lightClasses[sSizeClass];
    this.x = x;
    this.y = y;
    this.bg = urlBase+'image/bulbs-'+this.w+'x'+this.h+'-'+this.sClass+'.png';
    this.o.style.width = this.w+'px';
    this.o.style.height = this.h+'px';
    this.o.style.background = 'url('+this.bg+') no-repeat 0px 0px';
    this.bgBaseX = (self.useY?-self.w*this.nType:0);
    this.bgBaseY = (!self.useY?-self.h*this.nType:0);
    this.glassType = parseInt(Math.random()*6);
    this.oExplosion = null;
    this.soundID = 'smash'+this.glassType;
    var panValue = xlsf.soundPan.panValue; // eg. +/- 80%
    this.pan = parseInt(this.x<=xlsf.soundPan.mid?-panValue+((this.x/xlsf.soundPan.mid)*panValue):(this.x-xlsf.soundPan.mid)/(xlsf.soundPan.right-xlsf.soundPan.mid)*panValue);

    this.initSound = function() {
    }

    this.setBGPos = function(x,y) {
      self.o.style.backgroundPosition = ((self.bgBaseX+x)+'px '+(self.bgBaseY+y)+'px');
    }

    this.setLight = function(bOn) {
      if (self.broken || self.state == bOn) return false;
      if (!self.w || !self.h) self.getDimensions();
      self.state = bOn;
      if (self.useY) {
        self.setBGPos(0,-this.h*(bOn?0:1));
      } else {
        self.setBGPos(-this.w*(bOn?0:1),0);
      }
    }

    this.getDimensions = function() {
      self.w = self.o.offsetWidth;
      self.h = self.o.offsetHeight;
      self.bgBaseX = (self.useY?-self.w*self.nType:0);
      self.bgBaseY = (!self.useY?-self.h*self.nType:0);
    }

    this.on = function() {
      self.setLight(1);
    }

    this.off = function() {
      self.setLight(0);
    }

    this.flickr = function() {
      self.setLight(Math.random()>=0.5?1:0);
    }

    this.toggle = function() {
      self.setLight(!self.state?1:0);
    }

    this.explode = function(e) {
      self.oExplosion.trigger(0,1); // boooom!
    }

    this.smash = function(e) {
      if (self.broken) return false;
      self.broken = true;
      if (soundManager && soundManager.ok()) {
        soundManager.play(self.soundID,{pan:self.pan});
        // soundManager.sounds[self.soundID].play({pan:self.pan});
        // if (self.bonusSound != null) window.setTimeout(self.smashBonus,1000);
      }
      self.explode(e);
      var rndFrame = 2; // +parseInt(Math.random()*3);
      if (self.useY) {
        self.setBGPos(0,self.h*-rndFrame);
      } else {
        self.setBGPos(self.w*-rndFrame,0);
      }
      xlsf.lightSmashCounter++;
    }

    this.smashBonus = function() {
      // soundManager.play(self.bonusSounds[self.bonusSound],urlBase+'sound/'+self.bonusSounds[self.bonusSound]+'.mp3');
    }

    this.reset = function() {
      if (!self.broken) return false;
      self.broken = false;
      self.state = null;
      xlsf.lightSmashCounter--;
      self.flickr();
    }

    this.init = function() {
      self.o.className = 'xlsf-light '+this.sizeClass+' '+this.sClass;
      self.o.style.left = self.x+'px';
      self.o.style.top = self.y+'px';
      self.o.style.width = self.w+'px';
      self.o.style.height = self.h+'px';
      self.o.onmouseover = self.smash;
      self.o.onclick = self.smash;
      self.flickr();
      xlsf.oFrag.appendChild(self.o);
      self.oExplosion = new Explosion(self.nType,self.sClass,self.x,self.y);
    }

    this.init();
   
  } // Light()

  this.createLight = function(sClass,nType,x,y) {
    var oLight = new Light(self.lightClass,sClass,nType,x,y);
    self.lightGroups[sClass].push(oLight);
    self.lights.push(oLight);
    return oLight;
  }

  this.rotateLights = function() {
    self.lights[self.lightIndex==self.lights.length?self.lights.length-1:self.lightIndex].off();
    self.lightIndex++;
    if (self.lightIndex == self.lights.length) {
      self.lightIndex = 0;
    }
    self.lights[self.lightIndex].on();
  }

  this.randomLights = function() {
    self.lights[parseInt(Math.random()*self.lights.length)].toggle();
  }

 
  this.destroyLights = function() {
    self.startSequence(self.destroyLight,20);
  }

  this.destroyLight = function() {
    var groupSize = 2; // # to smash at a time
    if (self.lightSmashCounter<self.lights.length) {
      var limit = Math.min(self.lightSmashCounter+groupSize,self.lights.length);
      for (var i=self.lightSmashCounter; i<limit; i++) {
        self.lights[self.lightSmashCounter].smash();
      }
    } else {
      self.stopSequence();
    }

  }

  this.uberSmash = function() {
    // make everything explode - including your CPU.
    self.stopSequence();
    var ebCN = Y.D.getElementsByClassName;
  }

  this.smashGroup = function(oGroup) {
    for (var i=oGroup.length; i--;) {
      oGroup[i].smash();
    }
  }

  this.startSequence = function(fSequence,nInterval) {
    if (self.timer) self.stopSequence();
    self.timer = window.setInterval(fSequence,(typeof nInterval != 'undefined'?nInterval:self.lightInterval));
  }

  this.stopSequence = function() {
    if (self.timer) {
      window.clearInterval(self.timer);
      self.timer = null;
    }
  }

  var i=0;
  var j=0;

  $('lights').style.display = 'block';

  // start lights to the right of <h1>
  var offset = 0; // parseInt(document.getElementsByTagName('h1')[0].offsetWidth)+16;

  var jMax = Math.floor((screenX-offset-16)/self.lightXY);
  var iMax = Math.floor((screenY-offset-16)/self.lightXY);

  for (j=0; j<jMax; j++) {
    this.createLight('top',parseInt(j/3)%4,offset+j*self.lightXY,0);
  }

  this.appendLights();
  this.startSequence(self.randomLights);
 
}

var xlsf = null;
var urlBase = null;

function smashInit() {
  if (navigator.userAgent.match(/msie 6/i)) {
    return false;
  }
  xlsf = new XLSF(document.getElementById('lights'),urlBase?urlBase:null);
  if ($('loading')) {
    $('loading').style.display = 'none';   
  }
  xlsf.initSounds();
}

soundManager.setup({
  flashVersion: 9,
  preferFlash: false,
  url: 'lights/',
  onready: function() {
    smashInit();
  },
  ontimeout: function() {
    smashInit();
  }
});

psp
Can you add as there was in the old code sign? recharge lights.

Written byAnge Tuteur

The question mark is a link that will allow you to reload the lights in the frame. For example : You smash them all, then click reset to refresh the lights.

[Ange TuteurAdministrator]

No.. that's not the right file. There should be a file with the extension ".html" that needs to be edited to remove those buttons. Right click that file and edit it with a text editing program, then find the mentioned line and remove it.

As for the refresh button, all it did was refresh the page. You can add this code into the file to reset the lights :

Code:

<a href="javascript:window.location.reload();">Refresh</a>

[ValoishGraphic Designer]

The file you need to edit is called 'index.html'
When I opened Devtools I was able to find the name of the file, and the link to it is this: http://hl-club.net16.net/lights/index.html


It should look something like this when you try to edit it:


And like Ange said, this is the bit that needs to be removed:

Code:

<div style="position:absolute;bottom:3px;left:3px"> <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a> </div>

[smurfavr]

Thanks.
The refresh button lights are not visible because it is on the lamps.


How do we move on down as the image which I have given? I would like button? with which to update the lamps.

Code:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>

<body>

<div>

 <div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
 </div>

 <div id="lights">
  <!-- lights go here -->
 </div>

 <a href="javascript:window.location.reload();">Refresh</a>

</div>



</body>
</html>

PSP
How do the lights and evenly on both sides? Currently on the right there is an empty space.

[ValoishGraphic Designer]

Try wrapping it in div tags like this:

Code:

<div style="position: absolute; width: auto; left: 10px; top: 55px;"><a href="javascript:window.location.reload();">Refresh</a></div>

So you'll get this:

Code:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>
 
<body>
 
<div>
 
 <div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
 </div>
 
 <div id="lights">
  <!-- lights go here -->
 </div>
 
<div style="position: absolute; width: auto; left: 10px; top: 55px;"><a href="javascript:window.location.reload();">Refresh</a></div>
 
</div>
 
 
 
</body>
</html>

Just play around with the left and top values until it's positioned where you want it to be c:

[smurfavr]

There were 2 button to update the lamps.


I would like button? with which to update the lamps.


I use this js code.

Code:

$(function(){$(function(){
  var padTop = true,
  frame = document.createElement('IFRAME'), body = document.body, s = '';
  frame.setAttribute('style','position:absolute;left:0;right:0;top:0;width:100%;height:80px;border:none;z-index:1000;');
  frame.src = 'http://hl-club.net16.net/lights/?size=tiny';
  frame.id = 'schillmania-lights';
  body.insertBefore(frame, body.firstChild);
 
  if (document.getElementById('fa_toolbar')) {
    frame.style.top = '28px';
    document.getElementById('fa_hide').onclick = function() { frame.style.top = '0px' };
    document.getElementById('fa_show').onclick = function() { frame.style.top = '28px' }
  }
  if (padTop == true) {
    if (body.getAttribute('style')) s = body.getAttribute('style');
    body.setAttribute('style',s + 'padding-top:80px !important;');
  }
})});

[ValoishGraphic Designer]

I just looked on your forum and I only see one button.. Weird..

Did you replace the code you had in your index.html with the new one I just posted?

Code:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>
 
<body>
 
<div>
 
 <div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
 </div>
 
 <div id="lights">
  <!-- lights go here -->
 </div>
 
<div style="position: absolute; width: auto; left: 10px; top: 55px; font-weight: bold;"><a href="javascript:window.location.reload();">?</a></div>
 
</div>
 
 
 
</body>
</html>

[Sponsored content]