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);