Creating a PDF form in Acrobat X. The form has various selections listed in a grid style, and my client would like when one of the selections is clicked on for a circle or square to be drawn around the selection. I have tried various methods to get this to work, but I keep running into road blocks. Here is where I am so far:
I have figured out that I can place a button on top of the text and set the border and fill of the button to clear, and have no text entered for the label. This basically makes the button a completely transparent box on top of the text.
What I would like to do is: when the transparent button is clicked, change the border color from transparent to black, thus creating a box around the word, and looking like the word is enclosed in the box. In the event that I can get some guidance in how to do this, I would also like for if the button is clicked a second time for the black border to return to transparent (in case the initial click is done in error.)
I am assuming this will need to be done by utilizing the javascript functionality of the PDF and assigning it to a button action Mouse Up. However, I must admit ignorance on what the code would be to accomplish this.
Any help would be appreciated.
I may get back to you on this, but a helpful resource is found at:
http://partners.adobe.com/public/developer/en/acrobat/sdk/pdf/javascript/AcroJSGuide.pdf
This is Adobe's reference on PDF forms, and includes information on Javascript used in their form calculations.
On page 267 of this document is this:
How can I hide an Acrobat form field based on the value of another?
Use the display method of the Global object:
var title = this.getField("title");
if (this.getField("showTitle").value == "Off")
title.display = display.hidden;
else
title.display = display.visible;
Five lines of code that goes somewhere. Maybe in the "calculate" portion of a field.
Line 1: Set a variable called "title" that represents the existing form field named "title"
Line 2: Start "if" statement that queries the value of field called "showTitle"
Line 3: If the value of showTitle is "Off", then set the field "title" to hidden
Line 4,5: Otherwise, default the display value of field "title" to visible
If the field called "title" here is a text box, you can put in some text that will be either hidden or visible. You could have a blank field with a border, maybe, to use as your hidden/visible border, if there is no fill color, I think.
The field "showTitle" can be a check box, where the value on check is "Off".
I hope this helps. I am trying this out myself right now.
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});
I have a screen which will be loaded dynamically along with countries,text boxes with some preloaded data and revert button next to them.
I would like to make the text boxes readonly/disabled if they are not having any preloaded data and not to show the button next to them.
Please let me know how it can be done.
When you get the input check if the textbox has a value if it doesn't make a call to a javascript method such as the on below.
document.forms['myFormId'].myTextArea.setAttribute('readonly','readonly');
i'm not sure about the disable of the button but if I had to take a guess I would when you are checking the input value if there is data display button otherwise skip
and disabled properties of text box, resolved my issue along with below code
I have a two items(rows) in the list box
I love to work with jquery
i love to work with javascript
I have textbox and button when I enter love in the text box when I click button i need to loopthrow this list box to find the text love and change that love text color? to yellow.
thanks
first of all, jQuery is javascript, it's a library written in javascript.
So, If I understand your problem, you have 3 interactive elements on your page:
a list box containing a list of words
a text field for the user to enter a word
a button for the user to click when he has written the text.
And you want the option to change color when the user clicks the button.
the code for thsi would be something like this:
$("#mybutton").click(function(){
var text = document.getElementById("mytextinput").value
$("#lstCodelist option").each(function (){
if(this.text()===text)
this.css('color':'yellow');
});
});
this is what happens:
line 1: I define a click handler when the button gets clicked.
line 2: I get the text from inside the textbox, I use getElementById to avoid the overhead of using jQuery for something that simple
line 3: I loop over each of the items in the list.
line 4: if the string in the textbox equals the text inside the option:
line 5, change the css property of the list option.
So no, this is not affecting the text, it only edits the css.
for changing text box color, you can add class to the element
addClass("myClass yourClass");
http://api.jquery.com/addClass/
I need to create a text area in which the user will input the auto responder code. I hope everyone knows this. The auto responder code will have a full form code provided by most of the auto responder services like mailchimp, aweber etc.
I need to use getElementByTagName or anything else to extract all the input elements from the pasted code.
For example I will have 3 boxes below this text area, one will have Name field, 2nd will be email field and 3rd will be a box which will add all the hidden fields extracted from the above text area.
Yes, getElementsByTagName exists already.