topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Thursday October 3, 2024, 9:04 pm
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: Manipulate a webpage to include a watermark  (Read 4707 times)

Sisenando

  • Participant
  • Joined in 2014
  • *
  • Posts: 4
    • View Profile
    • Donate to Member
Manipulate a webpage to include a watermark
« on: July 04, 2014, 02:51 PM »
I work with a web application that works only on Mozilla Firefox.

A particular task generates a page to print a letter to be mailed.

After printed the letter, my colleagues should stamp the brand of post office and manually write the send date on which the letter is sent.

Is there any way to manipulate the display of the page to include a line in HTML with the stamp image before printing?

Any ideas?

Thank you very much.

MilesAhead

  • Supporting Member
  • Joined in 2009
  • **
  • Posts: 7,736
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #1 on: July 04, 2014, 09:28 PM »
www.w3schools.com/css/css_background.asp

by using css you may not even need to change the page source provided the browser prints what you see.

Sisenando

  • Participant
  • Joined in 2014
  • *
  • Posts: 4
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #2 on: July 04, 2014, 09:48 PM »
Thanks for feedback, Guys.

Basically, before printing the letter, I need a solution that enter the source code of the page (or simulate it) the following line after the BODY tag and refresh the page (or generate another showing the letter with the stamp):

<div style = "background: url (file :///G:/PostStamp.jpg) no-repeat; display: block; height: 37px; padding: 135px 0 0 0; position: absolute; right: 0; text-align: center; top: 0 width: 171px; "> %ShowDate% </ div>

The %ShowDate% I already know how to fill.

My working conditions:

1. I work in a government office.

2. Most of my colleagues are laymen in computer use, most are elderly and there are also people with disabilities (I'm trying to improve everyone's work).

3. The specific task that is necessary to improve is the print of letters (I want to eliminate the need to use hand stamps or writing manually).

4. The basis of our work is a web application developed by a third party, ready to use, and we can not request changes to the source code.

5. Locally, I can save the page and change the source code, but my colleagues will have difficulty with this task and certainly will prefer manually stamping and write.

6. I want to improve the efficiency of all people, that's why I need a solution based on a simple click or keyboard shortcut.

I tryed Greasemonkey, but we can not install add-ons to firefox too because the system security policies.

* Example.jpg (184.61 kB. 956x537 - viewed 161 times.)

app103

  • That scary taskbar girl
  • Global Moderator
  • Joined in 2006
  • *****
  • Posts: 5,885
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #3 on: July 05, 2014, 12:47 AM »
You might be able to do this with a bookmarklet, instead of greasemonkey.  ;)

Sisenando

  • Participant
  • Joined in 2014
  • *
  • Posts: 4
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #4 on: July 05, 2014, 05:04 PM »
Thanks for the Idea, app103.

How can I make a Bookmarklet with this code below? (It works in scratchpad, but doesn't works in a bookmark link):

data=document.getSelection();
correios=document.createElement("div");
correios.id="correios";
correios.style="background:url(http://i62.tinypic.com/169hxls.png) no-repeat;display:block;height:37px;padding:135px 0 0 0;position:absolute;right:0;text-align:center;top:0;width:171px;z-index=-1";
correios.innerHTML=data;
document.getElementsByTagName("body")[0].appendChild(correios);

app103

  • That scary taskbar girl
  • Global Moderator
  • Joined in 2006
  • *****
  • Posts: 5,885
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #5 on: July 05, 2014, 05:28 PM »
Code: Javascript [Select]
  1. javascript:(function(){data=document.getSelection();correios=document.createElement("div");correios.id="correios";correios.style="background:url(http://i62.tinypic.com/169hxls.png)%20no-repeat;display:block;height:37px;padding:135px%200%200%200;position:absolute;right:0;text-align:center;top:0;width:171px;z-index=-1";correios.innerHTML=data;document.getElementsByTagName("body")[0].appendChild(correios);})();

Sisenando

  • Participant
  • Joined in 2014
  • *
  • Posts: 4
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #6 on: July 05, 2014, 06:26 PM »
Thank you very much.

app103

  • That scary taskbar girl
  • Global Moderator
  • Joined in 2006
  • *****
  • Posts: 5,885
    • View Profile
    • Donate to Member
Re: Manipulate a webpage to include a watermark
« Reply #7 on: July 05, 2014, 06:58 PM »
You're welcome.  :)