[js] Text Preview....maar in IE?

[AkaXakA]

Na het zien van live comment previews in hicksdesign dacht ik: dat wil ik ook!
Dus heb ik de nieuwe code van Glimps of a girl genomen en aangepast om wat flexibeler te zijn. Het resultaat is het volgende:

code:

/* live comment preview - without linebreak */
function ReloadNoBreakDiv(boxName,cellName)
{
var NewText = document.getElementById(boxName).value;
var DivElement = document.getElementById(cellName);
DivElement.innerHTML = NewText; 
}
/* uber live comment preview  - with linebreak */
function ReloadTextDiv(textName,divName)
{  
  var NewText = document.getElementById(textName).value;
    splitText = NewText.split(/\n/);
   var DivElement = document.getElementById(divName); 
   var i = 0;
    DivElement.innerHTML = '';
    for(i = 0; i < splitText.length; i++) {
      if(splitText[i].length > 0 ) {
        DivElement.innerHTML += splitText[i] + "</p><p>";
      }
    }
}

// En de volgende (x)html:

<input type="text" name="mail" id="mail" value="" onBlur="ReloadNoBreakDiv('mail','MailDisplay');" />

<textarea name="text" id="text" onKeyup="ReloadTextDiv('text','TextDisplay');">

<a href="#" id="MailDisplay"></a>
<p id="TextDisplay"></p>

Code in actie.. Ik heb de send functie idd tijdelijk onklaar gemaakt ja.. Het gaat om de preview actie.

Dit werkt allemaal prima in Mozilla (FF), maar er gebreurt helemaal niets in IE! maar alleen de mail en name functie doet het....
De functie met linebreak niet...

Nog een tweede, minder belangrijke vraag:
Is het ook mogelijk om nog een variable te hebben om linebreak aan/uit te zetten? Je ziet dat ik nu 2 verschillende functies gebruik om dit op te lossen, maar liever heb ik er één die beide kan.

[ Voor 11% gewijzigd door AkaXakA op 10-05-2004 00:33 ]

[Guillome]

Dit is toch vrij simpel te maken?
Ik heb dat ook in m`n online HTML editor gemaakt: http://html.guillome.nl/
Als je daar rechts UBB aanklikt, dan kan je gewoon je bericht typen, en onderin zie je het resultaat

Je kan de code gewoon bekijken (`t is JS only) om te zien hoe ik het gedaan heb.

Ik zou je aanraden meer met regExp`s te werken. Dat is zeer flexibel en goed mee te werken.

[ Voor 32% gewijzigd door Guillome op 10-05-2004 00:49 ]

[crisp]

het probleem zit 'm m.i. hierin:

JavaScript:

DivElement.innerHTML += splitText[i] + "</p><p>";

elke iteratie je innerHTML opvragen is al niet zo tof, maar daarbinnen je structuur veranderen al helemaal niet; daarbij kan ik nu dus gewoon HTML en JS code inkloppen in de textarea en vervolgens de hele pagina onderuit schoppen (tip: vervang bepaalde tekens door entities)

wb je 2e vraag: een extra parameter en een extra afvraging in je functie kan al een hoop doen..

[ Voor 12% gewijzigd door crisp op 10-05-2004 01:06 ]

[AkaXakA]

Ah....misschien heb je het verkeerde idee gekregen: ik kan echt niets in JS behalve het een beetje aanpassen... ik heb ook maar alles bij elkaar geschraapt

Dus regExp en entities zeggen me niet echt veel....aan extra parameters had ik al gedacht, maar ik wil eerst die breaks goed hebben...

Ik heb nu het idee dat ik bij elke \n een </p><p> ingevuld moet krijgen...maar op een andere manier dan nu gebeurd, ik heb echter geen flauw idee hoe je dat code in JS.

XLerator Je pagina is helemaal gemangeld in Mozilla...ik zou ff kijken naar je css (en daar weet ik weer wel veel van, je mag me gerust vragen)

[crisp]

ok, je wilt iets doen met JS maar je weet er niets vanaf? Dan zou ik zeggen: ga eerst JS leren!
Een kwestie van "schoenmaker blijf bij je leest" - als je er geen verstand van hebt moet je er ook niet aankomen, en als je er dan wel naar vraagt is het dus eigenlijk een scriptrequest...

[AkaXakA]

hehe....het is een 'zou iemand er licht op schijnen, of in ieder geval ergens weten waar ik wel goede code kan vinden' request.

Maar, ik heb al ergens anders gevonden waar ik vandaan kan jatten
weblog van Andy Budd: http://www.andybudd.com/a...coding/index.php#comments

Gemixt met mijn code geeft dat:

code:

/* live comment preview - all in one */
function ReloadAllDiv(textName,divName,breakOn)
{
 var DivElement = document.getElementById(divName);
 var NewText = document.getElementById(textName).value;
 if(breakOn == 'yes' ) {
        DivElement.innerHTML = '<p>'+NewText.replace(/(\n|\r)/g,'<br/>').replace(/(<br \/>){2,}/gi,'<'+'/p><p>')+'<'+'/p>';
      }
      else {
          DivElement.innerHTML = NewText;
      }
}

//Met als html:
<input type="text" name="mail" id="mail" value="" onBlur="ReloadAllDiv('mail','MailDisplay','no');" />

<textarea name="text" id="text" onKeyup="ReloadAllDiv('text','TextDisplay','yes');">

<a href="#" id="MailDisplay"></a>
<div id="TextDisplay"></div>

En wat was nou het probleem? Je kan in IE niet naar <p> schrijven, maar wel naar <div>, dus ff p in div veranderen en het werkt...!

Ik heb ook een manier gevonden (zelf ja! wooei!) om óf zonder óf met Breaks erin te hebben. Als iedereen bij z'n leest zou blijven, zouden we nooit verder komen.

Is deze code netjes genoeg? Er kan vast wel iets geoptimaliseerd worden.

[ Voor 21% gewijzigd door AkaXakA op 10-05-2004 02:39 ]

[Wolfboy]

ik zie zo eventjes weinig ruimte voor verbetering, het is gewoon een simpel en effectief script
valt niet echt meer te optimaliseren denk ik (maar crisp zal vast nog wel wat weten )

[crisp]

Je kan best naar een P schrijven; dat IE daar z'n nek over breekt zegt meer over IE dan over de techniek
Verder blijf ik erbij dat je moet oppassen met innerHTML in dit geval; je zal op z'n minst < en > moeten vervangen door entities.

Ik ben blij dat je zelf toch wat meer moeite erin gestoken hebt, dat was ook de opzet van mijn antwoord. Enkel code jatten kan iedereen maar leert niemand iets van. Gelukkig heb je nu een stukje code gevonden van iemand die in ieder geval weet waar 'ie het over heeft...

[ Voor 37% gewijzigd door crisp op 10-05-2004 07:37 ]