[CSS] Remaining chars in form

[JefSnare]

Geachte tweakers,

Ik heb weer eens iets gemaakt wat weer niet werkt in IE...

De bedoeling is dat de remaining chars in de form worden weergegeven op de achtergrond. Zie http://hqweb.nl/index.php?page=article&p=59

In ff wordt alles keurig weergeven echter in IE een groot wit blok...

Hieronder even de code (ter info)

Cascading Stylesheet:

/* The position of the parent is made relative so 
   that absolutely positioned elements take their location from this */
.charcounter {
  position: relative;
  width: 350px;
  height: 100px;
}
 
/* Make both the counter div and the textarea inside the 
   div bigger and show up on top of each other by placing
   them on top left corner with absolute positioning */
.charcounter * {
  width: 350px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background:none transparent;
}
 
/* Modify the counter div's font to show up in the middle
   and with bigger letters */
.charcounter div {
    float: left;
  color: #000;
  font-family: Arial;
  font-size: 550%;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  filter:alpha(opacity=50);
  opacity: 0.5;
}
 
/* Finally, we want the counter to change color when it's negative */
.charcounter div.negative {
  color: #00008B;
}

JavaScript:

//We want this to run as soon as the page has loaded
window.onload = function() {
  //Character limit
  var limit = 140; 
 
  //the div to contain the background and the textarea
  var div = document.createElement('div');
  div.className = 'charcounter';
 
  //Append the div into the document before the textarea, so that when we
  //remove the textarea, it can be inserted inside the div and it'll look like it never moved.
  var txt = document.getElementById('text');
  txt.parentNode.insertBefore(div, txt);
 
  //this will contain the background numbers
  var counter = document.createElement('div');
  div.appendChild(counter);
  counter.innerHTML = limit;
 
  //Add both keypress and keydown handlers to make sure the event always fires
  txt.onkeypress = txt.onkeydown = function() {
    //Calculate how many chars the user has remaining
    var len = limit - txt.value.length;
    if(len < 0) {
      counter.className = 'negative';
    }
    else {
      counter.className = '';
    }
 
    counter.innerHTML = len;
  };
 
  txt.parentNode.removeChild(txt);
  div.appendChild(txt);
}

Het heeft even wat uitleg nodig, in het textfield moet dus op de "achtergrond" de remaining chars komen...nu werken css, js en html keurig samen in FF, IE is echter drama.

Het lukt mij dus niet om dit werkend te krijgen in IE, na veel fora bezoeken en de GoT zoekfunctie ook niks gevonden dus vraag het toch maar...

mijn dank is groot

[ Voor 6% gewijzigd door JefSnare op 27-10-2009 11:47 ]

[Spinal]

IE8 geeft hier een JS-fout:

Bericht: Onbekende runtime-fout
Regel: 18
Teken: 3
Code: 0
URI: http://hqweb.nl/js/countchar.js

Lijkt me dat daar ergens de fout zit...

[JefSnare]

ZanderZ schreef op zondag 25 oktober 2009 @ 22:26:
IE8 geeft hier een JS-fout:

Bericht: Onbekende runtime-fout
Regel: 18
Teken: 3
Code: 0
URI: http://hqweb.nl/js/countchar.js

Lijkt me dat daar ergens de fout zit...

Aha, maar daar wordt het getal gemaakt en in de div gezet, ik weet echter niet wat ik hier zou kunnen/moeten veranderen zodat de error weg is.

[crisp]

Vreemde error, ik gooi het maar op IE-weirdness. Het is ook niet te reproduceren in een losse testcase.

Wat je kan proberen is om regel 17 en 18 om te draaien, of ipv innerHTML te gebruiken dit te doen:

JavaScript:

counter.appendChild(document.createTextNode(limit));

[JefSnare]

Naja, ik maak nu span tags en dan werkt het wel, weliswaar met een margin van 100px maar het werkt, die error krijg ik nu in principe niet meer.

JavaScript:

  //the div to contain the background and the textarea
  var div = document.createElement('span');
  div.className = 'charcounter';
 
  //Append the div into the document before the textarea, so that when we
  //remove the textarea, it can be inserted inside the div and it'll look like it never moved.
  var txt = document.getElementById('text');
  txt.parentNode.insertBefore(div, txt);
 
  //this will contain the background numbers
  var counter = document.createElement('span');
  div.appendChild(counter);
  counter.innerHTML = limit; 

createElement heb ik dus nu met span....

@crisp: Idd ik kan het nergens anders reproduceren...

[JefSnare]

Ik kan aanpassen wat ik wil maar het werkt, er verschijnt echter nog steeds een foutmelding in IE...

[crisp]

JefSnare schreef op maandag 26 oktober 2009 @ 17:53:
Ik kan aanpassen wat ik wil maar het werkt, er verschijnt echter nog steeds een foutmelding in IE...

Ik krijg geen errors meer in IE hoor...

[Da Weef]

JefSnare schreef op zondag 25 oktober 2009 @ 22:06:
Geachte tweakers,

Ik heb weer eens iets gemaakt wat weer niet werkt in IE...

Lol, mooi hoor credits nemen voor iemand anders' werk

Na jouw bovenstaande uitspraak en de engelse comments in de code die je poste kon ik het niet laten om even te Googlen.

Prima dat je het wiel niet nogmaals zelf uit wil vinden, maar waarom nadrukkelijk erbij zetten dat JIJ iets hebt gemaakt, terwijl dit simpelweg niet het geval is. Je hebt potdorie niet eens 2 regels code aangepast...

[JefSnare]

Da Weef schreef op dinsdag 27 oktober 2009 @ 02:20:
[...]


Lol, mooi hoor credits nemen voor iemand anders' werk

Na jouw bovenstaande uitspraak en de engelse comments in de code die je poste kon ik het niet laten om even te Googlen.

Prima dat je het wiel niet nogmaals zelf uit wil vinden, maar waarom nadrukkelijk erbij zetten dat JIJ iets hebt gemaakt, terwijl dit simpelweg niet het geval is. Je hebt potdorie niet eens 2 regels code aangepast...

1) Wij had het moeten zijn
2) Zie nu inderdaad dat mijn collega heeft gelogen

Voortaan zelf ook maar even googlen aangezien dat die collega dat dus ook heeft gedaan

Excuses

Edit: @crisp: Idd errors zijn opgelost...