Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #301598 Score: 0
    Profile photo of dtate
    dtate
    Member
    advanced
    contributor
    beginner
    intermediate
    @dtate

    I want a page printed but I don’t want specific item(s) on that page to be printed. Is there a way to do this?

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

    only visible items are printed, so you can just hide all elements that are not supposed to be printed and show them again after a delay. Actions for your Print-button could be:

    1. Hide “this object”

    2. Print current page

    3. Show “this object”, delay 0.5

    The page would be printed without the button as the button invisible when the page is transferred to the printer.

    Tim

    This post has received 1 vote up.
    #301602 Score: 0
    Profile photo of dtate
    dtate
    Member
    advanced
    contributor
    beginner
    intermediate
    @dtate

    That was exactly how I worked around it!

    #301603 Score: 0
    Profile photo of dtate
    dtate
    Member
    advanced
    contributor
    beginner
    intermediate
    @dtate

    That is exactly how I worked around it! I’m gonna suggest they make it an option for all items.

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

    There are usually multiple ways to do things. Tim has the right idea but there is another approach that takes up less internal resources, is much easier to author for multiple items, is reusable and does not rely on a timer. The basic idea is to switch the styling display to none for all the items that you do not want to print then, after printing, switch them back. Here is a step by step example to do accomplish this (example also attached).

    Open up notepad or your favorite simple text editor and type the following class:

    .NonPrintable{
    display:none;
    }

    Save this as something like PrintStyle.css (you’ll have to change the txt extension to all files to save as .css).

    Next, Insert an external HTML object – for TYPE: choose Cascading Style Sheet. Then select FILE: browse for file and point to the PrintStyle.css sheet you just made.

    This next step can be handled in a few different ways, however, I strongly suggest you leverage the awesome power of Inspire to easily use JavaScript Libraries like jQuery. Please, if you are not a web programmer/designer do not be distressed by “jQuery”. It is very easy to use and once you “get it” I promise it will open up endless possibilities. you can grab jQuery here: https://jquery.com/download/ Download (at this time) and save the compressed production 2.1.4 version (The full name will be jquery-2.1.4.min.js).

    Insert another HTML Object – for TYPE: choose Header Scripting. Then select FILE: browse for the jquery-2.1.4.min.js you just saved. You’re almost done.

    Your PRINT button will have three actions. The first will hold a run javascript that will select every element you want to hide and change its class to, you guessed it, NonPrintable. The second will be regular PrintPage action. The third will be one more run JavaScript that will remove the class we added thereby returning the original look.

    For the first action select Run JavaScript. Open up the tiny little Action and Target box by clicking the down arrow in the bottom right hand corner to give yourself some room then type: $(“#HTML Name, #HTML Name, #HTML Name”).addClass(“NonPrintable”)

    Here’s a quick explanation. The $ indicates to the browsers interpreter that jQuery follows. The element(s) being selected HTML Name go inside parentheses surrounded by quotes and prefixed with a hashtag (or numbersign if you will). If you had only one element it would look like this $(“#HTML Name”). Of course you substitue HTML Name with the actual HTML Name found in elements description. If you have multiple elements like in the above example you use one set of quotes and separate each element with a comma.

    The .addClass(“NonPrintable”) is the method (jQuery instruction) that gives each of those elements you selected in the parentheses the class of NonPrintable. Note that in this instruction you do not put a period before NonPrintable as you did in the stylesheet.

    I do not think I need to explain the second action as it is the standard Inspire Print Current Page action.

    The Third action is the simplest. This is because you are going to copy and paste the JavaScript from the first action and change .addClass to .removeClass. I’ll bet you can guess what this does. Yup, it removes the class you added which made the items hidden thereby returning things to normal.

    This may sound like a lot but once you add the jQuery library and external style sheet then all you have to do on ANY page thereafter is add the same three actions and revise the HTML Names where necessary. Imagine if you had twenty things that you didnt want to print on a page; this would be a tremendous time saver and work 100% of the time.

    Here’s another thought that might have occured to you. You do not have to use this just for printing. You can use the same idea to toggle many elements attributes, some of which Inspire natively can’t handle.

    One thing to keep in mind that drives most new JavaScript users absolutely crazy, as it did me, is that it is case sensitive and there is no debugging help so type carefully.

    Hopefully, if you were able to decipher my writing, I piqued your interest and showed you just a sliver and I mean sliver of what is possible extending Inspires native abilities with JavaScript and CSS.

    See attached for example.

    regards,

    Darrel

    This post has received 2 votes up.
    #301606 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    By the way, one of the small reasons why jQuery is such an outstanding JavaScript library is because you can select multiple html elements using the syntax $(“#HTML Name”, #HTML Name”). If you were to forgo jQuery and select HTML elements using standard JavaScript you would be limited to one element at a time and would have to type document.getElementByID(“HTML Name”) for each.

    Cheers.

    DRS

    #301612 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
    329 pts
    @timk

    You could even give all the non-printable items another css class, e.g. “noprint”. Then follow Darrels approach with a slightly modified jquery command:

    $(“.noprint”).addClass…

    Then you wouldn’t have to copy all those html names.

    Tim

    #301614 Score: 4
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    You don’t need JQuery for this at all.

    1. As described above, add a class to all non-printable items, let’s say “noprint”.
    2. Create an external HTML object, set it to META TAGS, edit and paste this:

    @media print
    {    
        .noprint, .noprint *
        {
            display: none !important;
        }
    }

    3. Voila.

    All styles marked with “@media print” are only applied when a browser renders the page for printing. You can do A LOT using this technique. E.g. show a copyright / confidential watermark that isn’t visible on computer screen.

    This post has received 4 votes up.
    #301622 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    Bingo, Sergey! The media=”print” CSS was exactly where I was going and your implementation is far more elegant. I’ve never thought of using meta tags like this. Metadata, the purpose of using meta tags, is for search engines. Other than being within the head of a webpage, how and why does using a meta tag like this work?

    While maybe not for this purpose, I still believe that understanding and being able to apply the .addClass and .removeClass methods will serve Inspire authors well due to the benefits of changing styles, even those not readily available in the program itself. When it comes right down to it, we are building little (or maybe not so little) web applications. Inspire shines in its ability to be extended in this manner.

    Thanks for your solution and I look forward to understanding how to possibly leverage it in other ways.

    Darrel

    #301629 Score: 0
    Profile photo of dtate
    dtate
    Member
    advanced
    contributor
    beginner
    intermediate
    @dtate

    Wow. [waves hand over head and making wooshing sound] You guys have fun with that! I’ve never been able to wrap my head around coding. I’ll just wait and see if Trivantis makes this a feature. I want to thank you all for your attention and I think at the same time I presented a challenge to test your skills with Javascript, CSS, and Inspire.

    The reason I asked is because I wanted to see if I could present to the users a friendlier, simpler, and more interactive method of filling out an otherwise intimidating form. In my experiment, each page covered a section of the form and would briefly explain what the form was asking for. In the end was the form all filled out. A box of instructions dropped down to tell them to look it over and make sure all the entries were correct and the ‘Print’ button if they were ready to print it. If not, they can click on the erroneous entry and it would take them back to the page where that entry field was filled out. When they return to the entry fill-out pages, the ‘Back’ buttons are hidden and the ‘Next’ button is replaced with a ‘Done’ button to return to the form. Once they return, they see the form with the correction made. The ‘Print’ button is still there but the instructions only show up the first time they arrive on the page. The ‘Print’ button is what prompted me to ask about non-printing items.

    It all works great but because printing from the Internet yields unwanted headers and footers that don’t belong on the form, it may need to be done in offline format with either the LectoraViewer or as an .exe.

    #301683 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    I’ve never thought of using meta tags like this. Metadata, the purpose of using meta tags, is for search engines. Other than being within the head of a webpage, how and why does using a meta tag like this work?

    First of all, correction to my code above (I cannot edit the original post).
    The code you have to paste into the Ext HTML object is:

    <style>
    @media print
    {    
        .noprint, .noprint *
        {
            display: none !important;
        }
    }
    </style>

    Now, about those meta tags. True, in HTML, the < META > tag provides metadata about the HTML document. These tags are always placed in the header section of HTML document, i.e. inside the < HEAD > tag. So whatever you type into Lectora’s EXT HTML OBJECT set to META TAGS will be put into the < HEAD > tag. While the primary purpose is to put meta tags in there, you can also use it to safely include < SCRIPT > tags for JS, < STYLE > tags for CSS, < TITLE > tag and anything else you want to put into the head section of your HTML page.

    This post has received 1 vote up.
    #301687 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    Thank you, Sergey.

    Darrel

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

You must be logged in to reply to this topic.