Author Topic: jQuery to JS conversion  (Read 2706 times)

0 Members and 1 Guest are viewing this topic.

Offline Joshuasm32

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 142
  • Rating: +19/-7
    • View Profile
    • Network
jQuery to JS conversion
« on: May 21, 2014, 09:08:14 pm »
I hate jQuery, and I also am quite a noob at it (although I am great at normal JS).  Every now and then, I encounter a good snippet that happens to use jQuery in it...  Can someone here help me to convert it into pure JS to use?

My most recent issue:
Code: [Select]

var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;


hiddenDiv.addClass('hiddendiv common');


$('body').append(hiddenDiv);


txt.on('keyup', function () {


    content = $(this).val();


    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');


    $(this).css('height', hiddenDiv.height());


});


Thanks in advance!
My name is Josh and I a developer at Moonzean. I enjoy Radiohead, web development, Java, and cryptograms.
Spoiler For No Surprises, by Radiohead:
A heart that's full up like a landfill
A job that slowly kills you
Bruises that won't heal

You look so tired unhappy
Bring down the government
They don't, they don't speak for us

I'll take a quiet life
A handshake of carbon monoxide

And no alarms and no surprises
No alarms and no surprises
No alarms and no surprises
Silent, silent

This is my final fit
My final bellyache

With no alarms and no surprises
No alarms and no surprises
No alarms and no surprises please

Such a pretty house
And such a pretty garden

No alarms and no surprises
No alarms and no surprises
No alarms and no surprises please

Offline Sorunome

  • Fox Fox Fox Fox Fox Fox Fox!
  • Support Staff
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 7920
  • Rating: +374/-13
  • Derpy Hooves
    • View Profile
    • My website! (You might lose the game)
Re: jQuery to JS conversion
« Reply #1 on: May 22, 2014, 09:52:45 am »
but jQuery is awesome! D:
OmnomIRC uses jQuery :P
Anyways, (untested):
Code: [Select]
var txt = document.getElementById('comments'),
hiddenDiv = document.createElement('div'),
content = null,
body = document.getElementsByTadName('body')[0];


hiddenDiv.className = 'hiddendiv common';


body.appendChild(hiddenDiv);

txt.addEventListener('keyup',function(){
content = this.value;
content = content.replace(/\n/g, '<br>');
hiddenDiv.innerHTML = content + '<br class="lbr">';
this.style.height = hiddenDiv.clientHeight;
},false);

THE GAME
Also, check out my website
If OmnomIRC is screwed up, blame me!
Click here to give me an internet!

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6268
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: jQuery to JS conversion
« Reply #2 on: May 22, 2014, 10:16:58 am »
Really tempting not to fix that snippet of jQuery as well.
Code: [Select]
var div = $('div').addClass('hiddendiv common');
$('body').append(div);
$('#comments').on('keyup', function () {
   div.html(
      $(this).val().replace(/\n/g,'<br/>')
   ).append(
      $('br').addClass('lbr')
   );
   $(this).css('height', div.height());
});
Optimized for memory usage. Should be a tad faster as well with less variable declarations.

In plain JavaScript it would look like this:
Code: [Select]
var div = document.createElement('div');
   div.className = 'hiddendiv common';
document.getElementById('comments').onkeyup = function () {
   div.innerHTML = this.value.replace(/\n/g,'<br/>') + '<br class="lbr"/>';
   this.style.height = div.offsetHeight+'px';
};
document.body.appendChild(div);
/e