Forum - Super Kategorienauswahl für das Smiley-Menü

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) � Super Kategorienauswahl für das Smiley-Menü - Version 1-3

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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

#1 | Super Kategorienauswahl für das Smiley-Menü - Version 1-3 datum

17.03.2019 11:14 (zuletzt bearbeitet: 23.12.2021 23:24)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Einfache und flinke Kategorienauswahl für das Smiley-Menü - Version 1
Aktualisiert 16.10.21

Möchte man viele Smileys zur Verfügung stellen, ist es ratsam sie zu ordnen oder sie zu kategorisieren!
Hierdurch werden die Smiley übersichtlicher dargestellt und gehen nicht in einem großen Durcheinander unter!

Eine Kategorienauswahl ist im Support schon vorgeschlagen worden, aber hierzu gibt es die unterschiedlichsten Vorstellungen!
Kein Wunder, denn es kommt immer auf den eigenen Geschmack und auf die Art des Forums an!

Was kann das nachfolgende Skript:

Mit dem folgen Skript ist es möglich die vorhandenen Smiley-Gruppen in einem Menü unterzubringen,
hierzu muss man sich allerdings die ID's heraussuchen!
Neu! Es ist auch möglich mehrere Menü mit beliebigen Smiley-Gruppen einzusetzen!
In den Templates (v1-4) sind die Smiley-Gruppen mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!
Neu! Funktioniert auch im Xobor (v6) mit dem hauseigenen Klick!
Das Auswahl-Menü ist frei verschiebbar und mit unterschiedlichen Optionen ausgestattet!

Installation für alle Templates & Mobil

In dem folgenden Skript müssen die "ID's" der Smiley-Gruppen dem eigenen Forum angepasst werden!
Über die "Rechte Maustaste" und "Element untersuchen" können die "ID's" ausfindig gemacht werden!
Das Skript für die Templates (1-4) und Mobil können zusammen in der Iconbar installiert werden, ohne sich zu stören!

Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!

Das Smiley-Menü kann komplett in der Iconbar untergebracht werden!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 1" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!
Sollen die Menüs gedoppelt oder vervielfacht werden, braucht nur die Zeilen zwischen "" und "" vervielfacht werden!

Wichtig:

In Zeile 64 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')").
Die ID's werden in Zeile 42-45 und 64 eingetragen!
Ist Xobor-Superklick installiert, wird es in der linken Leiste ganz nach unten geschoben.
Alle Gruppen oberhalb vom "Xobor-Superklick" sind Klick-Gruppen, alle unterhalb sind Mouseover-Gruppen!

Beschreibung:

In Zeile 38 wird das Smiley für das Auswahl-Menü angepasst!
Für Zeile 43-46 und 64 werden nur die Nummern der Gruppen-ID's eingetragen!
In Zeile 43-46 werden die Namen für die Kategorien geändert!
In Zeile 64 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "bottom" und "margin-left" korrigiert werden!

Option 1: Möchte man, dass das Auswahl-Menü manuell geschlossen wird, muss in Zeile 71 die Class "smiley_kat_click_group_1" gelöscht werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 37-53 gedoppelt und untereinander geschrieben werden! In Zeile 64 kommen alle ID's der verwendeten Smiley-Gruppen!

Das komplette Skript:

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
 
<style>
.smiley_move_1 {
  bottom:50px; 
  margin-left:-200px !important; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_click_1 { 
  width:220px;
  background:#ffffff;
  font-size:13px; 
  color:#000000;
  border:1px solid #000000; 
  border-radius:6px 6px 2px 2px; 
  padding:12px 8px 8px 8px !important; 
  cursor:move !important;
}
.smiley_kat_click_group_1 div {
  cursor:pointer;
  margin-bottom:9px;
  clear:both;
}
.smiley_kat_close_1 {
  font-weight:bold; 
  padding:3px 7px 3px 10px !important; 
  letter-spacing: 1px;
  cursor:pointer;
}
form .xob_subiconlist {
  background:#ffffff;
  min-width:160px; 
  z-index:999999; 
  border-radius:6px 6px 2px 2px;
}
</style>
 
<!-- Smiley-Menü Anfang -->
<div class="xob_icon_cont icon_menue_click_1"><img src="//img.homepagemodules.de/grin.gif" title="Große Smiley-Auswahl, bitte anklicken!" class="xob_icon">
<div class="smiley_move_1" style="display:none;"><div class="smiley_kat_click_1">
 
<div class="smiley_kat_click_group_1">
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)"><img src="//img.homepagemodules.de/grin.gif"> Neue Xobor-Smileys</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)"><img src="//img.homepagemodules.de/grin.gif"> Gemischte Smileys</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)"><img src="//img.homepagemodules.de/grin.gif"> Große Smileys</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)"><img src="//img.homepagemodules.de/grin.gif"> Schilder-Smileys</div>
</div>
<hr>
<div class="smiley_kat_close_1">Menü schließen!</div>
 
</div>
</div>
</div>
<!-- Smiley-Menü Ende -->
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
window.addEventListener('load', function(){
 
if ($('#usermodal').length ){
  $('.icon_menue_click_1').css('display','none');
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$(' #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000 ').css({'visibility':'hidden','position':'absolute'}); 
 
$('.icon_menue_click_1').click(function(){
  $('.smiley_move_1').hide();
  $('.smiley_move_1',this).show();
});
 
$('.smiley_kat_close_1, .smiley_kat_click_group_1 div').click(function(){
  $(this).closest('.smiley_move_1').hide(500);
});
 
$('.smiley_move_1').draggable({containment: "body"});
});
</script>
 

Schlie�en

Auswahl-Menü verschieben:

Möchte man das Auswahlmenü verschieben können, wird das folgende jQueryUI einfach nach "" kopiert!

1
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Installation:
Im Xobor Template (v6) werden die Smiley-Gruppen bereits mit einem "Klick" geöffnet, hier wird der Xobor-Superklick nicht benötigt!

Das Smiley-Menü kann zusätzlich in der Iconbar untergebracht werden, ohne andere Skripte zu stören!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 1 V6" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!

Wichtig:

In Zeile 57 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')").
Die ID's werden in Zeile 37-40 und 57 eingetragen!

Beschreibung:

In Zeile 33 wird das Smiley für das Auswahl-Menü angepasst!
Für Zeile 37-40 und 57 werden nur die Nummern der Gruppen-ID's herausgesucht und eingetragen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')")
In Zeile 37-40 werden die Namen für die Kategorien geändert!
In Zeile 57 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "bottom" und "margin-left" korrigiert werden!

Option 1: Möchte man, dass das Auswahl-Menü automatisch geschlossen wird, muss Zeile 70 freigegeben werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 32-47 gedoppelt werden. In Zeile 57 werden alle ID's der Smiley-Gruppen eingetragen, die im Menü verwendet werden und ausgeblendet werden sollen!

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
 
<style>
.smiley_move_16 {
  margin-top:50px; 
  right:30px; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_click_16 { 
  width:200px;
  background:#ffffff;
  font-size:13px; 
  color:#000000;
  border:1px solid #000000; 
  border-radius:6px 6px 2px 2px; 
  padding:12px 8px 8px 8px; 
  cursor:move !important;
}
.smiley_kat_click_group_16 div {
  display:inline;
  cursor:pointer;
  margin:9px;
}
.smiley_kat_close_16 {
  font-weight:bold; 
  padding:3px 7px 3px 10px;
  letter-spacing: 1px;
  cursor:pointer;
  display:inline;
}
</style>
 
<!-- Smiley-Gruppen Anfang) -->
<div class="xob_icon_cont icon_menue_click_16"><img src="//img.homepagemodules.de/grin.gif" title="Große Smilie-Auswahl, bitte anklicken!" class="xob_icon">
<div class="smiley_move_16" style="display:none;"><div class="smiley_kat_click_16">
 
<div class="smiley_kat_click_group_16">
  <div onclick="$('.modal').hide(300); $('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');"><img src="//img.homepagemodules.de/grin.gif"> Neue Smileys</div><br>
  <div onclick="$('.modal').hide(300); $('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');"><img src="//img.homepagemodules.de/grin.gif"> Gemischte Smileys</div><br>
  <div onclick="$('.modal').hide(300); $('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');"><img src="//img.homepagemodules.de/grin.gif"> Große Smileys</div><br>
  <div onclick="$('.modal').hide(300); $('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_000000');"><img src="//img.homepagemodules.de/grin.gif"> Schilder Smileys</div><br>
</div>
<hr style="margin:6px 0;">
<div class="smiley_kat_close_16">Menü schließen!</div>
</div>
</div>
</div>
<!-- Smiley-Gruppen Ende) -->
 
<script>
window.addEventListener('load', function(){
 
if (!$('#usermodal').length){
  $('.icon_menue_click_16').hide();
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$('#xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000').closest('.hassub').hide();
 
$('.icon_menue_click_16').on('click', function() {
  $('.smiley_move_16').hide();
  $('.smiley_move_16',this).show();
});
 
$('.smiley_kat_close_16').on('click', function() {
  $('.modal-backdrop.show').css('opacity','0');
  $('.smiley_move_16, .show').hide(300);
}); 
 
$('.smiley_kat_click_group_16 div').on('click', function() {
  /* $('.smiley_move_16').hide(300); */
}); 
 
$('.smiley_move_16').draggable({containment: "body"});
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Weitere interessante Links zur Iconbar:

  • Meine komplette Forum-Iconbar zum herunterladen
  • Beiträge nur für Mitglieder in der neuen Iconbar
  • Versteckte Kommentare in Forum-Beiträgen nutzen!
  • Smileys in der Schnellantwort
  • Glow - Leuchtender Text mit CSS3 "text-shadow"
  • Kleine Bildergalerie in der Iconbar
  • Kopiersperre / Markierungssperre / Eigenes Kontextmenü
  • Iconbar fixieren - gut für lange Beiträge
  • Xobor Superklick
  • Suche "Iconbar"

Wichtig:

In der Grundausstattung sind die Smiley-Gruppen in den Templates (v1-4) mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!
Im neuen Xobor Template (v6) werden die Smiley-Gruppen bereits von Haus aus mit einem Klick geöffnet!

Bis dann und viel Erfolg beim Nachbauen!

Wolfgang

Nara findet das Top!

Antworten

#2 | Kategorienauswahl mit Sub-Menü - Version 2 datum

18.03.2019 13:09 (zuletzt bearbeitet: 16.10.2021 10:50)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Kategorienauswahl mit Sub-Menü - Version 2
Aktualisiert 16.10.21

Hallo Gabi,
hat man viele Smiley-Gruppen mit verschiedenen Themen, leistet ein Sub-Menü beste Dienste!
So wie es aussieht ist es sinnvoll ein Sub-Menü mit den Hauptkategorien Jahreszeiten und Feiertagen einzurichten!
Habe eine Lösung gefunden, sodass Du noch Untermenüs anlegen kannst. Auch hier muss nach ID's gesucht und angepasst werden!

Was kann das nachfolgende Skript:

Neu! Es ist jetzt möglich mehrere Sub-Menü mit beliebigen Smiley-Gruppen einzusetzen!
Hierzu muss man sich auch die ID's heraussuchen!
Das Smiley-Menü klappt nach oben auf, damit die Smiley-Gruppen, wie gewohnt nach unten aufklappen können und nicht stören!
Die Untermenüs öffnen sich per "Mouseover"!
In der Grundausstattung sind die Smiley-Gruppen mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte "Xobor-Superklick" installieren!
Das Auswahl-Menü ist frei verschiebbar und mit unterschiedlichen Optionen ausgestattet!!
Neu! Funktioniert auch im Xobor (v6) mit dem hauseigenen Klick!

Installation für alle Templates & Mobil

In dem folgenden Skript müssen auch hier die "ID's" der Smiley-Gruppen dem eigenen Forum angepasst werden!
Über die "Rechte Maustaste" und "Element untersuchen" können die "ID's" ausfindig gemacht werden!
Das Skript für die Templates (1-4) und Mobil können zusammen in der Iconbar installiert werden, ohne sich zu stören!

Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!

Das Smiley-Menü kann komplett in der Iconbar untergebracht werden!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 2" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!
Sollen die Menüs gedoppelt oder vervielfacht werden, braucht nur die Zeilen zwischen "" und "" vervielfacht werden!

Wichtig! In Zeile 93 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
Die ID's werden in Zeile 61-64, 70-73 und 93 eingetragen!

Beschreibung:

In Zeile 55 wird das Smiley für das Auswahl-Menü angepasst, in Zeile 59 + 68 für die Kategorien!
Für Zeile 61-64, 70-73 und 93 werden nur die Nummern der Gruppen-ID's herausgesucht und eingetragen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')")
In Zeile 61-64 und 70-73 werden die Namen für die Kategorien geändert!
In Zeile 93 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "bottom" und "margin-left" korrigiert werden!

Option 1: Möchte man dass nach dem Aufrufen einer Smiley-Gruppe sich das Auswahl-Menü nicht automatisch schließt, müssen Zeile 112-114 gesperrt oder gelöscht werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 55-82 gedoppelt und untereinander geschrieben werden! In Zeile 93 kommen alle ID's der verwendeten Smiley-Gruppen!

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
 
<style>
.smiley_move_2 {
  bottom:50px; 
  margin-left:-200px !important; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_2 { 
  width:200px; 
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  border:1px solid #000000; 
  border-radius:6px 6px 2px 2px; 
  padding:5px 15px 5px 0 !important; 
  cursor:move;
}
.smiley_kat_cont_2 {
  width:200px;
  margin-left: -220px !important;
  padding: 5px !important;
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  line-height:26px; 
  border:1px solid #000000; 
  border-radius: 6px 0 0 0;
  position:absolute;
  top:0; display:none; 
  z-index:999999; 
  cursor:default;  
}
.smiley_kat_group_2 {
  padding-left:10px !important;
  padding-bottom:5px !important;
  cursor:pointer;
}
.smiley_kat_close_2 {
  font-weight:bold; 
  padding:5px 7px 5px 15px !important; 
  letter-spacing: 1px;
  cursor:pointer;
}
.click_group_2 {
  line-height:26px !important; 
  padding:0 5px !important; 
  cursor:pointer;
}
.xob_subiconlist {
  background:#ffffff; 
  min-width:160px; 
  z-index:999999;}
</style>
 
<!-- Smiley-Menü Anfang -->
<div class="xob_icon_cont icon_menue_click_2"><img src="//img.homepagemodules.de/grin.gif" title="Große Smilie-Auswahl, bitte anklicken!" class="xob_icon"> 
<div class="smiley_move_2"  style="display:none;"><div class="smiley_kat_2">
 
<div class="smiley_kat_group_2"><img src="//img.homepagemodules.de/grin.gif"> Gemischte Smileys 1 ->
<div class="smiley_kat_cont_2">
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 1</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 2</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 3</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 4</div>
</div>
</div>
 
<div class="smiley_kat_group_2"><img src="//img.homepagemodules.de/grin.gif"> Gemischte Smileys 2 ->
<div class="smiley_kat_cont_2">
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 5</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 6</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 7</div>
  <div onclick="$('.xob_subiconlist').hide(300); showSub(00000)" class="click_group_2"><img src="//img.homepagemodules.de/grin.gif"> Smiley-Groupe 8</div>
</div>
</div>
 
<hr>
<div class="smiley_kat_close_2">Menü schließen</div>
</div>
</div>
</div>
<!-- Smiley-Menü Ende --> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
window.addEventListener('load', function(){
 
if ($('#usermodal').length ){
  $('.icon_menue_click_2').css('display','none');
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$(' #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000').css({'visibility':'hidden','position':'absolute'});  
 
$('.icon_menue_click_2').click(function(){
  $('.smiley_move_2').hide();
  $('.smiley_move_2',this).show();
});
 
$('.smiley_kat_close_2').click(function(){
  $('.smiley_move_2, .xob_subiconlist').hide(500);
}); 
 
$('.smiley_kat_group_2').hover(function(){
  $(this).children().show();
  $('.smiley_kat_2').css('border-radius','0 6px 0 0');
},function(){
  $('.click_group_2',this).parent().hide();
  $('.smiley_kat_2').css('border-radius','6px 6px 0 0');
});
 
$('.click_group_2').click(function(){
  $(this).closest('.smiley_move_2').hide(500);
});
 
$('.smiley_move_2').draggable({containment: "body"});
});
</script>
 

Schlie�en

Auswahl-Menü verschieben:

Möchte man das Auswahlmenü verschieben können, wird das folgende jQueryUI einfach nach "" kopiert!

1
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Installation:
Im Xobor Template (v6) werden die Smiley-Gruppen bereits mit einem "Klick" geöffnet, hier wird der Xobor-Superklick nicht benötigt!

Das Smiley-Menü kann zusätzlich in der Iconbar untergebracht werden, ohne andere Skripte zu stören!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 2 V6" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!
Sollen die Menüs gedoppelt oder vervielfacht werden, braucht nur die Zeilen zwischen "" und "" vervielfacht werden!

Wichtig:

In Zeile 89 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')").
Die ID's werden in Zeile 58-61, 67-70 und 89 eingetragen!

Beschreibung:

In Zeile 33 wird das Smiley für das Auswahl-Menü angepasst!
Für Zeile 58-61, 67-70 und 89 werden nur die Nummern der Gruppen-ID's herausgesucht und eingetragen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')")
In Zeile 58-61 und 67-70 werden die Namen für die Kategorien geändert!
In Zeile 89 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "margin-top" und "margin-left" korrigiert werden!

Option 1: Möchte man dass nach dem Aufrufen einer Smiley-Gruppe sich das Auswahl-Menü nicht automatisch schließt, müssen Zeile 109-111 gesperrt oder gelöscht werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 52-79 gedoppelt und untereinander geschrieben werden! In Zeile 89 kommen alle ID's der verwendeten Smiley-Gruppen!

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
 
<style>
.smiley_move_26 {
  margin-top:50px; 
  margin-left:-200px; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_26 { 
  width:200px; 
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  border:1px solid #000000; 
  border-radius:6px 6px 2px 2px; 
  padding:5px 15px 5px 0; 
  cursor:move;
}
.smiley_kat_cont_26 {
  width:160px;
  margin-left: -170px !important; 
  padding: 5px !important;
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  line-height:26px; 
  border:1px solid #000000; 
  border-radius: 6px 0 0 0;
  position:absolute;
  top:0;
  display:none; 
  z-index:999999; 
  cursor:default;  
}
.smiley_kat_group_26 {
  padding-left:10px !important;
  padding-bottom:5px !important;
  cursor:pointer;
}
.smiley_kat_close_26 {
  font-weight:bold; 
  padding:5px 7px 5px 15px; 
  letter-spacing: 1px;
  cursor:pointer;
}
.click_group_26 {
  line-height:26px !important; 
  padding:0 5px !important; 
  cursor:pointer;
}
</style>
 
<!-- Smiley-Menü Anfang -->
<div class="xob_icon_cont icon_menue_click_26"><img src="//img.homepagemodules.de/grin.gif" title="Große Smilie-Auswahl, bitte anklicken!" class="xob_icon">
<div class="smiley_move_26" style="display:none;"><div class="smiley_kat_26">
 
<div class="smiley_kat_group_26"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> 1. Hauptkategorie ->
<div class="smiley_kat_cont_26">
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 1. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 2. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 3. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 4. Gruppe</div>
</div>
</div>
 
<div class="smiley_kat_group_26"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> 2. Hauptkategorie ->
<div class="smiley_kat_cont_26">
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 5. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 6. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 7. Gruppe</div>
  <div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_26"><img src="//img.homepagemodules.de/grin.gif"> 8. Gruppe</div>
</div>
</div>
 
<hr style="margin:6px 0;">
<div class="smiley_kat_close_26">Menü schließen</div>
</div>
</div>
</div>
<!-- Smiley-Menü Ende -->
 
<script>
window.addEventListener('load', function(){
 
if (!$('#usermodal').length){
  $('.icon_menue_click_26').hide();
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$('#xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000').closest('.hassub').hide();
 
$('.icon_menue_click_26').on('click', function() {
  $('.smiley_move_26').hide();
  $('.smiley_move_26',this).show();
});
 
$('.smiley_kat_group_26').hover(function(){
  $(this).children().show();
  $('.smiley_kat_26').css('border-radius','0 6px 0 0');
},function(){
  $('.click_group_26',this).parent().hide();
  $('.smiley_kat_26').css('border-radius','6px 6px 0 0');
});
 
$('.smiley_kat_close_26').on('click', function() {
  $('.modal-backdrop.show').css('opacity','0');
  $('.smiley_move_26, .show').hide(300);
}); 
 
$('.click_group_26').on('click', function() {
  $('.smiley_move_26').hide(300);
}); 
 
$('.smiley_move_26').draggable({containment: "body"});
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Wichtig:

In der Grundausstattung sind die Smiley-Gruppen in den Templates (v1-4) mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!
Im neuen Xobor Template (v6) werden die Smiley-Gruppen bereits von Haus aus mit einem Klick geöffnet!

Bis dann und viel Erfolg beim Nachbauen!
Und besten Dank an Dich Gabriella, für Deine inspirierende Idee!

Wolfgang

Antworten

#3 | Gemischte Kategorienauswahl mit Sub-Menü und normaler Kategorienauswahl! - Version 3 datum

19.03.2019 17:57 (zuletzt bearbeitet: 16.10.2021 11:01)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Gemischte Kategorienauswahl mit Sub-Menü und normaler Kategorienauswahl! - Version 3
Aktualisiert 16.10.21

Zitat
Hallo Wolfgang,
ich wollte das grade in meinem Forum:https://www.gabistraumschloss.com/ versuchen.......

Lieber Gruss aus der Schweiz
Gabi

Hallo Gabi,
es hat sich gezeigt, dass Du Dir eine gemischte Kategorienauswahl vorstellst, also mit Sub-Menü und einer normalen Kategorienauswahl!
Die Idee ist zwar ziemlich speziell, aber genial!
Allerdings musst Du sie noch füllen, dass natürlich ganz schön viel Arbeit macht!

Folgende Funktionen sind mit dem folgenden Skript möglich:

Neu! Es ist jetzt möglich die gemischte Kategorienauswahl mit Sub-Menü zu vervielfachen!
Hierzu muss man sich auch die ID's heraussuchen!
Die Untermenüs öffnen sich per "Mouseover"!
In der Grundausstattung sind die Smiley-Gruppen mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte "Xobor-Superklick" installieren!
Das Auswahl-Menü ist frei verschiebbar und mit unterschiedlichen Optionen ausgestattet!!
Neu! Funktioniert auch im Xobor (v6) mit dem hauseigenen Klick!

Installation für alle Templates & Mobil

Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!

Das Smiley-Menü kann komplett in der Iconbar untergebracht werden!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 3" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!
Sollen die Menüs gedoppelt oder vervielfacht werden, braucht nur die Zeilen zwischen "" und "" vervielfacht werden!

Wichtig! In Zeile 106 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
Die ID's werden in Zeile 67-70, 76-80, 84-86 und 106 eingetragen!

Beschreibung:

In Zeile 62 wird das Smiley für das Auswahl-Menü angepasst, in Zeile 65 + 74 für die Haupt-Kategorien!
In Zeile 64-67, 73-77 und 81-83 für die Smiley-Gruppen
Für Zeile 67-70, 76-80, 84-86 und 106 werden nur die Nummern der Gruppen-ID's herausgesucht und eingetragen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')")
In Zeile 67-70, 76-80 und 84-86 werden auch die Namen für die Smiley-Gruppen vergeben!
In Zeile 65 und 74 werden auch die Namen für die Haupt-Kategorien vergeben!
In Zeile 106 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "bottom" und "margin-left" korrigiert werden!

Option 1: Möchte man dass nach dem Aufrufen einer Smiley-Gruppe sich das Auswahl-Menü nicht automatisch schließt, müssen Zeile 125-127 gesperrt oder gelöscht werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 61-95 gedoppelt und untereinander geschrieben werden! In Zeile 106 kommen alle ID's der verwendeten Smiley-Gruppen!

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
 
<style>
.smiley_move_3 {
  bottom:50px; 
  margin-left:-200px !important; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_cont_3 {
  width:200px;
  margin-left: -215px !important;
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  padding: 5px !important;
  line-height:26px; 
  border:1px solid #000000; 
  border-radius: 6px 0 0 0;
  position:absolute;
  top:0; 
  display:none; 
  z-index:999999; 
  cursor:default; 
}
.smiley_kat_3 {
  width:200px;
  background:#ffffff;
  font-size:12px; 
  color:#000000;
  padding:5px 15px 5px 5px !important; 
  border:1px solid #000000; 
  z-index:999999; 
  cursor:move;
}
.smiley_kat_close_3 {
  font-weight:bold; 
  padding:5px 7px 5px 15px !important; 
  letter-spacing: 1px;
  cursor:pointer;
}
.click_group_3,.click_group_4  {
  clear:both;
  line-height:26px; 
  padding:0 5px !important; 
  cursor:pointer;
}
.click_group_4  {
  padding:0 8px !important;
}
.smiley_kat_group_3 {
  clear:both;
  cursor:pointer;
}
 
form .xob_subiconlist {
  background:#ffffff; 
  min-width:160px; 
  z-index:999999;
}
</style>
 
<!-- Smiley-Menü Anfang -->
<div class="xob_icon_cont icon_menue_click_3"><img class="xob_icon" src="//img.homepagemodules.de/grin.gif">
<div class="smiley_move_3" style="display:none;"><div class="smiley_kat_3">
 
<div class="smiley_kat_group_3"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> Jahreszeiten -&gt;
<div class="smiley_kat_cont_3">
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Frühling</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Sommer</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Herbst</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Winter</div>
</div>
</div>
 
<div class="smiley_kat_group_3"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> Festtage -&gt;
<div class="smiley_kat_cont_3">
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Ostern</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Pfingsten</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Weihnachten</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Neujahr</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_3"><img src="//img.homepagemodules.de/grin.gif"> Geburtstage</div><br>
</div>
</div>
 
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_4"><img src="//img.homepagemodules.de/grin.gif"> Kleine Smileys</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_4"><img src="//img.homepagemodules.de/grin.gif"> Große Smileys</div><br>
<div onclick="$('.xob_subiconlist').hide(300); showSub('00000')" class="click_group_4"><img src="//img.homepagemodules.de/grin.gif"> Schilder-Smileys</div>
<div style="clear:both;height:5px;"></div>
 
<hr>
<div class="smiley_kat_close_3">Menü schließen</div>
 
</div>
</div>
</div>
<!-- Smiley-Menü Ende -->
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script language="JavaScript">
window.addEventListener('load', function(){
 
if ($('#usermodal').length ){
  $('.icon_menue_click_3').css('display','none');
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$(' #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000').css({'visibility':'hidden','position':'absolute'}); 
 
$('.icon_menue_click_3').click(function(){
  $('.smiley_move_3').hide();
  $('.smiley_move_3',this).show();
});
 
$('.smiley_kat_close_3').click(function(){
  $('.smiley_move_3, .xob_subiconlist').hide(500);
}); 
 
$('.smiley_kat_group_3').hover(function(){
  $(this).children().show();
  $('.smiley_kat_3').css('border-radius','0 6px 0 0');
},function(){
  $('.click_group_3',this).parent().hide();
  $('.smiley_kat_3').css('border-radius','6px 6px 0 0');
});
 
$('.click_group_3').click(function(){
  $(this).closest('.smiley_move_3').hide(500);
});
 
$('.smiley_move_3').draggable({containment: "body"});
});
</script>
 

Schlie�en

Auswahl-Menü verschieben:

Möchte man das Auswahlmenü verschieben können, wird das folgende jQueryUI einfach nach "" kopiert!

1
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Installation:
Im Xobor Template (v6) werden die Smiley-Gruppen bereits mit einem "Klick" geöffnet, hier wird der Xobor-Superklick nicht benötigt!

Das Smiley-Menü kann komplett in der Iconbar untergebracht werden!
"HTML-Baustein" unter "HTML" anlegen!
Namen vergeben, z.B. "Klickmenü 3 V6" und unter "HTML:" das folgende Skript eintragen!
Speichern nicht vergessen!
Sollen die Menüs gedoppelt oder vervielfacht werden, braucht nur die Zeilen zwischen "" und "" vervielfacht werden!

Wichtig! In Zeile 102 werden die Smiley-Gruppen ausgeblendet!
Diese Zeile muss anfänglich auskommentiert (//), bzw. ausgeblendet werden, um die Gruppen-ID's ausfindig zu machen!
Die ID's werden in Zeile 64-67, 73-77, 81-83 und 102 eingetragen!

Beschreibung:

In Zeile 59 wird das Smiley für das Auswahl-Menü angepasst, in Zeile 62 + 71 für die Haupt-Kategorien!
In Zeile 64-67, 73-77 und 81-83 für die Smiley-Gruppen
Für Zeile 64-67, 73-77, 81-83 und 102 werden nur die Nummern der Gruppen-ID's herausgesucht und eingetragen!
(Rechte Maustaste > Untersuchen > "xob_icon_..." oder "xob_sub_..." oder "showSub('...')" oder "hideSub('..')")
In Zeile 64-67, 73-77 und 81-83 werden auch die Namen für die Smiley-Gruppen vergeben!
In Zeile 62 und 71 werden auch die Namen für die Haupt-Kategorien vergeben!
In Zeile 102 werden die Smiley-Gruppen ausgeblendet, die im Menü aufgerufen werden!
Wichtige Smiley-Gruppen, die immer präsent sein sollen, werden mit ihrer ID hier nicht eingetragen!
In Zeile 3+4 kann die Startposition des Auswahl-Menüs mit "margin-top" und "margin-left" korrigiert werden!

Option 1: Möchte man dass nach dem Aufrufen einer Smiley-Gruppe sich das Auswahl-Menü nicht automatisch schließt, müssen Zeile 122-124 gesperrt oder gelöscht werden!
Option 2: Benötigt man mehrere Auswahl-Menüs müssen die Zeile 58-91 gedoppelt und untereinander geschrieben werden! In Zeile 102 kommen alle ID's der verwendeten Smiley-Gruppen!

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
 
<style>
.smiley_move_36 {
  margin-top:50px; 
  margin-left:-200px; 
  z-index:999999; 
  position:absolute; 
}
.smiley_kat_36 {
  width:200px; 
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  border:1px solid #000000; 
  border-radius:6px 6px 2px 2px; 
  padding:5px 15px 5px 5px; 
  cursor:move !important;
}
.smiley_kat_cont_36 {
  width:160px;
  margin-left: -165px !important; 
  padding: 5px !important;
  background:#ffffff; 
  font-size:12px; 
  color:#000000; 
  line-height:26px; 
  border:1px solid #000000; 
  border-radius: 6px 0 0 0;
  position:absolute;
  top:0;
  display:none; 
  z-index:999999; 
  cursor:default;  
}
.smiley_kat_close_36 {
  display:inline-block;
  font-weight:bold; 
  padding:5px 7px 5px 15px; 
  letter-spacing: 1px;
  cursor:pointer;
}
.click_group_36, .click_group_46  {
  line-height:26px !important; 
  padding:0 5px !important; 
  cursor:pointer;
}
.click_group_46  {
  display:inline-block;
  padding:0 8px !important;
}
.smiley_kat_group_36 {
  padding:2px 5px !important;
}
.smiley_kat_group_36 span {
  cursor:pointer;
}
</style>
 
<!-- Smiley-Menü Anfang -->
<div class="xob_icon_cont icon_menue_click_36"><img class="xob_icon" src="//img.homepagemodules.de/grin.gif">
<div class="smiley_move_36" style="display:none;"><div class="smiley_kat_36">
 
<div class="smiley_kat_group_36"><span><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> Jahreszeiten -&gt;</span>
<div class="smiley_kat_cont_36">
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Frühling</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Sommer</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Herbst</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Winter</div>
</div>
</div>
 
<div class="smiley_kat_group_36"><span><img src="https://files.homepagemodules.de/b104774/bhnetfiles-jrax-1j-a684.png"> Festtage -&gt;</span>
<div class="smiley_kat_cont_36">
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Ostern</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Pfingsten</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Weihnachten</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Neujahr</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_36"><img src="//img.homepagemodules.de/grin.gif"> Geburtstage</div>
</div>
</div>
 
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_46"><img src="//img.homepagemodules.de/grin.gif"> Kleine Smileys</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_46"><img src="//img.homepagemodules.de/grin.gif"> Große Smileys</div>
<div onclick="$('.modal').hide(300);$('.modal-backdrop.show').css('opacity','0'); xobor.mbt.modal('#xob_sub_00000','Icon einfügen'); xobor.mbt.iconbar.loadIcons('#xob_sub_00000');" class="click_group_46"><img src="//img.homepagemodules.de/grin.gif"> Schilder-Smileys</div>
 
<hr style="margin:6px 0;">
<div class="smiley_kat_close_36">Menü schließen</div>
 
</div>
</div>
</div>
<!-- Smiley-Menü Ende -->
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
window.addEventListener('load', function(){
 
if (!$('#usermodal').length){
  $('.icon_menue_click_36').hide();
};
 
/* Um alle Gruppen zu sehen - auskommentieren (//)! */
$('#xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000, #xob_icon_00000').closest('.hassub').hide();
 
$('.icon_menue_click_36').on('click', function() {
  $('.smiley_move_36').hide();
  $('.smiley_move_36',this).show();
});
 
$('.smiley_kat_group_36').hover(function(){
  $(this).children().show();
  $('.smiley_kat_36').css('border-radius','0 6px 0 0');
},function(){
  $('.click_group_36',this).parent().hide();
  $('.smiley_kat_36').css('border-radius','6px 6px 0 0');
});
 
$('.smiley_kat_close_36').on('click', function() {
  $('.modal-backdrop.show').css('opacity','0');
  $('.smiley_move_36, .show').hide(300);
}); 
 
$('.click_group_36').on('click', function() {
  $('.smiley_move_36').hide(300);
}); 
 
$('.smiley_move_36').draggable({containment: "body"});
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Wichtig:

In der Grundausstattung sind die Smiley-Gruppen in den Templates (v1-4) mit Mouseover ausgestattet!
Möchte man die Smiley-Gruppen mit einem "Klick" öffnen und schließen, bitte Xobor-Superklick installieren!
Im neuen Xobor Template (v6) werden die Smiley-Gruppen bereits von Haus aus mit einem Klick geöffnet!

Bis dann und nochmal besten Dank für Dein Feedback!

Wolfgang

Antworten

#4 | Fehlersuche: Kategorienauswahl für das Smiley-Menü datum

23.09.2021 13:52 (zuletzt bearbeitet: 23.09.2021 13:57)

Habe jetzt das Problem, dass der Xobor Superklick nicht funktioniert und ich das jeweilige Fenster nicht mehr schließen kann. Die einzelnen Menüs werden angezeigt, kann sie dann öffnen, aber kein Schließ- oder Schiebesymbol ist da. Hab allerdings nicht alles in die Unterkategorien gepackt und diese Menüs funktionieren auch weiterhin mit Superklick.

Antworten

#5 | Update: Super Kategorienauswahl für das Smiley-Menü datum

16.10.2021 10:18 (zuletzt bearbeitet: 16.10.2021 10:23)

Update: Super Kategorienauswahl für das Smiley-Menü! / Version 1-3

Hallo Nara,
bin jetzt fertig!
Habe komplett alles angepasst und aktualisiert!
Funktioniert auch im neuen Xobor V6 !

Super Kategorienauswahl mit den Versionen 1-3 wurden aktualisiert!

Was hat sich im Laufe der 2 Jahre alles geändert und was kann die super Kategorienauswahl?

Die Kategorienauswahl ist frei verschiebbar, mit einem Klick zu öffnen und zu schließen!
Fürs Verschieben der Auswahl-Fenster ist eine Randbegrenzung eingebaut!
Läuft reibungslos auch im "Standard" und im neuen Browser "Vivaldi"!
Funktioniert jetzt auch im Business-Gästebuch (Nur das gegenseitige Auslösen funktioniert nicht)
Alle Menüs lassen sich vervielfachen, ohne Begrenzung der Sub-Menüs oder Gruppen!
Läuft auch im neuen Xobor (v6)!

Wichtig:

Die Kategorienauswahl arbeitet jetzt fehlerfrei mit "Xobor-Superklick in der Iconbar!" zusammen!

Die Superkategorienauswahl:

Version 1: Einfache und flinke Kategorienauswahl für das Smiley-Menü
Version 2: Kategorienauswahl mit Sub Menü!
Version 3: Gemischte Kategorienauswahl mit Submenü und normaler Kategorienauswahl!

Bis dann und gutes Gelingen beim Nachbau!
Wolfgang

Nara findet das Top!

Antworten

Iconbar mobil fürs Xobor (v6) anpassen � � Eigene HTML-Box im Xobor (v6)-Template einbauen?

�hnliche Themen

Antworten

Letzter Beitrag

Für die Iconbar: Smileys mit einstellbarer Größe!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

02.02.2020 15:37
von

Wolfgang • Zugriffe: 854

Smileys direkt anzeigen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Haviforumstreffpunkt 7 08.10.2019 00:06
Haviforumstreffpunkt • Zugriffe: 725
Xobor-Superklick in der Iconbar: Version 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 25.09.2021 15:59
Wolfgang • Zugriffe: 2555
Samsung Magician - Neue Version! - Tuning für SSD's
Erstellt im Forum �rger mit dem PC - Vorbeugung und Hilfe von Wolfgang 0 16.01.2017 17:12
Wolfgang • Zugriffe: 905

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

24.12.2019 00:33
von

Wolfgang • Zugriffe: 1975

Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 23 28.08.2022 12:59
Wolfgang • Zugriffe: 12080

@ Taggen - Super Funktion, um Mitglieder direkt zu informieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

10.07.2019 23:11
von

Wolfgang • Zugriffe: 1782

Jetzt! - Windows 7 SP1 in allen Versionen als Download!
Erstellt im Forum Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps von Wolfgang 0 27.02.2012 22:13
Wolfgang • Zugriffe: 1211
Formatierbare Tooltipps oder Quickinfos - Version 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 11 19.09.2020 13:45
Wolfgang • Zugriffe: 9437

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: 85 €

143%

Google Translator

Forum - Super Kategorienauswahl für das Smiley-Menü - Version 1-3

Einfache und flinke Kategorienauswahl für das Smiley-Menü - Version 1
Aktualisiert 16.10.21

Einfache Kategorienauswahl mit Klickfunktion

Kategorienauswahl mit Sub-Menü - Version 2
Aktualisiert 16.10.21

Kategorienauswahl mit Sub-Menü

Gemischte Kategorienauswahl mit Sub-Menü und normaler Kategorienauswahl! - Version 3
Aktualisiert 16.10.21

Gemischte Kategorienauswahl mit Sub-Menü

Update: Super Kategorienauswahl für das Smiley-Menü! / Version 1-3

Forum - Super Kategorienauswahl für das Smiley-Menü - Version 1-3

Einfache und flinke Kategorienauswahl für das Smiley-Menü - Version 1Aktualisiert 16.10.21

Einfache Kategorienauswahl mit Klickfunktion

Kategorienauswahl mit Sub-Menü - Version 2Aktualisiert 16.10.21

Kategorienauswahl mit Sub-Menü

Gemischte Kategorienauswahl mit Sub-Menü und normaler Kategorienauswahl! - Version 3 Aktualisiert 16.10.21

Gemischte Kategorienauswahl mit Sub-Menü

Update: Super Kategorienauswahl für das Smiley-Menü! / Version 1-3

Einfache und flinke Kategorienauswahl für das Smiley-Menü - Version 1
Aktualisiert 16.10.21

Kategorienauswahl mit Sub-Menü - Version 2
Aktualisiert 16.10.21

Gemischte Kategorienauswahl mit Sub-Menü und normaler Kategorienauswahl! - Version 3
Aktualisiert 16.10.21