Show/hide buttons not working properly

New Here ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

I'm creating an interactive bingo card PDF for a client where the user clicks on the boxes to mark an X and mark five boxes in a row to 'win'. All the boxes are buttons with Xs on top all as buttons, but hidden until triggered. Clicking the box sets the visibility of the X on top to show. The problem is that when the next box is clicked the first X disappears, so only one X can be shown at once. In the visibility properties for the boxes, 'show' is only set for the corresponding X on top - all other buttons are set to 'ignore', but they aren't being ignored and hidden instead - why?

 

Here is the PDF - https://markharrington.design/wp-content/uploads/2020/05/bingo-card-forum.pdf - will need to be downloaded and opened with Acrobat.

 

Sometimes after clicking lots of random boxes, some of the X's stay visible for no explicable reason. If it's a problem with the layer order, what's the point of the 'ignore' markers. This is driving me mad, any help would be greatly appreciated!

TOPICS
Bug , How to , Import and export

Views

3.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , May 06, 2020 May 06, 2020

Here is the link to example of button and javascript

Link 

Likes

Translate

Translate
Community Expert , May 07, 2020 May 07, 2020

You can bring a graphic into Acrobat as a button "field".

  1. Save the graphic as PDF.
  2. With your project document open In Acrobat, enter Form Edit mode, add a Button field, and open its Properties dialog,
  3. On the Appearance tab, set its fill and border colors to None.
  4. On the Options tab, set the Layout to Icon Only.
  5. Still on the Options tab, under Icon and Label, click Choose Icon and navigate to / select your graphic.

Likes

Translate

Translate
Community Expert , May 11, 2020 May 11, 2020

Javascript for showing/hiding fields:

 

// Show

this.getField("FieldName").display = display.visible;

 

// Hide

this.getField("FieldName").display = display.hidden;

Likes

Translate

Translate
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

That's just the way it is. Once you put enough of those things into a PDF it just stops working. This is not now and has never been an InDesign issue. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

So this is a PDF/acrobat issue and there is no way to fix it?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

None I know of. You might want to check in the Acrobat forum, but I wouldn't hold out much hope.

I'm not a fan of interactive PDF for anything other than forms and even with that there are better alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

I agree, unfortunately for me the client wants a PDF. What better alternatives can you recommend?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

There is a way with a button and a javascript to have the appearance toggle on and off. I have sent you a file to examine

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

Here is the link to example of button and javascript

Link 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

Brilliant thank you!! This will do the job 🙂 What if I wanted to replace the text 'X' with an image/vector (hand drawn style X) - I assume that can be done by replacing "buttonSetCaption"?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

Currently, the X is defined in the appearance properties: font, size, and text color. You can change to another font. If you want to change to a specific vector shape, the script would need adjusted. I think if the vector was made into a stamp, this could work instead of a text character.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

You can bring a graphic into Acrobat as a button "field".

  1. Save the graphic as PDF.
  2. With your project document open In Acrobat, enter Form Edit mode, add a Button field, and open its Properties dialog,
  3. On the Appearance tab, set its fill and border colors to None.
  4. On the Options tab, set the Layout to Icon Only.
  5. Still on the Options tab, under Icon and Label, click Choose Icon and navigate to / select your graphic.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 10, 2020 May 10, 2020

Copy link to clipboard

Copied

That's brilliant thank you! I've got it all sorted now, by using an X stamp from another font. Out of interest is there a way to make the icon visible/hidden, like with the caption? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

Javascript for showing/hiding fields:

 

// Show

this.getField("FieldName").display = display.visible;

 

// Hide

this.getField("FieldName").display = display.hidden;

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

That's brilliant thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 12, 2022 Aug 12, 2022

Copy link to clipboard

Copied

LATEST

Hello! 

I'm afraid I'm facing a similar difficulty but haven't been able to solve it with the input given in this ticket. 

 

My case: 

I have to create a PDF with rating system from 1 to 5 stars. In Indesign I created interactive buttons (show/hide) that work perfectly when I render the protorype in Indesign. Then, I exported it as an Interactive PDF file and it works half way, the grey stars turn to yellow when hovering the mouse over, but they do nothing when clicking.

 

What did I do:

In Indesign, I created 5 grey stars (unrated) and 5 yellow stars (when rated). So, when I click on the fisrt grey star it hides and the yellow star hiden under the grey star becomes visible. The same way for every star but, for example, when clicking on the fifth star all of the grey stars hide and all the yellow stars become visible. It's also possible to change the rating with the same logic. Long story short, it's a simple star rating scheme. 

 

Me following your instructions:

After several hours trying to understand your expert input in this ticket, I went into the Form Editor Mode, clicked on the button and reviewed the codes in the shared file and took a fragment of it and mixed with the "Javascript for showing/hiding fields"... For a rainy day I also created the buttons as explained in PDF... I tried it but it doesn't do anything... Frustrating, this option should be a solution out of the box as shown in Indesign. 

 

I also tried programing the buttons with the available options in the Form Editor mode but it's a waste of  time.

 

Finally, this are the codes in the shared file:

if(event.target.borderStyle == border.b) {
   event.target.borderStyle = border.i;
   event.target.buttonSetCaption("X");

   event.target.textColor = ["RGB", 0, 0, 0];
   event.target.fillColor = [color.transparent]; }

else
{
   event.target.borderStyle = border.b;
   event.target.buttonSetCaption("");

   event.target.textColor = ["RGB", 0, 0, 0];
   event.target.fillColor = [color.transparent]; }

 

After my poor blending:

if(event.target) {
// Show
this.getField("R1").display = display.visible;}

else
{
// Hide
this.getField("G1").display = display.hidden;
}

 

Could you please help me untagle this and make it work?

 

Cheers,

ME

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines