Powered By Blogger

Thursday, October 24, 2013

scroller small size 250 * 140

.js-disabled img { width:220px; height:150px; display:block; float:left; }

#container{ background:#fff;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 0px solid #000000;}

#outerContainer { width:210px; height:137px; margin:auto; position:relative; background:#fff;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 0px solid #000000;}

#imageScroller { width:210px; height:137px; position:relative; background:#fff;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 0px solid #000000;}

#viewer { width:210px; height:137px; overflow:hidden; margin:auto; position:relative; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 0px solid #000000;}

#imageScroller a:active, #imageScroller a:visited { color:#000000; }



<?php
/*
Template Name: Finance
*/
get_header(); ?>
<div class="new-car-page ins-page">
    <div class="ins-head"><h4>Hyundai Car Finance</h4></div>
    <div class="ins-container">
    <div class="ins-left">
    <div class="ins-text"><p>V3 Hyundai offer a wide range of Finance options for your Hyundai car. Finance options are available from <strong>SBI Car Loans, HDFC Bank, ICICI Bank, Kotak Finance, Sundaram Finance, Mahindra &amp; Mahindra Finance</strong>, etc.</p>
   
    <p>Below is a EMI calculator app for your convenience.</p>
    </div>
    <div class="ins-tab-menu">
    <ul id="tabs-ins" class="fancyNav">
        <li name="#new-insurance" id="new-insurance1" class="current2"><label>Finance Request</label></li>
            <li name="#renew-insurance" id="renew-insurance1"><label>EMI Calculator</label> </li>
        </ul>  
        </div>
        <div class="clear" id="sub-content-ins">
        <?php
if( isset($_POST['finance_req'])){
$to  = 'finance@v3hyundai.com' ;
$cc  = 'sales@v3hyundai.com';

$subject = 'Finance Request';

$message = '
<html>
<head>
 <title>Finance Request</title>
</head>
<body>
<h2 style="color:green;">Finance Request</h2><br />
<h3 style="color:blue;">Car Information</h3>
<table>
<tr><td style="width:150px;">Model</td><td>:</td><td>'.$_POST['model'].'</td></tr>
<tr><td style="width:150px;">Loan Amount</td><td>:</td><td>'.$_POST['loan_amt'].'</td></tr>
<tr><td style="width:150px;">Loan Tenure</td><td>:</td><td>'.$_POST['loan_tenure'].'</td></tr>
</table>
<br />
<h3 style="color:blue;">Contact Information</h3>
<table>
<tr><td style="width:100px;">Name</td><td>:</td><td>'.$_POST['full_name'].'</td></tr>
<tr><td style="width:100px;">Mobile</td><td>:</td><td>'.$_POST['mobile'].'</td></tr>
<tr><td style="width:100px;">Email</td><td>:</td><td>'.$_POST['email'].'</td></tr>
<tr><td style="width:100px;"> Address</td><td>:</td><td>'.$_POST['new_ins_addr'].'</td></tr>
<tr><td style="width:100px;">Pin Code</td><td>:</td><td>'.$_POST['pin_code'].'</td></tr>
<tr><td style="width:100px;"> Landline</td><td>:</td><td>'.$_POST['phone_code'].'-'.$_POST['phone_no'].'</td></tr>
</table>
</body>
</html>
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: V3 Hyundai <'.$to.'>' . "\r\n";
$headers .= 'From: '.$_POST['full_name'].' <'.$_POST['email'].'>' . "\r\n";
$headers .= 'Cc:'.$cc. "\r\n";

$success = mail($to, $subject, $message, $headers);
if( $success) { ?>
<script type="text/javascript">
$(function() {
$( "#success_ale" ).dialog();
});
</script>
<?php
}
else{ ?>
<script type="text/javascript">
$(function() {
$( "#error_ale" ).dialog();
});
</script>
<?php
}
}
?>
        <div id="new-insurance">
            <form id="new_insurance" method="post" action="<?=( $_SERVER['REQUEST_URI'] )?>">
            <div>
                <div class="car-info">
                <div class="car-info-head">My Car Information</div>
                <div class="data-hold"><label>Model<span class="mandatory">*</span></label>
                    <select name="model" class="model validate[required]">
                        <option value="">Select Model</option>
                        <option value="Santro">Santro</option>
                        <option value="i10">i10</option>
                        <option value="i20">i20</option>
                        <option value="Accent">Accent</option>
                        <option value="Verna">Verna</option>
                        <option value="Fluidic Verna">Fluidic Verna</option>
                        <option value="Santa Fe">Santa Fe</option>
                        <option value="Sonata">Sonata</option>
                        <option value="Terracan">Terracan</option>
                        <option value="Tucson">Tucson</option>
                    </select>
                </div>
                <div class="data-hold"><label>Loan Amount<span class="mandatory">*</span></label>
                <input type="text" name="loan_amt" class="reg-no validate[required]" /></div>
                <div class="data-hold"><label>Loan Tenure<span class="mandatory">*</span></label>
                    <select name="loan_tenure" class="type-of-owner validate[required]">
                        <option value="">Select Year</option>
                        <option value="1 Year">1 Year</option>
                        <option value="2 Year">2 Year</option>
                        <option value="3 Year">3 Year</option>
                        <option value="4 Year">4 Year</option>
                        <option value="5 Year">5 Year</option>
                        <option value="6 Year">6 Year</option>
                        <option value="7 Year">7 Year</option>
                    </select></div>
                </div>
            <div class="contact-info">
            <div class="contact-info-head">My Contact Information</div>
            <div class="data-hold"><label>Full Name<span class="mandatory">*</span></label>
            <input type="text" name="full_name" class="full-name validate[required,custom[onlyLetterSp]]" /></div>
            <div class="data-hold"><label>Mobile<span class="mandatory">*</span> </label>
            <input type="text" name="mobile" class="mobile validate[required,custom[onlyNumberSp],maxSize[10],minSize[10]]" /> </div>
            <div class="data-hold"><label>Email - ID<span class="mandatory">*</span></label>
            <input type="text" name="email" class="email validate[required,custom[email]]" /></div>
            <div class="data-hold"><label>Full Address</label>
            <textarea name="new_ins_addr" class='new-ins-addr' rows="2" cols="1"></textarea></div>
            <div class="data-hold"><label>Pin Code</label>
            <input type="text" name="pin_code" class="pin-code validate[custom[onlyNumberSp]]" /></div>
            <div class="data-hold clear"><label>Landline</label>
            <input type="text" name="phone_code" class="phone-code validate[custom[onlyNumberSp],optional,maxSize[5]]" placeholder="code" />
            <input type="text" name="phone_no" class="phone-no validate[custom[onlyNumberSp],optional,maxSize[8]]" placeholder="Number" /></div>
            <div class="data-hold"><label>&nbsp;</label><span class="mandatory">*</span> Fields are Mandatory</div>
            </div>
            <div class="new-ins-sub">
            <input type="submit" class="new-ins-submit" name="finance_req" value="Submit Request" />
            </div>
            </div>
            </div>
            </form>
            <div id="renew-insurance">
            <form id="renew_insurance" method="post" action="<?=( $_SERVER['REQUEST_URI'] )?>">
            <div class="car-info">
                <div class="car-info-head">Please provide the details below</div>
                <div class="data-hold"><label>Loan Amount<span class="mandatory">*</span></label>
                <input type="text" name="loan_amt" class="reg-no validate[required]" /></div>
                <div class="data-hold"><label>Loan Tenure<span class="mandatory">*</span></label>
                 <input type="text" name="loan_tenure" class="loan_tenure validate[required]" />
</div>
                <div class="data-hold"><label>Preferred Bank<span class="mandatory">*</span></label>
                    <select name="pre_bank" class="type-of-owner validate[required]">
                        <option value="">Select Bank</option>
                        <option value="">Bank1</option>
                        <option value="">Bank2</option>
                        <option value="">Bank3</option>
                        <option value="">Bank4</option>
                    </select></div>
            </div>
            <div class="contact-info">
                <div class="contact-info-head">Calculated EMI</div>
                <div class="data-hold"><label>EMI</label>
                <input type="text" name="EMI" class="" /></div>
                <div class="data-hold"><label>R.O.I</label>
                <input type="text" name="email" class="" /></div>
                <div class="data-hold"><label>Repayment</label>
                <input type="text" name="repayment" class="repayment" /></div>
                <div class="data-hold"><label>&nbsp;</label>(Months)</div>
                <div class="data-hold"><label>&nbsp;</label><span class="mandatory">*</span> Fields are Mandatory</div>
                </div>
            <div class="new-ins-sub sub-emi">
            <input type="submit" class="new-ins-submit" name="renew_submit" value="Calculate EMI" />
            </div>
</form>
            </div>
        </div>
    </div>
    <div class="ins-right">
    <div class="ins-company">
        <div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
                <a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/SBI-car-finance.jpg" alt="SBI car loan chennai" title="SBI" /></a>
                    <a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/kotak-car-finance.jpg" alt="KOTAK car loan chennai" title="KOTAK" /></a>
<a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/hdfc-car-finance.jpg" alt="HDFC car loan chennai" title="HDFC" /></a>
                    <a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/sundaram-car-finance.jpg" alt="Sundaram car loan chennai" title="Sundaram" /></a>
<a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/icici-car-finance.jpg" alt="ICICI car loan chennai" title="ICICI" /></a>
                    <a class="wrapper" href="#"><img class="logo1" src="<?php bloginfo('stylesheet_directory'); ?>/images/insurance/Mahindra-car-finance.jpg" alt="Mahindra car loan chennai" title="Mahindra" /></a>
</div>
</div>
</div>
        </div>
        <div class="clear ins-enq">
              <div class="insu-icon">
              <img src="<?php bloginfo('stylesheet_directory'); ?>/images/finance-req.png" alt="" title="" />
               </div>
               <div class="ins-data-h">
               <div class="insu-h">Finance Enquiry</div>
                  <p><span>72990 50086</span><br />
                  <span>044 - 24422222</span></p>
                  </p>
               </div>
            </div>
          <div class="special-off">
         <a href="<?php echo get_site_url(); ?>/price-list/">
            <!--<img src="<?php bloginfo('stylesheet_directory'); ?>/images/update-price.png" alt="" title="" />-->
            <div class="price-list">
<h2 class="update">Updated</h2>
                <h4 class="price_img"></h4>
                <h4 class="on">ON</h4>
                 <?php
$key_1_value = get_post_meta( 1, '_pricelist_uptaded_date', true );
if( ! empty( $key_1_value ) ) { echo '<h3 class="up_price_month">'.$key_1_value.'</h3>';}
?>
            </div>
         </a>
         </div>
        <!--<div class="special-off">
                    <ul id="sti-menu1" class="sti-menu1">
                        <li>
                            <?php
$args = array( 'post_type' => 'attachment', 'posts_per_page' => 1,'orderby' => 'post_date', 'order' => 'DESC', 'post_status' =>'any', 'post_parent' => 135 );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) { ?>                  
<a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>">
<?php    }
}
?>
                                <h2 data-type="mText" class="sti-item">
                                <?php
echo $key_1_value = get_post_meta( 1, '_special_off_month', true );
?>
                                </h2>
                                <h3 data-type="icon" class="sti-item">SPECIAL</h3>
                                <span data-type="sText" class="sti-icon1 sti-icon-offer sti-item"></span>
                            </a>
                        </li>
                    </ul>
        </div>-->
    </div>
</div>
</div>
<div id="success_ale" title="Success">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/Action-Success.png" />
<p>Thank you for your request. Our V3 Hyundai executive will contact you shortly.</p>
</div>
<div id="error_ale" title="Error">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/error_triangle.png" />
<p>Something went wrong... Please try again...</p>
</div>
<?php get_footer(); ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.iconmenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sti-menu1 a").fancybox();
});
$(function() {
$("#new-insurance1").click(function() {
 $("#new-insurance").fadeIn("slow");
 $("#new-insurance1").addClass("current2");
 $("#renew-insurance1").removeClass("current2");
 $("#renew-insurance").css("display","none");
});
$("#renew-insurance1").click(function() {
 $("#new-insurance").css("display","none");
 $("#renew-insurance").fadeIn("slow");
 $("#renew-insurance1").addClass("current2");
 $("#new-insurance1").removeClass("current2");
});
});
$(function() {
$("#viewer").removeClass("js-disabled");
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 250).height(140).appendTo("div#viewer");
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
var duration = $(".wrapper").length * 5000;
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
var direction = "rtl";
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
var animator = function(el, time, dir) {
if(dir == "rtl") {
el.removeClass("ltr").addClass("rtl");
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
$(this).css({ left:$("div#imageScroller").width(), right:"" });
animator($(this), duration, "rtl");
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;

});
} else {
el.removeClass("rtl").addClass("ltr");
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
$(this).css({ left:0 - $("div#container").width() });
animator($(this), duration, "ltr");
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}
animator($("div#container"), duration, direction);
$("a.wrapper").live("mouseover", function() {
$("div#container").stop(true);
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
var title = $(this).attr("title");
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
$("a.wrapper").live("mouseout", function(e) {
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
var newDuration = distanceLeft / speed;
animator($("div#container"), newDuration, $("div#container").attr("class"));
});
});
</script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/js.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fancybox.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
   
    <script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#new_insurance").validationEngine();
jQuery("#renew_insurance").validationEngine();
$('.mail_succ').fadeOut(7000);
$('.mail_error').fadeOut(7000);
$('#popupDatepicker').datepick();
});

</script>
    
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)