Semantics

Necessary HTML-elements (with the supplied CSS class).
NOTE: If you just use the default skin (see , this semantic is NOT needed.

Mandatory input-fields (<input>)

  • Street name (streetInput)
  • Street number (streetNumberInput)
  • Floor (floorInput)
  • Flat (householdInput)

Mandatory containers (<div>) (will be populated)

An empty div that will be populated with all the alternatives to select from.

  • streetContainer - Will be populated with streets.
  • streetNumberContainer - Will be populated with gatenr.
  • floorContainer - Will be populated with floors.
  • householdContainer - Will be populated with flats.

Mandatory fields (will be populated)

Will both be populated when user choses street number.

  • zipLabel
  • cityLabel

Optional fields (will be populated)

  • floorLabel - Will be populated when user choses floor.
  • floorTypeLabel - Will be populated when user choses floor.
  • flatNumberLabel - Will be populated when user choses flat.

Other optional fields

  • streetInputHint - Scrolling down the streetInput will toggle the class visible on this element.

Example


<div id="my-address-helper">
   <input type="hidden" class="selectionCache">
   <p>
      <span class="streetInputHint">Skriv <em>,</em> og <em>POSTSTED</em> for å filtrere mer</span>
      <input class="streetInput" placeholder="Street">
      <div class="streetContainer"></div>
   </p>
   <p>
      <input class="streetNumberInput" placeholder="StreetNo">
      <div class="streetNumberContainer"></div>
   </p>
   <p>
      <input class="floorInput" placeholder="Floor">
      <div class="floorContainer"></div>
   </p>
   <p>
      <input class="householdInput" placeholder="Flat">
      <div class="householdContainer"></div>
   </p>
   <p>
      <span class="zipLabel"></span> <span class="cityLabel"></span> 
   </p>
</div>

Example styles


.streetInputHint{
  display: none;
  opacity: .5;
}

.streetInputHint.visible{
  display: inline;
}