Question

I have a text area in which users can type source code (html/css/js). I want to be able to let them click a “switch to fullscreen” link to make the editor fullscreen.

Of course, this should work on any resolution and must also resize when a users resizes it’s window.

I found this plugin, http://plugins.jquery.com/project/fulltextarea, but it’s not resizing when the browser windows is resized.

Any tips or plugins for this one?

Answer 1

You could handle the event if you wanted:

var $window = $( window );
var $textarea = $( '#yourTextArea' );
$window.resize(function() {
   $textarea.height( $window.height() );
   $textarea.width( $window.width() );
});

I would also recommend throttling the event using https://github.com/cowboy/jquery-throttle-debounce so that the resize event doesn’t fire too often

var $window = $( window );
var $textarea = $( '#yourTextArea' );
var resizeTextarea = function() {
  $textarea.height( $window.height() );
  $textarea.width( $window.width() );
};
// create the resize handler, but throttle it
$window.resize( $.throttle( 250, resizeTextarea ) );