javascriptjqueryjquery-terminal

Echo content on the same line in jQuery Terminal

I've been looking through the documentation for jQuery Terminal but found nothing. Basically, I'm trying to echo the following:

jQuery Terminal

Here v0.8.7 should be a link, but when I try to echo the string using .echo(string,{raw:true}) the ASCII art gets distorted:

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     <a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',
    {raw:true}
);

I tried using 2 separate echo calls, but the version number is pushed to a new line. How can I add the version number at the end of the ASCII art without it going into a new line?

Here is my current code:

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/ /_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     '
);
term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',{raw:true});

Live demo: http://suchmail.eu/Hunpony/djdavid98/cli
(use the command ver)

Solution

  • After reading through @Giacomo1968's answer, I managed to find the ultimate solution without any need for extra CSS.

    term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                           '.replace(new RegExp(" {" + (term.version().length+1) + "}$"), ''),
    {finalize: function($div){
        $div.children().last().append('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>')
    }}
);

    Using the finalize option mentioned by him, I was able to add some additional HTML to the last <div> using jQuery.