Jquery age verification script on BigCommerce, not working - javascript

I have used this same script on other websites and I just can't get it to work with my current project at http://www.torchwoodworks.com/. After delving into the firefox script debugger, it seems to be a problem with cookies.js not loading, as i'm getting a "$.cookie is not a function" error. I know i've had troubles in the past if jquery itself is loaded after this script, but that is not the case. As far as I can tell, it should be working.
Here is my code added to the BigCommerce header:
<!--Scripting for age verification, added LM 02/03/15 -->
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/jquery.min.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/lightbox_me.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/cookies.js"></script>
<link rel="StyleSheet" href="http://store-kdukte.mybigcommerce.com/template/js/verify.css" type="text/css" media="all">
<script type="text/javascript">
$(window).load(function () {
// Halt! Age identification
// Includes checking for and setting a cookie with cookies.js
if(!$.cookie('legal-age')){
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
overlayCSS: {background: 'black', opacity: 1},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: 'torchwoodworks.com', path: '/', expires: date});
}
});
e.preventDefault();
}
});
</script>
<!--end Scripting for age verification -->
Any insight would be appreciated. Thanks!

To use $.cookie you need to include jquery cookie plugin

Related

How to change language on bootstrap 4 datepicker

I've been stuck on changing the language of a calendar from English which is the default to French on Bootstrap 4 and I can't do it, it's driving me mad!
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapdatepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="./js/main.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="date"]');
var container = $('.input-group').length > 0 ? $('.input-group').parent() :
'body';
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
daysOfWeekDisabled: [0, 6],
weekStart: [1]
};
date_input.datepicker(options);
});
</script>
Thanks
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
Use this tag after bootstrap-datepicker. and this
$('.datepicker').datepicker({
language: 'fr'})
It will work.
It's because you haven't passed the language key to options.
Try adding this keys as options:
var options = {
language: 'fr'
};
All locales are available under js/locales. Be sure to include it after plugin initialization.
References:
1- https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
2- https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#language
3- Change language for bootstrap DateTimePicker
You can use translation i18n of lang and call it, theres no needed to call language specific. Like this.
this.$i18n.t("fixed_pickups.weekdays.monday") }

How to embed formula.js from Github into html

im trying to use cumipmt function ( similar to the one from Excel) in my blogspot website and i need to embed an external javascript "formula.js" from "https://github.com/sutoiku/formula.js "to use the function cumipmt. I dont know how to embed it , can someone help?
Do i also have to embed "https://gist.github.com/ghalimi/4583240#file-cumipmt-js" too, in order to use cumipmt function?
This is what im calling,
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);
Thanks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
From comments from Br3t and atulquest93,
I placed the following code in a post under HTML instead of Compose but it still doenst work. Am i doing it correctly?
<!-- Numeric -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<!-- Numeral.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<!-- jStat -->
<script src="https://cdn.jsdelivr.net/jstat/latest/jstat.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"></script>
<script type="text/javascript" src="https://gist.githubusercontent.com/ghalimi/4583240/raw/d7e0a20cff288c52db9768f9291f380cf7c293a1/CUMIPMT.js"></script>
<script>
document.write(CUMIPMT(12/12, 10, 10000, 1, 10, 0));</script>
Use
<script src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"> </script>
or copy the content and include the content directly
<script>
--content--
</script>
call this function after including the js ..
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);
At first, at your blogspot-dashboard go to Design and click Add gadget at any area (preffer to do this in footer. Choose HTML/JavaScript-gadget and insert into content
<script type="text/javascript" src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"></script>
<script type="text/javascript" src="https://gist.githubusercontent.com/ghalimi/4583240/raw/d7e0a20cff288c52db9768f9291f380cf7c293a1/CUMIPMT.js"></script>
<script type="text/javascript">
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);
</script>

How to get TimeZone wise local time using moment.js

i am working with two js library to get browser timezone id and browser local time
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script src="Scripts/moment-timezone.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
alert(moment.tz(tz.name()).format());
});
</script>
this below code return perfect timezone id
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
but this code is not working alert(moment.tz(tz.name()).format()); not giving user local time.
am i missing something in code? do i need to add any momentjs related other file ?
please guide me. i want to get user local time using moment.js. thanks
UPDATE Working Version
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jstz.min.js"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/moment-timezone-with-data-2010-2020.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
alert(moment.tz('Europe/London').format(format));
alert(moment.tz(tz.name()).format(format));
});
</script>
</div>
</form>
</body>
</html>
My solution of this case (this is part of the page code):
function toLocalTime(time) {
if (time <= 0)
return '';
var m = moment.tz(time, 'America/Chicago'); //CDT
var tz = jstz.determine(); // Determines the time zone of the browser client
m.tz(tz.name()); // Convert CDT to local time
return m.format('HH:mm:ss');
}
<script src="js/jstz.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
...........
<script th:inline="javascript">document.write(toLocalTime(<<TIME IN MILLISECONDS HERE>>));</script>

reset this jquery countdown plugin

I use this plugin: jQuery Countdown in ASP.NET page.
my code is:
.cs file:
DateTime time1 = DateTime.Now.AddMinutes(2).ToString()
Label1.Text = time1.ToString();
.aspx file:
<script src="JQueryCountDown/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="JQueryCountDown/countdown.demo.css" rel="stylesheet" type="text/css" />
<script src="JQueryCountDown/jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
window.jQuery(function ($) {
$(".ctdwn").countDown({});
});
</script>
...
<asp:Label runat="server" ID="Label1" CssClass="ctdwn"></asp:Label>
It works properly.
Now I want during that 2 minutes, reset the countdown and start from 2 minutes again(with javascript). But I do not know how to do it. For example this code does not work and disables the countdown:
resetTime = function (dt) {
$('#Label1').text(dt);
$(".ctdwn").countDown({});
};
Thanks.
I believe that what you want is in the docs, here is an example you might find useful:
window.jQuery(function ($) {
function startCountDown() {
$('.ctdwn').countDown({}).on('time.elapsed', startCountDown);
}
startCountDown();
});

CodeMirror HTML mode not working

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.
There is my page:
<textarea id="template-html" name="code" class="CodeMirror">
<!DOCTYPE html>
<foobar>
<blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
<tag2 foo="2" bar="bar" />
</foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
var config, editor;
config = {
lineNumbers: true,
mode: "text/html",
theme: "ambiance",
indentWithTabs: false,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);
function selectTheme() {
editor.setOption("theme", "solarized dark");
}
setTimeout(selectTheme, 5000);
</script>
Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):
The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
See the XML/HTML mode demo for a live example.
Just in case if my experience can be helpful to someone.
I did following mistake:
<script src="lib/codemirror.js"></script>
<script type="text/javascript">
const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint#1.0.5/dist/csslint.js"></script>
This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets. In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).
<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "text/css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
}
</script>

Categories

Resources