daniel86: Terminanzeige mit Javascript soll keinen Tooltip zeigen

Beitrag lesen

SELF-Forum

Terminanzeige mit Javascript soll keinen Tooltip zeigen

daniel86 Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Liebe SelfHTML-Gemeinde,

ich betreue gerade mein erstes umfangreicheres Web-Projekt  in welchem ich mittels Wordpress eine Seite für unsere Studierendenschaft erstelle und das Theme vorallem mittels CSS anpasse.

Da mir die vorgefertigten Terminkalender die als Plugins für Wordpress angeboten werden nicht gefallen haben, habe ich mich dazu entschlossen stattdessen ein Plugin für die Sidebar einzufügen welches HTML und Javascript-Code erlaubt und passe es optisch mittels CSS an. Die Optik gefällt mir so wie es momentan aussieht ganz gut und es werden auch (wie von mir gewünscht) nur 3 Termine angezeigt - was mich allerdings stört ist das beim scrollen über die Termine eine Tooltipbox angezeigt wird, was sich wohl aufgrund das title-Attributes im Code nicht vermeiden lässt (oder doch?)

Hat jemand eine Idee wie ich das anders lösen kann?

Die Adresse der Seite lautet : http://skh-mz.de
Mein Code für die Termine sieht wie folgt aus:

<script type="text/javascript">// <![CDATA[  
function aktualisieren() {  
  if (!document.getElementsByTagName) return;  
  var Datum = new Date();  
  var Jahr = Datum.getFullYear().toString();  
  var Monat = (Datum.getMonth()+1).toString();  
    if (Monat.length == 1) Monat = "0" + Monat;  
  var Tag = Datum.getDate().toString();  
    if (Tag.length == 1) Tag = "0" + Tag;  
  var aktuell = parseInt(Jahr + Monat + Tag);  
  var Zeilen = document.getElementsByTagName("div");  
  var Obergrenze = 3; var Rest = Obergrenze;  
  for (var i = 0; i < Zeilen.length; i++) {  
    if (Zeilen[i].title) {  
      if (parseInt(Zeilen[i].title) < aktuell) Zeilen[i].style.display = "none";  
      else if(Obergrenze) {  
        if(Rest) Rest--; else Zeilen[i].style.display = "none";  
      }  
    }  
  }  
}  
// ]]>  
</script>  
  
  
<body onload="aktualisieren();">  
<div id="wrapdate" title="20130105"><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>  
  
  
<div id="wrapdate" title="20130105"><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>  
  
  
<div id="wrapdate" title="20130105" ><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>  
  
  
<div id="wrapdate" title="20130105"><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>  
  
  
<div id="wrapdate" title="20130105"><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>  
  
  
<div id="wrapdate" title="20130105"><div class="links"><div class="datetime">  
<div class="top"><p><a href="#">2013</a></p></div>  
<p class="day"><a href="#">05</a></p>  
<p class="mon"><a href="#">Jan</a></p>  
</div></div>  
<div class="rechts">Mitgliederversammlung<br/>  
8:00-10:00 Uhr<br/>  
Raum: 2.006  
</div>  
<div class="clear"></div></div>

Der Vollständigkeit halber hier noch das zugehörige CSS:

.links {  
float:left;  
width:19%;  
}  
.rechts {  
width:76%;  
float:right;  
}  
.clear {  
clear:left;  
}  
  
  
#wrapdate{  
  
width:200px;  
margin-left:-1px;  
margin-top:15px;  
margin-bottom:7px;  
  
}  
  
  
  
/* Outer div */  
div.datetime {  
border:1px solid #000;  
width:40px;  
background:#fff;  
color: #000;  
}  
  
div.datetime p {  
margin:0 auto;  
padding:0;  
text-align:center;  
font-size:x-small;  
}  
  
div.datetime .top {  
color:#fefefe;  
background-color:#EE6633;  
}  
  
div.datetime .top p {  
font:bold x-small/100% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif;  
letter-spacing:0.12em;  
padding-bottom: 4px;  
}  
  
div.datetime .top p a:focus,  
div.datetime .top p a:hover,  
div.datetime .top p a:active {  
	color: #fff;  
}  
div.datetime .top p a {  
	color: #fff;  
	text-decoration: none;  
}  
  
/* day of the month (NUMBER) */  
div.datetime p.day {  
font:bold 1.5em/98% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif;  
letter-spacing:0.13em;  
}  
  
div.datetime p.day a:focus,  
div.datetime p.day a:hover,  
div.datetime p.day a:active {  
	color: #000;  
}  
  
div.datetime p.day a {  
	color: #000;  
	text-decoration: none;}  
  
/* month */  
div.datetime p.mon {  
font:x-small/135% Verdana,Geneva,Arial,Helvetica,sans-serif;  
letter-spacing:normal;  
text-transform:uppercase;  
padding-top: 2px;  
padding-bottom: 3px;  
}  
  
div.datetime p.mon a {  
	color: #000;  
	text-decoration: none;}  
  
div.datetime p.mon a:focus,  
div.datetime p.mon a:hover,  
div.datetime p.mon a:active {  
	color: #000;  
}

Bereits im Voraus vielen Dank für Eure Mühe

Beitrag melden
–
Informationen zu den Bewertungsregeln