Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

text form verschuift na plaatsen cursor

bewerkt di 25 nov 2014 in XHTML, XML Posts: 879
Ik breek mijn kop over het volgende:
Formvalidatie formulier: formvalidatie
Op het moment dat ik de cursor in een van de velden plaats wordt de ruimte kleiner tussen:
* man/vrouw checkboxen en Uw adres
* land selectiebox en Contactgegevens
* en tussen Contacteer me checkboxen en submit
In de console zie ik niets veranderen als ik cursor plaats in de velden
Zie ik iets over het hoofd?

Update:
heb net dit stuk javascript uitgeschakeld en nu verschuift ie niet meer:

// indien error message; verwijder als cursor in veld geplaatst wordt
$(document).ready(function(){
// input velden
$("input").click(function(){
$("input").removeClass("error"); // verwijder error classe
//$("select").removeClass("error"); // verwijder error classe
$("p").html(""); // verwijder innerHTML message
});
// select velden
$("select").click(function() {
$("select").removeClass("error"); // verwijder error classe
$("p").html(""); // verwijder innerHTML message
});
});
Maar: in dit stuk wordt alleen de error classe verwijderd en de html tussen de p tags; ik verwijder geen complete p tag; toch verschuift ie....

Reacties

  • Kan het niet testen, maar als je de javascript error eens oplost, is hety dan beter?

    document.getElementById("name").focus(); <- element met dat id bestaat niet
  • PMPosts: 732
    Moet je niet in het begin die p class error al op display none zetten?

    bv.

    .red { height: 0;}
    .red.error { height: ..px}


    If it's not fun, you're not doing it right!
  • bewerkt di 25 nov 2014
    PMPosts: 879
    probleem gevonden: de 3 p tags waar het probleem zich voordoet zien er zo uit:


    <p id="geslachtError" class="red">&nbsp;</p>
    <p id="landError" class="red">&nbsp;</p>
    <p id="contactmeError" class="red">&nbsp;</p>

    Haal ik nu bij alle 3 de harde spatie weg,

    <p id="geslachtError" class="red"></p>
    <p id="landError" class="red"></p>
    <p id="contactmeError" class="red"></p>
    dan schuift de onderliggende tekst omhoog.
    Logisch ook nu ik erover nadenk: die harde spatie wordt als html gezien en daarmee voert de p tag zijn paragraph ruimte uit

    Bij click op een inputveld werd de html immers verwijderd tussen de p tags; vandaar dat ie omhoog schoot

    $("input").click(function(){
    $("input").removeClass("error"); // verwijder error classe
    $("p").html(""); // verwijder innerHTML message
  • PMPosts: 732
    Goed bezig ;)
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.