Zum Verzweifeln: onmouseover klappt nicht mehr!
0 0 KANN MIR KEINER HELFEN?
0 
Matthias Apsel
0
0 
JürgenB
0 0 JürgenB
0 
dedlfix
0 dedlfix
Zum Verzweifeln: onmouseover klappt nicht mehr!
Hi zusammen,
zum Freitag mal wieder etwas "Spezielles", was mich zum Durchdrehen bringt.
Ich muss einen Kalender bauen und nutze dazu Bootstrap + http://www.bootstrap-year-calendar.com/#
Klappt alles sehr gut.
Wenn man mit der Maus über die Tage fährt, die einen Eintrag besitzen, erscheint ein Popup mit den Infos zum Tag.
Nun folgendes:
Mit den Angaben kann man die Tage des Kalenders selbst rendern (Beeinflussen zum Beispiel vom style):
(...)
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
(...)
Das klappt soweit auch. Ich habe meine Termine für den kalender "klassifiziert" mit einen "typ" (wichtig/unwichtig). Also:
(...)
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29),
typ: 'wichtig'
},
(...)
Nun habe ich die Funktion customDataSourceRenderer wie folgt "gebaut":
(...)
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
for (var i=0; i<events.length; i++) {
if(events[i].typ == 'wichtig') {
$(element).css('color', 'red');
$(element).text($(element).text() + "_(!)");
}
if(events[i].typ == 'unwichtig') {
$(element).css('background-color', 'green');
}
}
},
(...)
PROBLEM:
Durch die Zeile
$(element).text($(element).text() + "_(!)");
welche lediglich bei allen Tagen die einen "wichtigen" Termin haben, den Text der Zelle ergänzen soll um den Text "_(!)".
Das klappt auch gut und aus dem Text "15" wird auch "15_(!)", jeodoch klappt dann das Popup nicht mehr, welches die Taginfo darstellen soll. Es erscheint auch kein Fehler o.ä..
Wenn ich die Zeile auskommentiere und nur den CSS bei wichtigen Terminen anwende, klappt es. Bei JEDER Textmanipulation geht jedoch das kleine Popup-Info-Fenster "kaputt".
Aber ich benötige zwingend einen anderen Text für den Tag!
Hat jemand eine Idee..??
Hier mein aktueller Beispiel-Code, der 1-zu-1 beim Kopieren lokal bei Euch laufen sollte!…
1000 Dank vorab!
Jupix
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.css">
<script src="https://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.js"></script>
</head>
<body>
<div id="calendar" class="calendar"></div>
<script>
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
$('#event-modal').modal();
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').setDataSource(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if(event.id) {
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
}
else
{
var newId = 0;
for(var i in dataSource) {
if(dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
for (var i=0; i<events.length; i++) {
if(events[i].typ == 'wichtig') {
$(element).css('color', 'red');
$(element).text($(element).text() + "_(!)");
}
if(events[i].typ == 'unwichtig') {
$(element).css('background-color', 'green');
}
}
},
enableContextMenu: true,
enableRangeSelection: true,
contextMenuItems:[
{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29),
typ: 'wichtig'
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19),
typ: 'unwichtig'
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1),
typ: 'wichtig'
}
]
});
$('#save-event').click(function() {
saveEvent();
});
});
</script>
</body>
</html>
akzeptierte Antworten
Zum Verzweifeln: onmouseover klappt nicht mehr!
dedlfix
Bewertung: keine Bewertung
-
Nachtrag: Ich habe sogar schon mit solchem Code-Zeugs herumgespielt aber alles doof :-( und kein Erfolg.
if(events[i].typ == 'wichtig') { //$(element)[0].innerHTML += '<div style="position:absolute;left:-3px;top:-4px;background-color:#0000ff;height:2px;width:2px;">U</div>'; /* let circle = $('<div></div>'); circle.css('background-color', 'rgba(255, 100, 0, 1)'); circle.css('width', '10px'); circle.css('height', '10px'); circle.css('border-radius', '50%'); circle.css('position', 'absolute'); circle.css('top', '0px'); circle.css('left', '0px'); let cellWrapper = $('<div></div>'); cellWrapper.css('position', 'relative'); cellWrapper.append(circle) $(element).prepend(cellWrapper); */Am Coolsten wäre es natürlich, wenn man über den Tag-Text, also z.B. "31" ein Buchstaben (oder wie im Beispiel ein "!") quasi "über" die Tag-Zahl "legen" könnte mit z.B. einem kleinen transparenten Hintergrund. Sodass man die schwarze Zahl im Hintergrund noch sieht, ein rotes Ausrufezeichen mittig zentriert ÜBER dem Tag-text steht.
Oh Mann! ... ich weiß ich weiß... aber ich muss Buchstaben wirklich sichtbar ÜBER dem Text platzieren (und das Popup soll halt IMMER aufgehen) 😉
Bin ratlos schwitz!
-
...? 💡 Bitte helft mir...
-
Hallo juppix,
...? 💡 Bitte helft mir...
Stell ein online-Beispiel zur Verfügung.
Bis demnächst
Matthias--
Rosen sind rot.-
Hi Matthias,
ich habe im 1. Post (am Ende) den kompletten Source hinterlegt. Den kann man 1-zu-1 kopieren in eine lokale .html-Datei. Ich hoffe das hilft.
Viele Grüße jupix
-
Hallo juppix,
ich habe im 1. Post (am Ende) den kompletten Source hinterlegt. Den kann man 1-zu-1 kopieren in eine lokale .html-Datei. Ich hoffe das hilft.
Du solltest es potenziellen Helfern so einfach wie möglich machen.
Bis demnächst
Matthias--
Rosen sind rot.-
-
Please help me
-
-
Ja - hab ich natürlich gelesen. Aber das sagt mir noch weniger^^
-
Tach!
Aber das sagt mir noch weniger^^
Dann wäre es sinnvoll, wenn du da mal gezielt versuchen würdest, was du nicht verstehst. Habe ich vielleicht unverständlich formuliert oder fehlt das Wissen bei den Pseudo-Elementen oder was ganz anderes?
dedlfix.
-
Mit dem Pseudoelement. (??)
Also ich verstehe nicht wie ich das umbauen soll, dass er Pseudoelemente "versteht".
Klingt für mich sehr, sehr weit entfernt 😟
-
-
-
-
-
-
-
-
-
Hallo,
lies dir mal die Doku zu text durch. .text() liefert den Inhalt des Elements ohne HTML-Struktur, .text(x) ersetzt den Inhalt durch sein Argument. Damit ist das Element, an dem der Mouseover hängt, wohl weg.
Gruß
Jürgen-
Hi Jürgen,
interessant! Kennst Du möglicherweise eine Methode die ich anwenden könnte um ALLES (also alle html-Elemente)? Ich hatte im 2. Post einige weitere "Spielereien" die ich beim Googlen finden konnte getestet. Vielleicht lässt sich hieraus ein Ansatz ableiten? Bin immer noch am Rätseln.
Viele Grüße jupix
-
Hallo,
ich habe von jQuery keine Ahnug, daher kann ich dir keine konkrete Lösung zeigen. Ich würde aber mir in den Browsertools die Struktur des Kalenders ansehen und dann das Anhängsel direkt an den Text anhängen, ohne am HTML bzw. an der DOM-Struktur etwas zu ändern.
Gruß
Jürgen
-
-
-
-
-
Tach!
Das klappt auch gut und aus dem Text "15" wird auch "15_(!)", jeodoch klappt dann das Popup nicht mehr, welches die Taginfo darstellen soll. Es erscheint auch kein Fehler o.ä..
Nun, logische Schlussfolgerung: Dann orientiert sich der Kalender wohl am Inhalt, um die Tagesnummer zu erfahren. Keine lesbare Tagesnummer == keine Information zum Anzeigen zu finden.
Aber ich benötige zwingend einen anderen Text für den Tag!
Hat jemand eine Idee..??
Schreib den Kalender um, so dass er auch mit Anhängen umgehen kann. Oder häng den zusätzlichen Inhalt ins Pseudoelement ::after. Aber wie das gehen könnte, entzieht sich meiner Kenntnis. Wenn ich dem Element testweise eine id verpasse, kann ich es zumindest über den CSS-Selektor #die_id::after ansprechen.
dedlfix.
-
Tach!
Oder häng den zusätzlichen Inhalt ins Pseudoelement ::after. Aber wie das gehen könnte, entzieht sich meiner Kenntnis. Wenn ich dem Element testweise eine id verpasse, kann ich es zumindest über den CSS-Selektor #die_id::after ansprechen.
Also ich verstehe nicht wie ich das umbauen soll, dass er Pseudoelemente "versteht".
Ein Pseudoelement kann mit CSS bearbeitet werden. Unter anderem kann man ihm einen Inhalt geben:
selector::after { content: "_!"; }Das kann man einfach so im CSS-Teil stehen haben. Das Problem ist nur, a) einen passenden Selektor zu finden (der dann statt des
selector-Platzhalters zu stehen kommt), und b) das Element so umzugestalten, dass der Selektor drauf passt. Und eigentlich ist das ganz einfach, ich hab am Anfang zu kompliziert gedacht. Der Selektor kann einfach eine Klasse sein, und du fügst dem Element dann diese Klasse hinzu, beziehungsweise allen Elementen, die betroffen sind.dedlfix.
-
dedlfix - Du bist der Hammer (alle Anderen natürlich auch^^)
<style> .day_u::after { content: "[u]"; } </style>und
$(element).addClass('day_u'); $(element).css('font-weight', 'bold');bewirken in der Tag WUNDER 😀
1000 Dank!!!!!!!
-
-