so I was looking into using this combination of jquery countdown plugin with moment js as shown on this documentation.
However, either I am not using the correct versions or something else is broken. Any ideas? Here is a JSFiddle.
var nextYear = moment.tz("2019-01-01 00:00", "America/Sao_Paulo");
$('#clock').countdown(nextYear.toDate(), function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
you didn't add external resources for jQuery library and countdown plugin itself.
UPDATE:
so the resulting example would be something like next:
<div id="clock"></div>
<script src="https://momentjs.com/downloads/moment.min.js" type="text/javascript"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var nextYear = moment.tz("2019-01-01 00:00", "America/Sao_Paulo");
$('#clock').countdown(nextYear.toDate(), function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
</script>
Use this code:
<div class="timer" id="countdown"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script>
<script type="text/javascript">
var myDate = new Date();
myDate.setDate(myDate.getDate() + 2);
$("#countdown").countdown(myDate, function(event) {
$(this).html(
event.strftime('<div ><div >%D</div><span >days</span></div><div ><div >%H</div><span >hrs</span></div><div ><div >%M</div><span >mins</span></div><div ><div >%S</div><span >sec</span></div>')
);
});
</script>
Related
I have a problem loading jQuery into laravel app. I tried checking if it's installed in the first place and I get success. Using this:
if (typeof jQuery == "undefined") {
alert("JQuery is not installed");
} else {
alert("JQuery is installed correctly!");
}
But then I tried checking if it's loading with code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("jQuery has loaded!");
} else {
// jQuery is not loaded
console.log("jQuery has not loaded!");
}
}
I get no response at all. What could be the problem?
This is my scripts in file (last 2 lines):
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/4-Col-Small-Slider.js"></script>
<script src="assets/js/A-working-Rating-option-for-Contact-Forms.js"></script>
<script src="assets/js/Add%20an%20upsell.js"></script>
<script src="assets/js/add%20to%20cart%20button.js"></script>
<script src="assets/js/ask%20payment%20method.js"></script>
<script src="assets/js/cheque.js"></script>
<script src="assets/js/currency.js"></script>
<script src="assets/js/easings.js"></script>
<script src="assets/js/flickity%20pkgd.js"></script>
<script src="assets/js/flickity.js"></script>
<script src="assets/js/meals%20sizes.js"></script>
<script src="assets/js/menu.js"></script>
<script src="assets/js/modal.js"></script>
<script src="assets/js/plans.js"></script>
<script src="assets/js/realtime%20typing%20card%20expires.js"></script>
<script src="assets/js/realtime%20typing%20card%20number.js"></script>
<script src="assets/js/realtime%20typing%20cardholder%20cvc.js"></script>
<script src="assets/js/realtime%20typing%20cardholder.js"></script>
<script src="assets/js/realtime%20typing.js"></script>
<script src="assets/js/remove%20product%20from%20cart.js"></script>
<script src="assets/js/section%20click.js"></script>
<script src="assets/js/SlideShow.js"></script>
<script src="assets/js/Swiper-Slider-Card-For-Blog-Or-Product.js"></script>
<script src="assets/js/Swiper-Slider.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/swipermin.js"></script>
<script src="assets/js/switches%20on%20add%20a%20meal%20page.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/time.js"></script>
<script src="assets/js/upsell.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="assets/js/jquery.min.js"></script>
I'm using Laravel mix, it seems there's problem somewhere in app.js I suppose.
I managed to load jQuery, I get success message, but it still doesn't work. For example:
$(document).ready(function () {
$("#category_image").on("change", function () {
var image = $("#category_image");
var preview = $("#preview-image");
var objectURL = URL.createObjectURL(e.target.files[0]);
preview).css("background-image", 'url('+objectURL+')');
})
});
This code doesn't work, unless I messed something up. If I use plain javascript onchange and I use jQuery id selector it works. Am I doing this function wrong?
I am trying convert the html div element to pdf file using jspdf. i have included all js script including form_html.js. still i am getting "TypeError: doc.fromHTML is not a function".
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jsPDF-master/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.PLUGINTEMPLATE.js"></script>
<script src="jspdf.debug.js"></script>
<script src="jspdf.plugin.from_html.js"></script>
and javascript is
jQuery(function($) {
$("#button1").click(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#simple': function (element, renderer) {
return true;
}
};
var source = $('#simple').html();
doc.fromHTML(source, 0.5, 0.5, {
'width': 75,'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
Pls help me in fixing this
i might be wrong because i have not run your code but i notice is you have not included a jquery library into the script tag and you are using a jquery function. Try including Jquery and retry hope that solves your problem..
I'm using an admittedly slightly older version of keith wood's countdown, and it's loading the correct date and time just fine, but the seconds aren't ticking down. I've inspected the js with console, and no errors are coming up. Can any tell me what's amiss?
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.js"></script>
</head>
<div id="form">
<div id="topbox">
<div class="countdown"></div>
</div>
</div>
$(document).ready(function() {
// start instance of countdown
$('.countdown').countdown({until: new Date(2014, 9-1, 21, 10), layout:
'<ul class="countdown-tabs"><li><a>{dn} <span>{dl}</span></a></li>' +
'<li><a>{hn} <span>{hl}</span></a></li>' +
'<li><a>{mn} <span>{ml}</span></a></li>' +
'<li class="last-child"><a>{sn} <span>{sl}</span></a></li></ul>'});
$('.bg-switcher input').change(function () {
// set background photo to value of photo-switcher
window.location.hash = $(this).attr('id');
var photo = "url('/images/countdown_" + $(this).attr('id') + ".jpg')";
$('#canvas').css('background-image', photo);
});
});
I've also set it up on jfiddle, here: http://jsfiddle.net/Abk99/2/
I included this countdown script from a cdn and it's working.
//cdnjs.cloudflare.com/ajax/libs/jquery-countdown/1.6.3/jquery.countdown.min.js
http://jsfiddle.net/Abk99/1/
How do I use multiple jquery version on a single page? I have two different jquery version and both are necessary for different functions but both versions are conflicting each other.if i will use jquery noconflict then products scripts won't be work?
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
oldjq = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Jquery 1.9.1 Need To Run This Script
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
Jquery 1.4.2 Need To Run These Scripts
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Problem is Solved Now Here THe Final COde
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
});
})(jQuery);
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Since it's only a few lines of code, I would suggest amending the chunk which requires jQuery 1.9.1 so that it works with jQuery 1.4.2
I've updated it below to work with jQuery 1.4.2. I use the attr method rather than prop to manipulate the disabled property (you can check the docs here to see if this is likely to cause any issues). This solution avoids running two instances of jquery and avoids having to find updated versions of all the libraries / plug-ins you're already using.
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).attr('disabled',true);
}else{
$inputs.attr('disabled',false);
}
})
})
See fiddle here.
Yes, after you load your first version, do this
var $j = jQuery.noConflict();
Load your second version of jQuery.
Refer to the first version with $j and the second as $
OK, here is one possible solution - you could bind new version of jQuery to the closure.
But my advice is DON'T DO THAT, it is like shooting yourself to your own leg.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Jquery 1.9.1 Need To Run This Script:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
// code that uses jQuery 1.9.1
});
})(jQuery);
</script>
// ...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
//Jquery 1.4.2 Need To Run These Scripts:
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
// ...
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.