Willkommen in der Webstatt Zum Webstatt Blog und Stories
Afterlame Afterlame am 08.12.07 21:10

Ich habe zur zeit noch keine richtige idee, wie man mein konzept realisiern könnte.

Ich möchte eine box haben, die ich varibel mit text füllen kann und sie im grunde wie ein tooltip verhält.
Nun möchte ich aber, dass der tooltip sich immer am linken rand der Seite befindet und dem mauszeiger nur in der x-Achse folgt.

Flash ist für mich erstmal keine alternative.


Da man sich das sicherlich nicht so einfach vorstellen kann habe ich eine kleine animation erstellt.
[img]http://www.picupload.net/f-e7f2831582999e10ef668bbe67f83634.gif[/img]

gruß
Henning

netcup.de Warum gibt es hier Werbung?
nuit nuit am 09.12.07 17:44

och das ist kein problem -.-
http://scripts.moonsword.info/homes/guest/JavaScript/mauscoordinates.html

das wird ganz hilfreich sein, wobei, vielleicht auch die umgeschriebene variante fürs fraunhofer

noja...und dann setzt du die Box: position: absolute und änderst bei einem Mousemove nur die Y-Achse...die x-Achse setzt du mit left: 10px; auf die breite zum rand, wie du sie brauchst :D

achtung: musst du wahrscheinlich weiche für IE einbauen, weil der soweit ich weiss, den Nullpunkt oben links in der Ecke nicht als 0/0 hat, sondern 10/10

http://demo.moonsword.info/bildvergleich/libs/mouseCoordinates.js

hier ist die neue lib für die mouse coordinaten

verwenden tust du die neue lib (die ich verwenden würde, weil sie glaube icvh besser ist inzwischen -.-) so:
coords = new mouseCoordinates(); // handler for mousecoordinates
document.onmousemove = function(e) {
coords.handler(e);

arrCoords = coords.getCoords // Array: [x, y]
coordsX = coords.getCoordsX // X-Koordinate
coordsY = coords.getCoordsY // Y-Koordinate

return false;
}


nu ddann halt in der Funktion deine y-Koordinate bei dem tooltip setzen udn vielleicht noch den Text....mhh..da müsste eigentlich was cooles gehen, dass man da nicht sooviel schreibarbeit hat...

noja...soweit dazu...

gruss, nuit

edit: Achso...tooltip ähnlich noch...ok....dazu musst du natürlich auf die elemente zugreifen...und prüfen ob du drüber bist...mhhh...
http://demo.moonsword.info/bildvergleich

kannst ja mal duirchkucken sind einige brauchbare libs drin, ich denke für dich am ehsten: tooltip, notice und vielleicht die functions noch, da da die verwendung drinsteht :D
achja: Login = einfach irgendwas eingeben -.-

edit2:
noja du könntest immer wenn du ein mouseover invent hast, das display: block oder so setzen und wenn du wieder drunten bist ein display: none setzen, dass ist das einfachste, und wird wahrscheinlich auch das sinnvollste sein, und dann ist es am besten, du tust die alle in eine bestimmte klasse oder gibst denen einen gleichen namen und setzt den titel als den text für den tooltip

Afterlame Afterlame am 09.12.07 21:42

ok danke, ich werd mich mal durcharbeiten.
schön zu hören, dass das recht leicht ist, da js für mich neuland ist und ich mich da jetzt wohl erstmal einarbeiten muss


die variante mit dem display:block gefällt mir gut, da hab ich den code schon fast vor augen. ;)

herzlichen dank nochmal, werd die nächsten tage n bisschen rumprobieren und mal sehen was ich zustande kriege.



hab mich dochnoch damit befasst.

im grunde habe ich dein script jetzt nur minimal geändert um die angaben die bei dir in value eingefügt werden in die left: angabe des div zu schreiben.
es tut sich jedoch leider nichts.

ich poste mal nur die geänderten teile.

function saveCords() {
document.mobilbox.style.top = posy;}


das ganze sollte meine ebene doch auf der y-Achse meinem mauszeiger folgen.
oder habe ich einen fehler gemacht und die angabe ändert nicht dynamisch den wert des divs?

<div name="mobilbox" id="mobilbox" style="position:absolute; height:200px; width:400px; background-color:#000000; left:10px;"></div>




außerdem wollte ich fragen ob man in ein mouseover tag php einfügen kann.
In Richtung

<div style="width:100px; height:100px;" onmouseover="document.write('<?php $content=$content1 ?>')" onmouseout="document.write('<?php $content=$blank ?>')"></div>

der_nic der_nic am 10.12.07 00:19

PHP kannst du überall hineinsetzen, denn es wird serverseitig abgearbeitet, nur fragt sich hier was das für ein Sinn haben soll. In deinem PHP Code definierst du eine Variable mit dem Wert einer anderen Variablen.
Was du (wahrscheinlich) machen willst ist die Variable ausgeben (nehme ich mal an...)
... document.write('<?php echo $var; ?>'); ...

nuit nuit am 10.12.07 02:06

du musst noch ein top einsetzen, so ich Js kenn, will der das definiert haben -.-

ausserdem schreib lieber:
document.getElementById('mobilbox').style.top = posy;
macht im prinzip keinen grossen unterschied, ich finde es irgendwie nur besser, weil es eine funktion ist, die überall geht, bei dem anderen wäre ich mir nicht ganz sicher

mhh....du musst du saveCoords noch aufrufen in dem onmousemove event :D

d.h. deine schleife müsste so aussehen:
coords = new mouseCoordinates(); // handler for mousecoordinates
document.onmousemove = function(e) {
coords.handler(e);

document.getElementById('mobilbox').style.top = coords.getCoordsY // Y-Koordinate

return false;
}

und das ganze muss, wegen dem blöden dom, in einer init funktion stehen, weil ewnn das im header steht, dann gibt es noch kein element mit mobilbox für den...d.h. in eine init funktion schreiben und über onload aufrufen

ich hab dir mal ein funktionierendes beispiel gemacht, wo der komplette code drinsteht
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function mouseCoordinates() {
var posx = 0;
var posy = 0;

this.getCoordinates = function (e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
this.posx = e.pageX;
this.posy = e.pageY;
}
else if (e.clientX || e.clientY) {
this.posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
this.posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
}

this.getCoords = function() {
return [this.posx,this.posy];
}

this.handler = function(e) {
this.getCoordinates(e);
}

this.getCoordsX = function() {
return this.posx;
}

this.getCoordsY = function() {
return this.posy;
}
}

function init() {
coords = new mouseCoordinates(); // handler for mousecoordinates
document.onmousemove = function(e) {
coords.handler(e);
document.getElementById('mobilbox').style.top = coords.getCoordsY()+"px";

return false;
}
}
//-->
</script>
</head>
<body onload="init()">
<div name="mobilbox" id="mobilbox" style="display: block;position:absolute; left:10px; top:-10px;height:200px; width:400px; background-color:#000000;"></div>
</body>
</html>




EDIT:
Hab das ganze mal fertig geschrieben -.- ist ganz nett :D du brauchst nur noch da wo der tooltip kommen sollen, dem teil den namen: tooltip zu geben und im title das zeug, was da geschrieben werden soll.....sollte mit allem funktionieren ;)

liegt hier: http://demo.moonsword.info/webstatt/tooltip.html
source ist ja klar ;) kannst ja noch ein bisschen abändern, werte und so, oder vielleicht nicht mit dem Namen, oder was auch immer :D ich finds nur so schöner, als immer mouseover und mouseout zu shreiben

der_nic der_nic am 10.12.07 10:40

Kleiner Tipp:
Das Attribut "name" ist nicht mehr valide, also würde ich entweder ID (wenns nur 1 Tooltip ist) oder class (für mehrere) verwenden um die Tooltips zu adressieren.

Und wieso den Inhalt des Tooltips über den "title" machen? Einfach normal reindamit und display:none/block zum anzeigen/verstecken.

Aber ansonsten ein super Skript ;) Bin begeistert!


// edit: Ich seh grad die Lightbox lib nimmt "rel" zur adressierung der Elemente, das wäre natürlich auch eine Alternative zu id/class

nuit nuit am 10.12.07 13:47

den inhalt des tooltips über title, damit auch die leute die information kriegen, die kein Js haben :P
nachdem title auch einfach angezeigt wird ;)

ok "rel" mal überlegen, wie man das abfragt -.- da müsste man ja am Anfang alle Elemente auf der Seite durchgehen und auf ein rel prüfen? oder wie macht das lightbox? weisst du das?

der_nic der_nic am 10.12.07 14:54

Achso... Natürlich ich habe deine Idee bezüglich des Titels ganz falsch verstanden bzw falsch gelesen :O sorry!

Also bei der lightbox werden in der Tat alle Elemente durchlaufen und auf vorkommen des rel Attributs untersucht. Da bei der lightbox nur Anker-Elemente (<a>) in Frage kommen verkleinert sich aber hier die Anzahl der zu überprüfenden Elemente stark.
Hier der lightbox-Code
var anchors = document.getElementsByTagName('a');
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
var relAttribute = String(anchor.getAttribute('rel'));
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}


Mögliche Lösung wäre dem Elternelement eine eindeutige ID zu geben um nur die Kindelemente zu überprüfen, aber dann halt auf Kosten der Flexibilität.
<div id="tooltips">
<div rel="tooltip" title="1. Tooltip">1. Text</div>
<div rel="tooltip" title="2. Tooltip">2. Text</div>
</div>

Aber ich denke bei steigender Grösse der Projekts bzw der Webseite ist die eingeschränkte Flexibilität das kleinere Übel im Gegensatz zur lahmen Performance wenn alle Elemente der Webseite untersucht würden.

Was meinst du? :)

Afterlame Afterlame am 10.12.07 18:57

wow, danke für eure mühen.
Ich merke schon, dass ich die letzten jahre nicht gecoded habe. :)
Ist alles nicht mehr so geläufig.

Ich habe allerdings noch 2 Probleme.
Zum einen würde ich gerne valide bleiben.
Wenn ich jetzt allerdings das attribut "name" durch "class" ersetzen möchte müsste ich ja
getElementsByName
mit
getElementsByClass
ersetzen.
Habe von sowas aber bislang noch nicht gehört.



Mit den zwei php variblen wollte ich die textausgabe erstellen.

In dem tooltip soll verschiedene typo vorhanden sein.
Im Script wurde das zwar mit Hilfe des "title" attributs gelöst, allerdings lässt das nur einen text ohne typografische varianz zu.
Es gibt ein schema, welches eingehalten werden soll, die unterschiedlichen texte wollte ich als php Variblen ablegen. Als beispiel:

$headline1 = Hallo
$headline2 = Tschüss
$descr1 = text1
$descr2 = text2


Im vorgefertigten tooltip habe ich dann eine ausgabe wie z.B.
<h2>$headline</h2><br />
$descr


wenn ich jetzt einen mouseover über das erste bild habe wird
$headline = $headline1
und
$descr = $descr1
beim 2. bild geschieht das gleiche nur mit den entsprechenden variablen.



Ich hoffe ihr versteht was ich meine :O

nuit nuit am 10.12.07 19:37

dann würde ich lieber rel nehmen und alle elemente durchgehen..ich bin grad am überlegen, wie man das sonst lösen könnte, mootools könnte das vielleicht vereinfachen, aber der geht sicher auch nur alle elemente durch

da sind wir grad noch selber am überlegen, was das sinnvollste ist :D

das andere ist recht einfach, es könnte sogar gehen, da html reinzuschreiben -.- in den titel, aber ob das dann konform ist, wage ich zu bezweifeln....mhhh...mal überlegen, müsste es sicher was geben -.-

edit: ach soo willst du das machen...mhhhhhh....böööse -.-
ähhhm....noch nie mit templates und Js gearbeitet....geht das überhaupt so gut? noja man kann einen string ersetzen...das ist das einzige was mir dazu einfällt......man kann ja auch splitten, soweit ich mich erinnere....dann könnten man es so machen, dass man in den titel einträgt: Title::message
und das splittet man vor der ausgabe und ersetzt dann das grunddesign des tips :D dann wäre das design des tooltips komplett nur 1mal definiert, das könnte man auch einfach mal einlesen am anfang -.-
mhh... sonst fällt mir dazu nicht viel ein

der_nic der_nic am 10.12.07 20:02

Arg... Mir fällt gerade auf: rel gibts nur für Links :( nix nit <div rel="">

//edit: nunja d.h. man müsste für jedes Tooltip in ein Ankerelement einbetten, was eigentlich kein Problem sein sollte. Und macht semantisch auch noch einigermassen Sinn

nuit nuit am 10.12.07 20:17

Quote
Original von der_nic
Arg... Mir fällt gerade auf: rel gibts nur für Links :( nix nit <div rel="">

//edit: nunja d.h. man müsste für jedes Tooltip in ein Ankerelement einbetten, was eigentlich kein Problem sein sollte. Und macht semantisch auch noch einigermassen Sinn

Ankerelement?

macht wenig sinn? oder ich versteh grad nicht was du meinst, du hast nur ein paar Universalattribute, und das sind: class, id, title, style, dir und lang

http://de.selfhtml.org/html/referenz/attribute.htm

mhh....aber über die class zu gehen, scheint mir nicht so schwer zu sein

der_nic der_nic am 10.12.07 20:38

Naja er will doch irgendwie über ein Bild oder einen Text ein Tooltip einbinden. Also zb
<a rel="tooltip" title="Das ist ein Bild"><img src="..." alt="..." /></a>
oder
<a rel="tooltip" title="das ist ein Text">Bla bla bla</a>

Gut über class kann man es, wie in meinem obrigen Post erwähnt, natürlich auch machen, musst halt dann einfach aufpassen dass du für die class nicht irgendwelche CSS Definitionen festlegst, die dann stöhrend auftretten oder überschrieben werden könnten.

nuit nuit am 10.12.07 21:38

Quote
Original von der_nic
Naja er will doch irgendwie über ein Bild oder einen Text ein Tooltip einbinden. Also zb
<a rel="tooltip" title="Das ist ein Bild"><img src="..." alt="..." /></a>
oder
<a rel="tooltip" title="das ist ein Text">Bla bla bla</a>

dann würde ich eher machen:
<a name="tooltip" title="das ist ein Text">Bla bla bla</a>
nachdem das für den a-tag definiert ist und somit kann man leichter drauf zugreifen :D boah das ist genial, man sucht sich alle raus, die als name tooltip haben und schaut dann nochmal nach, ob es ein a-tag ist :D
nd dann nimmt man das child-elemnt und haut ein Tooltip drüber -.- whou das könnte gehen :D

ist ne geile lösung, die idee ist der hammer

habs jetzt mal umgeschrieben: sieht jetzt so aus:
achtung, er geht nur vom ersten element aus, bisher, also wenn mehrere elemente drin stehen, beachtet er die nicht....kann man aber auch noch machen...udn er geht nicht in die tiefe -.- d.h. einfach das erste element :D
http://demo.moonsword.info/webstatt/tooltip.html

Afterlame Afterlame am 10.12.07 21:52

da kann ich nicht mehr folgen :D

Hab das ganze jedenfalls in etwa in das layout gepackt.

darin ist auch nochmal das vorhaben mit dem php im mouseover eingebunden.
In dieser Konstellation funktioniert es leider nicht.

http://prophet-design.de/tests/phpstuff/mouse.php



//edit:

Quote
Original von der_nic
Naja er will doch irgendwie über ein Bild oder einen Text ein Tooltip einbinden.


Berichtige mich wenn ich das falsch verstanden habe oder das probleme macht aber eigentlich glaub ich denkst du zu kompliziert.
Ich brauche quasi nur ein bewegliches div, das ich dynamisch mit unterschiedlichen texten füllen kann.
Das div kann ich per background-image: ja so gestalten wie ich lust hab.
die textfeld positionierung lässt sich ja per padding steuern.

nuit nuit am 10.12.07 22:21

http://demo.moonsword.info/webstatt/tooltip2.html

so funktioniert es...mit dem neuen script :D du msust jetzt ein <a> um das element rumsetzen, wo du anzeigen will tooltip (boah das klingt wie tarzan)

noja....und sonst...liegt es wahrscheinlich ein dem php teil...zeig mal den body teil, wie du den generierst ;)

dann kann man dir weiterhelfen....du kannst mich auch schnell im icq anschreiben :D

der_nic der_nic am 10.12.07 22:32

Na das sieht doch schon ganz ordentlich aus :)

Was noch auffällt: Ein <div> innerhalb eines <a>... ganz pöös! Besser das mit einem <span>, dass dann per CSS (display:block; width:XXXpx; height:XXXpx;) auf die Form eines <div> gestyled wird.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt