We Keep Coding

Swap Divs then swap selected option value between two select lists

The Problem:
Before I began adding the div swaps, I could only type into the left (from_value) input and the result of the calculations would be applied via ajax to the right (to_value) input.
I would like to allow the user to type into either box and have the results display in the opposite box they're typing in.
What I am doing to make this happen:
I am swapping the left div with the right div on mouseover of the to_value input. Here's the code i'm using to do the swap:
$.fn.swapWith = function (that) {
var $this = this;
var $that = $(that);
// create temporary placeholder
var $temp = $("<div>");
// 3-step swap
$this.before($temp);
$that.before($this);
$temp.after($that).remove();
return $this;
};
var leftSide = $('#left-side');
var rightSide = $('#right-side');
$('#to_value_input').on('mouseover', function () {
$(rightSide).swapWith(leftSide);
});
This effectively swaps the divs, bringing along with it ids and names of the inputs which retains functionality of my server-side script to perform calculations. As expected, the from_unit select list and to_unit select list are swapped and their values / displayed text are also swapped from one side to the other.
I would like to swap the values and text of the two select boxes either directly before or more likely, directly after the div swap so it appears as if nothing changed on screen.
Similar questions that I have reviewed:
How to swap values in select lists with jquery?
How to swap selected option in 2 select elements?
I have tried several variations of each of the provided solutions. This seems like it should be a fairly simple thing to do but I find myself stuck. Any further help would be greatly appreciated.
The full code base is available on github if you need to see it: https://github.com/pschudar/measurement-conversion
I have made minor changes to the code hosted there to accommodate the div swaps.

How to customize a dialog boxes fonts or styles when customizing stamps using JavaScript in Acrobat

How am I able to customize the font style on the dialog box itself in Adobe Acrobat using JavaScript when creating stamps? I'm able to customize after the stamp has already been placed. But I want to style the dialog box itself.
I have used code such as:
var f = this.getField("list_box1");
f.fontText = "AMGDT";
This only appears to work after the stamp is place. The stamping part will update it to the assigned font style. I want the dialog boxes fields to be set to this AMGDT font style. When they use a list box or a text field, the selections are symbols.
this is what i saw as a suggestion but this only works once the stamp is placed on the PDF:
**for (var i = 0; i < numFields; i++) {
var fName = getNthFieldName(i);
var f = getField(fName);
if (f.type === "text") {
// f.alignment ="center";
f.textSize = 6;
f.textFont = "Helvetica";
// Other properties go here
}
}**
https://texascreative.com/blog/automated-form-field-styling-goodbye-times-new-roman-hello-acrobat
I want my list box or text fields font to be set to something other than the defaults for the dialog box I use when customizing the stamp to be placed on a PDF using Acrobat.

Get text without mark up from kendo editor

I am using kendo editor in my application to capture some information. One of the requirements is to save the text entered in the same without any markup. I understand that the piece of code:
$("#editor").data("kendoEditor").value();
will give me the text entered in the control with the markup. But is there any way to retrieve only the text entered? I even wanted the number of lines in the text area that the content occupies.

You can use
var text = $("<div/>").html($("#editor").data("kendoEditor").value()).text();

Try the following code :
try {
var value = $("#editor").data("kendoEditor").value();
var text = value.replace(/(<([^>]+)>)/ig,"");
alert(text);
}
catch (e) { }

Populate a div from TinyMCE content dynamically

I'm trying to get the contents from a TinyMCE textarea to populate a button/div as I type. This is to show the client how the button/div will look like when it goes live. Everything else works dynamically, such as the button/div colour, the title and dropdown.
The issue lies with dynamically retrieving the contents from TinyMCE. If I use a standard textarea box it works fine. I want the client to be able to use some of the basic features of TinyMCE.
Kind of how this form field is working. As I'm typing in this box, I can see my text updating below.
My JS is:
$(document).on('change', '#ParentID', function() {
var NTxt = $('#ParentID option:selected').text();
var NVal = document.getElementById("ParentID").value;
NTxt = NTxt.replace(/ # /g,"<br/>");
if(NVal != "0"){
if(NTxt.value != null || NTxt.value != "0" || NTxt.value != undefined){
$("#LTxt").html(NTxt);
}
}else{
$("#LTxt").html('External Link Text/Quote Text');
}
});
$(document).on('keyup', '#Opt2', function() {
$('#LTxt').text($(this).val());
});
Here are some screen grabs:
1. Normal State:
2. Populated title and dropdown "internal link" text:
3. Textarea, populating same place (WITHOUT TINYMCE):
Anyone know how I can do this with TinyMCE? I've tried...
tinymce.get('content id').getContent()
...but it didn't seem to populate dynamically.
This is the key question: How to pass anything typed into the TinyMCE textarea into the button, at the bottom, as the user is typing?
Many thanks in advance,
Glynn

You need to use a variety of events that TinyMCE triggers to know when its content has changed. You can then grab the content from the editor and do whatever you need with it.
Here is an example that shows the actual raw HTML in a neighboring DIV. It can easily be adapted to insert the HTML into an elements so its actually rendered to the page.
http://fiddle.tinymce.com/Gegaab/5
The list of available events is documented here: https://www.tinymce.com/docs/advanced/events/#editorevents
The example uses the keydown and change events in particular but there are many to choose from if those don't fit your needs.

Input box that converts text to buttons

I am trying to create a text input field that converts the input text to a "button" onblur. For example in the hotmail "new email page" when you enter email addresses it will make it into a little button-like object with a delete button when you enter a delimiter (semi-colon or comma). Anyone know how to do this?
I did a sort of workaround thing to what i want where i have a div with a border. In the div there is an input field with the borer invisible and a hidden button. I have a js function that takes the input value and makes the button visible with the value but this is not exactly what im looking for..
actually i just realised stackoverflow does this as well when im adding tags to the post

This is a multiple value field. Give a look at this one.
The feature is not so complex. It's an HTML list, and each value that you choose is converted into a LI node and appended to that list. The input field is inside the last LI, so its cursor can always be after the last choice. Besides, the input value is assigned to a hidden input, which can be used on the server-side as a comma-separated value.

Here's a simple way to fake it (and it looks like this is similar to what SO does for tags):
Create your text <input>, and make sure that its border and outline are both set to none.
Create a container for your tags (or buttons, or whatever) and put it next to the <input>.
Monitor the keydown event on the <input>; when the user tries to enter a "break" character (such as a semi-colon or comma), create the button, add it to the container, empty the <input>'s value, and prevent default (so that the "break" character isn't inserted into the tag, or left in the <input>).
That's the basic idea. Once you've done that, you can add event listeners/handlers to the buttons, or style them any which you'd like, etc.
Here's the simple example I cooked up:
var inp = document.getElementById('yourInput'),
tags = document.getElementById('yourContainer'),
breaks = {
186: 1, // semi-colon
188: 1 // comma
};
function createTag(txt) {
var elem = document.createElement('span');
txt = document.createTextNode(txt);
elem.appendChild(txt);
elem.className = 'tag';
tags.appendChild(elem);
}
function monitorText(e) {
e = e || window.event;
e = e.keyCode;
if (breaks[e]) {
e = inp.value;
inp.value = '';
createTag(e);
return false;
}
}
inp.focus();
inp.onkeydown = monitorText;