Auto-Save your messages

Add an Auto-Save Feature

(All board types - Members only tutorial)

Thanks to @Leo for this creative idea. The idea is while the user is typing a message, saving it periodically, so it can be restored when they move away from the page. so they do not lose their message.

Its simple to add, just put this code into a Javascript file [tip]Found at ACP - Modules - Javascript management[/tip] and tick "In all pages".
[noguest]

Code:

[panda=js]function save_message() {
    ('Copyright © AvacWeb. All Rights Reserved. No distribution without consent.');

    var ta = $('#text_editor_textarea'),
        sc = ta.sceditor('instance');

    if(sc.updateOriginal) {
        sc.updateOriginal(); //this fixes the sceditor so it updates the message field.

        if(ta[0].value.length > 5) {
            my_setcookie('saved_msg', escape(ta[0].value), false);
            var note = document.createElement('div');
            note.id = 'saved_note';
            note.innerHTML = 'Your message has been saved automatically.';
            document.body.appendChild(note);
            setTimeout(function() {
                document.body.removeChild(document.getElementById('saved_note'));
            }, 3000);
        }
    }
}
$(function() {  
    if(document.post && document.post.message) {    
        var saved_msg = my_getcookie('saved_msg');    
        if(saved_msg && saved_msg.length > 0 && confirm('You have a message saved, do you wish to restore it?')) {
            var ta = $('#text_editor_textarea'),
                sc = ta.sceditor('instance');

            if(sc.setSourceEditorValue) {
                ta[0].value = saved_msg;
                sc.setSourceEditorValue(unescape(saved));
            }
        }

            
        delete_cookie('saved_msg');    
        setInterval(save_message, 30000);    
        $(document.post.post).click(function() {
            delete_cookie('saved_msg');
        });  
    }
});

[/noguest]
This will save the message in the text box every 30 seconds. When it does, it will display a small message saying that the message has been saved.

Now to finish it up, we'll add some CSS to style the little message that pops up. Add this to your CSS[tip]Found at ACP - Display - Colors - CSS Stylesheet[/tip]:

Code:

[panda=css]#saved_note {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border: 1px solid;
    color: #c05;
    background: #E1EBF2;
}

(You can edit this to your liking, its very simple styling)

And your done.

#avacwebtutorial, #officialtutorial, #tutorial