Same text typed into input appears inside div

JavaScript
1

Hi all,

I have a little project where the user designs a slate sign for the house, and basically there 3 text areas to type your text in that will eventually appear on the slate.

At the moment I have the following working, and all is fine:


$(document).ready(function () {
$("#firstline, #secondline, #thirdline").keyup(function () {
var a = $("#firstline").val();
var b = $("#secondline").val();
var c = $("#thirdline").val();
$("#copyfirst").val(a);
$("#copysecond").val(b);
$("#copythird").val(c);
});


<div id="textWrapper">
<div id="copyFirst"><input type="text" id="copyfirst" class="liveText" readonly="readonly"></input></div>
<div id="copySecond"><input type="text" id="copysecond" class="liveText" readonly="readonly"></input></div>
<div id="copyThird"><input type="text" id="copythird" class="liveText" readonly="readonly"></input></div>
</div>

And here is the project at the moment -

http://www.accend4web.co.uk/adam/index3.php

But what I have recently added is the font size slider and the text thats there at the moment is in a div, and what I’m trying to do is either and this is easier if the slider can control the inputs above, or the user types in the text and it appears in the div which at the moment holds some lorem ipsum text.

I’m wondering if i need to go down the route of the text appearing in the div, I ave tried to get that to work and i cant get the text the user types to appear in the div in place of the lorem ipsum.


<div style="position:relative; z-index:200; border:#FF0000 dashed 0px;">
<div class="textBox">Lorem ipsum dolor</div>
<div id="slider"></div>
<input type="text" id="font_size" />
</div>


$(window).load(function(){
$(function() {
    var aFontsSizeArray = new Array('5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '26', '28', '30', '33', '36', '39', '42', '45', '48', '55', '65', '75', '85', '95', '110', '130', '150');
    $('#slider').slider({
        value: 7,
        min: 1,
        max: 35,
        step: 1,
        slide: function(event, ui) {
            var sFontSizeArray = aFontsSizeArray[ui.value];
            $('#font_size').val(sFontSizeArray + ' px');
            $('.textBox').css('font-size', sFontSizeArray + 'px' );
        }
    });
    $('#font_size').val((aFontsSizeArray[$('#slider').slider('value')]) + ' px');
});
});//]=]=>

I tried simply adding the extra line below so that the users text appears inside the div, but that doesnt seem to be working.


$("#firstline, #secondline, #thirdline").keyup(function () {
var a = $("#firstline").val();
var b = $("#secondline").val();
var c = $("#thirdline").val();

$("textBox").val(a);

$("#copyfirst").val(a);
$("#copysecond").val(b);
$("#copythird").val(c);
2

Just tried the following to get the text the user types to appear inside the div where the lorem ipsum text is at the moment.


var inputBox = document.getElementById('firstline');
inputBox.onkeyup = function(){
    document.getElementById('textBox').innerHTML = inputBox.value;
}

Still nothing with that, will keep trying.

3

On reflection because of everything thats going on in the page, I think it will be better if the slider changes the font size of the input areas rather then the text in the div.

So I suppose the following jscript needs to control the then following input areas.


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    var aFontsSizeArray = new Array('5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '26', '28', '30', '33', '36', '39', '42', '45', '48', '55', '65', '75', '85', '95', '110', '130', '150');
    $('#slider').slider({
        value: 7,
        min: 1,
        max: 35,
        step: 1,
        slide: function(event, ui) {
            var sFontSizeArray = aFontsSizeArray[ui.value];
            $('#font_size').val(sFontSizeArray + ' px');
            $('.textBox').css('font-size', sFontSizeArray + 'px' );
        }
    });
    $('#font_size').val((aFontsSizeArray[$('#slider').slider('value')]) + ' px');
});
});//]]>  
</script>



<div id="textWrapper">
<div id="copyFirst"><input type="text" id="copyfirst" class="liveText" readonly="readonly"></input></div>
<div id="copySecond"><input type="text" id="copysecond" class="liveText" readonly="readonly"></input></div>
<div id="copyThird"><input type="text" id="copythird" class="liveText" readonly="readonly"></input></div>
</div>
4

OK I got it sort of working…

http://www.accend4web.co.uk/adam/index3.php

Just in case your not sure what to do first, you got to choose your slate size, only one there at the moment, and then it appeasr in the wall area, then as its the smallest one you get only a choice of 1 line of text, and you type this in the ‘Engraving Text’ bit.

So I got it working so far where the slider controls the size of the ofnt, but for some reason it doesnt allow the full font size to show and the same if its too small.

Probably easier if you play with it and see.

5

Could someone have a look at the following code for me please, and see why when the user types into the text field, the text isnt being copied into the div.


$(document).ready(function () {
$("#firstline").keyup(function () {

var inputBox1 = document.getElementById('#firstline');
inputBox1.onkeyup = function(){
    document.getElementById('textBox').innerHTML = inputBox1.value;
}
 
});



<div style="position:relative; z-index:200; border:#FF0000 dashed 0px;">
<div class="textBox"></div>
<div id="slider"></div>
<input type="text" id="font_size" />
</div>
6

Ok no worries, i got it sorted by changing the div from a class to an id, and works pretty well.

The font size slider works really nice, but i have been looking to see if there is anything similar to be able to use a slider to move a div up and down the page.
So that once they have decided on the font size, they could position it corretly on the slate to see how it looks.

I suppose though a slider to move to div left and right a bit too, would be nice.