ugrás a tartalomhoz

Szöveg megjelenítése hover-re input elem felett

nándi · 2005. Nov. 24. (Cs), 18.39
A köveketkező kód FF alatt nem működik. Opera is IE alatt jó. (ha rávisszük a kúrzort az input elemre egy kis szövegnek kellene fölötte megjelenni)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#csshelp {
position: absolute;
visibility: hidden;  
}
</style>
<script language="JavaScript">

function megjelenit(szoveg, idname) {
var x = getElementPositionleft(idname);
var y = getElementPositiontop(idname);
document.getElementById("csshelp").style.left = x+10+"px";
document.getElementById("csshelp").style.top = y-30+"px";
document.getElementById("csshelp").innerHTML = szoveg;
document.getElementById("csshelp").style.visibility = 'visible';
setTimeout("eltuntet()",5000);
}

function getElementPositiontop(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetTop = 0;
while (offsetTrail){
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return offsetTop;
}

function getElementPositionleft(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
while (offsetTrail){
offsetLeft += offsetTrail.offsetLeft;
offsetTrail = offsetTrail.offsetParent;
}
return offsetLeft;
}

function eltuntet() {
   document.getElementById("csshelp").style.visibility = 'hidden';
}
</script>
</head>
<body>  
<br />                        
<br />
<div id="csshelp" onmouseout="eltuntet();"></div>
<input  name="inputy" onmouseover="megjelenit('Ennek kéne megjelennie ff-en is.', 'inputy')" type="text" onmouseout="eltuntet();" />
</body>
</html>


Van vkinek ötlete?
 
1

offsetParent

Táskai Zsolt · 2005. Nov. 24. (Cs), 23.18
csak tipp, de úgy emlékszem, hogy offsetParent nincs. nézd meg Javascript debugger addonnal. ott látsz minden tagváltozót.
tényleg csak rémlik
Tasi
2

de van

nándi · 2005. Nov. 25. (P), 13.07
Eszerint van. Amúgy ha nem lenne akkor gondolom Operában meg IE-ben sem kéne jól működnie.

(Amúgy nem igazodtam ki az addon-nal amit említettél.)
9

pontatlan voltam

Táskai Zsolt · 2005. Dec. 1. (Cs), 22.54
nyilván létezik ilyen attribútum, IE-ben megy is, ezért van benn az MSDN-ben. de nem a M$-é a HTML szabvány. szóval az offsetParent nem szabványos, itt írják:
http://www.webreference.com/dhtml/diner/realpos1/2.html
sajnálom, hogy nem boldogultál a debuggerrel, anélkül sok mindenre nem jöttem volna rá már életemben...
Tasi
3

megvan

nándi · 2005. Nov. 26. (Szo), 11.21
Közben rájöttem, hogy az input tag-ben a name helyett id-t kell rakni. Ami érthető is ha utána getElemenetById-t használok. Viszont így az nem világos hogy miért működött IE és Opera alatt. :)
4

Kerék újrafeltalálása

janoszen · 2005. Nov. 26. (Szo), 11.51
Üdv!

Miért kell a kereket újra feltalálni? Elég, ha adsz az input mezőnek egy TITLE paramétert a szöveggel, automatikusan meg fog jelenni a szöveg.
5

TITLE túl "statikus"

nándi · 2005. Nov. 26. (Szo), 13.23
Nem lenne rossz, ha:
- rögtön megjelenne (én pl a title-t képeknél szoktam meg, eddig nem is tudtam hogy input-nál is lehet ilyen, ergo erről többen nem tudhatnak, mezei userek) Viszont a fenti megoldás rögtön megjelenik.
- ha megadható lenne hogy meddig látszódjon alapból a szöveg. Fenti esetben ez megadható. Title viszont 5 másodperc után mindig eltűnik.
- ha formázható lenne a megjelenítendő szöveg. Fenti eseteben ez is megoldható.

Amúgy köszi az infót, mert újat tanultam.
6

Szemantikus HTML

janoszen · 2005. Nov. 26. (Szo), 18.03
Üdv!

Szvsz a title tag szándékosan nem nyílik meg azonnal. Egyébként javaslom, hogy ha jól akarod megcsinálni, akkor diszkrét JavaScript-tel csináld meg, hogy a title értékét vegye és azt jelenítse meg. Szvsz sokkal elegánsabb, mert akinek nincs bekapcsolva JS, az is tudja használni.

Egyébként a title működését már rég megszokták a felhasználók, sztem nem kellene erőszakosan valami mást csinálni.

Valahol láttam erre egy CSS megoldást, az volt a lényege, hogy volt vmi ilyen kód:

 Ez itt egy
 <span class="szoveg">szöveg
  <div class="title">
   Ide a
   <strong>formázott</strong>
   szöveget.
  </div>
 </span>
Ehhez a CSS így nézett ki:

.szoveg .title
{
 display:none; 
}

.szoveg:hover
{
 position:relative;
}

.szoveg:hover .title
{
 position:absolute;
 top:14px;
 left:14px;
 display:block;

 /* További formázások */
 border:1px solid #00000;
}
Mivel a :hover nem működik IE alatt, a whatever:hover JS behaviourt használták hozzá.

Szerintem, ezt a megoldást azért kellene használni, mert 1. kielégíti az igényeid mindegyikét 2. még a Lynx-et használó user is fogja tudni használni 3. nincs benne "indiszkrét" JavaScript. :)

Remélem, segített.
7

spanon belül nem lehet div

Jano · 2005. Nov. 26. (Szo), 18.41
Jó a tipp, egyetlen szépséghibája, hogy SPANon belül nem lehet DIV vagy bármilyen más blokk szintű elem. Persze erre megoldás, annyi, hogy vagy kívül is egy DIV van, vagy belül is SPAN.
8

Igaz.

janoszen · 2005. Nov. 27. (V), 11.27
Igaz, kicsit siettem a leírással, nem figyeltem oda. Bocsánat. De gondolom, a lényeg kivehető volt.