discovering obscured information using jquery

Question

discovering obscured information using jquery

I am working on a code snippet where I need to hide the detailed content for display purposes and only show it during printing:

<div>
    <ul>
        <li>
            <span style="font-size: 1.25em;">
                <strong>#dateformat(startdate, "mm-dd-yyyy")# - #dateformat(enddate, "mm-dd-yyyy")#</strong>
            </span><br/><br/>
            #fullLeft(stripHTML(details),30)#
            </div>
            <div style="display:none;" class="completedata" align="left">
                #details#
            </div>
        <li>
    </ul>
</div>

$(window).load(function() {
    $('li').each(function () {
        $(this).css({
            "page-break-after": "always"
        });
        $(".completedata").css('display','block');
        window.print();
    });
});

The issue arises when I try to cancel the printing process after seeing the hidden display data as block, which remains visible on the screen as well.

javascript jquery html css ajax

Answer 1

Answer №1

To properly achieve this, you should utilize the @media print feature:

.completedata { display: none; }    
@media print 
{
    .completedata { display: block !important; }
}

$("button").on("click", function() {
  window.print();
});

.completedata {
  color: #e74c3c;
}
.completedata {
  display: none;
}
@media print {
  .completedata {
    display: block !important;
  }
  button { display: none; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit sapiente atque quas aliquam a voluptate obcaecati saepe incidunt itaque eligendi sequi optio delectus similique laborum unde sint consectetur magnam?</p>

<p class="completedata">I appear only when printing the page!</p>

<button>Print me</button>

Answer 2

To properly achieve this, you should utilize the @media print feature:

.completedata { display: none; }    
@media print 
{
    .completedata { display: block !important; }
}

$("button").on("click", function() {
  window.print();
});

.completedata {
  color: #e74c3c;
}
.completedata {
  display: none;
}
@media print {
  .completedata {
    display: block !important;
  }
  button { display: none; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit sapiente atque quas aliquam a voluptate obcaecati saepe incidunt itaque eligendi sequi optio delectus similique laborum unde sint consectetur magnam?</p>

<p class="completedata">I appear only when printing the page!</p>

<button>Print me</button>

discovering obscured information using jquery

Answer №1

Similar questions

Tips for implementing an image as a background in AngularJS

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

I need some guidance on how to implement redirectLocation in react-router and properly handle the 301 or 302 status

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

Is your Jquery validation malfunctioning?

Is it better to store JSON data locally using cookies or HTML5 local storage?

Should the index.js file in Next.js serve as the homepage or solely as the initial starting point?

Substitute for SendKeys() in Angular JS web pages using Selenium

Is there a way to automatically change the value of one input box to its negative counterpart when either of the two input boxes have been filled in?

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

The reason behind my unsuccessful attempt to utilize AJAX with the Google GeoChart API

The hover effect seems to be disabled in the third-level submenu

Executing a cURL request using Node.js

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Add a preventDefault event listener to a submit button that triggers a specific function

Observing the completion of a subscriber function

Tips for expanding a fabric canvas to match the entire width of its parent division

Refreshing Appended Content Using JQuery AJAX

Which is the better option for selecting DOM elements in a Vuejs 3 application: using raw js or jquery?

Issue with dynamically filling a form field using ValidityState