daniel86: Terminanzeige mit Javascript soll keinen Tooltip zeigen

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

  1. Terminanzeige mit Javascript soll keinen Tooltip zeigen

    Siri
    – Informationen zu den Bewertungsregeln

    Hallo,

    warum verwendest du nicht das Attribut @name (oder @class) statt @title?

    Grüße
    Siri

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Terminanzeige mit Javascript soll keinen Tooltip zeigen

      daniel86 Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo,

      warum verwendest du nicht das Attribut @name (oder @class) statt @title?

      Grüße
      Siri

      Dankeschön Siri habe beides ausprobiert, indem ich sowohl getelmentbytagname gegen getelementbyname bzw getelementbyclass und entsprechend title gegen name und class ausgetauscht habe - nur ergibt sich dadurch das Problem, dass wenn ich title durch class bzw name austausche das script ignoriert, dass nur die nächsten 3 Termine angezeigt werden sollen und stattdessen alle anzeigt...
      mache ich irgendetwas falsch?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Terminanzeige mit Javascript soll keinen Tooltip zeigen

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, daniel86!

        Dankeschön Siri habe beides ausprobiert, indem ich sowohl getelmentbytagname gegen getelementbyname bzw getelementbyclass und entsprechend title gegen name und class ausgetauscht habe - nur ergibt sich dadurch das Problem, dass wenn ich title durch class bzw name austausche das script ignoriert, dass nur die nächsten 3 Termine angezeigt werden sollen und stattdessen alle anzeigt...
        mache ich irgendetwas falsch?

        Solche wilden Umherprobierungen sind definitiv falsch. Welche tooltips meinst du überhaupt? "Permalink zu Testtag"? "skh-mz.de/?p=407"? Ersterer steckt im title-Element

        <a rel="bookmark" title="Permalink to testtag" href="http://skh-mz.de/?p=407">testtag</a>

        Gegen letzteren kannst du nichts tun.

        Der gepostete Code bezieht sich auf die Termine auf der linken Seite. Alle div-Elemente, deren Title-Attribut ein vergangenes Datum enthalten, werden ausgeblendet. Mehr macht das Script (auf einen schnellen Blick) nicht.

        Matthias

        --
        1/z ist kein Blatt Papier.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Terminanzeige mit Javascript soll keinen Tooltip zeigen

          unknown
          +1 Informationen zu den Bewertungsregeln

          Der gepostete Code bezieht sich auf die Termine auf der linken Seite. Alle div-Elemente, deren Title-Attribut ein vergangenes Datum enthalten, werden ausgeblendet. Mehr macht das Script (auf einen schnellen Blick) nicht.

          Und um dort die Tooltips auszublenden, schreibst du ans Ende der if-Anweisung
          if (Zeilen[i].title) {
            ...

          }
          die Anwisung
          Zeilen[i].title = "";
          wobei du dich noch fragen solltest, was passiert, wenn du mal einen "echten Titel" an ein Div vergeben willst!

          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln

          1. Terminanzeige mit Javascript soll keinen Tooltip zeigen

            daniel86 Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Der gepostete Code bezieht sich auf die Termine auf der linken Seite. Alle div-Elemente, deren Title-Attribut ein vergangenes Datum enthalten, werden ausgeblendet. Mehr macht das Script (auf einen schnellen Blick) nicht.
            Und um dort die Tooltips auszublenden, schreibst du ans Ende der if-Anweisung
            if (Zeilen[i].title) {
              ...

            }
            die Anwisung
            Zeilen[i].title = "";
            wobei du dich noch fragen solltest, was passiert, wenn du mal einen "echten Titel" an ein Div vergeben willst!

            Funktioniert wunderbar Dankeschön.
            Das mit dem Titel sollte kein Problem sein, da der Code sich nur auf Inhalte des Widgets HTML Javascript Adder, das ich zur Terminanzeige in der Sidebar eingefügt habe, bezieht und ich dort sonst keine Titel vergeben werde.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Terminanzeige mit Javascript soll keinen Tooltip zeigen

          daniel86 Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, daniel86!

          Dankeschön Siri habe beides ausprobiert, indem ich sowohl getelmentbytagname gegen getelementbyname bzw getelementbyclass und entsprechend title gegen name und class ausgetauscht habe - nur ergibt sich dadurch das Problem, dass wenn ich title durch class bzw name austausche das script ignoriert, dass nur die nächsten 3 Termine angezeigt werden sollen und stattdessen alle anzeigt...
          mache ich irgendetwas falsch?

          Solche wilden Umherprobierungen sind definitiv falsch. Welche tooltips meinst du überhaupt? "Permalink zu Testtag"? "skh-mz.de/?p=407"? Ersterer steckt im title-Element

          <a rel="bookmark" title="Permalink to testtag" href="http://skh-mz.de/?p=407">testtag</a>

          Gegen letzteren kannst du nichts tun.

          Der gepostete Code bezieht sich auf die Termine auf der linken Seite. Alle div-Elemente, deren Title-Attribut ein vergangenes Datum enthalten, werden ausgeblendet. Mehr macht das Script (auf einen schnellen Blick) nicht.

          Matthias

          Ich habe den Code jetzt noch mal auf den ursprünglichen zurückgesetzt.
          Ich glaube wir gehen gerade von unterschiedlichen Codes aus den permalink habe ich noch garnicht mit den termine verknüpft sondern die termine verweisen derzeit auf <a href="#"></a>

          Die Tooltips zeigen die Datumsformatierung die Javascript verarbeitet an - also "20130105".

          LG Daniel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Terminanzeige mit Javascript soll keinen Tooltip zeigen

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, daniel86!

    * IMHO ist die Funktionalität, beim Hovern von Link-Elementen das Linkziel zu zeigen, in den Browsern fest verdrahtet.
    * Zusätzliche Informationen kannst du, wie Siri schon schrieb, im title-Attribut unterbringen.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Terminanzeige mit Javascript soll keinen Tooltip zeigen

    unknown
    – Informationen zu den Bewertungsregeln

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

    Du könntest das title-Attribut auf einen Leerstring setzen, wenn du es nicht mehr brauchst!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln