The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help with count down timer
TXT2Loyalty
post Dec 13 2013, 06:06 PM
Post #1





Group: Members
Posts: 4
Joined: 13-December 13
Member No.: 20,107
Hi,
I was hoping I could get some help on setting up a count down timer in HTML as well as a "contact us" form/. I have downloaded a pre-made template and have been able to make the proper adjustments to it for almost everything that I need with the exception of the count down timer, and the "contact us" form. The HTML code that I was provided for the index.html file is as follows.

QUOTE
<!DOCTYPE HTML>
<html>
<head>
<title>Txt2Loyalty.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!--==============GOOGLE FONT - OPEN SANS=================-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>

<!--==============MAIN CSS FOR COMING SOON PAGE=================-->

<link href="css/main.css" rel="stylesheet" media="all">

<!--==============CSS FOR FLEX SLIDER=================-->

<link href="css/flexslider.css" rel="stylesheet" media="all">
</head>

<body class="loading">

<!--==============PRELOADER=================-->

<div id="preloader">
<p> <img src="images/progress.gif" alt="loading"> <span>Loading</span> </p>
</div>

<!--============== HEADER =================-->

<div class="jumbotron imageBG">
<!--[PLEASE NOTE THE CLASS imageBG, used to add a static image background] -->

<div class="container">
<!--==============Logo=================-->

<div class="row">
<div class="col-md-10 col-sm-12 col-md-offset-1">
<div class="logo"> <img src="images/udan-logo.png" alt="coming soon template logo"> </div>
<h1>Our website is launching soon</h1>
<p class="copy">We are working hard to bring you a website featuring the next generation of mobile marketing, and merchant services. Subscribe below to be notified when we launch.</p>
</div>
</div>

<!--==============COUNTDOWN TIMER=================-->

<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-2 Wrapcountdown">
<ul id="countdown">
<li> <span class="days">00</span>
<p class="timeRefDays">days</p>
</li>
<li> <span class="hours">00</span>
<p class="timeRefHours">hours</p>
</li>
<li> <span class="minutes">00</span>
<p class="timeRefMinutes">minutes</p>
</li>
<li> <span class="seconds">00</span>
<p class="timeRefSeconds">seconds</p>
</li>
</ul>
</div>
</div>


<!--==============SUBSCRIBE BOX=================-->

<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-3 subscribe">
<form class="form-inline" role="form" action="subscribe.php" id="subscribeForm" method="POST">
<div class="form-group col-lg-9">
<input class="form-control input-outline input-lg" name="email" type="email" id="address" placeholder="Enter your email" data-validate="validate(required, email)" required="required">
</div>
<button type="submit" class="btn btn-danger btn-lg">Notify me</button>
</form>
<span id="result" class="alertMsg"></span> </div>
</div>
</div>
</div>

<!--==============PAGE CONTENT=================-->

<div class="ContainerWrap">

<!--==============MAIN FEATURES=================-->

<div class="container">
<div class="row mainFeatures">
<div class="col-md-4">
<div class="thumbnail"> <img src="images/featured_icon1.png" alt="secure">
<div class="caption">
<h4>Mobile Marketing Solution</h4>
<p>We offer complete mobile marketing and loyalty solutions.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail"> <img src="images/featured_icon2.png" alt="secure">
<div class="caption">
<h4>Merchant Services</h4>
<p>We offer merchant service's to accomidate all of your business needs.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail"> <img src="images/featured_icon3.png" alt="secure">
<div class="caption">
<h4>24/7 Support</h4>
<p>We have a dedicated team to provide you with the support that you deserve.</p>
</div>
</div>
</div>
</div>
</div>

<!--==============TESTIMONIALS=================-->

<div class="greyBox">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="flexslider">
<ul class="slides">
<li>
<blockquote>
<p>" This is such a great theme for coming soon and landing page. It has lot of features including video & slider backgrounds. "</p>
<small>John Doe, Founder, Landing Inc</small> </blockquote>
</li>
<li>
<blockquote>
<p>" This is such a great theme for coming soon and landing page. It has lot of features including video & slider backgrounds. "</p>
<small>John Doe, Founder, Landing Inc</small> </blockquote>
</li>
<li>
<blockquote>
<p>" This is such a great theme for coming soon and landing page. It has lot of features including video & slider backgrounds. "</p>
<small>John Doe, Founder, Landing Inc</small> </blockquote>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<!--==============CONTACT US=================-->

<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-2 sectionHead">
<h1>Contact us</h1>
<p class="copy"> Are you interested in learning more about TXT2Loyalty? Contact us now!</p>
</div>
</div>
<div class="row ContactUs">
<form class="form" id="phpcontactform">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<input class="form-control" type="text" placeholder="Full Name" name="name" id="name">
</div>
<div class="form-group">
<input class="form-control" type="email" placeholder="Email ID" name="email" id="email">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Mobile Number" name="mobile" id="mobile">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<textarea class="form-control" rows="10" name="message" placeholder="Your Message" id="message"></textarea>
</div>
<div class="form-group">
<p>
<input class="btn btn-danger btn-lg" type="submit" value="Send Message">
</p>
<span class="loading"></span> </div>
</div>
</form>
</div>
</div>

<!--==============FOOTER=================-->

<div class="blackBox">
<div class="container">
<div class="row footer">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-12 socialButtons"> <a href="https://twitter.com/Txt2loyalty" target="_blank"> <img src="images/twitter_icon.png" alt="twitter"></a> <a href="http://facebook.com/txt2loyalty" target="_blank"><img src="images/facebook_icon.png" alt="facebook"></a> <a href="https://linkedin.com/txt2loyalty.com" target="_blank"><img src="images/linkedin_icon.png" alt="linkedin"></a> </div>
</div>
<p class="text-center">Copyright &copy; 2013. <a href=http://txt2loyalty.com>txt2loyalty.com</a></p>
</div>
</div>
</div>
</div>
</div>
<!--/end Container Wrap-->



<!--==============QUERY LIBRARY=================-->

<script src="js/jquery-1.9.0.min.js"></script>

<!--==============BOOTSTRAP JS=================-->

<script src="js/bootstrap.js"></script>

<!--==============KETCHUP=================-->

<script src="js/ketchup.all.js"></script>

<!--==============PRELOADER=================-->

<script>
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$("#preloader").fadeOut("slow"); // will fade out the white DIV that covers the website.
$("body").removeClass("loading");
})
//]]>
</script>

<!--============== SUBSCRIBE FORM =================-->

<script>
$(document).ready(function() {
$('#subscribeForm').ketchup().submit(function() {
if ($(this).ketchup('isValid')) {
var action = $(this).attr('action');
$.ajax({
url: action,
type: 'POST',
data: {
email: $('#address').val()
},
success: function(data){
$('#result').html(data);
},
error: function() {
$('#result').html('Sorry, an error occurred.');
}
});
}
return false;
});
});
</script>

<!--==============COUNTDOWN JS=================-->

<script src="js/countdown.js"></script>
<script>

$(document).ready(function(){
$("#countdown").countdown({
date: "17 march 2015 09:00:00", /*Change your time here*/
format: "on"
},

function() {
// callback function
});
});

</script>

<!--==============HEADER 100% HEIGHT=================-->

<script>
$(document).ready(function(){
resizeDiv();
});

window.onresize = function(event) {
resizeDiv();
}

function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.jumbotron').css({'height': vph + 'px'});
}
</script>

<!--==============CONTACT FORM=================-->
<script src="js/contact_form.js"></script>

<!--==============FLEX SLIDER=================-->

<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>


</body>
</html>


and here is the HTML code for the contact form itself...

QUOTE
<?
$name = $_REQUEST["name"];
$email = $_REQUEST["email"];
$mobile = $_REQUEST["mobile"];
$msg = $_REQUEST["msg"];
$to = "***@***.com";
if (isset($email) && isset($name) && isset($msg)) {
$subject = "$name sent you a message via Landing Template";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= "From: ".$name." <".$email.">\r\n"."Reply-To: ".$email."\r\n" ;
$msg = "From: $name<br/> Email: $email <br/> Mobile: $mobile <br/>Message: $msg";

$mail = mail($to, $subject, $msg, $headers);
if($mail)
{
echo 'success';
}

else
{
echo 'failed';
}
}

?>



What changes need to be made to make these operate?

Thank you in advance.

This post has been edited by Christian J: Dec 13 2013, 07:03 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 13 2013, 07:12 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(TXT2Loyalty @ Dec 14 2013, 12:06 AM) *

Hi,
I was hoping I could get some help on setting up a count down timer in HTML as well as a "contact us" form/.

It might be more practical to start separate threads about these two subjects. wink.gif Anyway, a countdown timer like that may have to be done with javascript. You can probably find readymade ones on the web.

Regarding the form, you might put the PHP code at the top of the same HTML document, but then the user won't see any confirmation the form was submitted.

(I also edited your email address to reduce spambot exposure.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TXT2Loyalty
post Dec 13 2013, 09:17 PM
Post #3





Group: Members
Posts: 4
Joined: 13-December 13
Member No.: 20,107
QUOTE(Christian J @ Dec 13 2013, 07:12 PM) *

QUOTE(TXT2Loyalty @ Dec 14 2013, 12:06 AM) *

Hi,
I was hoping I could get some help on setting up a count down timer in HTML as well as a "contact us" form/.

It might be more practical to start separate threads about these two subjects. wink.gif Anyway, a countdown timer like that may have to be done with javascript. You can probably find readymade ones on the web.

Regarding the form, you might put the PHP code at the top of the same HTML document, but then the user won't see any confirmation the form was submitted.

(I also edited your email address to reduce spambot exposure.)


Thank you for editing my email address out. I forgot to do so. The creator of the template included a how to...

Change Launch date
Open HTML page in editor
Go to bottom
Find a section with count down
Edit the date and time
Save

it doesn't seem to work that easy though. I guess I could look for his email and send him a message but I don't know how long that would take and I didn't know if you guys had any idea.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TXT2Loyalty
post Dec 13 2013, 09:21 PM
Post #4





Group: Members
Posts: 4
Joined: 13-December 13
Member No.: 20,107
This should help I think... It's the JS for the count down timer

QUOTE
(function($) {
$.fn.countdown = function(options, callback) {

//custom 'this' selector
thisEl = $(this);

//array of custom settings
var settings = {
'date': null,
'format': null
};

//append the settings array to options
if(options) {
$.extend(settings, options);
}

//main countdown function
function countdown_proc() {

eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);

if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}

seconds = eventDate - currentDate;

days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

//logic for the two_digits ON setting
if(settings['format'] == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}

//update the countdown's html values.
if(!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
} else {
alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}

//run the function
countdown_proc();

//loop the function
interval = setInterval(countdown_proc, 1000);

}
}) (jQuery);
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TXT2Loyalty
post Dec 13 2013, 09:29 PM
Post #5





Group: Members
Posts: 4
Joined: 13-December 13
Member No.: 20,107
Figured them both out. Thank you for your help Christian.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 10:30 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC