Develop Reference

Add HTML Value To JavaScript Variable

Ok.. So i have a html element that displays a current value, value is changed via range slider, i change the value of the html element using javascript with the following code:
hex_out = document.querySelector('#hex');
hex_out.value=rangeValue;
Which the above works fine, but recently I've needed to be able to add a bit of html code into hex_out.value
for example if i try
hex_out.value="<font color='red'>"+rangeValue+"</font>"
it will change hex_out.value to the code shown below
<font color='red'>Range slider value</font>"
which is obviously not what i'm trying to accomplish. How would i add html code to hex_out.value and have it display correctly?
Before anyone trys to say "This is a duplicate question", realize i've tried nearly ALL solutions shown on stack overflow with no luck

You'll need to modify the color via the element's style property. Try the following:
hex_out.style.color = 'red';
If you need to add any HTML, then (assuming that the hex_out element is a container element, and not an <input> tag), you can assign the HTML to its innerHTML property like so:
hex_out.innerHTML = '<strong>This is a <em>formatted</em> value.</strong>';
Another edit: It looks like you're using an <output> element, which doesn't accept child elements as far as I know. In this case, you'll likely want to use a regular <div> or <span> tag instead of <output> and then update its value manually as your sliders move using the innerHTML property described above.

I think you are looking for something like this:
var hex_out = document.querySelector('#hex'),
rangeValue = document.querySelector('#val');
rangeValue .addEventListener('input', function () {
hex_out.innerHTML = "<font color='red'>"+rangeValue .value+"</font>";
}, false);
<input type=range id=val>
<span id=hex>50</span>

Your difficulty arose because you put an obsolete font tag in the output tag which only accepts "phrasing content". The font tag is not supported in HTML5 and not on the list of phrasing content elements.
As #Mark said, a simple div will do if you require HTML to be rendered.

The example you gave is the thing normally expecting from javascript. I consider you want to change html of an existing element not value. If it is you can use below code:
hex_out. innerHTML ="<font color='red'>"+rangeValue+"</font>"
Existing fiddle link JSFiddle
Tested and works:
function setColor() { debugger;
Rval = parseFloat((r_out.value / 255.00).toFixed(3));
Gval = parseFloat((g_out.value / 255.00).toFixed(3));
Bval = parseFloat((b_out.value / 255.00).toFixed(3));
hex = "R: " + Rval + " " + "G: " + Gval + " " + "B: " + Bval;
var r_hex = parseInt(r.value, 10).toString(16),
g_hex = parseInt(g.value, 10).toString(16),
b_hex = parseInt(b.value, 10).toString(16),
hex1 = "#" + pad(r_hex) + pad(g_hex) + pad(b_hex);
body.style.backgroundColor = hex1;
hex_out.innerHtml = hex + [
'<br/><font size="1px">GSC RGB Selector</font>'
].join('#hex');
}

Assign var as a selector

I have a var named as sliceText which contains a text which is collected whenever user hover over the section of a visualforce chart. I'm trying to increase the size of this text with a value which gets calculated at run time and newSize var hold the same. But using jquery following syntax is not working and I'm not able change the font size.
var sliceText = j$(this).text();
j$(sliceText).css('font-size', newSize);
How can I assign a var as a selector using jquery? I want following solution work for me but its NOT when I tried to!! https://docs.acquia.com/articles/increase-text-size-jquery

You need to apply css to the DOM object containing the text no the text
j$('path, tspan').mouseover(function(e) {
j$(this).children().css('font-size', 15);//reset to default size font
j$(e.target).css('font-size', newSize);
});

You didn't mentioned whether the dom is an id or a class
var sliceText = j$(this).text();
j$("#"+sliceText).css('font-size', newSize); --- if the dom element is an id
j$("."+sliceText).css('font-size', newSize); --- if the dom element is a class

var newSize = '30px';
var originalSize = '14px';
$("span").hover(function(){
$(this).css('font-size', newSize);
}, function(){
$(this).css('font-size', originalSize);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> Jan </span><br/>
<span>Feb</span><br/>
<span>March</span>

As i understand you want to change the font size of hover element
so try this one
function funtest()
{
var oldSize = parseFloat(j$('text').css('font-size'));
var newSize = oldSize * 2;
j$('path, tspan').mouseover(function () {
j$(this).css('font-size', newSize);
});
}

Dynamically adding and updating style block

Currently I am doing something like this:
function newFont(newSizeA, newSizeB) {
var elem = document.getElementById('style-1');
if (typeof(elem) != 'undefined' && elem != null) {
removeChildNodes(elem); // function that removes child
nodesremoveNode(elem);
}
var styleText = ".a { font-size:" + newSizeA + "px; } .b { font-size:" + newSizeB + "px; }";
var x = document.createElement('style');
x.setAttribute("type", "text/css");
x.setAttribute("id", "style-1");
if (x.styleSheet) { // for IE
x.styleSheet.cssText = styleText;
}
else { // others
var textnode = document.createTextNode(styleText);
x.appendChild(textnode);
}
}
The point of it is that there is a loop happening and another function is measuring the size of a menu to make sure it fits in a spot when someone is changing the font size.
I am wondering, is there a better way to create and manipulate elements? I need to change padding and font size but right now as you can see I'm just removing it entirely and recreating it.

I think the easiest way is to prepare several css-styles for different font-sizes and then attach them as so:
function newFont(targetElement, fontSize) {
document.getElementById(targetElement).className = fontSize;
}
newFont('myElement','bigFont');
the css-style would then be:
.bigFont {
font-size: 5em;
}
if you want to add the style do:
document.getElementById("MyElement").className += "MyClass";
if you want to remove styles or check if the style is already apllied please refer to this perfect answer:
Change an element's class with JavaScript

How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a <select>?

So I have text that changes whenever a specific <select> is changed to a different option. I need to make this text change font-size based on if it flows to the outside of the div. Here's what I have so far:
var autoAdjust = {
init:function(){
var eObject = document.getElementById('select');
eObject.on( "change", autoAdjust.task );
},
task:function(){
var divWidth = jQuery(".containerDiv").width();
var text = document.getElementById("text");
var fontSize = 16;
while (text.width() > divWidth){
text.css("font-size", fontSize -= 0.5);
}
}
}
autoAdjust.init();
Here's the CSS:
/* This makes it so you can measure the text width */
#text{
white-space:nowrap;
display: inline-block;
}
How would I make this work?? I feel like I'm over complicating it.

The text variable contains a javascript dom object, not a jQuery object. This matters because .text() and .css() are both jQuery methods and do not work (are undefined) on plain dom objects. Your code should function correctly like so:
var autoAdjust = {
init:function(){
var eObject = jQuery('select');
eObject.on( "change", autoAdjust.task );
},
task:function(){
var divWidth = jQuery(".containerDiv").width();
var text = jQuery("#text");
var fontSize = 16;
while (text.width() > divWidth){
text.css("font-size", "-=0.5");
}
}
}
autoAdjust.init();

Shooting from the hip here, but it looks like there are a couple problems with the snippet.
Dom elements don't natively support the "on" method. You'll need to use a library selector to get "on" support (ie jQuery, etc)
You need to specify the unit type to increase/decrease font size.
See snippet with suggested edits (untested, but the spirit of the edits are evident)
<select id="MySelect">
...
</select>
<div class="containerDiv">
<span id="MyText"></span>
</div>
<script type="text/javascript">
var autoAdjust = {
init:function(){
var eObject = $("#MySelect"); // jQuery selector (using ID)
eObject.on( "change", autoAdjust.task );
},
task:function(){
var divWidth = $(".containerDiv").width(); // jQuery selector (using class)
var text = $("#MyText"); // jQuery selector (using ID)
var fontSize = 16;
while (text.width() > divWidth){
text.css("font-size", (fontSize -= 0.5) + "px"); // specify units
}
}
}
autoAdjust.init();
</script>

Javascript Gets the contents of the textarea of the distance from the border pixels

How can I be sure the text in the input box, the number of pixels from the left box? It may have utf8, Chinese

This might not be the best way, but i guess this can be a start. This will return the number of pixels remaining in the input element:
function getRemainingWidth(element){
var span = $('<span class=\"'+$(element).attr('class')+'\" style=\"visibility:hidden;\">'+$(element).val()+'</span>');
$(document.body).append(span);
var diff = $(element).width() - $(span).width();
$(span).remove();
return diff;
}

One way to do it is creating a span element and adding your text to it. But there is a catch: you have to add it to the dom in order get its with:
var sYourText = 'asdfafdsa, dzcvxvxc';
var oText = document.createElement('span');
oText.innerHTML = sYourText;
document.getElementsByTagName('body')[0].appendChild(oText)
console.log(oText.offsetWidth);
Of course: be sure to apply the same font that your textarea have.

$("textarea").keyup(function(){
var s = $(this).val()
var data = s.replace(/(\s)/g,' ')
console.log(data)
$('span').html(data)
})
I replace it with a regular spaces replaced, but wrapping problems that may require using CSS