Webdesign in Siegen

popup mit besonderen Funktionen

Fragen zum Thema HTML und CSS können hier gestellt werden

Moderatoren: Basti, Ingo

popup mit besonderen Funktionen

Beitragvon azoo am 20.02.2008, 16:02

Hallo Leute,
ich benötige ein Popup für mein entstehendes CMS dessen Source ich nach fertigstellung öffentlich machen möchte.
Da ich leider fast null Kenntnisse in Javascript habe, suche ich produktive Hilfe bezüglich des Popups.

Was es können soll und was es beinhaltet:

Es beinhaltet Text aus einer Textarea und hat einen submit-Button mit welchem wann den Text in eine DB schreibt.


    -Größe und Position muß einstellbar sein und es muß immer "vorne" sein
    -Der Browser darf keine Popupwarnungen geben
    -nach überfahren mit der Maus muß es sich wieder schließen oder nach klicken des Submit-Buttons und das Parent
    fenster muß sich aktualisieren. oder
    nach dem überfahren mit der Maus muß Submit ausgelöst werden und es schließt sich wieder, Parentfenster aktualisiert sich.
    -es muß Cross-Browser kompatible sein.

Ich hatte mir das alles schon mal hingewurschtelt, allerdings ging das auch nur so unter Firefox/Linux, der MSIE6 wollte von meinen Vorhaben nicht viel wissen.

Mir fehlt es einfach an JS-Wissen und brauche Unterstützung.

Hier, mal meine sehr bescheidenen Versuche die ich bisher unternommen hatte.

Das Popup:
Code: Alles auswählen
function WinOpen()

{

window.open('submit.php','popupform','scrollbars=yes,width=650,height=500,left=700,top=60');

}


so wirds geöffnet:
Code: Alles auswählen
<form action="submit.php" method="post"  onSubmit="WinOpen()" target="popupform" name="formname">


Die Funtion in der submit.php für das submitten des Inhalts:
Code: Alles auswählen
<head><script type="text/javascript">function closepopup() { document.popup.submit();}

</script><body onBlur="closepopup()"></head>


Meine Stärken liegen bei PHP, wie Ihr sehen könnt sieht das bei JS anders aus.
Wäre jemand bereit mir hierbei zu helfen?

greetz
azoo
azoo
Mitglied
 
Beiträge: 4
Registriert: 20.02.2008

Re: popup mit besonderen Funktionen

Beitragvon Ingo am 21.02.2008, 22:11

Hi, azoo.

Das ist ja mal ein Vorhaben!
Besonders die Bedingung, dass kein Popup-Blocker dazwischenfunken darf, ist schwierig:
window.popup() löst praktisch immer einen Blocker aus, wenn es automatisch (z.B. onload)
aufgerufen wird; am ehesten verschont bleibt dagegen ein Popup, welches direkte Folge
einer Nutzer-Aktion ist (Klick auf Link etc.). - Soweit ich feststellen kann, sollte man
sich da aber nicht 100% sicher sein. Ausweichmöglichkeit ist hier ein normales Div-Element,
das per AJAX gefüllt wird; dies für den Fall, dass die Popup-Blocker nicht zu bändigen sind.

Skripte für Popups gibt es sicher eine Menge; ein relativ fassbares gibt's derzeit unter
stichpunkt.de. Der gute Mann hat wahrhaftig eine kritische Distanz zum Thema ;o),
was vllt. nicht verkehrt ist.

Was die anderen Bedingungen angeht: Vllt. sollte man die ja Schritt für Schritt ins Skript
aufnehmen, nachdem z.B. das Popup erst einmal zuverlässig in den gängigen Browsern
erscheint? -- Soweit meine ersten Gedanken.

Gruß, Ingo :)

PS: Soll es so sein, dass beim Popup ein Verlassen der Maus ein Submit auslöst?
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
Benutzeravatar
Ingo
Moderator
 
Beiträge: 578
Registriert: 01.04.2007
Wohnort: Neuss/NRW

Re: popup mit besonderen Funktionen

Beitragvon azoo am 22.02.2008, 21:36

Hallo Ingo,

das popup vom Stich habe ich letztes Jahr schonmal benutzt und es war soweit ich mich erinnern kann ok.
Um diese ganzen Klimmzüge mit dem submit im popup und dem mouseover oder mouseout oder onblur zu umgehen, habe ich mein ganzes php neu aufgebaut.
Im Texteditor sind nun zwei Buttons.
1. submit
2. Vorschau

Somit entfällt schonmal das Problem mit dem submit im popup, habe dort einfach ein switch drinn ob es eine Vorschauansicht wird oder schreiben in die Datenbank.
Nun kann man ohne Probleme ein schließen des popups mit onmouseover oder onclick realisieren.
Zur Erklärung warum ich das überhaupt so will. Das Popup hat genau die Größe von dem DivContainer wo der Text letztentlich angezeigt wird. So kann man mit dem Texteditor Text schreiben und formatieren (BBCode) und schaut sich das Preview eben im Popup an, welches ja identisch zum Div der eigentlichen Website ist.
Fand sowas sehr produktiv, Kunden die mein erstes und ursprüngliches CMS nutzten habe immer bemängelt das man immer die ganze Website aufrufen mußte um das geschriebene zu kontrolieren.
Das entfällt nun weil man im Editor bleibt und mal eben das Popup aufmacht um alles sehen zu können.
Obs das schon in der Form gibt weiß ich nicht, ich finde auf diese Art und weise läßt sich ein Artikel wesentlich schneller editieren.

Daher soll das Popup natürlich auch sehr einfach zu schließen sein, erste Versuche mit onmouseover waren genial ;) zumindestens im Firefox, im IE6 hackelte irgendwas, kann mich aber nicht mehr genau erinnern.

So das erstmal dazu.

greetz
azoo
azoo
Mitglied
 
Beiträge: 4
Registriert: 20.02.2008

Re: popup mit besonderen Funktionen

Beitragvon Ingo am 23.02.2008, 18:16

Ah, also sieht der Arbeitsfluss so aus:

Der Nutzer editiert in einer textarea auf der "normalen" Seite eine Nachricht inklusive BBC,
unter der textarea die Buttons "Vorschau" und "Absenden". "Vorschau" öffnet ein Popup mit
ebendieser; das Popup soll hierbei möglichst bequem zu schließen sein (z.B. onmouseout).
"Absenden" trägt die Nachricht in die DB ein (kein Popup im Spiel).

Wenn für die Vorschau keine DB-Zugriffe o.ä. nötig sind, könnte man die vllt. auch lokal per
JavaScript lösen: ein Skript konvertiert die BBCs nach HTML. Für die Vorschau bräuchte man
dann gar keinen Serverkontakt mehr. Zudem könnte man dann das Popup-Fenster zugunsten
eines absolut positionierten Divs 'rauswerfen.

Gruß, Ingo :)
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
Benutzeravatar
Ingo
Moderator
 
Beiträge: 578
Registriert: 01.04.2007
Wohnort: Neuss/NRW

Re: popup mit besonderen Funktionen

Beitragvon azoo am 23.02.2008, 20:55

Hi Ingo,

Zudem könnte man dann das Popup-Fenster zugunsten
eines absolut positionierten Divs 'rauswerfen


bis auf diesen Punkt ist bereits alles so umgesetzt und ja für die Vorschau habe ich immer schon die Daten aus der Textarea per $_GET ans Popup weitergereicht ohne in die DB zu schreiben.
Der Text wird dann direkt geparst(BBC) und formatiert angezeigt.

Das mit dem Div bringt doch den Nachteil das man es nicht so elegant schließen oder ansprechen kann wie ein Popup ?!

Gruß Markus
azoo
Mitglied
 
Beiträge: 4
Registriert: 20.02.2008

Re: popup mit besonderen Funktionen

Beitragvon Ingo am 23.02.2008, 22:22

Hallo, Markus.

Nun, wenn die Vorschau per $_GET etc. läuft, braucht man ja nicht ohne Not daran herumzuschrauben :mrgreen:

Der Vollständigkeit halber noch zu der Div-Lösung, die mir da so ansatzweise in den Sinn kam: Das ist
eigentlich nicht schwerer zu händeln als ein Popup. Das Div kann einfach über seine id angesprochen
werden (mit Text füllen, anzeigen/verschwinden lassen ...), ein kleiner Test hierzu:

Code: Alles auswählen
CSS:
     #vorschau
     {     display:none;
           position:absolute; top:200px; left:300px;
           width:300px; height:300px;

           border:2px ridge #cccccc;
           background:#eeeeee;
           padding:6px;
      }
JavaScript:
     function showPreview()         
     {    vor = document.getElementById('vorschau');

          vor.innerHTML += '<br \/><br\/> Hallo, Welt!';      // was auch immer
          vor.style.display = 'block';
     }

HTML:
     <button type="button" onclick="showPreview();"> Vorschau-Div zeigen </button>

     <div id="vorschau" onmouseout="this.style.display='none';">
        Dieses Div schließt sich "onmouseout" ...
     </div>


Einziger Nachteil: Wenn der Inhalt des Divs vom Server kommt, braucht man AJAX, um des Div zu "befüllen",
ohne das ganze Dokument nachzuladen. - Wenn man aber die BBC-Konvertierung mittels JavaScript vor Ort
erledigt, ist die Div-Lösung sicher eine Überlegung wert. Aber wie gesagt, wenn's ja läuft ... :thumbsup:

Gruß, Ingo :)
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
Benutzeravatar
Ingo
Moderator
 
Beiträge: 578
Registriert: 01.04.2007
Wohnort: Neuss/NRW

Re: popup mit besonderen Funktionen

Beitragvon azoo am 24.02.2008, 21:10

Hallo Ingo,
interessante Lösung mit dem DIV, kannte ich bisher so nicht und ist natürlich mit JS verbunden und daher erst so einsetztbar.
Ich werde es auf jeden Fall testen, abschrecken würde mich aber erstmal wieder der Turn mit AJAX.
Da JS ja mein absoluter Fachbereich ist :lol: schüttel ich mir AJAX bestimmt mal eben so aus dem Ärmel.
Nein im Ernst, ich merke so langsam das ich um JS&Co kaum umher komme. Ich habe mich die ganze Zeit so drumherum gemogelt und konnte bis auf einen Live-Konfigurator alles mit PHP lösen.
Werde doch mal einen Tiefen Blick in das schon vorhandene JS-Buch werfen müßen.

Gruß Markus
azoo
Mitglied
 
Beiträge: 4
Registriert: 20.02.2008


Zurück zu HTML/CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast