cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <h3 id="status"></h3>
<textarea id="comment"></textarea>
              #comment {
  height: 100px;
  width: 500px;

body {
  background-color: #eee;

$(document).ready(function () {
  // Invoke our plugin and get reference to the returned API object.
  var autosaveApi = $('#comment').autosave({
    // Pass in our own custom save URL.
    saveUrl: 'https://codepen.io',
    // Pass in a callback to be invoked whenever the status changes.
    statusChanged: function (status) {
      $('#status').text(status.text).css('color', status.color);
  // Use the autosave API to query for the initial saved status and set our label.
  var initialStatus = autosaveApi.getStatus();
  $('#status').text(initialStatus.text).css('color', initialStatus.color);

// -=-=-= AUTOSAVE PLUGIN =-=-=-

// Create a self-invoking function to preserve the jQuery dollar sign.
(function ($) {
  // Create the autosave plugin.
  $.fn.autosave = function (userOptions) {
    var $textarea = this;
    window.$textarea = this;
    // Setup our plugin's default options.
    var defaultOptions = {
      saveUrl: null,
      status: {
        text: 'no changes',
        color: '#009'
      statusChanged: null
    // Override default options with any provided by user.
    var options = $.extend({}, defaultOptions, userOptions);
    // Create a function to save the user's content.
    var save = function () {
      // Make a call to our server endpoint to save the user's text.
        url: options.saveUrl,
        type: 'POST',
        data: { content: $textarea.val() },
        // If successful then change the save status and invoke the user's callback.
        success: function () {
          options.status = {
            text: 'saved',
            color: '#090'
          if (options.statusChanged) {
        // If an error occurred then change the save status and invoke the user's callback.
        error: function () {
          options.status = {
            text: 'error saving',
            color: '#f00'
          if (options.statusChanged) {
    // Create a variable to track our timeout ID.
    var timeoutId;
    // Setup an event handler to listen for keyup events in the textarea.
    $textarea.keyup(function (e) {
      // If we have a timeoutId then use it to clear the existing timeout.
      if (timeoutId) {
      // Set our saved status.
      options.status = {
        text: 'pending save...',
        color: '#770'
      if (options.statusChanged) {
      // Start a new timeout that will save the user's content in 3/4 of a second.
      // If they type again this function will run, clear the timeout, and start a new one.
      // If they stop typing for 750 milliseconds then the timeout will finally fire and save.
      timeoutId = setTimeout(save, 750);
    return {
      getStatus: function () {
        return options.status;
Loading ..................