Webstatt.org - Community seit 2006 - 2012 (2024?)

Tooltip nur in x-Achse an Mauszeiger binden

Avatar user-117
08.12.2007 20: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.


gruß
Henning
|| prophet-design.de -- Frische Ideen ||
Avatar user-271
09.12.2007 16: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 Fettes Grinsen

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, user-271

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 Fettes Grinsen
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 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-117
09.12.2007 20: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. zwinkern

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 ?>'zwinkern" onmouseout="document.write('<?php $content=$blank ?>'zwinkern"></div>
|| prophet-design.de -- Frische Ideen ||
Avatar user-162
09.12.2007 23: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; ?>'zwinkern; ...
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-271
10.12.2007 01:06
du musst noch ein top einsetzen, so ich Js kenn, will der das definiert haben -.-

ausserdem schreib lieber:
document.getElementById('mobilbox'zwinkern.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 Fettes Grinsen

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

document.onmousemove = function(e) {

  coords.handler(e);

  

  document.getElementById('mobilbox'zwinkern.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'zwinkern.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 Fettes Grinsen 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 zwinkern

liegt hier: http://demo.moonsword.info/webstatt/tooltip.html
source ist ja klar zwinkern kannst ja noch ein bisschen abändern, werte und so, oder vielleicht nicht mit dem Namen, oder was auch immer Fettes Grinsen ich finds nur so schöner, als immer mouseover und mouseout zu shreiben 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
10.12.2007 09: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 zwinkern 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
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-271
10.12.2007 12:47
den inhalt des tooltips über title, damit auch die leute die information kriegen, die kein Js haben frech
nachdem title auch einfach angezeigt wird zwinkern

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? 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
10.12.2007 13: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>zwinkern in Frage kommen verkleinert sich aber hier die Anzahl der zu überprüfenden Elemente stark.
Hier der lightbox-Code
var anchors = document.getElementsByTagName('a'zwinkern;

// loop through all anchor tags

for (var i=0; i<anchors.length; i++){

    var anchor = anchors[i];

    var relAttribute = String(anchor.getAttribute('rel'zwinkern);

    // use the string.match() method to catch 'lightbox' references in the rel attribute

    if (anchor.getAttribute('href'zwinkern && (relAttribute.toLowerCase().match('lightbox'zwinkern)){

        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? lächeln
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-117
10.12.2007 17:57
wow, danke für eure mühen.
Ich merke schon, dass ich die letzten jahre nicht gecoded habe. lächeln
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
|| prophet-design.de -- Frische Ideen ||
Avatar user-271
10.12.2007 18: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 Fettes Grinsen

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 Fettes Grinsen 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 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
10.12.2007 19:02
Arg... Mir fällt gerade auf: rel gibts nur für Links traurig 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
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-271
10.12.2007 19:17
Original von user-162
Arg... Mir fällt gerade auf: rel gibts nur für Links traurig 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 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
10.12.2007 19: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.
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-271
10.12.2007 20:38
Original von user-162
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 Fettes Grinsen 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 Fettes Grinsen
nd dann nimmt man das child-elemnt und haut ein Tooltip drüber -.- whou das könnte gehen Fettes Grinsen

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 Fettes Grinsen
http://demo.moonsword.info/webstatt/tooltip.html 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-117
10.12.2007 20:52
da kann ich nicht mehr folgen Fettes Grinsen

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:
Original von user-162
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.
|| prophet-design.de -- Frische Ideen ||
Avatar user-271
10.12.2007 21:21
http://demo.moonsword.info/webstatt/tooltip2.html

so funktioniert es...mit dem neuen script Fettes Grinsen 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 zwinkern

dann kann man dir weiterhelfen....du kannst mich auch schnell im icq anschreiben Fettes Grinsen 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-162
10.12.2007 21:32
Na das sieht doch schon ganz ordentlich aus lächeln

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:XXXpxzwinkern auf die Form eines <div> gestyled wird.
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine