~~~ Please read before posting. ~~~

Important: We need your Club Number at a minimum, and as many details as possible.
For further info please read This page before posting.

A technical HTML question...

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Offline
  • Administrator
  • Administrator
  • Posts: 11526
  • Thanks: 3050

Re: A technical HTML question...

13 years 1 week ago - 13 years 1 week ago
#20270
Upon further investigation, it turns out that there is a small caveat with this approach.

Once you enter the link target for the button image, the image takes on a border that does not go away with .noprint.

The workaround that I came up with is to explicitly set the image border to be 1 pixel with a white color.
Then everything works as intended regardless of whether the link has been set or not.

As an example of what I am talking about, see the attachment which show the image settings I came up with for my button image.

Also, I have attached a screen shot of my resulting button. I will probably refine it a bit, but it works fine for now. Right now, I am just linking to the FTH2 FAQs, but I will probably come up with a Printing Tips document to link to.

BTW, for some reason using a link with a bookmark to the Agenda FAQs does not seem to land on the right spot on the FAQs page. I ended up ditching the bookmark part of the link.
Last edit: 13 years 1 week ago by SteveTheTechie.
The topic has been locked.
  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Offline
  • Administrator
  • Administrator
  • Posts: 11526
  • Thanks: 3050

Re: A technical HTML question...

13 years 4 days ago - 13 years 4 days ago
#20456
Brad,

I have gone further with this, but the.noprint approach still is not quite working as expected....

Please take a look at the two attachements... "Agenda Buttons" is excerpted from a screen shot of my agenda screen with the "buttons" added to the agenda header. I have added the .noprint class specification to each button image--I also added it to the links that were applied to the button images. "Agenda Buttons Print" is what I get when I actually send the Agenda printout report tab to the printer (or print preview). Previously, I had not actually done a print preview--just looked at the printout tab.

The white border takes care of the link display issue as previously noted, but as you can see, for some reason, parts of the "buttons" still show on the actual printout even though they do not show on the agenda printout tab.

Any thoughts on how to correct this? I want the buttons on the agenda screen, but I don't want buttons on my printouts. :unsure:

BTW, the Printing Tips button goes here and actually references one of your past message threads. ;)
Last edit: 13 years 4 days ago by SteveTheTechie.
The topic has been locked.
  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Offline
  • Administrator
  • Administrator
  • Posts: 11526
  • Thanks: 3050

Re: A technical HTML question...

13 years 4 days ago - 13 years 4 days ago
#20457
Ok, never mind. I have figured out my own issue. :lol:

When you use the .noprint class for this type of approach, you have to create a <div> container around all of the page elements that you do not want to print and apply the .noprint class to the <div> container. If you apply the .noprint class to the individual images/page elements, you still get parts of them showing up on the end output.

I have not used <div> containers for much other then inserting background shading on pages... This is obviously a new use I will have to keep in mind.
Last edit: 13 years 4 days ago by SteveTheTechie.
The topic has been locked.
  • Brad Smith
  • Brad Smith's Avatar
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Thanks: 0

Re: A technical HTML question...

13 years 4 days ago - 13 years 4 days ago
#20458
Using inline media CSS works outside FTH. See if this works inside using this code:

Here is a basic button.

Code:
<div id="HideThisDiv"> <style type="text/css"> @media print { #NoPrintDiv { visibility: hidden; } } </style> <div id="NoPrintDiv"> <input type="button" value = "Printing Tips" onclick="window.open('https://docs.google.com/document/pub?id=1TiLps1y3ANNPMsMm7zFCLLTKw7A7I92gd3rmLdusFL4','_blank','resizable=yes')" /> </div> </div>

This button has a bit of styling to it using red/gold TM colors.

Code:
<div id="HideThisDiv"> <style type="text/css"> @media print { #NoPrintDiv { visibility: hidden; } } </style> <div id="NoPrintDiv"> <input type="button" value="Printing Tips" style="background-color:#762432; color:#f3de73; font-weight:700; font-size:1em; height:45px; width:140px;" onclick="window.open('https://docs.google.com/document/pub?id=1TiLps1y3ANNPMsMm7zFCLLTKw7A7I92gd3rmLdusFL4','_blank','resizable=yes')" /> </div> </div>
Last edit: 13 years 4 days ago by Brad Smith.
The topic has been locked.
Moderators: BrianPamrhtaylor3marc33NotLiablejgavinLcala305Henipeterb323DebbieT
Time to create page: 0.334 seconds