Popups in CMSMS inkl HOWTO

[janvl]

Hallo,

ich habe eine Frage bekommen um Popups zu realisieren in CMSMS.
Auf http://www.freiheitfuertiere.org/ kann man über Lösung 1 2 und 3
gehen mit der Maus und sehen wie ungefähr.

Es soll aber etwas anders funktionieren wobei ich mich frage ob es möglich ist
eigene HTML-Dateien mit Tinymce zu bearbeiten, das wäre eine grosse Hilfe.

Hat jemanden bitte einen Idee wie das geht?

Wenn es fertig ist beschreibe ich das ganze hier.

Mit freundlichen Gruss,

Jan

[Pulli]

also gleich vorweg, ich habe bisher auch keine lösung. aber da ich im moment auch für eine seite ein popup bräuchte, wäre ich auch daran interessiert, wie man das direkt aus cmsms anstellt.

aber deine lösung sieht eigentlich auch ganz gut aus. wie hast du das hinbekommen ?

[NaN]

Es soll aber etwas anders funktionieren wobei ich mich frage ob es möglich ist
eigene HTML-Dateien mit Tinymce zu bearbeiten, das wäre eine grosse Hilfe.

Hat jemanden bitte einen Idee wie das geht?

Ähm... okay.
Und wie?

Und nein, HTML Dateien haben im CMS nichts zu suchen.
Sorry, aber ich habe leider überhaupt keine Ahnung was genau Du eigentlich haben willst.
Gib mal bitte ein paar mehr Infos.

[janvl]

Funktionell soll es wie folgt sein:

Kunde hat auf seine Seite eine beschreibung von einige Probleme.
Geht der Besucher mit Maus über eine dieser Beschreibungen soll ein
Popup erscheinen mit der Lösung zum Problem wo er evt. ein Link anklicken
kann.
Lösungen will er selbst ändern können, am liebsten WYSIWYG.


Ich habe es mit Javascript und ein div mit iframe (ich weiss, ist schlecht)
geschafft so das ein DIV von "display none" nach "display block" geht onmouseover.
Mit ein Doppelklick kann man diese Div dann wieder auf  "display none" klicken.

http://www.freiheitfuertiere.org/

Mit Maus über "TEST LOES 1" oder 2 oder 3 fahren.

Es wird kein Schönheitspreis bekommen aber funktioniert, ich bin aber interessiert
in bessere Lösungen weil ich weiss das es nicht so richtig im CMSMS past.

M.fr.Gr.
Jan

[Dickie]

Dann schau Dir mal "Thickbox" an. Einfach zu realisieren !

http://jquery.com/demo/thickbox/

Schönen Nikolaustag !!

Gruss Dickie

[janvl]

Danke Dickie,

ich kenne Thickbox aber es ist nicht was meine Kunde will.
Sowieso muss ich mal wieder nachschauen wie es jetzt ist mit
Sicherheitsbedenken bei Thickbox, hoffentlich weniger Probleme
weil es einfach gut aussieht.

Schönen Nicolaustag,
Jan

[cyberman]

Ist zwar kein Popup, aber evtl ginge es auch mit den Tags startexpandcollapse/stopexpandcollapse.

Eine andere Variante wäre, zu dieser Problemseite Unterseiten anzulegen, die primär nicht im Menü angezeigt werden, und dann bei Bedarf die Inhalte via content_dump Tag in eine Hover-Box zu laden  .

[janvl]

Danke Cyberman,

StartExpandcollaps habe ich gefunden, ist aber nicht geeignet.
Deine zweite Lösung werde ich mal versuchen.

Vielleicht ist interessant zu beschreiben wie es gemacht ist, es steht schon da für
meine Kunde auf http://cms.successful-doing.at auf Seite:
"Sie sind hier: Home » Unsere Leistungen » Persönlichkeitsstärkung"

Jeder Überschrift zeigt dieser Popup, Inhalt muss es noch bekommen.

Ende der Woche geht diese Seite live unter www.successful-doing.at.

M.fr.Gr.
Jan

[janvl]

Hier eine Beschreibung wie es geht:


Definiere ein DIV mit Grösse und wo der im Template kommen soll, ID z.B. "txt"

Definiere in DIV innerhalb der erste so das am untenseite im ersten DIV Raum kommt
für ein Knopf womit diese Popups geschlossen werden. ID z.B. "txt2"

Kode fürs Template
-----------------------------------------
{literal}

{/literal}
/*einfügen vor */






Hier klicken zum schliessen

-----------------------------------------
in dieses Beispiel ist der Javascript Funktion "klickout()" genutzt um display auf "none" zu setzen
und CSS soll natürlich in ein Stylesheet kommen!

Es braucht ein Javascript test.js das gespeichert wird in ./uploads und gerade für aufgerufen wird.

Javascript Kode
------------------------------------------
function klickout() {document.getElementById('txt').style.display = "none";};

function klickin() {
if(document.getElementById('txt').style.display == "none")
{ document.getElementById('txt').style.display = "block";}
};

function mouseOver01() {
klickin();
document.getElementById('txt2').innerHTML = "";
};

function mouseOver02() {
document.getElementById('txt').style.display = "block";
document.getElementById('txt2').innerHTML = "";
};
--------------------------------------------

Weiter braucht man ext01.html und ext02.html mit eigenen css die das Aussehen beschreibt,
wie Fontsize etc.

Ich nutze nutzerdefinierte Tags womit Text markiert wird um ein Popup zu zeigen
{zeig01} = echo "";
{zeig02} = echo "";
{ende_zeig} = echo ""

Im Text (TinyMCE) gibt man dann: {zeig01}Geht der Maus über diese Text erscheint ein Popup{ende_zeig}

Bemerkung:
es ist keine schöne und gut integrierte Lösung, aber es funktioniert.

Jan

[janvl]

Übrigens gibt es eine grosse Beschreibung von {content_dump}
da werde ich mal kräftig experimentieren.

Jan

[cyberman]

Danke für das HowTo!

PS: Wenn du den Spaghetti-Markup entfernst, wirds noch besser

Hier klicken zum schliessen

http://www.qualidator.com/Web/de/Know-h ... deBrei.htm

[faglork]

Suchst du vielleicht sowas?
http://www.goldner-stern.de/service-ang ... chen.shtml
Das ist nur eine simple Liste mit ein bisschen CSS ...

Servus,
Alex

[janvl]

Danke Cyberman,
aber wie ich schon schrieb soll alle CSS in einen Stylesheet kommen,
so ist es in der Produktionsversion.
Die Seite "qualidator" ist aber interessant.


Danke Alex
aber das ist Thickbox, das schaue ich mal im neuen Version an und
wie es jetzt ist mit Sicherheitsbedenken.

Vielleicht komme ich noch mit ein elegantere Lösung aber wie immer,
es müsste "gestern" fertig sein, dan wählt man für was man kennt und
schnell fertig ist.

M.fr.Gr.
Jan

[janvl]

Hallo,

ich habe es überarbeitet und schicke in ein paar Tage eine Lösung OHNE
externe HTML-Dateien, alles ordentlich innerhalb CMSMS und es ist noch schneller auch!

Jan

[janvl]

Hallo,

auf folgende Art kann man in CMSMS popups machen die stehen bleiben und
klickbare Links enthalten.
Viel spass beim Nachbauen!

Jan


Stylesheet

.poppoint{cursor:pointer;}
.poppoint:hover{cursor:pointer; text-decoration: underline;}

div#textpoprahm {
height:350px;
width:250px;
border:1px solid black;
padding:5px;
background-color:#DDFFFF;
}

div#poptext{
height:300px;
width:228px;
border:0;
padding:10px;
}

div#closepop{
cursor:pointer;
font-size:70%;
background-color:#FFDDDD;
}
--------------------------------------------------

Template

in head-section einfügen
{literal}

{/literal}

bodytag anpassen


Divs einfügen wo popup(s) kommen sollen

{global_content name='popblock'}
Hier klicken zum schliessen

--------------------------------------------------------

UDT's

popudt1
echo "";

popudt2
echo "";

popudt_end
echo "";
----------------------------------------

Global contentblock
popblock


POP001
Vorbild von popups über Javascript nur, ohne externes html.




POP002
Hier kommt der POPUP TEXT


und weitere divs pop00x
----------------------------------------

Javascript popup.js

function klickout() {
document.getElementById('textpoprahm').style.display = "none";};

function klickin() {
if(document.getElementById('textpoprahm').style.display == "none")
{ document.getElementById('textpoprahm').style.display = "block";}
};

function mouseOver01() {
document.getElementById('textpoprahm').style.display = "block";
for (var i = 1; i {popudt1}TEST POPUP1 1{popudt_end}
{popudt2}TEST POPUP2{popudt_end}