Linuchs: Javascript: innerHeight

Moin,

seit drei Stunden suche ich einen Fehler. Unter ein input-Feld möchte ich ein Hilfe-div positionieren, das per Ajax mit Vorschlägen gefüllt wird.

Es will nicht gelingen, die Position x,y des Hilfe-div festzulegen.

<div class="mb05 bo" style="position:relative;">
<input
id          = "such_plz_ort"
type        = "text"
name        = "such_plz_ort"
size        = 20
maxlength   = 60
value       = ""
autocomplete  = "off"
onkeyup     = "holeOrtVorschlaege('remso.eu',this.id,this.value)"
onblur      = "schliesseOrtVorschlaege(this.id)"
placeholder = "PLZ oder Ort"
/>
  <div id='such_plz_ort_vorschlaege' class="vorschlaege">x</div>
</div>

Warum hat das input-Feld kein innerHeight?

function holeOrtVorschlaege( host, feld_id, wert ) {
  alert ( feld_id + ".innerHeight=[" +document.getElementById(feld_id).innerHeight +"]" );
  ... 
}

Antwort: such_plz_ort.innerHeight=[undefined]

Gruß, Linuchs

  1. Hallo Linuchs,

    Warum hat das input-Feld kein innerHeight?

    innerHeight liefert die Höhe des Anzeigebereichs. Suchst du vielleicht Element.getBoundingClientRect()?

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
    1. Suchst du vielleicht Element.getBoundingClientRect()?

          var rect            = input_feld.obj.getBoundingClientRect();
          alert( "rect.left=[" +rect.left +"] rect.top=[" +rect.top +"] " );
      

      Antwort: rect.left=[787.7000122070312] rect.top=[126.51666259765625]

      Was soll das? Ich mach jetzt erstmal Pause

  2. Hallo,

    <div class="mb05 bo" style="position:relative;">
    <input
    id          = "such_plz_ort"
    type        = "text"
    name        = "such_plz_ort"
    size        = 20
    maxlength   = 60
    value       = ""
    autocomplete  = "off"
    onkeyup     = "holeOrtVorschlaege('remso.eu',this.id,this.value)"
    onblur      = "schliesseOrtVorschlaege(this.id)"
    placeholder = "PLZ oder Ort"
    />
      <div id='such_plz_ort_vorschlaege' class="vorschlaege">x</div>
    </div>
    

    Warum hat das input-Feld kein innerHeight?

    function holeOrtVorschlaege( host, feld_id, wert ) {
      alert ( feld_id + ".innerHeight=[" +document.getElementById(feld_id).innerHeight +"]" );
      ... 
    }
    

    Antwort: such_plz_ort.innerHeight=[undefined]

    Wie wird die Funktion aufgerufen? Welchen Wert hat feld_id innerhalb der Funktion?

    Ciao,
     Martin

    --
    Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
    1. Wie wird die Funktion aufgerufen? Welchen Wert hat feld_id innerhalb der Funktion?

      Verstehe die Frage nicht, ich ḿeine, ich hätte das deutlich gepostet.

      Das input-Feld ist vorhanden, ich klicke rein und gebe das erste Zeichen ein.

      onkeyup löst aus und ruft die function auf. Beim ersten Aufruf soll der Container positioniert werden.

      Und zwar innerhalb eines absolut- oder relative positionierten Containers. Da y unter das input-Feld gehört, brauche ich die Höhe des input-Feldes.

      Habe das bisher so ungefähr mit Pixeln hingebastelt, aber nun habe ich ein deutlich größeres input-Feld. So wie Google.

      1. Hallo,

        Wie wird die Funktion aufgerufen? Welchen Wert hat feld_id innerhalb der Funktion?

        Verstehe die Frage nicht, ich ḿeine, ich hätte das deutlich gepostet.

        Das input-Feld ist vorhanden, ich klicke rein und gebe das erste Zeichen ein.

        in der Tat, ja. Die Eventhandler im HTML habe ich übersehen, weil ich sie da nicht vermutet habe.

        Sorry,
         Martin

        --
        Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
  3. Hallo,

    ich weiß jetzt nicht, warum du das so machst und die Positionierung nicht dem Browser überlässt, aber für die Ermittlung der Höhe von Elementen nehme ich offsetHeight.

    Gruß
    Jürgen