Bepalen of regel te lang is in div met "nowrap" - Softwareontwikkeling

dinsdag 20 november 2007 09:44

Acties:

Verwijderd

Topicstarter

Ik wil graag een tooltip tonen met de complete tekst wanneer de tekst te lang is voor de div (met "nowrap" attribuut). Is er een manier om te weten dat de tekst inderdaad is afgebroken? Ik wil nl. de tooltip alleen in dat geval tonen, en niet altijd.

dinsdag 20 november 2007 18:22

Acties:

storeman

Met javascript kun je karakter voor karakter de tekst doorlopen. Je kunt hiervan dan de afmetingen en positie achterhalen, wellicht dat je daar wat mee kunt

"Chaos kan niet uit de hand lopen"

dinsdag 20 november 2007 18:24

Acties:

Mathijs1

Maar dan zit je wel met het probleem dat de string 'wwwww' met lengte 5 een stuk langer uitpakt dan 'iiiii' met ook lengte 5..

dinsdag 20 november 2007 18:34

Acties:

MichielioZ

Miscchien omslachtig, maar je zou de text met javascript in een hidden veld kunnen zetten dat geen "nowrap" heeft en daarvan de width bepalen, is ie groter dan de div, is ie ingekort...
Niet echt een mooie oplossing, zodra ik iets mooiers bedenk laat ik 't weten

Iedereen wil terug naar de natuur, maar niemand wil lopend...

dinsdag 20 november 2007 18:47

Acties:

Verwijderd

Topicstarter

MichielioZ schreef op dinsdag 20 november 2007 @ 18:34:
Miscchien omslachtig, maar je zou de text met javascript in een hidden veld kunnen zetten dat geen "nowrap" heeft en daarvan de width bepalen, is ie groter dan de div, is ie ingekort...
Niet echt een mooie oplossing, zodra ik iets mooiers bedenk laat ik 't weten

Toch een interessante oplossing. Ik zal eens in die richting proberen... bedankt.
En voor mooier mag je natuurlijk altijd terugkomen

dinsdag 20 november 2007 19:00

Acties:

Verwijderd

Bedoel je zoiets?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>Tooltip?</title>

<style type="text/css">
#buiten, #buiten2 {
    width:200px;
    overflow:hidden;
    border: 1px solid #000;
}
#binnen, #binnen2 {
    white-space:nowrap;
}
</style>

<script type="text/javascript">
function tooltip(){
    if (document.getElementById('binnen').offsetWidth > document.getElementById('buiten').clientWidth){
        alert("Wel een tooltip nodig voor de eerste tekst.");
    } else {
        alert("Geen tooltip nodig voor de eerste tekst.");
    }

    if (document.getElementById('binnen2').offsetWidth > document.getElementById('buiten2').clientWidth){
        alert("Wel een tooltip nodig voor de tweede tekst.");
    } else {
        alert("Geen tooltip nodig voor de tweede tekst.");
    }
}
</script>

</head>

<body onload="tooltip()">
<h1>Tooltip nodig?</h1>

<div id="buiten">
    <span id="binnen">Ik wil graag een tooltip tonen met de complete tekst wanneer de tekst te lang is voor de div (met "nowrap" attribuut). Is er een manier om te weten dat de tekst inderdaad is afgebroken? Ik wil nl. de tooltip alleen in dat geval tonen, en niet altijd.</span>
</div>
<br>
<div id="buiten2">n IE7.[/edit]
    <span id="binnen2">Ik wil</span>
</div>


</body>

</html>

edit:
Alleen gecheckt in IE6.

edit:
Werkt ook in Safari, Firefox, Opera en IE7.

[ Voor 3% gewijzigd door Verwijderd op 20-11-2007 20:40 ]

woensdag 21 november 2007 13:23

Acties:

Verwijderd

Topicstarter

Ja - dit bedoel ik - bedankt

woensdag 21 november 2007 18:43

Acties:

Verwijderd

Jij bedankt. Jouw vraag bleek een oplossing voor een probleempjes bij mezelf te zijn. Zo gaat het ook wel eens.

woensdag 21 november 2007 22:49

Acties:

crisp

Devver

Pixelated

Persoonlijk zou ik scrollWidth vergelijken met clientWidth, hetzelfde doen we in onze js ellipsis-implementatie op de frontpage ( http://tweakers.net/x/general.js )

Intentionally left blank