Forum - "Sie haben Post" - Sound + Grafik beim Eintreffen einer Email

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » "Sie haben Post" - Sound + Grafik beim Eintreffen einer Email

Seite 1 von 2 « Seite 1 2 Seite »

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | "Sie haben Post" - Sound + Grafik beim Eintreffen einer Email datum

16.10.2014 23:18 (zuletzt bearbeitet: 06.12.2021 01:24)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3996
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1789

"Sie haben Post" - Sound beim Eintreffen einer Email - Teil 1
Aktualisiert 21.09.25

Wer gerne eine akustische Benachrichtigung für die "privaten Mails" ins Forum einbauen möchte, findet hier eine Möglichkeit!

Audio-Text lautet: "Sie haben Post!"
Das Script (Zeile 1-9 ) wird als "Plugin " im "bottom_header" eingebaut!

1
2
3
4
5
6
7
8
9
 
{{user_registered==true.start}}
{{user_newmail==true.start}} 
 
<audio autoplay="autoplay">
<source src="https://files.homepagemodules.de/b135428/f199t55470p407552n2.mp3" />
</audio>
 
{{user_newmail==true.end}}
{{user_registered==true.end}}
 

Schließen

Hier ist noch von Ludger ein anderer Sound, etwas ruhiger!

https://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3

Interessante Links:

Forum-Plugin:Sie haben Post Zoom

Bis dann und gutes Gelingen

Wolfgang

, Jürgen und Dankeschön finden das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet!

#2 | "Sie haben Post" - Zusätzliche Grafik beim Eintreffen einer Email! datum

01.06.2019 22:36 (zuletzt bearbeitet: 21.09.2025 21:48)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3996
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1789

"Sie haben Post" - Zusätzliche Grafik beim Eintreffen einer Email!

Aktualisiert 21.04.2026

Der folgende Beitrag ähnelt dem Plugin Sie haben Post Zoom!

Was kann das folgende Skript?

Trifft eine "private Mail" ein, wird zum Sound ein Symbol, ein Briefumschlag eingeblendet!
Durch ein Mausklick, der mittig zentriert ist, kommt man direkt zum Posteingang!
Der Klick-Bereich kann in Zeile 9 durch "width + height " vergrößert, aber auch verkleinert werden!
Falls die Grafik im Wege steht und man nicht sofort zum Postfach eilen will, kann die Grafik frei verschoben werden, Zeile 27 !
Der Verschiebe- und der Klick-Bereich ist durch wechseln der Mauszeiger zu erkennen.
Neu! Umschlag-Grafik für Handys und iPhones angepasst

Das komplette Skript wird als Plugin unter "Untere Leiste / Header" angelegt.
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick !

Die eigentliche Audiodatei steckt in Zeile 4 , der Audio-Text lautet: "Sie haben Post!".
In Zeile 7 kann über "top " der Abstand der Grafik zum oberen Rand eingestellt werden!
Der Klick-Bereich kann in Zeile 9 durch "width + height " vergrößert, aber auch verkleinert werden!
In Zeile 8 kann die Größe der Grafik über "width" bestimmt werden, in Zeile 12 mobil!
Die zusätzliche Grafik steckt in Zeile 18 , kann auch ausgetauscht werden!
In Zeile 28 werden mobil die Tooltipps ausgeblendet!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
{{user_registered==true.start}}
{{user_newmail==true.start}}
<!--Email-Umschlag + Sound -->
<audio id="mailSound" src="https://files.homepagemodules.de/b135428/f199t55470p407552n2.mp3" preload="auto" muted hidden></audio>
 
<style>
.mailWrap {position:fixed; top:50px; display:inline-flex; justify-content: center; align-items: center; z-index:9997;}
.mailWrap img {width:200px; cursor:move; z-index:9998;}
.mailHit {position:absolute; width:40%; height:40%; cursor:pointer; z-index:9999;}
 
@media (max-device-width: 900px) {
  .mailWrap img {width:100px;}
  
}
</style>
 
<center>
  <div class="mailWrap">
    <img  title="Der Umschlag kann verschoben werden!" src="https://files.homepagemodules.de/b541474/a_748_001a7aea.png">
    <div  title="Zum Postfach" class="mailHit" onclick="parent.location='/private.php';"></div>
  </div>
</center>
 
<script>
/* Draggable - Fenster verschieben*/
document.addEventListener("DOMContentLoaded", () => {
  const snd = document.getElementById("mailSound"); snd.play().then(() => snd.muted = false);
  if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {$('.mailWrap [title]').removeAttr('title')}
  $('.mailWrap').draggable ();
});
</script> 
{{user_newmail==true.end}}
{{user_registered==true.end}}
 

Schließen

Wichtig! Bei einigen Browser ist von Haus aus die Audiowiedergabe blockiert, meistens bei "Firefox" und "Google Chrome"!
Es ist daher ratsam die User auf das neue Plugin hinzuweisen und wenn gewünscht den Audioplayer im Browser zu aktivieren!
Bei fast allen Browsern braucht man nur das "Schloss" in der Adressleiste mit der "linken Maustaste" anklicken, um die Audio-Wiedergabe ein- oder auszuschalten!

Bis dann und gutes Gelingen

Wolfgang

Nara, , Daishi, Kipper-Spedition und Dankeschön finden das Top!

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet.

#3 | RE: "Sie haben Post" - Zusätzliche Grafik beim Eintreffen einer Email! datum

21.08.2021 08:31

Prima, klappt ja auch beim v6

Wolfgang und 844er finden das Top!

Antworten

#4 | RE: "Sie haben Post" - Zusätzliche Grafik beim Eintreffen einer Email! datum

16.04.2026 15:34 (zuletzt bearbeitet: 16.04.2026 21:32)

Ich habs jetzt doch auch!
Anscheinend sehen einige Mitglieder das Symbölchen nicht und fordern auch keine Mailbenachrichtigung dafür an.

Und falls jemand noch nette Alternativ-mp3 hat, gerne hier die URL reinstellen, wenns kein Aufwand ist.
Bei mir passt das Siezen in "Sie haben Post" nicht, also hab ich Ludgers genommen. (Da auf dem Thread ist auch nix anderes angeboten.)

Bzw. hab selber geschaut, erst bei https://hoerspielbox.de eine kleine Auswahl, drauf gekommen passend Vogel-Klänge zu benutzen,
dann bei pixabay fündig geworden.
Die Kunst aber wird sein, dass es nicht in Umgebungsgeräuschen untergehen und relativ eindeutig zuordbar sein soll.
Ich werd das Auserwählte wohl bekannt machen, nix blöder als wenn das Gerät Geräusche macht und man hat keine Ahnung von welchem Tab es kommt (da gabs glaub ich einen Trick für...)
(Der Kardinal wäre wohl ungünstig, wenn ein Mitglied welche hält...)

Vielen Dank!

von Jan

Dankeschön hat folgende Dateien an diesen Beitrag angehängt

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#5 | Bereich fürs Draufklicken des Umschlag-Symbols verkleinern? datum

17.04.2026 13:11 (zuletzt bearbeitet: 17.04.2026 13:13)

Bereich fürs Draufklicken des Umschlag-Symbols verkleinern?

Auch hier hab ich noch eine Kleinigkeit... ¯\_(ツ)_/¯
Kann (will?) man den clickbaren Bereich um dem Umschlag-Symbol vielleicht kleiner haben, vielleicht 3mm?
Denn wenn ich ihn noch nicht wegklicken will, komm ich beim Schreiben regelmäßig unabsichtlich "drauf" ohne direkt draufgeklickt zu haben.
Rumtesten zeigt: der Click-Bereich ist bei mir 10mm links, unten und rechts vom Umschlag, oberhalb 7mm.

Bzw. nützlich wäre da auch vielleicht beim Hovern drüber, dass der clickbare Bereich ein ähnliches Symbol bekommt wie das Verschieb-Symbol. Oder genau das gleiche Symbol, und dass sich die Bereiche fürs Verschieben und fürs Draufclicken decken.
Der Verschieb-Bereich ist nämlich bei mir nur bis ca. 5mm unterhalb, 4mm links, 3mm rechts und 2mm oberhalb.

Das war V4, V6 hab ich noch nicht getestet.

Dankeschön!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#6 | Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern? datum

18.04.2026 01:33

Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern?

Hallo JanDas ist eine gute Idee den Klickbereich des Umschlag-Symbols zu verkleinern!
Wie oft ist mir das auch schon passiert, dass ich zu dicht am Symbol war und sofort zum Postfach umgeleitet wurde. Besonders schlimm, wenn man am Schreiben eines Beitrages ist!
Hinzu kam, dass das Verschieben nicht so gut funktioniert hatte und ich diese Funktion hier im Forum bereits herausgenommen hatte!
Das hat sich alles geändert!

Update - Was hat sich geändert!

Es kam vor, dass der Sound beim Öffnen der Seite nicht anspringen wollte. Das ist mit einem JS-Eintrag behoben.
Zusätzlich ist der aktive Klick-Bereich verkleinert worden.
Das Umschlag-Symbol lässt sich jetzt frei, ohne ruckeln und springen sauber verschieben!
Der Übergang vom Verschieben in den Klick-Bereich ist durch das Wechseln der Mauszeiger gut zu erkennen!
Zusätzlich zeigen Tooltips die Zustände an.

Alles in Beitrag #2 nachgetragen.

Bis dann und besten Dank für den Anstoß
Wolfgang

Dankeschön findet das Top!

Antworten

#7 | RE: Update: Bereich fürs Draufclicken des Umschlag-Symbols verkleinern? datum

20.04.2026 11:57 (zuletzt bearbeitet: 20.04.2026 12:00)

Klasse, vielen Dank!!

Eine Mobil-Userin hat angefragt, ob der Umschlag kleiner kann, da er stört, wenn man schauen will wer geschrieben hat, aber die neuen PN noch nicht lesen möchte.
Das hab ich gleich durch Halbieren auf 100px ungesetzt. Er fällt ja trotzdem auf: durch Gestaltung und Stehenbleiben wenn man scrollt.

Dabei ist mir allerdings auch aufgefallen, dass ich ihn zumindest im Firefox nicht verschieben kann, obwohl das im Menü angezeigt wird wenn man länger festhält ("Rechtsclick"). Ist da was zu machen? Verschiebeversuche springscrollen bei mir nur auf der Seite herum als ob die Umschlagfläche nicht da wär. Du schriebst aber die Verschiebefunktion war generell schwierig...

Dankeschön!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Antworten

#8 | Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern? datum

20.04.2026 12:46

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3996
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1789

Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern?

Hallo JanDa hat Deine Mobil-Userin völlig recht, mobil ist die Grafik viel zu groß und mit Wegschieben ist da auch nicht viel!!!
Die Lösung ist einfach, man kann jetzt die Größe Mobil + Desktop getrennt einstellen!
Eine kleine Erweiterung im "Style " und alles passt wieder.
Die Größe lässt sich mobil in Zeile 2 (bzw. Zeile 12 / #2) getrennt anpassen.

1
2
3
 
@media (max-device-width: 900px) {  
  .mailWrap img {width:100px;}
} 
 

Alles in Beitrag #2 nachgetragen!

Bis dann
Wolfgang

Dankeschön findet das Top!

Antworten

#9 | RE: Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern? datum

20.04.2026 20:47 (zuletzt bearbeitet: 20.04.2026 20:50)

Klasse! Ich hab jetzt mobil auf 80px (obwohl ihr 100px gereicht hat) und desktop auf 150px.

Mobil steht jetzt weiterhin beim Pseudo-Rechtsklick "Der Umschlag kann verschoben werden!" aber wird denk ich kaum gesehen.
Oder geht das auch so einfach mit so was wie @media (min -device-width: 900px) { ?

Dankeschön!!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#10 | Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern? datum

21.04.2026 08:21

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3996
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1789

Update: Bereich fürs Draufklicken des Umschlag-Symbols verkleinern?

Hallo JanNa, da wird das kleine E-Mail-Skript immer perfekter!
Um die Tooltipps mobil auszublenden, habe ich eine JS-Zeile hinzugefügt!

1
2
 
  if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {$('.mailWrap [title]').removeAttr('title')}

Alles in Beitrag #2 nachgetragen!

Bis dann und mal wieder besten Dank fürs Feedback!
Wolfgang

Dankeschön findet das Top!

Antworten

Bilder aus "Datei anhängen" + "URL-Bilder" mit einem Klick vergrößern oder modal anschauen! » « Syntax-Highlighting: Foren-Code farbig darstellen!

Seite 1 von 2 « Seite 1 2 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

18.10.2023 21:09
von

Kipper-Spedition • Zugriffe: 963

Xobor-Spoiler mit Grafik in der Titelleiste
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 04.07.2022 22:30
Daishi • Zugriffe: 925
Passwort beim Login anzeigen!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 5 03.05.2020 20:50
Wolfgang • Zugriffe: 2311

Verlinkte Grafik - Hinweis auf spezielle Beiträge, Ereignisse und Favoriten!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

19.03.2017 08:25
von

Wolfgang • Zugriffe: 2395

Zu Silvester: Feuerwerk-Effekte für die Homepage mit Sound
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 15 29.12.2024 02:41
Wolfgang • Zugriffe: 12564

Signatur: Themen als Grafik - Beliebig formatieren!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.03.2016 14:45
von

Wolfgang • Zugriffe: 2322

Grafiken, Zeichen und Formen in Word 2007/2010-2016 erstellen und ohne Hintergrund abspeichern
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. von Wolfgang

29.11.2015 17:58
von

Magister • Zugriffe: 3908

Sound beim Einloggen ins Forum
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 3 16.02.2015 23:11
Wolfgang • Zugriffe: 2935

Forum Übersicht → XOBOR-Foren und Homepages →

Das neue Template Xobor (v6). → "Sie haben Post" - Sound + Grafik beim Eintreffen einer Email

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €