einsteiger: window.addEvent aufrufen

SELF-Forum

window.addEvent aufrufen

einsteiger
– Informationen zu den Bewertungsregeln

Hallo,

bin ein Neuling im Bereich JavaScript und habe ein wahrscheinlich sehr einfaches Problem:

Ich möchte aus einer function heraus, quasi ein window.addEvent neu laden oder starten. Ich weiß, dass ich eine Funktion z.B. als Link mit javascript:thumbnails() aufrufen kann, wie aber funktioniert das bei einem Event?

function thumbnails(){  
   ....SKRIPT.....  
   hier window.addEvent aufrufen  
}  
  
window.addEvent('domready',function(){  
    ....SKRIPT.....  
});

Danke schön

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. window.addEvent aufrufen

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich möchte aus einer function heraus, quasi ein window.addEvent neu laden oder starten. Ich weiß, dass ich eine Funktion z.B. als Link mit javascript:thumbnails() aufrufen kann, wie aber funktioniert das bei einem Event?

    Wenn ich dich richtig verstanden habe:
    Speichere die Handler-Funktion unter einem Namen und rufe sie dann wie gewohnt über funktion() auf.

    window.addEvent('domready',function(){
        ....SKRIPT.....
    });

    Hier notierst du eine namenlose Funktion. Wenn du diese später erneut aufrufen willst, so müsstest du einen künstlichen Event erzeugen. Das geht prinzipiell, aber die JS-Bibliothek, die du verwendest, muss dir diese Möglichkeit zur Verfügung stellen. Falls du Mootools verwendest, siehe: fireEvent.

    Einfacher ginge es so:

    function handlerFunktion () { ... }
    window.addEvent("domready", handlerFunktion);
    // Später kannst du sie von Hand einfach so aufrufen:
    handlerFunktion();

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. window.addEvent aufrufen

      einsteiger
      – Informationen zu den Bewertungsregeln

      Hmm - habe es so umgesetzt, wie du meintest, bekomme dann aber folgenden Fehler:

      XML-Verarbeitungsfehler: nicht wohlgeformt
      Adresse: file:///F:/Wunschformat/Projekte/2008%20-%2010%20-%20Glamoureffekt/Test%209%20Galerie%20Sichtbarkeit/index2.php
      Zeile Nr. 17, Spalte 22:
      for(var i = 11; i <= 20; i++){
      -------------------^

      Der Fehler trat vorher nicht aus, sondern erst nachdem ich das Skript entsprechend ausgelagert habe.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. window.addEvent aufrufen

        einsteiger
        – Informationen zu den Bewertungsregeln

        Hier mein kompletter Header-Code:

         <script type="text/javascript">  
 //VARIABLE FOR THE NUMBER OF PICTURES -- TO BE CHANGED!!!  
 var numberOfPictures = 30;  
  
 function thumbnails(){  
  for(var i = 11; i <= 20; i++){  
   var newImgHelper = document.createElement('div');  
   newImgHelper.id = 'img_helper';  
  
   var image = document.createElement('img');  
   image.setAttribute('src', 'img' + i + '.jpg');  
   image.setAttribute('alt', 'Photo Thumb');  
  
   var showIt = document.getElementById("thumbnails");  
  
   newImgHelper.appendChild(image);  
   showIt.appendChild(newImgHelper);  
  }  
 }  
  
 window.addEvent('domready',function(){  
  var nOPA = []; //NUMBER OF PICTURES IN AN ARRAY  
  
  //FILL THE ARRAY FOR THE SLIDESHOW  
  for(var i = 1; i < numberOfPictures; i++){  
   nOPA[i] = "{title: " + i+"}";  
   }  
  
  var info6 = $('box6').getNext().set('opacity',0.5);  
  var nS6 = new noobSlide({  
   mode: 'vertical',  
   startItem: 0,  
   box: $('box6'),  
   items: nOPA, //items: sampleObjectItems,  
   size: 180, //HIGHT OF THE MAIN PICTURES  
   handles: $$('#thumbnails div'), //for adding new picture divs ".extend($$('#handles6_3 div'))"  
   handle_event: 'click', //default - mouseenter  
   addButtons: {  
    previous: $('prev6'),  
    play: $('play6'),  
    stop: $('stop6'),  
    next: $('next6')  
   },  
   button_event: 'click',  
   fxOptions: {  
    duration: 1000,  
    transition: Fx.Transitions.Back.easeIn,  
    wait: false  
   },  
   onWalk: function(currentItem,currentHandle){  
    info6.empty();  
    this.handles.set('opacity',0.6);  
    currentHandle.set('opacity',1);  
   }  
  });  
  //walk to next item  
  nS6.next();  
  
 });  
    </script>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. window.addEvent aufrufen

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        XML-Verarbeitungsfehler: nicht wohlgeformt
        Adresse: file:///F:/Wunschformat/Projekte/2008%20-%2010%20-%20Glamoureffekt/Test%209%20Galerie%20Sichtbarkeit/index2.php

        Wieso nimmt der Browser an, es handele sich um eine XML-Datei?
        Wieso rufst du ein PHP-Script über das file-Protokoll auf? So wird der PHP-Code nicht ausgeführt und der Browser durch den PHP-Code verwirrt. Oder er spielt ganz verrückt, weil er das HTML-Dokument nicht als solches erkennt.

        Der Fehler trat vorher nicht aus, sondern erst nachdem ich das Skript entsprechend ausgelagert habe.

        Entsprechend was?

        Mathias

        --
        JavaScript-Erweiterung für das SELFHTML-Forum
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. window.addEvent aufrufen

          einsteiger
          – Informationen zu den Bewertungsregeln

          Erstmal entschuldigung für den neuen Thread!

          Wieso nimmt der Browser an, es handele sich um eine XML-Datei?
          Wieso rufst du ein PHP-Script über das file-Protokoll auf? So wird der PHP-Code nicht ausgeführt und der Browser durch den PHP-Code verwirrt. Oder er spielt ganz verrückt, weil er das HTML-Dokument nicht als solches erkennt.

          Also hier mal der komplette Code aus der HTML-Datei:

          <?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">  
<head>  
 <title>noobSlide - mootools</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <link rel="stylesheet" href="_web.css" type="text/css" media="screen" />  
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
 <script type="text/javascript" src="mootools-1.2-core.js"></script>  
 <script type="text/javascript" src="_class.noobSlide.packed.js"></script>  
 <script type="text/javascript">  
  
 //VARIABLE FOR THE NUMBER OF PICTURES -- TO BE CHANGED!!!  
 var numberOfPictures = 30;  
  
 function thumbnails(){  
  for(var i = 11; i <= 20; i++){  
   var newImgHelper = document.createElement('div');  
   newImgHelper.id = 'img_helper';  
  
   var image = document.createElement('img');  
   image.setAttribute('src', 'img' + i + '.jpg');  
   image.setAttribute('alt', 'Photo Thumb');  
  
   var showIt = document.getElementById("thumbnails");  
  
   newImgHelper.appendChild(image);  
   showIt.appendChild(newImgHelper);  
  }  
 }  
  
 window.addEvent('domready',function(){  
  var nOPA = []; //NUMBER OF PICTURES IN AN ARRAY  
  
  //FILL THE ARRAY FOR THE SLIDESHOW  
  for(var i = 1; i < numberOfPictures; i++){  
   nOPA[i] = "{title: " + i+"}";  
   }  
  
  var info6 = $('box6').getNext().set('opacity',0.5);  
  var nS6 = new noobSlide({  
   mode: 'vertical',  
   startItem: 0,  
   box: $('box6'),  
   items: nOPA, //items: sampleObjectItems,  
   size: 180, //HIGHT OF THE MAIN PICTURES  
   handles: $$('#thumbnails div'), //for adding new picture divs ".extend($$('#handles6_3 div'))"  
   handle_event: 'click', //default - mouseenter  
   addButtons: {  
    previous: $('prev6'),  
    play: $('play6'),  
    stop: $('stop6'),  
    next: $('next6')  
   },  
   button_event: 'click',  
   fxOptions: {  
    duration: 1000,  
    transition: Fx.Transitions.Back.easeIn,  
    wait: false  
   },  
   onWalk: function(currentItem,currentHandle){  
    info6.empty();  
    this.handles.set('opacity',0.6);  
    currentHandle.set('opacity',1);  
   }  
  });  
  //walk to next item  
  nS6.next();  
  
 });  
    </script>  
</head>  
  
<body>  
<div id="cont">  
<!-- SAMPLE 6 -->  
<h2>Sample 6</h2>  
<div class="sample sample6">  
 <div class="mask6">  
  <div id="box6">  
         <script type="text/javascript">  
    for(var i = 1; i <= numberOfPictures; i++){  
     var newImgHelper = document.createElement('span');  
     newImgHelper.id = 'galleryPics';  
  
     var image = document.createElement('img');  
     image.setAttribute('src', 'img' + i + '.jpg');  
     image.setAttribute('alt', 'Photo');  
  
     var showIt = document.getElementById("box6");  
  
     newImgHelper.appendChild(image);  
     showIt.appendChild(newImgHelper);  
    }  
   </script>  
  </div>  
  <div class="info"></div>  
 </div>  
  
    <div class="thumbs" id="thumbnails">  
         <script type="text/javascript">  
    for(var i = 1; i <= numberOfPictures; i++){  
     var newImgHelper = document.createElement('div');  
     newImgHelper.id = 'img_helper';  
  
     var image = document.createElement('img');  
     image.setAttribute('src', 'img' + i + '.jpg');  
     image.setAttribute('alt', 'Photo Thumb');  
  
     var showIt = document.getElementById("thumbnails");  
  
     newImgHelper.appendChild(image);  
     showIt.appendChild(newImgHelper);  
    }  
   </script>  
    </div>  
    <div class="thumbs" id="thumbnails2"></div>  
  
 <p class="buttons">  
  <span id="prev6">&lt;&lt; Zurueck</span>  
  <span id="stop6">Stop</span>  
  <span id="play6">Play &gt;</span>  
  <span id="next6">Vor &gt;&gt;</span>  
        <span><a href="javascript:thumbnails()">klick mich</a>  
 </p>  
  
</div>  
  
</div>  
</body>  
</html>

          Wie du sehen kannst, rufe ich nirgends irgendwelche Dinge mit oder über PHP auf. Oder irre ich da?

          Der Fehler trat vorher nicht aus, sondern erst nachdem ich das Skript entsprechend ausgelagert habe.

          Entsprechend was?

          Entsprechend dem, was du mir vorgeschlagen hast. Also die Funktion ausgelagert.

          Ich habe leider keinen Webspace zum hochladen - reicht der Code oder soll ich noch mehr posten?

          Danke und nochmal sorry für den neuen Thread.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. window.addEvent aufrufen

            molily Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Entsprechend dem, was du mir vorgeschlagen hast. Also die Funktion ausgelagert.

            Also in dem Quellcode sehe ich keine ausgelagerte Funktion. Aber egal. Wenn ich den Code in einer HTML-Datei speichere, kann ich sie problemlos aufrufen und bekomme keinen XML-Fehler. Wenn ich die von dir verwendeten Scripte einbinde, bekomme ich auch eine Slideshow zu sehen.

            Wie gesagt liegt der Fehler vielleicht darin, dass du eine Datei mit der .php-Erweiterung lokal aufrufst. Als was der Browser diese Datei verarbeitet, ist ihm überlassen. Offenbar verarbeitet er das XHTML-Dokument als XML. Das liegt zwar nahe, aber letztlich ist es Unsinn, da du höchstwahrscheinlich HTML-kompatibles XHTML schreibst, das von den Browsern nicht als XML verarbeitet werden soll.

            Wie auch immer, bei einer Verarbeitung als XML treten Fehler auf, weil du den Script-Code nicht in einem <http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=CDATA-Bereich eingeschlossen> hast:

            <script type="text/javascript">
            /* <![CDATA[ */
              ...
            /* ]]> */
            </script>

            Prüfe den Code also mal mit einem Validator. Doch wie gesagt solltest du die Datei einfach .html nennen und dann sollte kein Browser das Dokument überhaupt als XML verarbeiten.

            Mathias

            --
            JavaScript-Erweiterung für das SELFHTML-Forum
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. window.addEvent aufrufen

              einsteiger
              – Informationen zu den Bewertungsregeln

              Also in dem Quellcode sehe ich keine ausgelagerte Funktion. Aber egal.

              Vollkommen korrekt, hier nochmal der Code nach deinem Vorschlag geändert:

              <?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">  
<head>  
 <title>noobSlide - mootools</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <link rel="stylesheet" href="_web.css" type="text/css" media="screen" />  
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
 <script type="text/javascript" src="mootools-1.2-core.js"></script>  
 <script type="text/javascript" src="_class.noobSlide.packed.js"></script>  
 <script type="text/javascript">  
  
 //VARIABLE FOR THE NUMBER OF PICTURES -- TO BE CHANGED!!!  
 var numberOfPictures = 30;  
  
 function thumbnails(){  
  for(var i = 11; i <= 20; i++){  
   var newImgHelper = document.createElement('div');  
   newImgHelper.id = 'img_helper';  
  
   var image = document.createElement('img');  
   image.setAttribute('src', 'img' + i + '.jpg');  
   image.setAttribute('alt', 'Photo Thumb');  
  
   var showIt = document.getElementById("thumbnails");  
  
   newImgHelper.appendChild(image);  
   showIt.appendChild(newImgHelper);  
  }  
 }  
  
 function handle(){  
  var nOPA = []; //NUMBER OF PICTURES IN AN ARRAY  
  
  //FILL THE ARRAY FOR THE SLIDESHOW  
  for(var i = 1; i < numberOfPictures; i++){  
   nOPA[i] = "{title: " + i+"}";  
   }  
  
  var info6 = $('box6').getNext().set('opacity',0.5);  
  var nS6 = new noobSlide({  
   mode: 'vertical',  
   startItem: 0,  
   box: $('box6'),  
   items: nOPA, //items: sampleObjectItems,  
   size: 180, //HIGHT OF THE MAIN PICTURES  
   handles: $$('#thumbnails div'), //for adding new picture divs ".extend($$('#handles6_3 div'))"  
   handle_event: 'click', //default - mouseenter  
   addButtons: {  
    previous: $('prev6'),  
    play: $('play6'),  
    stop: $('stop6'),  
    next: $('next6')  
   },  
   button_event: 'click',  
   fxOptions: {  
    duration: 1000,  
    transition: Fx.Transitions.Back.easeIn,  
    wait: false  
   },  
   onWalk: function(currentItem,currentHandle){  
    info6.empty();  
    this.handles.set('opacity',0.6);  
    currentHandle.set('opacity',1);  
   }  
  }  
  
 window.addEvent('domready',handle);  
  //walk to next item  
  nS6.next();  
  
 });  
    </script>  
</head>  
  
<body>  
<div id="cont">  
<!-- SAMPLE 6 -->  
<h2>Sample 6</h2>  
<div class="sample sample6">  
 <div class="mask6">  
  <div id="box6">  
         <script type="text/javascript">  
    for(var i = 1; i <= numberOfPictures; i++){  
     var newImgHelper = document.createElement('span');  
     newImgHelper.id = 'galleryPics';  
  
     var image = document.createElement('img');  
     image.setAttribute('src', 'img' + i + '.jpg');  
     image.setAttribute('alt', 'Photo');  
  
     var showIt = document.getElementById("box6");  
  
     newImgHelper.appendChild(image);  
     showIt.appendChild(newImgHelper);  
    }  
   </script>  
  </div>  
  <div class="info"></div>  
 </div>  
  
    <div class="thumbs" id="thumbnails">  
         <script type="text/javascript">  
    for(var i = 1; i <= numberOfPictures; i++){  
     var newImgHelper = document.createElement('div');  
     newImgHelper.id = 'img_helper';  
  
     var image = document.createElement('img');  
     image.setAttribute('src', 'img' + i + '.jpg');  
     image.setAttribute('alt', 'Photo Thumb');  
  
     var showIt = document.getElementById("thumbnails");  
  
     newImgHelper.appendChild(image);  
     showIt.appendChild(newImgHelper);  
    }  
   </script>  
    </div>  
    <div class="thumbs" id="thumbnails2"></div>  
  
 <p class="buttons">  
  <span id="prev6">&lt;&lt; Zurueck</span>  
  <span id="stop6">Stop</span>  
  <span id="play6">Play &gt;</span>  
  <span id="next6">Vor &gt;&gt;</span>  
        <span><a href="javascript:thumbnails()">klick mich</a>  
 </p>  
  
</div>  
  
</div>  
</body>  
</html>

              »»Doch wie gesagt solltest du die Datei einfach .html nennen und dann sollte kein Browser das Dokument überhaupt als XML verarbeiten.

              Es handelt sich um eine einfache HTML-Datei.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln