Forum - Meine Idee und Inspiration mit Vorstellung der Skripte - Vorlagen (Daishi)

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 »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Meine Idee und Inspiration mit Vorstellung der Skripte - Vorlagen (Daishi) - Verlinkter, animierter Hinweis

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 | Meine Idee und Inspiration mit Vorstellung der Skripte - Vorlagen (Daishi) - Verlinkter, animierter Hinweis datum

10.06.2024 16:42 (zuletzt bearbeitet: 19.10.2024 18:33)

Daishi

Informationen anzeigen

Beiträge:	399
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	347

Es war nur eine Idee und eine Inspiration. Für die Iconbar, mit besonderen Vorlagen. Man kann es auch abändern und für etwas anderes benutzen. Wie gesagt, es war nur eine Idee und eine Inspiration.

Also nicht wundern. In Zeile 2 - 14 habe ich noch eine Animation versucht einzubauen, sie funktioniert, habe sie aber deaktiviert, falls sie für andere unschön sein können. Wer es möchte, kann es löschen und muss bei "HTML Code" auch den Code löschen.

Wer es löschen möchte, kann dies hier tun, CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/*Zum Animieren freischalten*/
/*#location {
    -webkit-animation-name: bounceOutRight;
  	animation-name: bounceOutRight;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 5s;
    -moz-animation-iteration-count: 1;
}*/
 
 

Und HTML:

1
 
<div id="location">

Ich hoffe, dass ich es so weit verständlich erklärt habe, wenn man es nicht möchte, kann man das hier, was angegeben ist, löschen.

Damit es keine Verwirrung gibt, mache ich viele CSS - Skripte über Plugin als "Untere Leiste - Header". Mache es oft anders als andere Administratoren in ihren Foren.

Viele machen es in den vorgeschriebenen CSS - Code hinein.

Hier mal der CSS - Code für das Plugin:

Der CSS - Code für das Plugin

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
<style>
/*Zum Animieren freischalten*/
/*#location {
    -webkit-animation-name: bounceOutRight;
  	animation-name: bounceOutRight;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 5s;
    -moz-animation-iteration-count: 1;
}*/
 
#reqtangleOne {
    position: relative;
    top: 0px;
    left: 100px;
    width: 400px;
    height: 200px;
    background-color: #007bff;
}
 
#reqtangleTwo {
    position: relative;
    top: -193px;
    left: 100px;
    width: 390px;
    height: 180px;
    border-width: 3px 3px 3px 0px;
    border-color: #FFF;
    border-style: solid;
    z-index: 1;  
  	-webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
}
 
#reqtangleTwo p {
    position: relative;
    font-family: Arial;
    color: #FFF;
    text-align: justify;
    width: 260px;
    height: 140px;
    margin-top: 0px;
    margin-left: 3px;
    padding: 20px 20px 20px 110px;
    overflow-y: auto;
    z-index: 1;  
  	-webkit-animation-name: bounceInDown;
  	animation-name: bounceInDown;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2.3s;
    -moz-animation-iteration-count: 1;
}
 
#triangle {
    position: relative;
    top: -386px;
    left: 500px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 0 100px 100px;
    border-color: transparent transparent transparent #007bff;
}
 
#imgSpin {  
  	-webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
}
 
#circleOne, #reqtangleOne, #triangle {
    -webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 1.5s;
    -moz-animation-iteration-count: 1;
}
 
#circleOne {
    position: relative;
    top: -586px;
    width: 200px;
    height: 200px;
    background-color: #007bff;
    border-radius: 50%;
}
 
#circleTwo {
    position: relative;
    top: -779px;
    left: 7px;
    width: 180px;
    height: 180px;
    background-color: #007bff;
    border-radius: 50%;
    border: 3px solid #FFF;
}
 
#iconIn img {
    position: relative;
    top: -1133px;
    left: 17px;
    border-radius: 50%;
    border: 3px solid #FFF; 
  	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.8s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2.8s;
    -moz-animation-iteration-count: 1;
    z-index: 2;
}
 
#border_spin {
    position: relative;
    top: -961px;
    left: 11px;
    border: 9px dotted #FFF;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    -webkit-animation: anim 30s infinite linear;
    -moz-animation: anim 30s infinite linear;
    -ms-animation: anim 30s infinite linear;
    animation: anim 30s infinite linear;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
 
/*ANIMATIONS*/
 
@-webkit-keyframes anim {
  	0%{-webkit-transform:rotate(0deg);} 
  	50%{-webkit-transform:rotate(360deg);} 
  	100%{-webkit-transform:rotate(720deg);}}
@-moz-keyframes anim {
  	0%{-moz-transform:rotate(0deg);} 
  	50%{-moz-transform:rotate(360deg);} 
  	100%{-moz-transform:rotate(720deg);}}
@-ms-keyframes anim {
  	0%{-ms-transform:rotate(0deg);} 
  	50%{-ms-transform:rotate(360deg);} 
  	100%{-ms-transform:rotate(720deg);}}
@keyframes anim {
  	0%{transform:rotate(0deg);} 
  	50%{transform:rotate(360deg);} 
  	100%{transform:rotate(720deg);}}
 
@-webkit-keyframes bounceInLeft {
    0% {opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
    60% {opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px);}
    80% {-webkit-transform: translateX(-10px); transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0); transform: translateX(0);}}
@keyframes bounceInLeft {
    0% {opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}
    60% {opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);}
    80% {-webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}}
 
@-webkit-keyframes bounceInDown {
    0% {opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
    60% {opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px);}
    80% {-webkit-transform: translateY(-10px); transform: translateY(-10px);}
    100% {-webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes bounceInDown {
    0% {opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}
    60% {opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}
    80% {-webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);}
    100% {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}}
 
@-webkit-keyframes bounceOutRight {
    0% {-webkit-transform: translateX(0); transform: translateX(0);}
    20% {opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px);}
    100% {opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px);}}
@keyframes bounceOutRight {
    0% {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
    20% {opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px);}
    100% {opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}}
 
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}  
</style>
 

Schließen

Ach, so @Wolfgang, ich habe es nach deinem Forum-Style in der CSS angepasst, nicht wundern, warum es jetzt in andere Farbe ist.

Und hier, wie ich es gemacht habe für die iconbar:

Ersetze:

1
 
[vorlesen]

Mit:

1
 
<div id="location"><div id="reqtangleOne"></div><div id="reqtangleTwo"><p> Texte sich vorlesen zu lassen ist eine faszinierende und praktikable Idee!<br> <br> Mit einfachsten Mitteln lassen sich überall im Forum Hilfetexte, Hinweise oder Warnungen mit Sprachausgabe platzieren, ohne extra eine MP3-Datei erstellen zu müssen!<br> <br> <b>Hier geht es zum Beitrag:</b><a href="/t1790f31-Text-to-Speech-TTS-Feste-Textbloecke-in-Sprache-umwandeln-Teil.html#msg5029">Text to Speech (TTS) -Text in Sprache umwandeln!</a></p></div><div id="triangle"></div><div id="circleOne"></div>       <div id="imgSpin"><div id="circleTwo"></div><div id="border_spin"></div></div><div id="iconIn"><a href="#">         <img src="https://files.homepagemodules.de/b104774/a_504_a1f9b795.png" width="160px" style="max-width: 160px;"></a></div></div>

Bild, wie es ausschaut:

Nur schade, dass ich kein Video machen kann wegen der Animationen.

Ich hoffe das die Idee und Inspiration gut ankommt. Wie gesagt, es darf auch das Script verändert werden, wer Ideen und weitere Inspirationen dafür hat, darf diese gerne erweitern.

Wie immer erfreue ich mich herzlichst über Kritik, Fehler und weitere Ideen.

P.S. Habe noch vergessen zu erwähnen das man die bilder 160 x 160 nehmen muss sonst sieht, mist aus.

1
 
<img src="https://files.homepagemodules.de/b104774/a_504_a1f9b795.png" width="160px" style="max-width: 160px;">

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | Besondere Vorlage für die Iconbar - Animierter Hinweis datum

27.06.2024 00:44 (zuletzt bearbeitet: 11.07.2024 11:59)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis
Aktualisiert 17.03.2025

06.07.2024

Hallo DaishiKlasse Animation, um auf etwas hinzuweisen, um etwas zu präsentieren!
Die Animation finde ich gut, angenehm und nicht zu hektisch!
Einfach genial und gelungen!
Habe mir deswegen auch genug Zeit gelassen, um Deine Idee und Inspiration gut zu verpacken!
In den folgenden Skripten gibt es eine Version mit festen und eine mit variablen Einstellungen, die ganz nach Bedarf gewählt werden können!
Wie bei der Spenden-Münze braucht für die Veränderung der Größe und Plus-Länge nur ein Wert verändert werden!

Was habe ich festgestellt?Dein Skript hat für einen Hinweis sehr viel Platz gebraucht!
Auf einer großen HTML-Seite ohne Text und Bilder funktioniert das immer recht gut!
Habe alles, bis auf den äußeren DIV-Container, mit überlagerten DIV's (position:absolute) aufgebaut!
Auffällig ist auch die Größe mit 600px. Für mobile Endgeräten, wie Handy's, recht ungünstig!
Die auskommentierte Animation, die den Hinweis nach rechts auslaufen lässt, ist einfach super, müsste umgebaut werden!

Vorlage variabel:
• Größe 400px + 200px zusätzliche Länge
• Verlinkung zur Bildergalerie
Bitte Grafik zum Testen anklicken!

Grafik testweise anklicken!

Animierter Hinweis mit festen Werten

Es können feste Hinweise und Informationen, zu Geburtstagen, Events, auftretende Fehler, Unterstützungen und Spenden erstellt und mit einem Klick aus der Iconbar abgerufen werden!
Größe, Grafiken und Links werden vorher bestimmt und festgelegt!
Für jeden neuen Hinweis wird ein neuer Foren-Code benötigt und muss erstellt werden!

Animierter Hinweis mit variablen Werten

Hier wird nur ein Foren-Code benötigt, der über die Iconbar in den Beitrag eingefügt wird!
Größe, Grafiken und Links können beliebig über den Foren-Code im Beitrag bestimmt werden!

Was können beide Hinweise?

Für die Ausgangsgröße und für die zusätzliche Länge des Hinweises braucht nur ein Wert eingegeben werden, die anderen Werte stellen sich automatisch nach!
Die Ausgangsgrößen der Grafik sind unkritisch, sie werden automatisch angepasst!
Der Hinweistext ist vertikal zentriert, hat Linksanschlag und ist mit einem schmalen Überlauf ausgestattet!
Gibt es mehrere Hinweise, können sie auch aneinandergereiht werden! Ist die Seite nicht breit genug, werden sie umgebrochen und untereinander dargestellt!
Mouseover und Klick stoppen die rotierende Animation und rufen andere Farben auf!
Wird die Grafik angeklickt, führt sie zur Webseite. Die hier eingebaute Animation lässt den Text nach rechts auslaufen!

Neu! Für extra lange Hinweise gibt es eine einstellbare Zusatzlänge!
Neu! Der Infotext kann jetzt ganz links anfangen und nicht mitten im Foren-Code!
Neu! Link wird im neuen TAB aufgerufen!

Größe 200px

Mehrere Vorlagen nebeneinander, in einer Reihe!

Foren-Code:

1
 
[VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u481_rfKIqYVw.jpg]Größe 200px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u483_opeaIEOs.jpg]Größe 200px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u488_KjAGhEWI.jpg]Größe 200px[/VorlageVariabel]

Größe 200px
+ 50px Zusatzlänge

Mehrere Vorlagen nebeneinander, in einer Reihe, mit 50px Zusatzlänge!

Foren-Code:

1
 
[VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u481_rfKIqYVw.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel] [VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u483_opeaIEOs.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel] [VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u488_KjAGhEWI.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel]

Schließen

Größe 400px

Größe 300px

Größe 200px

Mehrere Vorlagen mit unterschiedlichen Größen!

Foren-Code:

1
 
[VorlageVariabel=400px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u496_DrHsqkOm.jpg]Größe 400px[/VorlageVariabel] [VorlageVariabel=300px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u499_GWSRyFjD.jpg]Größe 300px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u500_BbRiWXwr.jpg]Größe 200px[/VorlageVariabel]

Schließen

Installation für alle Templates & Mobil

Überblick HTML-Code

Neuer Foren-Code mit festen Werten

Neuer Foren-Code variable Eingabe

Plugin anlegen

Bis dann, gutes Gelingen und viel Spaß beim Ausprobieren!

Wolfgang

Kipper-Spedition und Dankeschön finden das Top!

Antworten

Moderations-Kommentar:

Beitrag und Skript überarbeitet, neuer Foren-Code mit einstellbarer Zusatzlänge erstellt.
Mouseover- und Klick stoppen die rotierende Animation!
Linkaufruf im neuen TAB!

#3 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

27.06.2024 21:50 (zuletzt bearbeitet: 28.06.2024 16:54)

Wie immer habt ihr zwei das Klasse gemacht! Ideen ist der Anfang, die Umsetzung ist der zweite Schritt.

Ich hab das natürlich ausprobiert - und es funktioniert.
Frage: kann man die "Animation" auch in Höhe und Breite definieren? Hintergrund: ich wollte ein längliches Bild einsetzen, nur wenn ich die Höhe nicht höher nehme, dann kommen bei dem Bild Scroll-Balken zum Vorschein.
--> gugge hier !!!

Grüße vom Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#4 | Für die Iconbar - Animierter Hinweis mit variabler Eingabe datum

28.06.2024 22:07 (zuletzt bearbeitet: 06.07.2024 08:21)

Für die Iconbar - Animierter Hinweis mit variabler Eingabe
Aktualisiert 01.07.2024

Hallo ArndtHabe eine Lösung gefunden!

Da der gesamte Hinweis ineinander verflochten ist und jede Einstellung von der anderen abhängig ist, ist es nur indirekt möglich Höhe und Breite getrennt einzustellen!
Meine Lösung liegt in einer "Längen-Plus-Variante"!
Das heißt, dass man die Größe mit allem drumherum einstellt und zusätzlich ein Wert, von z.B. "100px oder 200px" zur Verlängerung des Hinweises zusätzlich einfügt!
Oder, wenn die Verlängerung nicht erforderlich ist, den Wert auf "0px" einstellen!
Plugin und Foren-Code müssen daher neu erstellt oder überschrieben werden!

Größe 450px mit 200px Zusatzlänge!
Alles im Beitrag #2 geändert!

Hier geht es zur Installation: Linke Grafik anklicken!

Nachtrag - Kleine Änderung für die Übersicht

Nach dem Einfügen des Foren-Codes in den Beitrag fängt der Infotext für den Hinweis jetzt ganz links an und nicht mitten im Foren-Code, ist dadurch besser zu finden und nachzuarbeiten!
Webseite wird im neuen TAB aufgerufen!

Wichtig! Bereits geschriebene Beiträge mit dem neuen Hinweis müssen noch geöffnet und wieder geschlossen werden, damit der neue Foren-Code übernommen wird!
Foren-Code variabel (Zusätzliche Eintragung Iconbar) und Plugin müssen überschrieben werden!

Bis dann und besten Dank für die Idee!

Wolfgang

Kipper-Spedition findet das Top!

Antworten

#5 | RE: Für die Iconbar - Animierter Hinweis mit variabler Eingabe datum

02.07.2024 21:42

Danke Wolfgang für die Hilfe bei der Installation im Testforum - irgendwie hab ich es nicht hinbekommen.
Ist es möglich, das der Link in einer anderen Seite aufgeht?

Über das einzufügende Bild hab ich dir schon ne PN geschrieben.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#6 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 13:04 (zuletzt bearbeitet: 06.07.2024 09:06)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis

Hallo ArndtIn den Beiträgen gilt der BB-Code, also mit [img] ... [/img] kommst Du da weiter!
Die Verlinkung ist frei wählbar, kann zu jeden Beitrag, zu jeder Mitteilung führen, in Deinem Forum oder auf einer anderen Webseite!

1
 
[VorlageVariabel=260px=140px=https://www.forum-transportunternehmer.de/=https://files.homepagemodules.de/b610439/a_1260_2565684e.png][img]//files.homepagemodules.de/b610439/a_1264_3cc90cc8.png[/img][/VorlageVariabel]

1
 
[img]https://files.homepagemodules.de/b610439/a_1264_3cc90cc8.png[/img]

Ich hoffe ich konnte weiterhelfen....

Wolfgang

Antworten

#7 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 15:50

Ich meinte es mit: target="_blank"
Also, die Pressemitteilung soll in einem neuen Tab aufgehen.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#8 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 16:17 (zuletzt bearbeitet: 06.07.2024 08:57)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis

Hallo ArndtSorry, da hatte ich etwas überlesen!
Diese Option war beim letzten Update + Nachtrag enthalten!
Bei Dir musste noch der Foren-Code geändert werden!
Weil der Link mit "onclick" aufgebaut ist, sieht target="_blank" etwas anderes aus, siehe Zeile 17!

Wichtig! Bereits geschriebene Beiträge müssen geöffnet und wieder geschlossen werden, damit der neue Foren-Code aktiviert wird!

HTML-Code für Animation-Variabel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div class="div_location">
  <div class="location" style="--Laenge:{{groesse}}; --LaengePlus: {{plus}};">
    <div class="reqtangleOne"></div>
    <div class="reqtangleTwo">
      <p>
 
.......
 
      </p>
  </div>
  <div class="triangle"></div>
  <div class="circleOne"></div>
  <div class="imgSpin">
    <div class="circleTwo"></div>
    <div class="border_spin"></div>
    </div><div class="iconIn">
      <a href="#" onclick="window.setTimeout(function(){ window.open('{{link}}', '_blank'); }, 3000);return false;">
        <img src="{{img}}">
      </a>
    </div>
  </div>
</div>
 

VG
Wolfgang

Kipper-Spedition findet das Top!

Antworten

Muss das so sein? » « Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen!

Ähnliche Themen

Antworten

Letzter Beitrag

Ideen, Inspirationen, Skripte sind hier im Forum frei verfügbar!
Erstellt im Forum Ankündigungen & Termine, wichtige News. von Wolfgang 1 08.11.2024 17:14
Kipper-Spedition • Zugriffe: 318
Eine Idee für den Präsentationskalender
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 2 10.06.2024 16:51
Daishi • Zugriffe: 357

Meine Idee und Inspiration (Daishi) - Audiodateien abspielen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

23.10.2025 16:53
von

Kipper-Spedition • Zugriffe: 732

Bewegte Bilder - Neue Idee und Inspiration
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 4 07.12.2023 06:06
ichwersonst • Zugriffe: 627
Ich stelle meine 2 Intros vor (Daishi)
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 5 23.05.2024 17:52
Daishi • Zugriffe: 505

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: 758

Animierte Titelleisten: Details + Zusammenfassung
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 1 13.01.2023 14:58
Daishi • Zugriffe: 539

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: 2290

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

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Meine Idee und Inspiration mit Vorstellung der Skripte - Vorlagen (Daishi) - Verlinkter, animierter Hinweis

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 €

12%