Layer probleem

[anoniem]

Ok ik heb het volgende probleem: Ik gebruik een layer systeem om tips te laten zien dat betekent als er iemand over een vraagteken gaat laat ik een boodschap verschijnen in een layer. Dit ziet er als volgt uit: [code:1:c123f4b48e] <div class=tooltip id=tt8> Hier staat een tip </div> [/code:1:c123f4b48e] De class tooltip is normaal op de pagina niet zichtbaar deze wordt alleen gebruikt om op de layer te plaatsen. De functie ziet er nu als volgt uit: [code:1:c123f4b48e] function ShowTooltip(id) { var tooltipOBJ = eval("document.all['tt" + id + "']"); var tooltipOffsetTop = tooltipOBJ.scrollHeight ; var testTop = (document.body.scrollTop + event.clientY ) - tooltipOffsetTop; var testLeft = event.clientX + 10 ; var tooltipAbsLft = (testLeft < 0) ? 10 : testLeft; var tooltipAbsTop = (testTop < document.body.scrollTop) ? document.body.scrollTop : testTop; tooltipOBJ.style.posLeft = tooltipAbsLft; tooltipOBJ.style.posTop = tooltipAbsTop; tooltipOBJ.style.visibility = "visible"; } [/code:1:c123f4b48e] Deze zit dan dus bijvoorbeeld aan een onmouseover gekoppeld: onmouseover="javascript:showtooltip(8)" Voor de onmouseout is er dan: [code:1:c123f4b48e] function HideTooltip(id) { var tooltipOBJ = eval("document.all['tt" + id + "']"); tooltipOBJ.style.visibility = "hidden"; } [/code:1:c123f4b48e] Dit werkt allemaal wel behalve op een formulier daar verschijnt hij wel maar alle select boxes staan nog boven deze layer. Hoe kan ik dit verhelpen, het is een heel raar probleem want een input box staat er wel onder. Bedankt, Marcel

[anoniem]

Dingen zoals select boxes worden door het OS gerendered. Gevolg daarvan is dat ze altijd bovenop staan... Je zou ze kunnen "hiden" zodra de tooltip verschijnt.. t.

[anoniem]

Los van je probleem even een opmerking over de code. Waarom gebruik je eval() in onderstaande code? [code:1:bb6225831d]var tooltipOBJ = eval("document.all['tt" + id + "']");[/code:1:bb6225831d] Aangezien je alleen een string bewerking doet in een stuk wat ook een string verwacht is het volgende gewoon geldig [code:1:bb6225831d]var tooltipOBJ = document.all['tt' + id];[/code:1:bb6225831d] En als je een beetje volgens de laatste standaarden wil werken dan heeft het natuurlijk de voorkeur om te werken via de DOM [code:1:bb6225831d]var tooltipOBJ = document.getElementById('tt' + id);[/code:1:bb6225831d]

[anoniem]

Jullie hebben idd allebei gelijk. Ik heb even wat geexperimenteert na de opmerking van teacher. Ik kwam op het idee om de layer te vullen met een iframe aangezien dit ook een nieuw window is komt dit wel over de controls heen dacht ik. En het lijkt nog te werken ook ben nu alleen aan het experimenteren met de breedte en hoogte e.d. Bedankt, Marcel

[anoniem]

Je zou ook gewoon het title attribuut kunnen gebruiken wat je bijna in elke tag kunt gebruiken. Gebruikers krijgen dan een tooltip te zien die werkelijk overal overheen rendert. Maar ja, is natuurlijk niet zo mooi als zelf iets in elkaar knutselen :wink:

[anoniem]

Het title attribuut?

[anoniem]

[code:1:3623e27b8d]<a href="http://www.domein.nl/pad/" title="Deze tekst laten zien bij :hover">Meer info...</a>[/code:1:3623e27b8d]Het title-attribuut kun je aan praktisch elk element hangen, let wel op de enigszins beperkte lengte van de tekst die je erin kunt plaatsen. - Bas

[anoniem]

Ja ok dat element maar daar kan ik geen plaatjes en dergelijke in plaatsen... toch? Anders was het wel handig geweest idd. Groet, Marcel

[anoniem]

Wat ook kan is een plaatje van bv. een vraagteken achter je invoerveld zetten zoals: [code:1:b553f97e9f]<img class="help" src="logo_help.gif" alt="uitleg" title="uitleg"/>[/code:1:b553f97e9f] en er dan de volgende in je stylesheet zetten: [code:1:b553f97e9f]img.help { border: none; cursor: help; }[/code:1:b553f97e9f] Als je dan over het plaatje gaat dan verandert de cursor ook in een vraagteken en de helptekst verschijnt. [edit]Ohh, je wil er plaatjes in zetten, dan heeft mijn oplossing ook geen zin[/edit] -Rémy

[anoniem]

Hmm even iets anders waar ik tegenaan loop. Hoe kan ik vanaf de layer zelf de layer verbergen? Dus met een link bijvoorbeeld ik dacht iets van: <a href="javascript:self.style.visibility = \"hidden\"">Verberg</a> Maar dit werkt dus niet... Een suggestie? Bedankt, marcel

[anoniem]

[i:67358cbd4b]self[/i:67358cbd4b] gaat inderdaad niet lukken, dat is namelijk een reference naar je huidige window object. Ik zou gewoon een functie maken waarin je een layer op 'hide' zet en waaraan je de id van een layer meegeeft. Dan kan je deze gewoon vanuit een link aanroepen. Bijv (niet getest) [code:1:67358cbd4b] <script type="text/javascript"> function getLayerObject(sLayerId) { // eventueel uit te breiden met stukjes code voor oudere browsers return (document.getElementById(sLayerId)); } function hide(sLayerId) { oLayer = getLayerObject(sLayerId); oLayer.style.visibility = 'hidden'; } </script> <a href="" onclick="hide('idvanlayer');return false;">klik</a> [/code:1:67358cbd4b]

[anoniem]

Hmm, Ik heb gedaan wat je zei Annie maar dit lijkt niet te werken ik denk dat dat komt omdat ik in mijn <div></div> tags een <iframe> laad zodat deze boven alle formulier elementen valt. De funtie getLayerObject(sLayerId) geeft null terug. Dus ik denk dat hij vanuit dat iframe niet bij de pagina kan komen...? (Klopt dit) Groet, Marcel PS als ik de onmouseover en onmouseout functies combineer hiermee werkt het dus wel. Maar ik wil klikken het layertje onbepaald lang laten zien en dan gebruiker hem laten sluiten.

[anoniem]

Ok ik ben eruit kreeg opeens een ingeving mijn (oftwel Annie's) hide functie ziet er nu als volgt uit: [code:1:bbe482ae64] <script language="javascript"> <!-- function getLayerObject(sLayerId) { return (top.frames['danka_main'].document.getElementById(sLayerId)); } //--></script> <script language="javascript"> <!-- function hide(sLayerId) { oLayer = getLayerObject(sLayerId); oLayer.style.visibility = 'hidden'; } //--></script> [/code:1:bbe482ae64] Je frame moet dan dus wel danka_main heten.... Dan roep je idd gewoon de link aan en dan werkt het! Bedankt voor alle hulp, Marcel