Forum - RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt!

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 � Gutes Online Radio gesucht - Weihnachtsradio!

Seite 2 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. 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

#11 | RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

26.08.2023 12:16

Einfach genial Arndt natürlich auch Dir lieber Wolfgang erstaunlich, was sich aus meiner Idee vom Präsentationskalender alles machen lässt und ergeben hat.

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#12 | RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

26.08.2023 14:03 (zuletzt bearbeitet: 26.08.2023 23:54)

Ja, das sind halt solche Geschichten. Einer hat ne Idee, ein anderer hat richtig Ahnung und hilft, dann habe ich die Podcasts "entdeckt", Wolfgang zeigt mir wie man die mp3 "extrahiert" und fertig ist es.

Thema Datenschutz: Ich habe an Xobor die Anfrage gestellt, ob die das Plugin "externe Inhalte einbinden" auf unser altes "Betriebssystem v4" umschreiben und lauffähig bekommen könnten. Habe aber noch keine Antwort bekommen. An der DSGVO kommt man nicht vorbei, entweder man bekommt das hin, oder man muss die Seiten als (gewerblicher) Anbieter von der Seite nehmen.

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

creator, Wolfgang, Daishi und Gabriella finden das Top!

Antworten

#13 | RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

27.08.2023 10:30 (zuletzt bearbeitet: 27.08.2023 10:30)

Zitat von Kipper-Spedition im Beitrag #14
oder man muss die Seiten als (gewerblicher) Anbieter von der Seite nehmen.

Ja, gewerblicher Anbieter, wir sind aber kein gewerblicher Anbieter. Wieso reicht den das was wir haben von Xobor nicht? Ist ja auch neu und beinhaltet das, was neu ist an der DSGVO. Ich sehe das nicht so eng.

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#14 | RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

27.08.2023 11:12 (zuletzt bearbeitet: 27.08.2023 11:21)

Egal ob gewerblich oder Hobby: bei jeder Weiterleitung z.B. zu YouTube, muss der Nutzer aktiv zustimmen, das z.B. YT von ihm Daten abgreift. Die Amerikaner sehen das lockerer, da kann z.B. dein Nutzungsverhalten komplett analysiert werden. Europäische Datenschutzorganisationen sehen es (Gott sei Dank?) anders.
Wenn man das ignoriert, ist man als Betreiber des Forums angreifbar. Nach meiner Rechtsauffassung ist es egal, ob das Forum gewerblich oder privat betrieben wird.

Das war meine laienhafte Erklärung, @creator kann da sicherlich ausführlicher berichten. Aber nicht umsonst hat Xobor dieses Plugin im v6 aufgespielt...

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

Antworten

#15 | RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

27.08.2023 13:11

Zum Sonntag habe ich eine Antwort vom Ingmar von Xobor bekommen. Da ist was in Arbeit, er bittet aber noch etwas um Geduld.

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

creator findet das Top!

Antworten

#16 | Update: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! datum

27.11.2024 09:10 (zuletzt bearbeitet: 27.11.2024 09:23)

Aktualisiert! - Online Radio für die Homepage!

In Beitrag #2 haben sich viele Links zu den Radiosendern geändert.
Sicherheitslücke mit "target" für ältere Browser geschlossen (Eintrag: rel='noopener noreferrer').
Skript minimiert!
Der Sender werden jetzt im neu aufgerufenen, gleichen TAB gewechselt! Das hat den Vorteil, dass nicht mehrere Sender parallel laufen!

Zusätzliche InfoMir ist aufgefallen, dass immer mehr Online-Radiosender vor jedem neuen Start, Werbung einspielen!
Sehr unschön!
Die Radiosender können auch nicht mehr direkt aufgerufen und abgespielt werden (DSGVO).

Weiterhin viel Spaß für die Ohren!

Wolfgang

Antworten

#17 | Online Radio für die Homepage! - Einfach mit "radio.de" datum

01.12.2024 10:03 (zuletzt bearbeitet: 08.12.2024 20:05)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3468
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1338

Online Radio für die Homepage! - Einfach mit "radio.de"

@Kipper-Spedition

Hallo Arndt

Habe eine weitere Version für das Online-Radio und mich auf die Kategorien der Radiosenders konzentriert, wie z.B. "Pop & Rock", "Blues, Jazz & Soul" oder "Relax & Chillout".
Um Platz zu sparen und die Übersicht auch bei kleineren Endgeräten nicht zu verlieren, wäre ein Auswahlmenü nach dem Prinzip wie es in Beitrag #10 zu finden ist, ein guter Weg!
Das folgende Skript basiert auf den bereits bekannten "Präsentationskalender" und für die Auswahl die "Multiple Diashow" aus dem Forum!
Absoluter Spitzenreiter ist für alle Anforderungen immer noch "radio.de", finde ich!
Die Skripte und der Einbau sind problemlos! Nur hat sich hier der direkte Aufruf, wegen der Datenschutzbestimmungen, geändert!

Es gibt auch Sender, die speziell Weihnachtsmusik präsentieren!

https://www.radio.de/search?q=weihnachten

Was kann das folgende Skript?

Das Skript basiert auf den Präsentationskalender und die Multiple Diashow in Beiträgen!!
Passt sich allen Bildschirmgrößen an, funktioniert in allen Templates & Mobil
Mit einem Klick kann die komplette Kategorie aufgeklappt werden oder per "Vorwärts und Rückwärts-Button" der Sender ausgewählt werden!
Es gibt 4 Kategorien, "Radio BOB","Oldies","Blues, Jazz & Swing" und "Relax & Chillout"
und zu Weihnachtszeit das "Weihnachtsradio".
Die einzelnen Radio-Fenster passen sich der Größe des Ausgabegerätes bestens an, wobei die Kategorien jeweils für sich automatisch umgebrochen werden!
Die einzelnen Button sind mit Tooltipps ausgestattet!
Classes und ID passend umbenannt, z.B. "MusicTitel" oder "MusicTitel". Stört sich auch nicht mit Vorgänger-Skripten!
Datenschutzerklärungen von "radio.de" werden unterhalb der Liste angezeigt!

Nochmal erwähnt: Wo finde ich die einzelnen Sender?

radio.de aufrufen!
Kategorie aussuchen: Musikrichtung, Themen oder Bundesländer.
Sender auswählen und anklicken.
"</> Integrieren" suchen und anklicken!
Jetzt ist der komplette HTML-Code mit JavaScript zu sehen.
Nur den HTML-Code von "<div> ...</div>" kopieren und im folgenden Skript eintragen.
Das JavaScript braucht nur einmal vorhanden sein, ist bereits ganz oben im Script eingetragen!

Installation für alle Templates & Mobil

Schließen

Installation:

Eigene Seiten unter "Admin > Layout > Eigene Seiten" aufrufen!
"Neue Seite erstellen...", "HTML Quelltext direkt bearbeiten?", "Editor ausschalten" anklicken.
Berechtigungen vergeben!
Unter "Weitere Einstellungen ein-/ausblenden" "Template-Variable aktivieren" anhaken!
Wenn "Premium-Tarif", Option "Kopf- und Fußzeile ausblenden" nicht anhaken.
Namen vergeben, z.B.: "Online Radio mit Auswahlmenü"
Das Online Radio wird dann über eine Verlinkung der "Eigenen Seiten" aufgerufen!
z.B.: https://www.hilfe-tricks-tipps.de/page-104774-102.html
Die Verlinkung kann in die Navigation unter "Admin > Layout > Navigation > Navigation bearbeiten" eingetragen werden!

Aufruf des Online Radios:

"Eigene Seiten" können über eine Verlinkung in der Navigation oder von einem Beitrag aus aufgerufen werden!
Der Link steht unter der erstellten Seite auf "Admin > Layout > Eigene Seiten > Eigene Seiten > Name / Browser-Titel"!
z.B.: https://www.hilfe-tricks-tipps.de/page-104774-102.html

Beschreibung:

In Zeile 2 steckt das JavaScript, dass nur einmal für alle Radiosender da sein braucht!
In Zeile 85, 88, 91, 94, 97 + 100, ... sind die Radiosender zu finden!
Ab Zeile 247-285 ist das JavaScript für die Menüauswahl untergebracht.
Ab Zeile 212 ist der Link zu den Datenschutzerklärungen zu finden.
Wird Zeile 38 freigegeben, kann der Hintergrund und die Breite angepasst werden!

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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
 
<!-- Radio-Skript -->
<script>(function(d, s){if(!window.rel){s = d.createElement("script");s.type = "text/javascript";s.async = true;s.id = "radio-de-embedded";s.src = "https://www.radio.de/inc/microsite/js/full.js";d.getElementsByTagName("head")[0].appendChild(s);window.rel = true;}}(document));</script>
 
<style>
  /*** Volumenregler nach oben verschieben ***/
  #rde-player .dropdown-menu {margin-top:-120px !important;}
 
  /*** Hover-Animation Play-Button & Logo ***/
  #rde-player .rde-player-btn-play-pause.rde-paused:hover:after {font-size:20px; padding-left:3px; display:flex; justify-content: center;}
  #rde-player .rde-player-main-controls .rde-btn:hover:before {border:0;}
 
  .flexbox .microsite .rde-player-control-wrapper .rde-player-logos:hover  {position:absolute; margin: -37px 0 0 -10px;}
  .flexbox .microsite .rde-player-control-wrapper .rde-player-logos:hover img {width:91px;  height:91px;  z-index: 999; }
 
  /*** Tooltipps ***/
  /* Hintergrund Tooltipps */
  .rde-player-main-controls .rde-btn:hover:before, .rde-top-bar-inner-right a:hover:before, .rde-player-logos a:hover:before, .rde-top-bar-logotype a:hover:before, .ng-scope .rde-player-volume:hover:before {background:#ffffff; border-radius:2px; color: #383838; font-family: "Times New Roman", Times, serif; font-size:14px !important; font-weight:bold; text-transform: uppercase; width:auto; letter-spacing: .075em !important; position:fixed; whitespace: nowrap;}
 
  /* Play */
  .rde-player-main-controls .rde-btn:hover:before {background: none !important; }
 
  /* Pfeil-Ausgang */
  .rde-top-bar-inner-right a:hover:before {content: " Zur Webseite"; padding:3px 10px; margin-right: 40px; position:relative;}
  .rde-top-bar-inner-right a:hover {text-decoration: none !important;}
 
  /* Radio-Logo */
  .rde-player-logos a:hover:before {content: " Zur Webseite"; padding:1px 10px 1px 10px; margin:-29px 0 0 100px;}
 
  /* Radio.de */
  .rde-top-bar-logotype a:hover:before {content: " Zur Webseite"; padding:1px 10px 1px 10px; margin:3px 0 0 145px;}
 
  /* Lautstärke */
  .ng-scope .rde-player-volume:hover:before {content: " Lautstärke"; padding:1px 10px 1px 10px; margin:-28px 0 0 70px;}
 
  /*** Online Radio ***/
  .Music {
  /* Hintergrund Auswahlfenster */
  /* background: #e9e9e9; border:1px solid #aaaaaa; margin: auto; ppadding: 30px 20px; border-radius: 5px; height:100%; width:80%; */
  margin: auto; height:100%; 
  }
  .MusicTitel {display:inline-block !important; color:#aaaaff; text-shadow: 0 0 0.05em #aaaaaa, 0 0 0.1em #222222; border:1px solid #cccccc; padding:10px 10px; border-radius: 5px; background:#222275; margin-bottom:5px; margin-top:5px; font-size:25px; font-weight:bold; }
  .Music h3 {background:#222275; color:#ffffff; background: linear-gradient(0deg, #222275 0%, #6c3cce 50%, #222275 100%) !important; text-align:center;}
 
  .MyMusic {display: inline-block; background:#cccccc; min-width:370px; width:auto; height:auto; padding:20px 20px 10px 20px; margin:20px; overflow:hidden; text-align:left; ccursor:pointer; border-radius:5px; filter: drop-shadow(-0.1em -0.1em 0.1em rgba(255, 255, 255,1)) drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,1)) drop-shadow(0 0 0.5em rgba(100, 100, 100,.5));  }
  .MyMusic:hover {background:#aaaaaa;}
  .MyMusic img {display:flex; object-fit: contain; object-position: center top; max-width:100%; margin:auto;}
  .MyMusic h3 {font-size: 14px; border-radius: 5px; padding: 5px 10px !important; margin-bottom:10px; border: 1px solid #aaaaaa; cursor:pointer;}
  .MusicNr {display:none; position:absolute; padding:0px 8px; border-radius:50%; left:5px; top:5px;}
 
  #breadcrumbs {display:none;}
 
  /*** Mobil ***/
  .mobileview .MyMusic {min-width:300px; height:auto; padding:10px; margin:5px; }
  .mobileview .Music {background: none; border:none; margin: 0; padding:0; height:100%; width:100%;}
  .mobileview .rde-player-main-controls .rde-btn:hover:before {content: ''; background: none;}
 
   /* Radio Auswahl */
  .SlideMusic {text-align: center;}
  .SlideMusic .PrevMusic img, .SlideMusic .NextMusic img {display:none; position: absolute; height:30px; width:17px; background-color: #000000;  z-index:9999; top: calc( 50% - 15px);   transition: all 0.3s linear; box-shadow: 2px 2px 4px 0px #333333;}
  .SlideMusic .PrevMusic img:hover,  .SlideMusic .NextMusic img:hover  {box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); width:20px}
  .SlideMusic .PrevMusic img {width:18px}
  .SlideMusic:hover .PrevMusic img,  .SlideMusic:hover .NextMusic img  {display:block;}
  .SlideMusic .NextMusic,  .SlideMusic .NextMusic img {right:0; mmargin:auto 0;}
  .SlideMusic .PrevMusic,  .SlideMusic .PrevMusic img {left: 0; mmargin:auto 0;}
  .SlideMusic .PrevMusic,  .SlideMusic .NextMusic {position: absolute; top:0; width: 25px; height:100%; cursor: pointer;}
  
  .MyMusicCon {height: 0; opacity:0; visibility: hidden; }
  .ActiveMusikSlide, .MusikSlidesAll {height:auto;  opacity:1; visibility: visible; padding:5px; }
  .RadioAll {display: inline; background: #eeeeee; padding: 3px 10px; text-align:center; font: bold 16px Arial, sans-serif !important; margin: 5px 190px; border-radius: 4px; border:1px solid #aaaaaa; cursor:pointer;  transition: all 0.3s linear; box-shadow: 2px 2px 4px 0px #333333;}
  .RadioAll:hover { background: #ffffff; box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05);}
  .MusicBack {background: #eeeeee; border-radius: 4px; padding: 2px 10px; margin:10px 10px 40px 10px !important;}
 </style>
 
<center> 
<div class="MusicTitel">Music On Top</div><br>
<div class="Music">
 
<!-- ### 1. Fenster - Anfang ### -->
<div class="MyMusic"><div class="MusicNr">1</div>
 
<h3>Radio BOB</h3>
 
 <div class="SlideMusic"> 
   <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radiobob" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
   </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radiobobrockhits" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radiobobkuschelrock" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radiobob90er" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radiobob80er" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="antennemvliebe" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
 
  <p class="PrevMusic"><img src="https://files.homepagemodules.de/b2001010/a_133.png"></p>
  <p class="NextMusic"><img src="https://files.homepagemodules.de/b2001010/a_132.png"></p>
  <div class="button RadioAll">Alle</div>
</div>
 
</div>    
<!-- ### 1. Fenster - Ende ### -->
 
<!-- ### 2. Fenster - Anfang ### -->
<div class="MyMusic"><div class="MusicNr">2</div>
 
<h3>Oldies</h3>
 
 <div class="SlideMusic"> 
   <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="antenneoldies" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
   </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="lautfm-oldoldies" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="hamburgzwei" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="radioarabellagoldenoldies" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="cool-oldies" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
   <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="lautfm-radio1920" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
   </div>
 
  <p class="PrevMusic"><img src="https://files.homepagemodules.de/b2001010/a_133.png"></p>
  <p class="NextMusic"><img src="https://files.homepagemodules.de/b2001010/a_132.png"></p>
  <div class="button RadioAll">Alle</div>
</div>
 
</div>    
<!-- ### 2. Fenster - Ende ### -->
 
<!-- ### 3. Fenster - Anfang ### -->
<div class="MyMusic"><div class="MusicNr">3</div>
 
<h3>Blues, Jazz & Swing</h3>
 
 <div class="SlideMusic"> 
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="jazzradio-blues" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="jazzradioblack" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="lautfm-bluesrockcafe" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>
  </div>
  <div class="MyMusicCon">    
      <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="swingfm" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="penthouseradio" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="swingstreet" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
 
  <p class="PrevMusic"><img src="https://files.homepagemodules.de/b2001010/a_133.png"></p>
  <p class="NextMusic"><img src="https://files.homepagemodules.de/b2001010/a_132.png"></p>
  <div class="button RadioAll">Alle</div>
</div>
 
</div>    
<!-- ### 3. Fenster - Ende ### -->
 
<!-- ### 4. Fenster - Anfang ### -->
<div class="MyMusic"><div class="MusicNr">4</div>
 
<h3>Relax & Chillout</h3>
 
 <div class="SlideMusic"> 
  <div class="MyMusicCon">    
   <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="1fmchillout" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="loungefm" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="antennechillout" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div> 
  </div>
  <div class="MyMusicCon">    
      <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="rmclovesongs" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="rmcnightsstory" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>  
  </div>
  <div class="MyMusicCon">    
    <div class="ng-app-embedded"><div ui-view class="microsite embedded-radio-player" data-playerwidth="340px" data-playertype="web_embedded" data-playstation="dimensionerelax" data-autoplay="true" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div></div>
  </div>
 
  <p class="PrevMusic"><img src="https://files.homepagemodules.de/b2001010/a_133.png"></p>
  <p class="NextMusic"><img src="https://files.homepagemodules.de/b2001010/a_132.png"></p>
  <div class="button RadioAll">Alle</div>
</div>
 
</div>   
<!-- ### 4. Fenster - Ende ### -->
 
</div>
 
<span class="MusicBack"><a href="https://www.radio.de/privacy-policy">Datenschutzerklärung von <i>radio.de</i></a></span>
</center>
 
<script>
$('.MyMusic').each(function(){
// Radio Auswahlmenü
  let linkmusic = 0;
  $('.RadioAll',this).on("click",function(){
    if(linkmusic === 0){ 
        $(this).closest('.SlideMusic').css({'display': 'inline-flex','flex-wrap': 'wrap','justify-content':'center','align-items':'center'});
        $(this).closest('.SlideMusic').find('p').hide();
        $(this).closest('.SlideMusic').find('.MyMusicCon').addClass('MusikSlidesAll');
        $(this).closest('.SlideMusic').find('.RadioAll').html('Schließen');
        $(this).closest('.MyMusic').css({'display':'table','border-collapse':'separate','background':'#555555'});
 
        linkmusic = 1;
     } else{
        $(this).closest('.SlideMusic').find('.MyMusicCon').removeClass('MusikSlidesAll');
        $(this).closest('.SlideMusic').attr('style','').find('p').show();
        $(this).closest('.SlideMusic').find('.RadioAll').html('Alle');
        $(this).closest('.MyMusic').css({'display':'inline-block','background':'#cccccc'});
 
        linkmusic = 0;
     } 
   });
 
   // Hover Fensternummer
   $('h3',this).hover(function () {
     $(this).prev().attr('style','display:inline-block; background:#00f700;border:1px solid #aaaaaa;');
   }, function () {
     $(this).prev().attr('style','');
  });
});
</script>
 
<script>
  // Slide-Funktion
  init();
  function init() {
    parents = document.getElementsByClassName('SlideMusic');
 
    for (j = 0; j < parents.length; j++) {
      var slides = parents[j].getElementsByClassName('MyMusicCon');
      slides[0].classList.add('ActiveMusikSlide');
    }
  }
 
  links = document.querySelectorAll('.SlideMusic p');
  for (i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      current = this.parentNode;
      var slides = current.getElementsByClassName('MyMusicCon');
 
      curr_slide = current.getElementsByClassName('ActiveMusikSlide')[0];
      curr_slide.classList.remove('ActiveMusikSlide');
	
      if (this.className == 'NextMusic') {
        if (curr_slide.nextElementSibling.classList.contains('MyMusicCon')) {
          curr_slide.nextElementSibling.classList.add('ActiveMusikSlide');
        } else {
          slides[0].classList.add('ActiveMusikSlide');
        }
      }
 
      if (this.className == 'PrevMusic') {
        if (curr_slide.previousElementSibling) {
          curr_slide.previousElementSibling.classList.add('ActiveMusikSlide');
        } else {
          slides[slides.length - 1].classList.add('ActiveMusikSlide');
        }
      }
    }
  }
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Das Skript in Funktion:

Online Radio mit Kategorienauswahl

Weitere Links:

Bis dann
Wolfgang

Kipper-Spedition findet das Top!

Antworten

Hallo Wolfgang, hier mal ein Geschenk für Dich - Animierter Würfel � � Xobor Adventskalender & Osterkalender mit Auslösegrafik für alle Templates

Seite 2 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Radio Button fehlen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 1 03.02.2024 01:06
Anne • Zugriffe: 152
Radio Player einbauen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von charlie1965 2 28.08.2023 10:41
Kipper-Spedition • Zugriffe: 367
Online seit
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 7 18.10.2022 14:56
Nara • Zugriffe: 746
"Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 22.04.2024 22:49
Anne • Zugriffe: 2614

RIOT: Gutes Bild-Optimierungstool für Webseiten
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

07.09.2012 21:49
von

Wolfgang • Zugriffe: 1359

Online-Tools für mehr Informationen und Internet-Sicherheit
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 04.03.2012 13:01
Wolfgang • Zugriffe: 1223
Grusskarten, Desktopmotive, Fotogalerie.... alles online!
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 1 05.06.2012 16:56
Wolfgang • Zugriffe: 1671
Sparen und Qualität! Preise einfach Online vergleichen!!!
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 10.03.2007 11:47
Wolfgang • Zugriffe: 2244
Wissenswertes im Online-Computerlexikon, auch Begriffe aus der Linux Welt
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 02.03.2007 16:34
Wolfgang • Zugriffe: 1622

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 €

58%

Forum - RE: Online Radio für die Homepage! - Auswahlmenü mit Mouseover-Effekt! - 2

Aktualisiert! - Online Radio für die Homepage!

Online Radio für die Homepage! - Einfach mit "radio.de"