Explore the community Forums Lectora Lectora Questions & Answers Print Current Page Question

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #304752 Score: 0
    Profile photo of Deron Warman
    Deron Warman
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    contributor
    wise owl
    advanced
    profile
    verified member
    3 pts
    @DWarman

    Hello everyone,

    I want to print the results of a variable I created but, the variable can get rather lengthy.  When using “print current page” action, it prints the current page only, not all the text captured in the variable which is displayed in a text box (use change content action to pull info from the variable to fillt he text box).  I have the vertical scroll block checked so when the page comes up (from a popup) the student can scroll through to see their inputs in the text block but can’t print them out fully (again, it prints only what is literally on the screen).

    Is there a way to have it print the information in a text box or another way to capture the information to allow the “print current page” action to work the way I am wanting?

    I’m sure there is scripting that can be done but not well versed in HTML/JAVA to build something like that (though I am searching the internet like crazy to see if there is something there I could add under the HTML Extension function).

    I am using V12, running it from a PC using IE11.

    Thanks,

    Deron

     

    #304774 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    The print-action will always print the whole page. The problem results from the “Vertical scroll” at your textfield. If you created a popup page that is long / high enough to contain the whole text and let the browser window do the scrolling (instead of the textfield) all text will be printed.

    If you’re familiar with CSS you can also use the info from this thread:

    https://community.trivantis.com/forums/topic/non-printing-buttons/

    Tim

    #304786 Score: 0
    Profile photo of Deron Warman
    Deron Warman
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    contributor
    wise owl
    advanced
    profile
    verified member
    3 pts
    @DWarman

    Thanks Tim…I’m not well-versed with CSS or the HTML Extension feature in Lectora.

    I do wish Lectora had classes (at LUC) or added the feature to the E-Learning Uncovered book…more so than having only 1 page dedicated to this very important and extremely expanding function.  Instead you get the Caution caption at the top of the page with … “If you don’t understand HTML, JavaScript, or other programming languages, this procedure may not make a lot of sense.”

    I fully agree with this statement, however, I believe basic actions and functions could be provided based on what I’ve tried to do and what I have researched and then could be expanded by the user as they gain more experience.

    I took a look at the other thread and work to try the information in my course.  Good news is, it’s not something I need quickly so I have time to figure it out and try the work with the information you provided.

    Thanks again,

    Deron

    #304804 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    Hi Deron. If I understand you correctly, you have your students notes (variable)  mirrored in a scrolling text field and you want to print the entire contents, not just what is visible on the screen, correct?

    The good news is that you do not need to understand JavaScript to get this to work. You only need to know how to add some external JavaScript and implement it.

    Because this utilizes the jQuery library you will need to either link to it via cdn or download it and include it in your project. To link to it, add an HTML Extension. Choose Meta Tags and then open the EDIT and enter the following:

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

    If you choose to link to it locally, download the compressed 1.12.0 version. Add an HTML Extension but this time choose Header Script. then browse for the .js file you just saved.

    Next, on the page that has the scrolling text field add a button. You will need the HTML Name of the text field, such as text38. For the action of the button choose Run JavaScript. In the JavaScript box add the following:

    function PrintElem(elem) {
    Popup($(elem).html());
    }

    function Popup(data)
    {
    var mywindow = window.open(”, ‘to_print’, ‘height=600,width=800’);
    var html = ‘<html><head><title></title>’+
    ‘<link rel=”stylesheet” href=”css/mycss.css” type=”text/css” />’+
    ‘</head><body onload=”window.focus(); window.print(); window.close()”>’+
    data+
    ‘</body></html>’;
    mywindow.document.write(html);
    mywindow.document.close();
    return true;
    }

    PrintElem(“#HTML_NAME”);

    The only thing left for you to do is to change the text above that shows #HTML_NAME to be the HTML name of the scrolling text field. Make sure you have the hashtag (number sign) immediately preceding the name. That’s it. The .awt file is included in the zip file.

    NOTE: I have noticed that copying and pasting from this forum sometimes produces errors in the pasted JavaScript. This is caused by the quotes. If you copy and paste and the code does not work, try deleting and re-entering any quotes in the script.

    snippet credit goes to mplungjan on stackoverflow. Save the script, its re-usable. 🙂

    Darrel

    This post has received 1 vote up.
    • This reply was modified 3 years, 8 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: Bolded the link and script
    Attachments:
    1. Title-6.zip
    #304808 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    You can leave out the entire line – ‘<link rel=”stylesheet” href=”css/mycss.css” type=”text/css” />’+ if you’d like as this is not necessary for what we are doing. It wont hurt anything if left in.

    DRS

    #304816 Score: 2
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    You can do a lot with Lectora without any knowledge of Html, CSS, or Javascript. But Html extensions are purely about this. The “only” function this object has, is adding a self-written snippet of code to the published pages. Explaining the possibilities of this feature to full extent would (more or less) mean explaining html, css and javascript (and many other languages) completely, i.e. fill 1000s of pages. The basic functions (what the Trivantis developers think are the basic functions) are already integrated in Lectora as “Actions” (usually javascript) or “Properties” (often CSS), at least when publishing to a html-based format. For your task (which is not too advanced, but still not basic) there a many possible solutions:

    1. Use only Lectora

    Make the page and the textfield you want to print as long / high as it needs to display the whole text. Open that page in a popup, not with a “Display page in popup”-action but with “Go to” “Target Page”, Set “Open in:” to “New window”. Open the “New window properties” via the icon on the right of the “Open in:” field. Uncheck “Use default size” and enter the appropriate size of the window. If it’s smaller than the page size the browser will provide you with a scrollbar. Use the normal “Print current page” action and all the text on that page will be printed.

    It’s only the textfield with a “Vertical Scroll” that’s preventing the text from being printed. If you don’t want to remove the scrollbar from the textfield, you can:

    2. Use CSS

    In that other thread Sergey published some code, that can change the style of the page or elements on the page but only for the printer. Add a “Html extension” to the page you want to print. Set the type to “Meta tags”. Click edit and paste:

    <style>
    @media print
    {
    div[id*=”text”] {
    overflow:visible !important;
    }
    }
    </style>

    This style will make the text, that is hidden until you scroll, visible for the printer. You won’t see any difference on the screen, but all of the text will be printed when using the normal “Print current page” action. If you prefer to learn about javascript instead of CSS you can

    3. Use javascript / jQuery

    … and follow Darrels guidance which is usually excellent and comes with a working example. Remember that learning about jQuery will open a whole world of possibilities to you (maybe even in a new window).

    Tim

    This post has received 2 votes up.
    #355628 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    @timk – I just tried to use your CSS option and then previewed it in browser. Unfortunately, it still won’t see whatever text isn’t visible on the page from my scrolling text box. Does it actually have to be fully published (vs. preview in browser) for it to work? I also tried deleting and replacing the quotation marks, in case Lectora didn’t like the way they copied over. Do I maybe have to substitute something in the code you provided with a “real” name of something? Or is it possible that something has changed with the newer version of Lectora?

    I liked this CSS method because it seemed so much simpler/shorter, but I’ll have to go with Darrel’s method if I can’t get this one to work… (Unfortunately, the “Lectora Only” option isn’t viable for my situation, because the text box is built with a combination of static text and the contents of entry boxes that the user has typed in, so there’s no way to know exactly how long the resulting text will be.)

    Thanks, in advance, for any help!
    Laura

    • This reply was modified 2 years, 5 months ago by Profile photo of Laura Gillenwater Laura Gillenwater. Reason: Fixing tag
    #355655 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    Hi Laura,

    there have been some changes with regard to how the page is built in Lectora 17. Whether there’s a difference between Publishing and Preview in browser depends on how you want to publish because Preview in Browser is never “Seamless”.

    It should work both seamless and not with this CSS:

    <style>
    @media print
    {
    div[id*=”text”] {
    overflow:visible !important;
    }
    .pageDIV {
    overflow:visible !important;
    clip:auto !important;
    }
    #pageDIV{
    overflow:visible !important;
    clip:auto !important;
    }
    }
    </style>

    You do have to replace the quotes around “text” or it won’t work. I’d put the code into a code block, but that isn’t working correctly for CSS.

    Tim

    #355733 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    @timk – Thank you, thank you, thank you!!!!! That worked like a charm and you’ve saved my project! And thank you for the quick response, too!! 😀

    #415033 Score: 0
    Profile photo of Shawn McCulley
    Shawn McCulley
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    @smcculley1282

    Hi Darrel.

    I’m trying your jquery method to print a table element on a page. I am using Lectora 17 and the issue I am running into is the print window that gets created is coming up with “Undefined” in it rather than the table. I put my table into your Lectora example and it works fine. Is there some code that needs to added when using 17 with seamless play selected? Do I need to use “getDisplayDocument()” to access the the table?

    Thanks.

    -Shawn

    #415244 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    Yes, Shawn. Try something like this when using seamless play.

    First create a variable and store a reference of your table.

    var toPrint = getDisplayDocument().getElementById(‘your tables name’);
    PrintElem(toPrint);

    Let me know if that does it for you. If you have any trouble, please post a sample and I will try to get it working.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.