Menu
CSS Style
.subjectNature{left:2px; top:175px; float:left; position:relative; height:197px; width:450px;}
p.lblEnquiryNature{font-family:Arial, Helvetica, sans-serif; font-size:13px; padding-left:10.5px; padding-right:10.5px; padding-top:10px; margin-bottom:0; margin-top:0; left:2px; top:38px; position:absolute; height:112px; width:425px;}
.enquiryOptions{left:10px; top:175px; float:left; position:relative; height:197px; width:458px;}
p.modifyPreBooked{left:22px; top:115px; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; font-weight:600; color:#FF0000; height:50px; width:378.5px; padding-left:22px; padding-right:10.5px; margin-bottom:0; margin-top:0; display:none;}
.twentypxfixOpt5to7{margin-left:15px; top:112px; position:absolute; width:436px;}
HTML
<div class=”subjectNature”>
<p class=”lblEnquiryNature”>
If you have already booked for a removals service through M&A Removals and the nature of your enguiry/ question is about the details of your move or if you wish to inform us of any changes to the time, date, location or perhaps you have additional requirements. Please enter the booking reference number (if you have been provided with one) in the space provided to the right or enter either your firstname or surname and click the retrieve button to view the booking details.
</p>
</div>
<div class=”enquiryOptions”>
<div class=”twentypxfixOpt1to4″>
<input type=”checkbox” name=”natureOpt1″ /> Request a new removals quotation (within the United Kingdom <b>UK</b>)<br />
<input type=”checkbox” name=”natureOpt2″ /> Request a new removals quotation (within the European Union <b>EU</b>)<br />
<input type=”checkbox” name=”natureOpt3″ /> Add new, make or modify specific requirements to a removals job<br />
<input type=”checkbox” name=”natureOpt4″ /> Make changes to already booked removals arrangements for example; moving date, time or location<br /> <—I want to be able to check this checkbox and the follow should happen:
the height of both div classes should change from 197px to 294px, the top property of the p class lblEnquiryNature should drop down an extra 53px, the p class modifyPreBooked should be visible and the div class twentypxfixOpt5to7’s top property should drop down an extra 56px;—>
</div>
<p class=”modifyPreBooked”>
You must have already booked for a removals service either online or over the telephone AND PLEASE ALLOW 24 HOURS NOTICE before the actual moving date/ time
</p>
<div class=”twentypxfixOpt5to7″>
<input type=”checkbox” name=”natureOpt5″ /> General enquiry about M&A Removals as a company <br />
<input type=”checkbox” name=”natureOpt6″ /> Enquiry about the services offered by M&A Removals <br /><br />
<input type=”checkbox” name=”natureOther” /> Other
</div>
</div>
I have used the following JQuery script and nothing seems to be happening. I have executed the JQuery script using the firefox scratchpad only to get
1 error being [21:05:45.382] missing ; before statement and I’m not too sure where I’m going wrong
JQuery
<script type=”text/javascript” src=”jquery-latest.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.twentypxfixOpt1to4[natureOpt4=’checked’]”).click(function(){
$(“.enquiryOptions”).height(“294px”);
var topy1 = $(“.twentypxfixOpt5to7”).position().top + 56;
$(“.twentypxfixOpt5to7”).css(“top”, topy1 + “px”);
$(“p.modifyPreBooked”).show();
$(“.subjectNature”).height(“294px”);
var topy2 = $(“.lblEnquiryNature”).position().top + 53;
$(“.lblEnquiryNature”).css(“top”, topy2 + “px”);
});
});
Any ideas, solutions, pointing out error, ideas will be much appreciated