Jump to content

Recommended Posts

So i have an html area as shown and when i hit print the print and close buttons disappear since i don't want them printed, problem is that when the print screen is open and i cancel because i forgot to add something to the form the form comes back up but the buttons don't of course since i hid them, would there be a way to get those back. I know f5 will bring them back but will also wipe out anything in the text box.

 

image.png.afce74a5e2db59081704bcce9ef1d903.png

Edited by windsurfer
Link to post
Share on other sites

I am guessing that hiding the buttons is necessary because by whatever means of getting the text box to print they are part of the identified area to get printed.

But if the area is identified by a specific node, tag name, or tag attribute, would it be possible to narrow the identified area to be printed to just the text box?

 

Link to post
Share on other sites

When the button is clicked these events take place

1) Hide 1 button

2) hide second button

3) Print

This opens the print window in the same window , when i select cancel the textarea window opens back up but the buttons are gone, when i click F5 the buttons come back and the txtarea is still populated, when i click CTRL F5 the windows refreshes but the txtarea will be empty. I am not sure how i can open the print window with only the txtarea showing

image.png.601ee80f72eadb9edd07e79cb7322d9f.png

Link to post
Share on other sites

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href="https://www.wilstv.com./css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>*{box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
  body { background-color: #fff; font-family:'Roboto Condensed' ; }
  .container { margin: 10px auto; max-width: 700px; }
form#e {
  max-width: 700px;
  margin-bottom: 2vh
}
form#e label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #b3b3b3;
  font-size: 18px
}
form#e label .jQTAreaCount, form#e label .jQTAreaValue {
  font-weight: bold
}
form#e label .jQTAreaValue {
  color: #595959;
  }
form#e textarea {
  border: 1px solid #000;
  width: 700px;
  height: 50vh;
  font-size: 16px;
  color: #666;
  padding: 10px;
  resize: none;
  overflow: hidden;
  }
form#e p {
  height: 4px;
  margin-top: 2px;
  background-color: #ccc;
}
</style>
</head>
<body class="table"><div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-ads"><script type="text/javascript"><!--
</script>
</div>
<div class="jquery-script-clear"></div>
</div>
</div>
  <div class="container">
    <h1></h1>
 <form id="e">
                <label for="example">
                    <span>
                        Type your information below. (Limit 1000 Chracters)
                    </span>
                    <span>
                        <em class="jQTAreaCount"></em> / <em class="jQTAreaValue"></em>
                    </span>
                </label>
                <textarea id="example" name="example"></textarea>
                <p class="jQTAreaExt" width= "560px"></p>
            </form>
          </div>
<div align="center">
<table border="1" width="560">
    <tr>
        <td>
        <button type="submit" id="ThemeableButton1" onclick="ShowObject('ThemeableButton1', 0);ShowObject('ThemeableButton2', 0);window.print();return false;" name="" value="Print" style="position:absolute;width:126px;height:22px;">Print</button>
            </td>
        <td>
        <button type="submit" id="ThemeableButton2" onclick="history.back();return false;" name="" value="Close" style="position:absolute;width:126px;height:22px;">Close</button>
          </td>
    </tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://wilstv.com/plugin/plugin-jqtarea.js"></script>
<script>
  $("form#e").find("textarea").jQTArea({
                setLimit: 1000,
                setExt: "W",
                setExtR: true
            });
          </script>
          
</body>
</html>

Link to post
Share on other sites

Can't you just use something like:

add the following to your page styling 

@media print{
 	.no-print{
   		display:none;   
  	}
}

then just add the class "no-print" to the buttons you don't want to print..

 

That way the buttons are always there but just not when printing.

Link to post
Share on other sites
16 minutes ago, bsmither said:

Depending on the sophistication of your Themeable Button Events tab, after the javascript event, there may be the ability to add an event where the 'Event' is "onafterprint" and the action is "Unhide" or "Show" the buttons.

 

From what I recall the onafterprint has limited cross browser support so if its customer facing could be buggy for some. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...