Javascript und Layer

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript und Layer

    Hallo
    erstmal einen Guten Tag. Ich bin neu in eurem Forum. Da ich gerade am Lernen von Javascript bin hoffe ich bei Euch Tips und Ratschläge zu bekommen.

    Ich habe da gleich ein Problem mit diesem.

    Ich habe eine Intranet-Seite erstellt mit Javascript und PHP. Meine arbeit daran war alles in einem Popup laufen zu lassen. So weit so gut, dies funktioniert auch wunderbar. Aber nun bekam ich den Auftrag alles von mir in Layer zu packen. Und nun bin ich vollkommen ratlos. Ich habe mir schon Bücher und Onlinehilfen zu diesem thema angesehen, aber das brachte mich nicht weiter. Meine frage an euchist, könnt ihr mir eine kleine hilfestellung zum Anfang geben? Wie muß ich mit Layern anfangen? Wenn ich das kann, dann wird der Rest bestimmt nicht mehr so schlimm werden.

    Danke im vorraus an alle die mir Antworten
    Dicker

  • #2
    Wo ist denn jetzt genau das Problem?

    Ein Layer ist doch in der Theorie nur ein Bereich, der über allem anderen steht: position:absolute;

    Ansonsten weiß ich jetzt nicht, wo du jetzt hilfe brauchst, da ja auch google etwas ausspuckt zum Thema "javascript layer erstellen".

    mfg

    Kommentar


    • #3
      Ich weiß nicht wie und wo ich ansezten muß um das bestehende (Popup) in einen Layer zu wandeln.
      Kann ich einen Teil des Codes weiterverwenden oder muß ich alles neu schreiben?
      Wie sieht es mit den bestehenden Javascript und php finktionen aus?

      Mit fehlt hier vollkommen der Durchblick

      Dicker

      Kommentar


      • #4
        Original geschrieben von Dicker
        Ich weiß nicht wie und wo ich ansezten muß um das bestehende (Popup) in einen Layer zu wandeln.
        Kann ich einen Teil des Codes weiterverwenden oder muß ich alles neu schreiben?
        Wie sieht es mit den bestehenden Javascript und php finktionen aus?

        Mit fehlt hier vollkommen der Durchblick

        Dicker
        uns auch. so lange du nicht mehr informationen lieferst. und was verstehst du unter layern?

        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Wir kennen dein Javascript für den Popup ja nicht, sodass man dazu nur allgemeine Aussagen treffen kann:

          Im Popup wird eine Seite aufgerufen, im Layer meistens nicht, außer du nutzt einen Iframe.
          Wenn du keinen Iframe nutzt, dann musst du den Quelltext der Seite in dem Layer darstellen aber über andere Wege.

          Das ganze kann man sich natürlich selber herleiten..

          Vielleicht müsstest du dir Gedanken machen, was für dich eigentlich ein Layer ist.

          mfg

          Kommentar


          • #6
            Ich meine mit Layer, <div=style.....>Und dies auch mehrschichtig.
            Die Anwendung bisher besteht aus einem popupfenster in dem sich nach un nach 5 frames öffnen und schliessen. So habe ich die jetzige Programmierung verstanden.
            Aber nun stehe ich vor dem Problem das alles ohne Popup zu machen.Und da stoße ich an meine Grenzen.

            Ich weiß nicht wie und wo ich anfangen muß. Oder sollen die einzelnen Frames in >div....> gepackt werden?

            Dicker

            Kommentar


            • #7
              Oder sollen die einzelnen Frames in >div....> gepackt werden?
              vermutlich. dem jeweiligen eine breiten- und höhenangabe verpassen und dann overflow: auto setzen. ... und anschließend javascript komplett umschreiben .

              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Das gleiche trug mir auch ein Kunde vor einiger Zeit auf. Das Problem ist gar nicht so schwierig.

                Anhand des DOM's legst Du einfach mittels den entsprechenden Javascript Funktionen einen <div>-Container über die bestehende Seite. Das "über die Seite legen" kannst Du mit der CSS Eigenschaft [z-index] und entsprechenden Positionsangaben verwirklichen. Die richtest also mittels Javascript einfach überlappende Elemente ein, in denen dann etwas dargestellt wird.

                Beispiel Javascript:
                Code:
                function createNewLayer() {
                    var myDiv = document.createElement('div');
                    myDiv.className = 'layerOptions'; // weist dem erzeugten div Element die CSS Klasse layerOptions zu
                    document.getElementById('bla').appendChild(myDiv);
                }
                Beispiel CSS:
                Code:
                .layerOptions {
                    position:absolute; 
                    top:100px; 
                    left:100px; 
                    z-index:2; 
                    border:1px solid #ff0000;
                }
                Somit kannst Du die Javascript Funktion createNewLayer() aufrufen, die dir dann einen neuen Div Container erzeugt und diesen dann schichtweise über die vorhandene Seite legt.

                PS: Beispiel ungetestet.
                MM Newmedia | MeinBlog

                Kommentar


                • #9
                  Danke ezkimo

                  Klasse antwort. Hat mir sehr geholfen. ICh hätte aber noch eine Frage dazu.
                  Reicht es wenn ich dem
                  "document.getElementById('bla').appendChild(myDiv)" die Table der einzelnen Frames übergebe?
                  Oder sehe ich das flasch?

                  Danke im vorraus
                  Dicker

                  Kommentar


                  • #10
                    Natürlich könntest Du dann in dem neu generierten div alles mögliche an HTML reinschreiben. Auch eben eine Frame-Struktur. Nur würde ich persönlich prüfen, ob wirklich eine Tabelle und Frames in Hinsicht auf eine leicht zu pflegende CSS / HTML Struktur notwendig sind.
                    MM Newmedia | MeinBlog

                    Kommentar


                    • #11
                      Genau da liegt mein Problem.
                      In den jetzigen popups sind sehr viele Elemente und tables verbaut. Und meine kenntnisse sind noch sehr mager im Bezug auf html und Javascript.
                      Den Code den du mir geschrieben hast verstehe ich, aber ich habe halt noch Probleme diesen richtig einzubauen.
                      Auch laufen noch sehr viele php und javascript funktionen mit.
                      Deswegen dachte ich mir eben das ich die tables übergebe.
                      Wenn ich dich richtig verstanden habe, dann meinst du aber, das ich besser alle einzelnen Elemente dem <div> übergeben sollte.

                      Ich werde versuchen es so zu machen.

                      Dicker

                      Kommentar


                      • #12
                        Ich weiß nicht mehr weiter.
                        Ich habe mir folgendes überlegt gehabt:
                        Mittels der function erzeuge ich die <div>. Und mittels einer switch abfrage soll der passende Table in das <div> gesetzt werden.

                        Meine Funktion ist folgendermaßen:

                        var tabId;
                        function createNewLayer(tabId)
                        {
                        var tabId = document.getElementById('id');
                        var myDiv = document.createElement('div');
                        myDiv.className = 'layerOptions';
                        switch (tabId)
                        {
                        case 1:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 2:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 3:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 4:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 5:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 6:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 7:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 8:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 9:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 10:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 11:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 12:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 13:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 14:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 15:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 16:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        case 17:
                        document.getElementById('tabId').appendChild(myDiv);
                        break;
                        default:
                        }
                        }

                        Den Aufruf mache ich über eine onload-function und das laden mache ich mittels :

                        <table id="17" onload="function createNewLayer(id)"; width="960" height="100%" border="0" cellpadding="0" cellspacing="0">

                        Aber nichts funktioniert. Könnt ihr mir sagen wo mein Denkfehler liegt?

                        Gruß
                        Dicker

                        Kommentar


                        • #13
                          onload funktioniert nur im body-tag. und das hier
                          PHP-Code:
                          onload="function createNewLayer(id)"
                          sollte ja wohl so aussehen
                          PHP-Code:
                          onload="createNewLayer(id);" 
                          das heißt, dass dein konzept überhaupt nicht funktionieren kann.

                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            Danke Peter
                            den Fehler hatte ich übersehen. Aber trotzdem klappt es nicht.

                            Kommentar


                            • #15
                              Re: Javascript und Layer

                              Also irgendwie kommt mir das hier alles etwas komisch vor. Im eröffnenden Beitrag schreibst Du:
                              Original geschrieben von Dicker
                              Ich habe eine Intranet-Seite erstellt mit Javascript und PHP.
                              und dann machst Du so elementare Fehler wie:
                              document.getElementById('tabId').appendChild(myDiv);
                              Richtig muss es lauten:
                              Code:
                              document.getElementById(tabId).appendChild(myDiv);
                              Mach das alles doch im Firefox und schau Dir dort die Fehlerkonsole an. Dann siehst Du, wo die Fehler sind.
                              MM Newmedia | MeinBlog

                              Kommentar

                              Lädt...
                              X