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/
Related
I am trying to add the datepicker in wordpress, but when I click on field it doesn't show the date picker.
Added in footer (without jquery file as I checked in source code jquery-3.5.1.min.js is already included):
jQuery is included as I can see this in source code of the page <script src='http://localhost/IEP_UAT/wp-content/themes/iep/scripts/jquery-3.5.1.min.js?ver=3.5.1' id='jquery-js'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
page-test.php:
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
<script>
jQuery( document ).ready(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
<style>
I can see this in console: Uncaught ReferenceError: jQuery is not defined
When I change
jQuery( document ).ready(function() {
to
$( document ).ready(function() {
Then I can see this error in console: Uncaught ReferenceError: $ is not defined
I've figured out answer my self.
jQuery script is added in the page file which loads before the jQuery get included.
So I moved script tag code at the bottom of footer page.
Problem fixed.
To use Jquery and daterangepicker you can make sure that the libraries of jquery and daterangepicker are loaded first
CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.css" integrity="sha512-YdYyWQf8AS4WSB0WWdc3FbQ3Ypdm0QCWD2k4hgfqbQbRCJBEgX0iAegkl2S1Evma5ImaVXLBeUkIlP6hQ1eYKQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
JS:
<script src='http://localhost/IEP_UAT/wp-content/themes/iep/scripts/jquery-3.5.1.min.js?ver=3.5.1' id='jquery-js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js" integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1++3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO+eFpHk4OCFAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
After that create javascript code. To use the $ symbol, you can add $ to the function argument like this
<script>
jQuery( document ).ready(function($) {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
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>
Exaple:-
From this side you can see all information about over page.
http://tools.pingdom.com/fpt/#!/b9eJAg/www.google.com
How can we store for our all page.
Try this:
<doctype html>
<html>
<head>
<script type="text/javascript">
var timerStart = Date.now();
</script>
<!-- do all the stuff you need to do -->
</head>
<body>
<!-- put everything you need in here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
});
</script>
</body>
</html>
Source: https://stackoverflow.com/a/14343144/3185456
I am trying to create a webpage with a slideshow. The images for the slideshow are stored locally on the machine and are numbered sequentially.
The number of images stored in the directory change every month, so I need to detect how many images there are in the folder and then create the corresponding img tags.
Currently, I have hard coded the value. I know this is possible via server side help but this machine is a test machine and I cannot setup a server on it.
Is there a way to detect the number of images and then create the img tags?
The code I have currently:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="cycle.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var image_path = "../slideshow/Slide";
for(j=1; j < 65; j++){
var imgEl = $('<img id="slideshow-image">');
imgEl.attr('src', image_path+j+".PNG");
imgEl.appendTo('.slideImage');
}
$('.slideImage').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
fit: 1
});
});
</script>
</head>
<body>
<div class="container">
<div class="flex-column">
<section>
<div class="slideImage">
</div>
</section>
</div>
<nav>
</nav>
</div>
</body>
Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.
replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});
below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready