Tooltips mit Divs nur ohne DocType

Mithrandir

Hallo allerseits,

das ganze ist etwas schwierig zu beschreiben, deshalb schaut euch am besten die weiter unten aufgeführten Beispiele an (natürlich, nur wenn ihr Lust und Zeit habt). Ausgehend von dem Script auf http://javascript.internet.com/navigation/pop…escription.html habe ich versucht, diese "Tooltips" auf meiner Seite umzusetzen (später sollen die Tooltips transparent werden, aber das ist wohl nicht so das Problem).

Nachdem ich dabei nicht erfolgreich war, habe ich es mit relativ einfachen Seiten versucht. Auch damit klappt es leider nicht. Nur, wenn kein Doctype angegeben wird, zeigt der Firefox die Tooltips dort an, wo er soll, wie man unter http://home.arcor.de/ar/arne.d/sonstiges/a.htm (natürlich nicht so richtig valid ...) beobachten kann. Andere Testseiten sind dann noch http://home.arcor.de/ar/arne.d/sonstiges/b.htm (gefällt mir nicht, da das Teil nicht verschwindet und auch an der falschen Stelle erscheint) sowie http://home.arcor.de/ar/arne.d/sonstiges/c.htm (XHTML mit "position" ist mein Ziel, aber so geht es leider gar nicht).

Hat jemand von euch eine Idee oder einen Lösungsvorschlag?

BTW: "Natürlich" haben IE 6.0 und Opera 7.54 damit keine Probleme (soll aber kein Gesprächsgegenstand sein), wäre aber schön, wenn die Lösung (?) diese Browser auch berücksichtigen könnte.

brain

Was hast du denn für nen Doctype probiert?

Mithrandir

Hi brain,

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(sieht man ja auch im Quelltext), da meine komplette Homepage (naja, fast) diesen Doytpe benutzt, sollte es der auch bleiben. Wenn du nun schreibst, dass es damit nicht geht, habe ich eben Pech gehabt und verzichte auf die (transparent geplanten) Tooltips und verwende das title-Attribut.

Nachtrag: Es geht um die Tooltips der Testlinks auf der linken Seite, die bei der ersten Variante ohne Doctype funktionieren.

Dr. Evil

Die JavaScript-Konsole sagt ja das:

Zitat

Error: Error in parsing value for property 'top'. Declaration dropped.
Source File: http://home.arcor.de/ar/arne.d/sonstiges/c.htm
Line: 0

und das:

Zitat

Error: Error in parsing value for property 'left'. Declaration dropped.
Source File: http://home.arcor.de/ar/arne.d/sonstiges/c.htm
Line: 0

Vielleicht fehlt also nur ein + "px" (nicht ausprobiert):

Code

document.getElementById("object1").style.left=x+15 + "px";
document.getElementById("object1").style.top=y-5 + "px";

Ach ja: die Browser-Weiche ist schlecht. bei mir wollte es erst gar nicht funktionieren, weil ich einen falschen User-Agent eingestellt hatte. Statt den User-Agent sollte man lieber die heiklen Funktionen, hier document.getElementById, überprüfen.

Mithrandir

Hi Dr. Evil,

in der Javascript-Konsole hatte ich schon nachgeguckt, und dort keinen Fehler entdeckt. Dort scheint es Unterschiede bei den verwendeten Firefox-Versionen zu geben (vgl. unsere Signaturen). Aber immerhin ist das ein Ansatz. Vielen Dank schon einmal fürs Forschen.

Browserweiche ist natürlich so ein Thema für einen Laien wie mich.

Nachtrag: Mit den +"px" klappt es schon, allerdings verschindet der Tooltip nicht.

Dr. Evil

Vielleicht sehe es nur ich, weil ich unter about:config 'javascript.options.strict' auf true gestellt habe.

bejot

moin,
versuchs mal so...klappt bei mir in allen Browsern und ist sogar valide

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>


<script language="JavaScript" type="text/javascript">
//<![CDATA[


<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Patrick Lewis (gtrwiz@aol.com) -->
<!-- Web Site:  http://www.patricklewis.net -->
<!-- Begin
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}


//  #########  popup text 
descarray = new Array(
"This site has some of the greatest scripts around!",
"These popups can have varying width. It is dependant upon the text message.",
"You can have <b>two<\/b> lines <br>and HTML content.",
"You can also have images in here like this:<br><img src=greenbar.gif>",
"You can put in a really long <br>description if it is nessary to <br>explain something in detail, <br>like a warning about content <br>or privacy.",
"<\/center>Lastly, you can have links like these:<br><a href='http://javascript.internet.com/'>JavaScript Source<\/a><br><a href='http://javascript.internet.com/'>JavaScript Source<\/a><br><a href='http://javascript.internet.com/'>JavaScript Source<\/a><br>With a change in the onmouseout event handler."
);


overdiv="0";
//  #########  CREATES POP UP BOXES 
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>This popup (#"+a+") isn't setup correctly - needs description<\/font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black bgcolor=#ffffdd";}
else {pad="1"; bord="0";}
desc =    "<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
 +"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
 +descarray[a]
 +"\n<\/td><\/tr><\/table>\n"
 +"<\/td><\/tr><\/table>";
if(navigator.family =="nn4") {
 document.object1.document.write(desc);
 document.object1.document.close();
 document.object1.left=x+15+"px";
 document.object1.top=y-5+"px";
 }
else if(navigator.family =="ie4"){
 object1.innerHTML=desc;
 object1.style.pixelLeft=x+15;
 object1.style.pixelTop=y-5;
 }
else if(navigator.family =="gecko"){
 document.getElementById("object1").innerHTML=desc;
 document.getElementById("object1").style.left=x+15+"px";
 document.getElementById("object1").style.top=y-5+"px";
 }
}
function hideLayer(){
if (overdiv == "0") {
 if(navigator.family =="nn4") {eval(document.object1.top="-500"+"px");}
 else if(navigator.family =="ie4"){object1.innerHTML="";}
 else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500"+"px";}
 }
}


//  ########  TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
//  End -->
//]]>
</script>
</head>
<body>




<div id="object1" style="
position:absolute; background-color:76777b;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1"
onmouseover="overdiv=1;" onmouseout="
overdiv=0; setTimeout('hideLayer()',1000)">pop up description layer</div>
<!--  THE TEXT FOR THE POPUP DESCRIPTIONS ARE ON LINE 12  -->
<a href="http://javascript.internet.com" onmouseover="popLayer(0)" onmouseout="
hideLayer()"><font size="-1" face="arial"><b>THE JavaScript
Source</b></font></a>


<a href="#" onmouseover="popLayer(1)" onmouseout="hideLayer()"><font size="-1"
face="arial"><b>Variable width</b></font></a>




<a href="#" onmouseover="popLayer(2)" onmouseout="hideLayer()"><font size="-1"
face="arial"><b>Double line popup</b></font></a>


<a href="#" onmouseover="popLayer(3)" onmouseout="hideLayer()"><font size="-1"
face="arial"><b>Image sample</b></font></a>


<a href="#" onmouseover="popLayer(4)" onmouseout="hideLayer()"><font size="-1"
face="arial"><b>Really long description</b></font></a>


<a href="#" onmouseover="popLayer(5)" onmouseout="
setTimeout('hideLayer()',2000)"><font size="-1" face="arial"><b>Persistant
with links</b></font></a>




<p><!-- Script Size:  5.08 KB --></p>
</body>
</html>

Alles anzeigen

Mithrandir

Hi bejot,

danke dir. So wie ich es sehe, war Dr. Evils Hinweis schon der richtige Ansatz. Bei der Positionierung muss (teilweise) noch +"px" angefügt werden, das gleiche noch beim hidelayer() (soweit war ich auch gerade).

Vielen Dank - ich wusste, dass auf euch Verlass ist!

javascript.options.strict muss ich mir mal merken - was es nicht alles so gibt. Hat es Nachteile, das standardmässig anzulassen?

Dr. Evil

Zitat von Mithrandir

javascript.options.strict muss ich mir mal merken - was es nicht alles so gibt. Hat es Nachteile, das standardmässig anzulassen?

Es kann eine Weile dauern, bis sich die JS-Konsole öffnet, wenn viele Fehler, die beim Surfen immer entstehen (hier im Forum beispielsweiße die IE-only CSS-Scrollbar-Befehle), gelistet werden müssen.

edit: und man sieht die Fehler in den Scripts von Erweiterungen

Mithrandir

Ah - okay. Dann weiss ich Bescheid.

Für den schnellen Zugriff auf javascript.options.script bzw. das komfortable Ändern dieses Eintrags habe ich mir jetzt einen Eintrag für die PrefBar gebastelt.

Mithrandir

N'Abend,

das wird jetzt zwar etwas off-topic, aber vielleicht stolpert ja jemand mal drüber.

Zitat von Dr. Evil

Ach ja: die Browser-Weiche ist schlecht. bei mir wollte es erst gar nicht funktionieren, weil ich einen falschen User-Agent eingestellt hatte. Statt den User-Agent sollte man lieber die heiklen Funktionen, hier document.getElementById, überprüfen.

nicht nur die Browserweiche war schlecht, sondern auch die Positionierung des DIVs im Internet Explorer, falls die Seite etwas länger war.

So wie ich es mitbekommen und ergoogelt habe, hat der olle IE in diesem Fall Probleme mit "scrollTop". Deshalb habe ich mich jetzt für ein anderes Skript entschieden, dieses noch etwas umgestrickt und nun klappt es halbwegs (auch die Browserweiche sollte nach meinem Verständnis etwas besser sein). Das Skript kann man auf dieser Seite in Aktion sehen:
auf Vergleich zu einfachen Textfeldern mehr Eigenschaften "Eigenschaften" ist ein "Quicklink", auch die rechtsstehende Grafik in der Überschrift bietet eine Schnellauswahl an.

Wie man sieht, habe ich mich jetzt erst einmal doch gegen die Transparenz entschieden - sah dann doch nicht so toll aus.

Wenn jemand Fehler findet - Netscape konnte ich noch nicht testen - ich habe nie etwas gegen Verbesserungsvorschläge.

Sorry fürs Off-Topic und vielen Dank noch einmal.

BTW: Die im ersten Beitrag genannten Dateien werde ich bald vom Server entfernen.