Thread Verfasser: Damokles1976
Thread ID: 714
Thread Info
Es gibt 15 Beiträge zu diesem Thema, und es wurde 7182 Mal angesehen.  Ausserdem wurden Dateien angehängt.
 Thema drucken
Javascript einbinden
Damokles1976
Hallo alle miteinander

Ich steck in einem tiefen Dilemma Ich versuche gerade ein Javascript in meine Internetseite ein zu bauen (php Fusion 7)

Der Anbieter sagt:

Binden Sie einfach folgendes Script mit dem angegebenen HTML-Code am Ende Ihrer Webseite ein, und schon schneit es. Achten Sie darauf, dass der Pfad zur JavaScript-Datei richtig angegeben ist. Eine ausführliche Anleitung zum Einbinden separater JavaScript-Dateien finden Sie auf der Seite Selfhtml.

Icon default fireworks.js (6.15 kB)

<script type="text/javascript" src="fireworks.js"></script>


Nun zu meiner Frage wo in PHP Fusion fügt man diesenCode ein und wo lege ich das Script ab? Ich seh wahrscheinlich den Wald vor lauter Bäumen nicht steh aber gerade voll auf dem Schlauch.

Ich vbleibe mit ratlosen Grüßen euer Damo

P.S. der Script Code lautet


////////////////////////////////////////////////////////////////////////
// Fireworks-Script (c) 2012, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////

var fireworks = {

   ///////////////////////////// configuration ////////////////////////////
   
   // random colors
   _color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
   // gravity factor
   _gravity: 0.07,
   // air resistance factor
   _resistance: 0.975,
   // zIndex of particles
   _zIndex: 20000,
   // maximal age of particles (in msec)
   _maxAge: 2000,
   // interval of appearing explosions (in msec)
   _interval: [500, 2500],
   // amount of particles per explosion
   _particlesPerExplosion: 40,
   // maximal speed of particle at moment of explosion
   _speed: 5,

   
   
   ///////////////////////////// private vars /////////////////////////////
   
   _particles: [],
   _bodyWidth: 0,
   _bodyHeight: 0,
   _count: 0,
   _lastInterval: 0,

   

   ////////////////////////////// functions ///////////////////////////////

   // init fireworks
   init: function()
   {
      this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
      this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });
   },
   
   
   // add an event listener
   _addEventListener: function(el, name, handler)
   {
      if (el.addEventListener)
         el.addEventListener(name, handler, false);
      else if (el.attachEvent)
         el.attachEvent('on' + name, handler);
   },
   
   
   // start fireworks
   start: function()
   {
      // init window size
      this.resize();

      // start to move snow
      this._lastInterval = this._time();
      requestAnimFrame(function() {fireworks._move();});
      
      this._addExplosion();
   },
   
   
   // add a new explosion
   _addExplosion: function()
   {
      var x = Math.floor(Math.random() * this._bodyWidth),
         y = Math.floor((Math.random() * .5 + .1) * this._bodyHeight),
         dx = Math.random() * 10 - 5,
         dy = Math.random() * -2 - 1,
         c1 = this._random(this._color),
         c2 = this._random(this._color);
      
      for (var i = 0; i < this._particlesPerExplosion; i++)
      {
         this._createParticle(
            x,
            y,
            dx,
            dy,
            i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
            Math.random() * this._speed,
            Math.random() > .5 ? c1 : c2
         );
      }
      
      window.setTimeout(
         function() { return fireworks._addExplosion.apply(fireworks);},
         Math.random() * (this._interval[1] - this._interval[0]) + this._interval[0]
      );
   },
   
   
   // get current time
   _time: function()
   {
      return +new Date();
   },
   

   // return a random array element
   _random: function(arr)
   {
      return arr[
         Math.floor(
            Math.random() * (arr.length)
         )
      ];
   },
   
   
   // creates a new particle
   _createParticle: function(x, y, dx, dy, rot, speed, color)
   {
      var el = null,
         foundEl = false,
         p = this._particles;

      // look for old particle
      for (var i = 0, l = p.length; i < l; i++)
         if (p[i].data.age > 1)
         {
            el = p[i];
            foundEl = true;
            break;
         }
   
      // create span child for particles
      if (!foundEl)
      {
         el = document.createElement('div');
         el.className      = 'particle';
         el.style.position = 'absolute';
         el.style.fontSize = '20px';
         el.style.zIndex   = this._zIndex;
         el.style.width    = '10px';
         el.style.overflow = 'hidden';
         el.innerHTML      = '&#x25cf;';
      }

      el.style.left     = x + 'px';
      el.style.top      = y + 'px';
      el.style.color    = color;
      el.data = {
         x: x,
         y: y,
         dx: Math.cos(rot) * speed + dx,
         dy: Math.sin(rot) * speed + dy,
         color: color,
         age: Math.random() * .25
      };
      
      if (!foundEl)
      {
         document.getElementsByTagName('body')[0].appendChild(el);
         this._particles.push(el);
      }
   },

   
   // move existing particles
   _move: function()
   {
      requestAnimFrame(function() {fireworks._move();});
   
      // calculate movement factor
      var dif = this._time() - this._lastInterval;
      this._lastInterval = this._time();
      var delta = dif / 20;
      
      var el,
         d,
         p = this._particles,
         r = Math.pow(this._resistance, delta),
         g = this._gravity * delta,
         a = dif / this._maxAge;
      
      for (var i = 0, l = p.length; i < l; i++)
      {
         el = p[i];
         d = el.data;
         
         if (d.age > 1)
            continue;
         
         d.age += a;
         d.dy += g;
         d.dx *= r;
         d.dy *= r;
         d.x += d.dx * delta;
         d.y += d.dy * delta;
         
         if (d.x < 0)
         {
            d.dx *= -1;
            d.x = 0;
         }
         if (d.x > this._bodyWidth)
         {
            d.dx *= -1;
            d.x = this._bodyWidth;
         }
         if (d.y < 0)
         {
            d.dy *= -1;
            d.y = 0;
         }
         if (d.y > this._bodyHeight)
         {
            d.dy *= -1;
            d.y = this._bodyHeight;
         }
         
         if (d.age > 1)
            d.x = d.y = 0;
         
         el.style.left = d.x + 'px';
         el.style.top = d.y + 'px';
         el.style.color = (Math.random() * .5 + d.age >= 1) ? 'transparent' : d.color;
         el.style.fontSize = (1 - d.age) * 5 + 5 + 'px';
      }
   },
   

   // calculate new positions for all particles
   resize: function()
   {
      // get new width and height
      this._bodyWidth = this._getWindowWidth() - 10;
      this._bodyHeight = this._getWindowHeight() - 20;
   },

   
   // get window width
   _getWindowWidth: function()
   {
      return document.getElementsByTagName('body')[0].offsetWidth;
   },

   
   // get window height
   _getWindowHeight: function()
   {
      var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);
      
      if (document.documentElement)
         h = Math.max(h, document.documentElement.clientHeight || 0);
      if (document.body)
      {
         h = Math.max(h, document.body.clientHeight || 0);
         h = Math.max(h, document.body.scrollHeight || 0);
         h = Math.max(h, document.body.offsetHeight || 0);
      }
      
      return h;
   }

};

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function (cb){
         window.setTimeout(cb, 1000 / 60);
        };
})();

fireworks.init();

Bearbeitet von Septron am 28. Dezember 2015 17:39:54
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Wemi
Es gibt 3 Möglichkeiten.

ein Panel erstellen und dort deinen Code eintragen. Dieses dann so platzieren, dass es als letztes Panel aufgerufen wird. Die Position ist auch vom Design abhängig.

Ein Panel erstellen mit folgendem Code (die beste Variante)


add_to_footer('Dein Javascript Code');


Oder die footer.php im Ordner includes öffnen und dort deinen Code eintragen. Dieser wird dann als letztes ausgeführt vor </body>.

Bei der 1. Möglichkeit kann es passieren, dass es dann bei dir nicht überall schneit.
Die 3. Möglichkeit ist nicht Wartungsfreundlich, da du dies ja wieder ändern musst, wenn es nicht mehr schneien soll.
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Bitte immer Smileys in diesem Beitrag deaktivieren. auf nein stzen.

Scripte in Code verfassen.

Wenn das für alle Seiten sein soll, was das auch immer sein soll, versuche das mal.
/themes/templates/header.php suche

echo "<script type='text/javascript' src='".INCLUDES."jscript.js'></script>\n";

ersetze mit

echo "<script type='text/javascript' src='".INCLUDES."jscript.js'></script>\n";
echo "<script type='text/javascript' src='".INCLUDES."fireworks.js'></script>\n";

Und die Datei fireworks.js legst Du in /includes
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Damokles1976
Alle Drei Vorschläge haben leider nicht zum gewünschten Erfolg geführt bei der bearbeitung der Footer Datei im Includes Ordner wird sogar das gesamte HP Design über den haufen geschmissen. habt ihr noch andere Lösungsvorschläge?

Rolly das Script macht ein Feuerwerk auf die HP :)
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Dann gebe doch mal ein Link an wo das her ist damit man das mal Testen kann.

Nachtrag:
Wenn Du das meinst http://www.go4u.de/fireworks.htm
Klicke auf fireworks.js (6.15 kB) dann Seite speichern unter und Du erhältst eine fireworks.js auf Deinem PC die hochladen in /includes/.

Neue Panel erstellen Mitte unten, alles leer machen und nur das einsetzen

echo "<script type='text/javascript' src='".INCLUDES."fireworks.js'></script>\n";

Jetzt speichern Gast alle Seiten und aktivieren, fertig.

Ist ein wenig Mager so als Silvester Show.
Bearbeitet von Rolly8-HL am 28. Dezember 2015 13:15:16
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Wemi
Und wie schaut der Code aus, den du zum Einbinden nutzt?

@Rolly das javascript darf nicht in den Header ist nur für den Footer gedacht.

Ich glaube für das Feuerwerk gab es auch mal etwas in den Downloads. Ich weiss nur nicht mehr, ob hier oder auf PHPfusion-Support.

Eine sehr elegante Lösung: http://phpfusion.tommywolf.net/articl...swechsel_7
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Das ist aber nicht das was er gesucht hat, noch einfacher geht es damit, wie ich beschrieben habe, neue Panel anlegen und nur das einsetzen

echo "<script type='text/javascript' src='http://www.go4u.de/downloads/javascript/fireworks/fireworks.js'></script>\n";

fertig man muss nichts laden holt er sich direkt aus den Netz.
Ist getestet, kann jeder nach machen, es sei denn das Java Script verträgt sich nicht mit anderen auf der Seite.
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Damokles1976
Hat funktioniert danke ihr beiden vielen vielen Dank Smile Rolly du warst auf dem richtigen weg Smile deine Lösung passte hast recht die Raketen sind sehr speerlich aber das lässt sich im Script ja zum Glück ändern Smile
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Sicher bringt aber nicht viel, besser Du schaust hier mal rein.
http://www.javascript-fx.com/submitsc...fireworks/
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Damokles1976
Du bist der Knaller Rolly danke Dir das ist ja der Burner Smile Aber ganz schön schwer mit dem einbinden den es wird kein Javascript bereit gestellt

Zusammengefügt am 28. Dezember 2015 um 17:42:25:
Also das Feuerwerk das du Vorschlägst ist defenitiv mein Fall aber das einbinden in PHP ist mir ein Rätsel.
Bearbeitet von Damokles1976 am 28. Dezember 2015 16:42:25
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Mir auch habe dafür noch kein Plan, hätte es auch gerne auf meine HP gebracht, aber wie???
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Damokles1976
Bin schon ein Stück weiter den Code denke ich habe ich nun zusammen nun muß ich nur noch Feststellen wo ich im Code den Imagepfad deffeniere


    openside("Feuerwerk");
    ?>
    <SCRIPT TYPE="text/javascript">
/**
  * You may use this code for free on any web page provided that
  * these comment lines and the following credit remain in the code.
  * Cross Browser Fireworks from http://www.javascript-fx.com
  */
/*************************************************/
if(!window.JSFX) JSFX=new Object();

if(!JSFX.createLayer)
{/*** Include Library Code ***/

var ns4 = document.layers;
var ie4 = document.all;
JSFX.objNo=0;

JSFX.getObjId = function(){return "JSFX_obj" + JSFX.objNo++;};

JSFX.createLayer = function(theHtml)
{
   var layerId = JSFX.getObjId();

   document.write(ns4 ? "<LAYER  NAME='"+layerId+"'>"+theHtml+"</LAYER>" :
               "<DIV id='"+layerId+"' style='position:absolute'>"+theHtml+"</DIV>" );

   var el =    document.getElementById   ? document.getElementById(layerId) :
         document.all       ? document.all[layerId] :
                       document.layers[layerId];

   if(ns4)
      el.style=el;

   return el;
}
JSFX.fxLayer = function(theHtml)
{
   if(theHtml == null) return;
   this.el = JSFX.createLayer(theHtml);
}
var proto = JSFX.fxLayer.prototype

proto.moveTo     = function(x,y){this.el.style.left = x;this.el.style.top=y;}
proto.setBgColor = function(color) { this.el.style.backgroundColor = color; }
proto.clip       = function(x1,y1, x2,y2){ this.el.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4){
   proto.clip = function(x1,y1, x2,y2){
      this.el.style.clip.top    =y1;this.el.style.clip.left   =x1;
      this.el.style.clip.bottom=y2;this.el.style.clip.right   =x2;
   }
   proto.setBgColor=function(color) { this.el.bgColor = color; }
}
if(window.opera)
   proto.setBgColor = function(color) { this.el.style.color = color==null?'transparent':color; }

if(window.innerWidth)
{
   gX=function(){return innerWidth;};
   gY=function(){return innerHeight;};
}
else
{
   gX=function(){return document.body.clientWidth;};
   gY=function(){return document.body.clientHeight;};
}

/*** Example extend class ***/
JSFX.fxLayer2 = function(theHtml)
{
   this.superC = JSFX.fxLayer;
   this.superC(theHtml + "C");
}
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}/*** End Library Code ***/

/*************************************************/

/*** Class Firework extends FxLayer ***/
JSFX.Firework = function(fwImages)
{
   window[ this.id = JSFX.getObjId() ] = this;
   this.imgId = "i" + this.id;
   this.fwImages  = fwImages;
   this.numImages = fwImages.length;
   this.superC = JSFX.fxLayer;
   this.superC("<img src='"+fwImages[0].src+"' name='"+this.imgId+"'>");

   this.img = document.layers ? this.el.document.images[0] : document.images[this.imgId];
   this.step = 0;
   this.timerId = -1;
   this.x = 0;
   this.y = 0;
   this.dx = 0;
   this.dy = 0;
   this.ay = 0.2;
   this.state = "OFF";
}
JSFX.Firework.prototype = new JSFX.fxLayer;

JSFX.Firework.prototype.getMaxDy = function()
{
   var ydiff = gY() - 130;
   var dy    = 1;
   var dist  = 0;
   var ay    = this.ay;
   while(dist<ydiff)
   {
      dist += dy;
      dy+=ay;
   }
   return -dy;
}
JSFX.Firework.prototype.setFrame = function()
{
//   this.img.src=this.fwName+"/"+this.step+".gif";
   this.img.src=this.fwImages[ this.step ].src;
}
JSFX.Firework.prototype.animate = function()
{

   if(this.state=="OFF")
   {
      
      this.step = 0;
      this.x = -200;
      this.y = -200;
      this.moveTo(this.x, this.y);
      this.setFrame();
      if(Math.random() > .95)
      {
         this.x = (gX()-200)*Math.random();
         this.y = (gY()-200)*Math.random();
         this.moveTo(this.x, this.y);
         this.state = "EXPLODE";
      }
   }
   else if(this.state == "EXPLODE")
   {
      this.step++;
      if(this.step < this.numImages)
         this.setFrame();
      else
         this.state="OFF";
   }
}
/*** END Class Firework***/

/*** Class FireworkDisplay extends Object ***/
JSFX.FireworkDisplay = function(n, fwImages, numImages)
{
   window[ this.id = JSFX.getObjId() ] = this;
   this.timerId = -1;
   this.fireworks = new Array();
   this.imgArray = new Array();
   this.loadCount=0;
   this.loadImages(fwImages, numImages);

   for(var i=0 ; i<n ; i++)
      this.fireworks[this.fireworks.length] = new JSFX.Firework(this.imgArray);
}
JSFX.FireworkDisplay.prototype.loadImages = function(fwName, numImages)
{
   for(var i=0 ; i<numImages ; i++)
   {
      this.imgArray[i] = new Image();
      this.imgArray[i].obj = this;
      this.imgArray[i].onload = window[this.id].imageLoaded;
      this.imgArray[i].src = fwName+"/"+i+".gif";
   }
}
JSFX.FireworkDisplay.prototype.imageLoaded = function()
{
   this.obj.loadCount++;
}

JSFX.FireworkDisplay.prototype.animate = function()
{
status = this.loadCount;
   if(this.loadCount < this.imgArray.length)
      return;

   for(var i=0 ; i<this.fireworks.length ; i++)
      this.fireworks[i].animate();
}
JSFX.FireworkDisplay.prototype.start = function()
{
   if(this.timerId == -1)
   {
      this.state = "OFF";
      this.timerId = setInterval("window."+this.id+".animate()", 40);
   }

}
JSFX.FireworkDisplay.prototype.stop = function()
{
   if(this.timerId != -1)
   {
      clearInterval(this.timerId);
      this.timerId = -1;
      for(var i=0 ; i<this.fireworks.length ; i++)
      {
         this.fireworks[i].moveTo(-100, -100);
         this.fireworks[i].step = 0;;
         this.fireworks[i].state = "OFF";
      }   
   }
}
/*** END Class FireworkDisplay***/

JSFX.FWStart = function()
{
   if(JSFX.FWLoad)JSFX.FWLoad();
   myFW.start();
}
myFW = new JSFX.FireworkDisplay(20, "fw07", 27);
JSFX.FWLoad=window.onload;
window.onload=JSFX.FWStart;

</SCRIPT>
    <?php
    closeside();
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Jeep, so weit war ich auch schon nur beschränkt sich die gesamte Ausgabe bei mir auf etwa 150px x 150px also nicht über die ganze Seite.

Lege die Verzeichnisse fw01 bis fw13 alle in den Root das sollte reichen zum testen, da aber große Bilder über die Seite fliegen können kommst Du an kein Link so richtig
ran da die im Wege sind.

Werde mich von dieser Idee trennen, schade hätte mir gut gefallen.
Rolly8-HL hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.

Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Damokles1976
Jep hab auch festgestellt das die Links sich nicht bedienen lassen was aber irgend wie auch logisch ist da ja Gifs über die PHP gejagt werden welche selber nicht "durchsichtig" für die Maus sind schick wärs allerdings wirklich gewesen
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Abgesehen davon, hast Du es hin bekommen das das Feuerwerk auf der ganzen Seite zu sehen ist? oder nur in einem Begrenzten Teil.
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Springe ins Forum: