Okay, so I tried to integrate this datepicker to my magento page for the purpose of age verification.
I have successfully added the required CSS and jQuery script files to the head section of my magento page but I can't figure out where to add the html.
The package source is available here along with the html and javascript files.
I want to modify it so that when a person is over 18, they stay on the page and if not, they get redirected to google.com.
Can't get this working because I am not sure how to add the index.html file's code to my magento page. I'd really appreciate some help.
Or is there an alternate (simpler) way to put 'Age verification' WITH cookies, without using PHP script?
You can use following script for this validation may be it's help you.
<script>
function check_dob()
{
var month = document.getElementById('month').value;
var day = document.getElementById('day').value;
var year = document.getElementById('year').value;
var dbDate = year+'-'+month+'-'+day;
var today = new Date();
var birthDate = new Date(dbDate);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
if(age<=20)
{
alert("You are under "+age+" Year")
}
}
</script>
You need to put some/all of the html into your template, probably somewhere where it will be on every page. e.g. /app/design/frontend/package/_theme_/template/page/html/header.phtml
Related
I believe this is a relatively simple question (a JavaScript noob here), but I can't seem to find a thread for this particular date function. I am doing website migration for an academic society from a PHP-based site to a drupal CMS. Some of the PHP has obviously broken and I'm trying to replace simple scripts with Javascript. One issue that is giving me a lot of trouble is how to get a text to appear only AFTER a certain date. In PHP my functioning code is:
<?php if (date('YmdH') > 2018011710 ) { ?>
<p class="error">Please note that the deadline for submitting proposals has passed.</p>
<?php } ?>
So I need something in JavaScript to do the same. Here is what I came up with (I apologize in advance for my sloppy code as I'm a beginner with JavaScript):
First CSS to hide the DIV:
<style type="text/css">
.DateDiv { display: none;}
</style>
Then the div itself:
<div class="DateDiv">
<h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>
Finally, my JavaScript, which is not working:
<script>
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
// show only if current date is after January 16, 20018
if (today > 0, 16, 2018) {
$(".DateDiv").show();
}
});
</script>
If anyone could help me sort this out I would be very grateful. If I'm going about this in a manner that is more complicated than it needs to be I'd also appreciate any advice.
Thanks in advance.
PS: I am not asking to compare two dates, but to display a text after a certain date.
you just might want to do something like this:
if (new Date() >= new Date(2018, 0, 16))
months always start at 0 while days start at 1. don't ask why.
this is how the constructor is defined:
new Date(year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]);
just go here for in-depth details about Date()
//show only if current date is after January 16, 20018
var date_to_check_with = new Date("20180116").getTime();
//.getTime() will give time in milliseconds (epoch time)
var current_date = new Date().getTime();
console.log(date_to_check_with < current_date);
I would like to know how my code could be displayed on a webpage instead of displayed in alert boxes, how do I do this. I understand that id's ect are needed but I am a little confused of where to start. Any help would be good. Thankyou!
<!DOCTYPE html>
<html>
<script>
//Set of variables
var nameCheck = /^[a-zA-Z\s]+$/;
//eliminates anything not relevant
var numberCheck = /^[0-9\.]+$/;
//eliminates anything not relevant
var totHours = 0;
//adds total gaming hours on one day
var dayHours = 0;
//how many on one such day set in i from 1-7
var averHours = 0;
//stores the average by dividing by the tothours by 7
var mostPerDay = 0;
//calculates day with most gamed
var mostOnDay = 0;
//Most hours on ONE day
var moreDays = " ";
//adds an s to the end of days if more than one
var mpd = 0;
//most per day
var ah = 0;
//average hours
var th = 0;
//total hours
var name = prompt("What is your name?");
//asks users name
//Make sure user inputs a name that includes letters and or spaces
while (name == "null" || isNaN(name) == false || !name.match(nameCheck)){
alert("Invalid Name!");
name = prompt("What is your name?");
}
//Greets the user by name
alert("Hello " + name );
//Ask how many hours gamed on a day
for (var i = 1; i <= 7; i++){
dayHours = prompt("How many hours have you gamed on day " + i + "?")
//Reask the question if the user inputs an invald answer
while (dayHours == null || isNaN(dayHours) || dayHours > 24 || !dayHours.match(numberCheck) || dayHours < 0){
alert("Incorrect! No letters or symbols, and make sure your input is under 24");
dayHours = prompt("How many hours have you gamed on day " + i + "?")
}
//Adds to total hours
totHours += Number(dayHours)
//Calculates days with most hours gamed
if (mostPerDay > dayHours){
}
else if (mostPerDay < dayHours){
mostPerDay = Number(dayHours);
mostOnDay = i;
}
else if (mostPerDay = dayHours){
mostOnDay += " and " + i;
mostPerDay = Number(dayHours);
}
}
//Adds 's' to the statistics if more than one day
if (isNaN(mostOnDay) == true){
moreDays = "s ";
}
//Divides the total hours by 7 to get average over those 7 days
aver = (totHours / 7);
//Calculates and rounds to the value of 1
th = totHours.toFixed(1);
ah = aver.toFixed(2);
mpd = mostPerDay.toFixed(1);
//States calculated statistics
alert("\nTotal gaming hours this week " + th + "\nAverage gaming hours this week " + ah + "\nMost on one day" + moreDays + mostOnDay + " for " + mpd + " hours." );
//Comments on average hours per day gamed
if (averHours <= 2){
alert("Healthy amount of gaming this week")
}
else if (averHours <= 24){
alert("Unhealthy amount of gaming this week")
}
</script>
</html>
There are several ways to include JavaScript in an HTML document:
Put the JavaScript code in a separate filename.js document and refer to it in the header of the HTML document (that is, between <head> and </head>) as follows: <script type="text/javascript" src="filename.js"></script>. This is the "cleanest" option as it separates functionality (JavaScript) from structure (HTML).
Put the JavaScript code directly in the header of the HTML document; that is, between <script type="text/javascript"> and </script> (no src attribute here)
In the body of the HTML document, again between <script> and </script>, for example when you want to dynamically add text with document.write('');
Changing the text in a <div id="mydiv"> can be done by accessing it via its id:
document.getElementById('mydiv').innerText = 'text';
or through the variants innerHTML, outerText or outerHTML.
For easy DOM manipulation, you may want to look into jQuery. Also, keep in mind that the JavaScript code in the header or external file will be executed immediately, which may cause errors if certain parts of the document body aren't loaded yet. jQuery offers an elegant solution by wrapping the code in
$(document).ready(function () {
// code here
});
Good luck!
A simple method to do this would be to include a link to an external javascript file:
<script src="path/myfile.js"></script>
at the bottom of your html file. If your script requires jQuery, make sure it is linked as an external script before your script. You can reference html elements in your javascript file by giving your html tags an id or class. For example:
In HTML:
<div id = "mydiv"> </div>
Select element in JS:
$('#mydiv')
If you are trying to make your web page more reactive, you may want to look into jquery. It's a lightweight javascript library that can help you make your web page more interactive. Check out the tutorial below:
http://www.w3schools.com/jquery/
I don't entirely understand your question, but just in case you are asking if the javascript will literally show up on your web page, it won't unless you display it as text. If you want to debug your javascript code, you can use developer tools on Chrome or something like it on other browsers:
https://developer.chrome.com/devtools
I need to show the tipical 'use of cookies' message at the bottom of the page just when some user visits the web, and just show it once at day,I'm trying but my code it's not working properly. here's the code I have so far...
<div id="cookie1"> </div>
<button id="botoncookie">Acept</button>
<script type="text/javascript">
document.getElementById('cookie1').style.bottom = '-50px';
var expiresdate = 5000 ; //1 day
$('#botoncookie').on('click',function(){
var mensaje = document.cookie.split('cookie1=')[1] + expiresdate;
$('#botoncookie').hide();
$('#cookie1').hide();
});
if(mensaje != null){
document.getElementById('cookie1').style.display = 'none';
}else{
document.cookie = 'cookie1=visto;path=/';
}
</script>
Set a cookie with an expiration time of 24*60*60 and whenever a page is loaded, check if the cookie exists, otherwise, display the message.
When your page loads execute the following function. This will check when the cookieMsg was displayed. If already displayed today, no need to display. As a boundary case, for the first time load, it will be null and it will anyway works.
EDIT: In the previous snippet i was just comparing the date which included time as well, you need to specifically check for date only.
function displayMsg(){
var today = new Date();
var lastDisplayedOn = localStorage.getItem('cookieLastDisplayed');
if(lastDisplayedOn){
var ld = new Date(lastDisplayedOn)
if(today.getDate() == ld.getDate() && today.getMonth() == ld.getMonth() && today.getFullYear() == ld.getFullYear()){
donotDisplay()
}else{
displayCookie()
}
}else{
displayCookie()
}
}
I am trying to reset value of rich:calender input box via java script but couldnt do it any way at all. the UI of my form (snippet only) is...
<rich:calendar id="startDate" datePattern="dd MMM yyyy" value="#{classBean.startDate}" popup="true" onchanged="calcDuration();">
</rich:calendar>
the java script is
function calcDuration()
{
sdate =$('frm_course:startDate').component.getSelectedDateString("dd MMM
yyyy");
var currentdate = new Date();
var sdatecmp = new Date(sdate);
if(sdatecmp > currentdate)
{
alert('The Start Date is Greater than today!');
$('frm_viewCourseDetail:startDate').component.value = ""; // 1
document.getElementById('frm_course:startDate').value =""; // 2
}
}
None of the lines 1 and 2 resets the richcalender's value. Help is required here. thanks.
The calendar (and other components) is backed by a JavaScript object which has the methods you need.
Use either #{rich:component('startDate')} or RichFaces.$('startDate') to get a reference to that object and then call resetValue().
For other methods check the docs
I'm currently enrolled in a JavaScript class at my community college, and we're supposed to create a page with the following:
"Today's date is (date)"
"Kids Club"
"The time is (time)"
Then, I don't seem to get this part, the instructions state: "Have a link to the new kidsnew.htm page that contains the text "Go To Kids Club". Use onClick and widow.location to open kidsnew.htm.
Before switching, you should use the navigator object and the method to test for the name and version of the browser. Display the name and version of the browser with an alert box and advise the user to upgrade for better results with the new page if their browser is out of date.
The kidsnew page should contain an HTML form button that will take you back to the "kidsold.htm" page."
So. I assume that I'll need the browser verification, where you can find in the first part of the code. I don't get what else I'm supposed to be using, as we were not told of a "onClick" method in the chapter's were reading. Can anyone help me refine the code and get it to display as stated? I did most of it correctly, I think;
Here's my code:
<html>
<head>
<title>Kids Club</title>
<script type = "text/javascript" src = "brwsniff.js"></script>
<script type = "text/javascript">
<!-- hide me from older browsers>
//==============================Browser Info=================================
var browser_info = getBrowser();
var browser_name = browser_info[0];
var browser_version = browser_info[1];
var this_browser = "unknown";
if (browser_name == "msie")
{
if(browser_version < 5.5)
{
this_browser = "old Microsoft";
}
else
{
this_browser = "modern";
}
}
//end
if (browser_name == "netscape")
{
if (browser_version < 6.0){
this_browser = "old Netscape";
else
{
this_browser = "modern";
}
} //end
</script>
//=========================End Browser Info============================
//==========================Start Date Script============================
var date = new Date();
//new is keyword for object Date
//
//getting info from object Date
//
var month = date.getMonth();
var day = date.getDate();
var year = date.getYear();
var hour = date.getHours();
var minutes = date.getMinutes();
//january is month 0, think of arrays
//
month = month + 1;
//fix y2k
//
year = fixY2k(year);
//fix minutes by adding 0 infrotn if less than 10
//
minutes = fixTime(minutes);
var date_string = month + "/" + day + "/" + year;
var time_string = hour + ":" + minutes;
var date = "Today is " + date_string";
var time = "The time is " + time_string;
//y2k fix
//
function fixY2k(number) {
if (number < 1000){
number = number + 1900;
return number;
}
//time fixer
//
function fixTime(number){
if(number < 10) {
number = "0" + number;
}
return number;
}
//========================End Time Script==================================
// show me -->
</script>
</head>
<body>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(date);
</script>
//show me -->
<h1>Kids Club</h1>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(time);
</script>
//show me -->
</body>
</html>
Some comments:
> <script type = "text/javascript">
> <!-- hide me from older browsers>
That's rubbish, HTML comment delimiters were never needed to hide script element content, just remove them.
> var year = date.getYear();
You should use the getFullYear method, it avoids the two digit year issue.
> var date = "Today is " + date_string";
There is no need to declare date a second time. It's not harmful, just unnecessary. date started out as a Date object, now it's a string. That's not good programming style, just modify the existing date_string, e.g.
date_string = "Today is " + date_string";
In the body of the page you have:
> <script type = "text/javascript">
> <!-- hide me from older browsers
> document.write(date);
> </script>
> //show me -->
Note that the comment delimiters start inside the script element, then finish outside it. So the browser is left with invalid HTML and whatever happens next is a result of error correction (the same for the next script element too).
Fix that and you may have solved your problem.