Button mit Hintergrundgrafik.

Neewmla · 22. Oktober 2018

Hallo,

nun mein nächstes Problem.

Ich möchte das wenn man will im Backend bei meinem Modul für den Button auch eine Hintergrundgrafik bestimmen kann.

Dafür habe ich zwei "form field types" gefunden.

Einmal das "imagelist" und dann das "url".

Doch wenn ich im Browser dann Element untersuchen nutze für den Button. Bekomme ich z.B. beim type="url" follgendes zu sehen.

Es wird also das was im Textfeld steht nicht direkt eingefügt.

Im Backend gab ich zu Testzwecken dies ein "/images/demo/demo-bg-1.jpg".

Soll ich um das Problem zu umgehen, einfach ein normales Textfeld nutzen? Weil bei dem type "imagelist" gab es auch diese Ausgabe.

Vielen Dank

Edit: Wenn ich aus dem field type="url" ein type="text" mache, bekomme ich die gleiche Meldung angezeigt.

Neewmla · 22. Oktober 2018

Ok, hab da nun gesehen das wohl einmal "" dabei stehen, die nicht dahin gehören.

Richtig muss es wohl lauten:

PHP

<button style="font-size:<?php echo $mkbuttontextgr; ?>; border-radius:<?php echo $mkbuttonform; ?>; background-image: url(<?php echo $mkbuttongrafik; ?>);" id='notrufbutton'><?php echo $mkbuttontext; ?></button>

Hab aber nun den field type="text" benutzt.

Es wird nun eine Hintergrundgrafik angezeigt.

Das Hover vom Button ist aber wohl nun deaktiviert.

Neewmla · 22. Oktober 2018

Das hover vom Button geht nun. War ein Layer 8 Fehler. xD

Ich frage mich aber ob man die Hintergrundgrafik vom Button auch auf die Größe vom Button beschränken kann. Sprich sie würde sich automatisch von der Größe her anpassen.

Ob das Sinn macht. K.A. wollte eignetlich nur die Option dem Benutzer zur Verfügung stellen.

Edit: Das hover geht nur bedingt. Die Hintergrundgrafik wird nun nur die Grafik angezeigt die dem hover zugewiesen wurde.

Neewmla · 23. Oktober 2018

Kann es sein das man hover bei einem background-image nicht nutzen kann?

anka · 23. Oktober 2018

Doch, man kann auch ein "background-image hovern". Aber ohne einen Link zum Problem wird dir in diesem Fall wohl kaum jemand wirklich helfen können. Ich glaube nämlich, dass hier kaum noch jemand nachvollziehen kann, was bei deinem Modul übehaupt passiert .

Neewmla · 23. Oktober 2018

Zitat von anka

Doch, man kann auch ein "background-image hovern". Aber ohne einen Link zum Problem wird dir in diesem Fall wohl kaum jemand wirklich helfen können. Ich glaube nämlich, dass hier kaum noch jemand nachvollziehen kann, was bei deinem Modul übehaupt passiert .

Hallo,

nun ich bin dabei dieses:

Code

<!DOCTYPE html>
<head>
<style>
/* Allgemeine Body Formatierung */
body {
                font-family: Arial, Helvetica, sans-serif;
                margin: 0px;
                }
#buttonmitte {
                width: 100%;
                text-align: center;
                z-index: 998;
                }
/* IT-Security Notrufbutton */
#notrufbutton {
                    position: absolute;
                    top: 0px;
                width: 170px; 
                    border: none;
                    outline: none;
                    background-color: #ff0000;
                    color: #ffffff;
                    cursor: pointer; 
                margin: 0px;
                    padding: 2px 8px 4px 8px;
                    border-radius: 2px;
                    font-size: 14pt;
                z-index: 999;                
                }
#notrufbutton:hover {
                background-color: #772432;
                }
/* Hintergrund beim erscheinen der Notrufmeldung */
.mkmodal {
                    display: none;
                    position: fixed;
                    z-index: 1;
                    padding-top: 150px;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    background-color: rgb(0,0,0);
                    background-color: rgba(0,0,0,0.4);
                }
/* Notrufmeldung Inhalt */
.mkmodal-content {
                    position: relative;
                    background-color: #fefefe;
                    margin: auto;
                    padding: 0;
                    border: 1px solid #888;
                    width: 80%;
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
                    -webkit-animation-name: animatetop;
                    -webkit-animation-duration: 0.4s;
                    animation-name: mkanimatetop;
                    animation-duration: 0.4s;
                }
/* Notrufmeldung Animation */
@-webkit-keyframes mkanimatetop {
                    from {top:-300px; opacity:0} 
                    to {top:0; opacity:1}
                }
@keyframes mkanimatetop {
                    from {top:-300px; opacity:0}
                    to {top:0; opacity:1}
                }
/* Notrufmeldung schliessen */
.mkclose {
                    color: #fefefe;
                    float: right;
                    font-size: 38px;
                    font-weight: lighter;
                }
.mkclose:hover, .close:focus {
                    color: #ff0000;
                    text-decoration: none;
                    cursor: pointer;
                }
/* Notrufmeldung Aufteilung */
.mkmodal-header {
                    padding: 2px 16px;
                    background-color: #772432;
                    color: #ffffff;
                }
.mkmodal-body {
                padding: 2px 16px;
                }
.mkmodal-footer {
                    padding: 2px 16px;
                    background-color: #772432;
                    color: #ffffff;
                }
</style>
</head>
<body>
<!-- IT-Security Notrufbutton -->
<div id='buttonmitte'>
    <button id='notrufbutton'>IT-Security Notruf</button>
</div>
<!-- Die Notrufmeldung -->
<div id='notrufmeldung' class='mkmodal'>
      <!-- Notrufmeldung Inhalt -->
      <div class='mkmodal-content'>
            <div class='mkmodal-header'>
                  <span class='mkclose'>&times;</span>
                  <h2>IT-Security Notruf</h2>
            </div>
            <div class='mkmodal-body'>
                  <p>Hier ein Text</p>
                  <p>Und hier noch mehr Text...</p>
            </div>
            <div class='mkmodal-footer'>
                  <h4>Und noch viel mehr Text</h4>
            </div>
      </div>
</div>
<script>
// Erhalte die Notrufmeldung
var mkmodal = document.getElementById('notrufmeldung');

// Erhalte den Button der die Notrufmeldung öffnet
var notrufbutton = document.getElementById('notrufbutton');

// Erhalte das <span> element das die Notrufmeldung schliesst
var span = document.getElementsByClassName('mkclose')[0];

// Beim aktivieren des Notrufbuttons, erscheint die Notrufmeldung 
notrufbutton.onclick = function() {
                    mkmodal.style.display = 'block';
                }

// Beim betätigen des <span> (x), schliesst die Notrufmeldung
span.onclick = function() {
                    mkmodal.style.display = 'none';
                }

// Klickt man ausserhalb der Notrufmeldung, wird diese geschlossen
window.onclick = function(event) {
                    if (event.target == mkmodal) {
                        mkmodal.style.display = 'none';
                        }
                }
</script>
</body>
</html>

Alles anzeigen

Als Modul zu erstellen.

Mit vielen Einstellmöglichkeiten im Backend.

Und habe es auch fast geschaft, noch dieses Problem hier. Dann noch eine weitere Auswahlmöglichkeit bzgl. Wie die Meldung ins Bild kommt. Richtung + Geschwindigkeit. Da gibts sicher neue Probleme.

Und zum Schluss soll das ganze dann über der Webseite "gelegt" werden. Da muss ich wohl leider am Template direkt was werkeln.

Aber Glaube dann sollte es mit den Einstellmöglichkeiten auch reichen. sonst nimmt das ja nie ein Ende.

Edit: Soweit ist das Modul nun: MK_Qnotruf.zip

Neewmla · 23. Oktober 2018

Hab einen Fehler bei mir gefunden. Da wurde die background-image die für das hover bestimmt war immer angezeigt. Weil ich sie als zweite Variable angab für die gleiche Variable wie die Hintergrundgrafik die immer sichtbar sein soll.

Aber der Hover:

Code

$document = JFactory::getDocument();
// load some css
$document->addStyleDeclaration('
    #notrufbutton'  . '{'.
        'background-color: ' . $mkbuttonfarbe .';'.
'background-image: ' . $mkbuttongrafik .';'.
        '}
    #notrufbutton:hover'  . '{'.
        'background-color: ' . $mkbuttonfarbehover .';'.
    'color: ' . $mkbuttontextfarbehover .';'.
'background-image: ' . $mkbuttongrafikhover .';'.
        '}   
   
    .mkclose'  . '{'.
        'color: ' . $mkmodultextexitfarbe .';'.
        '}
    .mkclose:hover'  . '{'.
        'color: ' . $mkmodultextexitfarbehover .';'.
        '}
        
    ');

Alles anzeigen

den ich hier im Forum bekam, klappt leider da nicht. Ein Fehler von mir drin?

Vielen Dank.

anka · 23. Oktober 2018

Sei bitte nicht böse, aber erwartest du tatsächlich, dass man sich immer wieder die lietzte Version deines Moduls irgendwo selber installiert und auf Fehlersuche geht? Aber gut, einen letzten Tipp gebe ich dir trotzdem noch .

Alle Standardfarben, -bilder und sonstigen Werte gehören in die xml-Datei (mod_qnotruf.xml), nicht in die default.php des Moduls:

mod_qnotruf.xml:

Code

<field name="mkbuttongrafikhover" type="text" default="images/demo/demo-bg-1.jpg" label=...

default.php:

PHP

<button style="font-size:<?php echo $mkbuttontextgr; ?>; border-radius:<?php echo $mkbuttonform; ?>; id='notrufbutton'><?php echo $mkbuttontext; ?></button>

Neewmla · 23. Oktober 2018

Zitat von anka
Sei bitte nicht böse, aber erwartest du tatsächlich, dass man sich immer wieder die lietzte Version deines Moduls irgendwo selber installiert und auf Fehlersuche geht? Aber gut, einen letzten Tipp gebe ich dir trotzdem noch .

Alle Standardfarben, -bilder und sonstigen Werte gehören in die xml-Datei (mod_qnotruf.xml), nicht in die default.php des Moduls:

mod_qnotruf.xml:
Code
<field name="mkbuttongrafikhover" type="text" default="images/demo/demo-bg-1.jpg" label=...
default.php:
PHP
<button style="font-size:<?php echo $mkbuttontextgr; ?>; border-radius:<?php echo $mkbuttonform; ?>; id='notrufbutton'><?php echo $mkbuttontext; ?></button>
Alles anzeigen

Hi,

natürlich bin ich nicht böse. Ich hatte das komplette Modul nur angehangen, falls meine Quotes nicht ausreichend sind.

Ich habe leider nicht die Möglichkeit einen direkten Link zu der Webseite zu senden. Da dies alles in einem offline sandbox dings passiert.

Was du oben als Tipp gibts verstehe ich nicht ganz. Bitte korregieren falls ich falsch liege.

Die XML Datei ist für die Darstellung im Backend da. Die Default Datei wird ins Template eingefügt.

Meine Standardwerte, also die Werte die benutzt werden, wenn man im Backend nichts einträgt, sind in meiner CSS Datei hinterlegt.

Vielen Dank.

Neewmla · 23. Oktober 2018

Bevor ich es vergesse, ich hatte gehofft das oben beim Quelltext von "mir" einfach nur ein Syntaxfehler oder so ist. Das ich vieleicht nur was falsch kopiert hatte oder so.

Ich arbeite hier mit dem Standard Editor von Windows. Und da ich ihn dadurch paarmal offen habe und immer hin und her switche, kommt mit Sicherheit auch mal ein Copy&Paste Fehler.

Neewmla · 23. Oktober 2018

Hab mal das in meiner CSS offline getestet:

Code

#notrufbutton {                
                background-image: url(./images/keinhover.png);            
                }
#notrufbutton:hover {
                background-image: url(./images/dashover.png);
                }

Hat problemlos funktioniert.

Ich glaube ich weis nun warum der Code:

Code

$document = JFactory::getDocument();
// load some css
$document->addStyleDeclaration('
    #notrufbutton'  . '{'.
        'background-color: ' . $mkbuttonfarbe .';'.
'background-image: ' . $mkbuttongrafik .';'.
        '}
    #notrufbutton:hover'  . '{'.
        'background-color: ' . $mkbuttonfarbehover .';'.
    'color: ' . $mkbuttontextfarbehover .';'.
'background-image: ' . $mkbuttongrafikhover .';'.
        '}   
   
    .mkclose'  . '{'.
        'color: ' . $mkmodultextexitfarbe .';'.
        '}
    .mkclose:hover'  . '{'.
        'color: ' . $mkmodultextexitfarbehover .';'.
        '}
        
    ');

Alles anzeigen

nicht funktioniert. Da fehlt ja paar Angaben. Es müsste natürlich dann heissen background-image: url("hier derlinkzumbild");

Hoffe ich zumindest.

Neewmla · 23. Oktober 2018

Hat nicht funktioniert. Schade. Hab ich doch richtig so geschrieben oder?

Code

$document->addStyleDeclaration('
    #notrufbutton'  . '{'.
        'background-image: url("' . $mkbuttongrafik .'");'.
        '}
    #notrufbutton:hover'  . '{'.
        'background-image: url("' . $mkbuttongrafikhover .'");'.
        '}

Vielen Dank

Neewmla · 24. Oktober 2018

Guten Morgen,

wie immer kam mir eine Idee morgens im Badezimmer. Die Idee klappte zwar nicht, lies mich aber den Fehler finden.

Nun klappt es so wie es soll.

Neewmla · 24. Oktober 2018

Nachtrag.

Ich hab mich nun doch dafür entschieden, das im Backend für die Hintergrundgrafik vom Button das field vom Typ imagelist zu nutzen.

Die Grafiken werden dort auch dann in der Auswahl angezeigt.

Aber wenn ich mir dann das ganze auf der Webseite ansehe, bekomme ich die Meldung "Grafik konnte nicht geladen werden" über das "Element untersuchen" angezeigt.

Was mir angezeigt wird ist: background-images: url(keinhover.png);

Doch hier müsste sicher eigentlich noch ein Verzeichnis mit drin stehen oder?

Hab das nun hinzugefügt.

Jetzt steht da url(./media/mod_qnotruf/images/keinhover.png)

Wird aber immer noch nicht aufgerufen. Hm.

Neewmla · 24. Oktober 2018

Hier noch die Infos vom Browser.

Neewmla · 24. Oktober 2018

Es funktioniert nun, aber nur wenn ich die URL der Grafiken ganz ausschreibe. Schade das es nicht geht mit Pfadabkürzungen.