1. <?php echo $this->Html->css('postcard4');?>
<script>
$(document).ready(function() {
var textColor, backgroundColor;
$('#textColor li').click(function() {
textColor = $(this).attr('color');
$(".changeTextColor").css("color", textColor);
$('#textColorInput').val(textColor);
});
$('#backgroundColor li').click(function() {
backgroundColor = $(this).attr('color');
$(".changeBgColor").css("background-color", backgroundColor);
$('#backgroundColorInput').val(backgroundColor);
});
});
</script>
<style >
p {
white-space: pre;
}
</style>
<div class="header">
<div class="contCenter">
<div class="headerMenu">
<ul>
<li><a href="#">Choose Text Color <img
src="/img/arrow_white.png" /></a>
<ul class="colorDiv" id="textColor">
<?php echo $this->element('colors'); ?>
</ul>
</li>
<li><a href="#">Choose Background Color <img
src="/img/arrow_white.png" /></a>
<ul class="colorDiv" id="backgroundColor">
<?php echo $this->element('colors'); ?>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="contCenter">
<div class="mainCont cont1">
<div class="cardBox-1">
<div class="postCard5 changeBgColor">
<p id="1" class="title changeTextColor">Menu</p>
<p id="2" class="date changeTextColor">josh & shelby -
august 3rd, 2013</p>
<div class="centerDiv">
<p id="3" class="course changeTextColor">First
Course</p>
<p id="4" class="butter changeTextColor">Butter
Lettuce Salad</p>
<p id="5" class="butter changeTextColor">kiwi,
oranges, strawberries, toasted almonds</p>
<p class="butter changeTextColor">tarragon poppy
seed dressing</p> <br>
<div class="second">
<p class="course changeTextColor">Main
Course</p>
<p id="6" class="butter changeTextColor">Grilled
Dry Rubbed Filet</p>
<p class="butter changeTextColor">whipped
potatoes, seasonal vegetables</p>

2. <p class="butter changeTextColor">roasted
shallot sauce</p>
</div>
<p class="e-text changeTextColor">e</p>
<div class="third">
<p class="butter changeTextColor">Pan Seared
Halibut</p>
<p class="butter changeTextColor">whipped
potatoes, seasonal vegetables</p>
<p class="butter changeTextColor">lemon beurre
blanc</p>
</div>
<p class="course dessertCourse
changeTextColor">Dessert Course</p>
<p class="butter changeTextColor">Bittersweet
Chocolate Cake</p>
<p class="butter changeTextColor">chocolate and
vanilla bean buttercream</p>
<p class="e-text2 changeTextColor">e</p>
<div class="fourth">
<p class="butter changeTextColor">Meyer Lemon
Cake</p>
<p class="butter changeTextColor">fresh
strawberries, lemon and strawberry buttercream</p>
</div>
</div>
</div>
</div>
<div class="textInputs">
<?php
$size = 2;
$maxlength = 5;
$placeholder = 'size';
$s2 = 25.33;
$s6 = 20;
echo $this->Form->create(
'Textfields', array(
'url' => array('controller' => 'postcards', 'action' =>
'viewPdf_4'),
'type' => 'post',
'inputDefaults' => array()
)
);
echo $this->Form->input(
'textColor', array(
'type' => 'hidden',
'id' => 'textColorInput'
)
);
echo $this->Form->input(
'backgroundColor', array(
'type' => 'hidden',
'id' => 'backgroundColorInput'
)
);
echo $this->Form->input(
'text2', array(
'type' => 'text',
'label' => false,
'div' => false,

3. 'id' => 'text2',
'num1' => '2',
'class' => "n1 firstText",
)
);
echo $this->Form->input(
'textSize2', array(
'type' => 'text',
'label' => false,
'div' => false,
'id' => 'textSize2',
'num2' => '2',
'class' => "n2",
//'placeholder' => $placeholder,
'maxlength' => $maxlength,
'size' => $size,
'value' => $s2
)
);
// echo $this->Form->input(
// 'text5', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text5',
// 'num1' => '5',
// 'class' => "n1 firstText",
//
// )
// );
//
// echo $this->Form->input(
// 'textSize5', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize5',
// 'num2' => '5',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s5
// )
// );
echo $this->Form->input(
'text6', array(
'type' => 'textarea',
'label' => false,
'div' => false,
'TextMode' => 'multiline',
'rows' => '12',
'cols' => '25',
'id' => 'text6',
'num1' => '6',
'class' => "n1 firstText",
)
);
echo $this->Form->input(
'textSize6', array(

4. 'type' => 'text',
'label' => false,
'div' => false,
'id' => 'textSize6',
'num2' => '6',
'class' => "n2",
//'placeholder' => $placeholder,
'maxlength' => $maxlength,
'size' => $size,
'value' => $s6
)
);
// echo $this->Form->input(
// 'text7', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text7',
// 'num1' => '7',
// 'class' => "n1 firstText",
//
// )
// );
//
// echo $this->Form->input(
// 'textSize7', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize7',
// 'num2' => '7',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s7
// )
// );
// echo $this->Form->input(
// 'text8', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text8',
// 'num1' => '8',
// 'class' => "n1 firstText",
//
// )
// );
//
// echo $this->Form->input(
// 'textSize8', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize8',
// 'num2' => '8',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s8
// )
// );

5. // echo $this->Form->input(
// 'text9', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text9',
// 'num1' => '9',
// 'class' => "n1 firstText",
//
// )
// );
//
// echo $this->Form->input(
// 'textSize9', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize9',
// 'num2' => '9',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s9
// )
// );
// echo $this->Form->input(
// 'text10', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text10',
// 'num1' => '10',
// 'class' => "n1 firstText",
//
// )
// );
//
// echo $this->Form->input(
// 'textSize10', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize10',
// 'num2' => '10',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s10
// )
// );
// echo $this->Form->input(
// 'text11', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'text11',
// 'num1' => '11',
// 'class' => "n1 firstText",
//
// )
// );
//

6. // echo $this->Form->input(
// 'textSize11', array(
// 'type' => 'text',
// 'label' => false,
// 'div' => false,
// 'id' => 'textSize11',
// 'num2' => '11',
// 'class' => "n2",
// //'placeholder' => $placeholder,
// 'maxlength' => $maxlength,
// 'size' => $size,
// 'value' => $s11
// )
// );
echo $this->Form->input(
'Download as pdf', array(
'type' => 'button',
'label' => false,
'div' => false,
'class' => "chooseTextColorBtn"
)
);
echo $this->Form->end();
?>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i, j;
$('.n1').keyup(function() {
i = $(this).attr('num1');
$('#text' + i).keyup(function() {
var value = $(this).val();
$('p#' + i).html(value);
alert (value);
})
})
.keyup();
$('.n2').keyup(function() {
j = $(this).attr('num2');
$('#textSize' + j).keyup(function() {
var value = $(this).val();
$('p#' + j).css('font-size', value + "px");
if (value == "") {
$('p#' + j).css('font-size', '');
}
})
})
.keyup();
$('.n2').keyup(function() {
j = $(this).attr('num2');
$('#textSize' + j).keyup(function() {
var value = $(this).val();
var pattern = /^[0-9.]+$/;
if (pattern.test(value) || value == "") {
return true;
} else {
alert("Please fill only numbers");
$('#textSize' + j).val("");

7. return false;
}
})
})
.keyup();
$('.n2').keyup(function() {
j = $(this).attr('num2');
$('#textSize' + j).keyup(function() {
var value = $(this).val();
if (value < 151) {
return true;
} else {
$('#textSize' + j).val(150);
return false;
}
})
})
.keyup();
})
</script>
<script type="text/javascript">
//////////////////// when clicking enter, goes to next field, doesn't let to
generate pdf with enter
$(function() {
// $('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keypress', 'input', function(e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
if (nextIndex == maxIndex ) {
$('textarea').focus();
}
}
});
});
</script>