Latest topics
» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Code Christmas lights stopped working.

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Sat 28 May 2016, 14:38

@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;');
  }
})});
Andrei34

Gender : Male
Posts : 137
Points : 689
Reputation : 38
Language : Romanian and English
Browser : Browser : Opera Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostAndrei34 on Sat 28 May 2016, 15:14

Hello,

The problem is with this link:http://opensource.olympe.in/lights/?size=tiny
For some reason, it is not working anymore.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 29 May 2016, 11:35

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

PostGuest on Tue 23 Aug 2016, 04:03

*** Topic solved, locked and archived ***
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Thu 29 Sep 2016, 09:07

@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

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 14:42

@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;');
  }
})});


Last edited by smurfavr on Fri 07 Oct 2016, 14:52; edited 1 time in total
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 07 Oct 2016, 14:52

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?

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 14:54

You want my css?
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 07 Oct 2016, 14:56

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.

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 14:57

@Valoish wrote: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
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 07 Oct 2016, 15:05

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. ><

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 15:08

Can you make the code and give it here in the topic because I did not understand well what do I remove it.
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 15:27

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
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 07 Oct 2016, 15:27

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 -->

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 07 Oct 2016, 15:36

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
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 07 Oct 2016, 21:32

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.

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Fri 14 Oct 2016, 10:23

@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 Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 25 Oct 2016, 12:14

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

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Wed 26 Oct 2016, 05:54

@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 Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 26 Oct 2016, 10:52

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>
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Wed 26 Oct 2016, 12:23

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>

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Wed 26 Oct 2016, 14:22

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.
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Wed 26 Oct 2016, 14:51

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:

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
smurfavr

Title :
Gender : Male
Posts : 61
Points : 575
Reputation : 0
Language : Bulgarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://smurfa.bulgarianforum.net/

Postsmurfavr on Wed 26 Oct 2016, 15:09

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;');
  }
})});
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3829
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Wed 26 Oct 2016, 15:22

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>

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum