Trying to implement jQuery countdown using this reference
Code:
<html>
<head>
<meta charset="UTF-8">
<title>Merry Christmas</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<!-- countdown -->
<div id="defaultCountdown"></div>
<!-- countdown -->
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script>
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
</script>
</body>
</html>
It shows nothing but blank page. No console errors.
The fiddle can be seen below
https://jsfiddle.net/n4nmgkgc/1/
jquery.countdown.js has a dependency on jquery.plugin.js. Try changing the loading sequence of these two JS files like below. Load the "jquery.plugin.js" first, then load the "jquery.countdown.js".
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>
There is no issue in your script , just that the external libraries/resources your loading is over http protocol, jsfiddle is not working properly as its blocked.
but that should not stop you when running the same script on your browser.
Workaround:
Anyway as a workaround I have dumped all those resources manually on your jsfiddle and your count down script is working fine.
Working CountDown Timer #JSFiddle
Also you need to understand the dependency of the libraries your loading for your script , because in your case your jquery.plugin.js is dependent on jquery.js and jquery.countdown.js is dependent on jquery.plugin.js.
so below is the order in which you need to load the external libraries (Top to Bottom):
jquery.js
jquery.plugin.js
jquery.countdown.js
Your script at the bottom of your page needs to be like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function () {
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
});
</script>
Like #Tarafder Ashek E Elahi said, jquery.countdown is a dependency of jquery.plugin
you forget to add style
please add it
in head
<style type="text/css">
#defaultCountdown { width: 240px; height: 45px; }
</style>
and refresh page.. clock will show in page.. try fast
Related
I'm having some serious issues with my History.js/Ajaxify script. The main problem is that after a page has been loaded with history.js (by clicking a link), the other javascript in the <header> tag aren't loaded, in fact it's as if they've been unloaded.
To fix this problem I decided to load the scripts with statechangecomplete which I realised after some time, only caused more problems. Because not only does it load the scripts every time I click a link, but after a few page changes Chrome reaches 100% CPU usage.
$(window).on('statechangecomplete', function() {
$.getScript(document.location.origin + "/js/myscript1.js");
$.getScript(document.location.origin + "/js/myscript2.js");
$.getScript(document.location.origin + "/js/myscript3.js");
});
Meanwhile my <head> consists of this:
<head>
<title>Example</title>
<meta charset="utf-8" />
<meta NAME="ROBOTS" CONTENT="NOODP">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>
<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script src="/js/ajaxify-html5.js"></script>
<script src="/js/uikit.min.js"></script>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="/js/myscript1.js"></script>
<script src="/js/myscript2.js"></script>
<script src="/js/myscript3.js"></script>
</head>
The weirdest part about this is that both uikit.min.js and mithril.js works after a page change. After looking through their code and comparing it to mine, I'm starting to suspect the reason to why my code isn't working as it should is because they all contain $(document).ready(function({}); while the mithril and uikit do not.
In the end I'm wondering why it causes my scripts to not load after a page change/history pushstate?
I found the issue, for anyone having the same issue as me, what I did was to delete
var result = String(html)
.replace(/<\!DOCTYPE[^>]*>/i, '')
.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
;
return $.trim(result);
From ajaxify-html5.js. This will make it so it doesn't remove the script tags etc.
I have same code on 2 different websites, 1 is working fine and other one looks like it is not doing jquery functions
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href=/build/timer/css/jquery.countdown.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/build/timer/js/jquery.plugin.min.js"></script>
<script src="/build/timer/js/jquery.countdown.js"></script>
<script>
var j = jQuery.noConflict();
j(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
j('#defaultCountdown').countdown({until: austDay});
j('#year').text(austDay.getFullYear()); });
</script>
<style>
#defaultCountdown {margin-left: -380px;width: 740px;height: 65px;}
#defaultCountdown span {font-size: 30px;font-family: Arial;}
body {background: #0f0017;}
</style>
</head>
<body>
<div id="defaultCountdown"></div>
</body>
</html>
here is my code..
here is a working link: http://signalsindicator.com/timer/index.html
here is not working one: https://traders.institute/build/timer/index.html
what may be causing this problem, it is same code on both of them?
The second link you postet is https, so you have to load the scripts with https as well.
What may be causing this problem, it is same code on both of them?
The answer: Mixed content issue.
A Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection.
... More details here.
Also missing the opening quotes around the stylesheet.
href="/build/timer/css/jquery.countdown.css">
In my index.html I have a number of scripts and css files that I have version control suffix on, like so:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=3.0">
</head>
<body>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>
</body>
</html>
I also have a directory of html views and smaller html files. Whenever I update one of these files, I increase the minor version number. For example, /framework/compile/css/main.min.css?version=3.0 becomes /framework/compile/css/main.min.css?version=3.1 after an update.
However, if I do a major site update and change most files, I will push the version number to 4.0. I don't want to have to manually change the version number on every file. Is there an easy and readable way to do this with a javascript variable or something similar.
I'm looking for something like this:
<script>var version = "3.0";</script>
<link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=" + version>
</head>
<body>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>
</body>
</html>
The above is obviously incorrect syntax and does not work.
Here's a fast solution, using some Jquery:
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Your css and js will be referred inside this div -->
<div id="updatable_source"></div>
<!--Version updater script-->
<script>
var version = '3.0'
$('#updatable_source').html(
'<link rel="stylesheet" type="text/css"'
+'href="/framework/compile/css/main.min.css?version='+version+'"/>'
+'<script type="text/javascript" src="/framework/compile/js/app.min.js'
+'version='+version+'"/>'
+'<script type="text/javascript" src="/framework/compile/js/app.min.js version='+version+'"/>'
);
</script>
</body>
</html>
Just change the 'version' var for updating the version
Solution Using Pure Javascript
index.html
<html>
<head>
</head>
<body>
<div>
Your main content should come BEFORE your javascript.
The script to include the files should be immediately after your content,
but before any other script file includes or in page javascript.
</div>
<script>
/*******************************************************
/ Alternate Solution: If you're only wanting to get the
/ most current version of each file, you can just append
/ a datetime stamp to the script tag's url src
/*******************************************************/
//get current datetime in milliseconds
var version = new Date().valueOf();
/*******************************************************
/ OR you can use manual version numbers as per your ?
/*******************************************************/
//variable to hold version number
var version = "3.0";
/*******************************************************
/ Add the following ahead of any other scripts before
/ the closing body tag
/*******************************************************/
var cssLnk = document.createElement("link");
cssLnk.setAttribute("rel", "stylesheet");
cssLnk.setAttribute("type", "text/css");
cssLnk.setAttribute("href", "/framework/compile/css/main.min.css?version=" + version);
document.head.appendChild(cssLnk);
var scr_A = document.createElement("script");
scr_A.setAttribute("type", "text/javascript");
scr_A.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);
document.body.appendChild(scr_A);
var scr_B = document.createElement("script");
scr_B.setAttribute("type", "text/javascript");
scr_B.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);
document.body.appendChild(scr_B);
</script>
</body>
</html>
Consider the following script (Also at http://jsbin.com/yegike/1/). If I try to create variable map before including the google maps link, I get a ReferenceError: google is not defined error. Without moving the link before the script, is it possible to eliminate this error? Even if the answer is "no", I would appreciate an explanation on what is happening.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> -->
<script>
(function($){
var map = new google.maps.LatLng(47.64864, -122.348927);
}(jQuery));
</script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</body>
</html>
You're trying to call a method named maps within the google namespace which is defined in your commented out script. The solution for this is to use the jQuery.ready method to execute your code when the page has been loaded (including your script include at the bottom of the page). Wrap your function within this and you should be good to go:
$( document ).ready(function() {
var map = new google.maps.LatLng(47.64864, -122.348927);
});
For more information about ready you can check out the always useful jQuery API:
http://api.jquery.com/ready/
Perhaps try this which waits until the page is loaded and if it takes google a while to load, then it will try again:
var map;
function makeMap() {
if (google && google.maps) { // google loaded?
map = new google.maps.LatLng(47.64864, -122.348927);
return;
}
setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
makeMap();
});
I am building a simple web app for mobile platforms using jQuery Mobile and in that, I intend to read some data from an API sending it as JSON (which I have exposed from a server side Django based project), and then parses it using jQuery's mechanism and then I create list elements based off that data.
Now, I have the following index.html:
<html>
<head>
<title>Playism App</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
</head>
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->
<li>Dummy</li>
</ul>
</div>
<script type="text/javascript" src="js/gamesRenderer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>
</body>
</html>
Now, just to test I created that Dummy list element and it's rendering perfect but there is no styling applied to any of the new elements which I inject using .append() calls from jQuery. The code is as follows:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
}
and as can be seen in index.html, I am calling it at DOM ready but no jQuery mobile styling gets applied to these manually injected list elements whereas the Dummy element gets proper styling. I believe something is wrong with the order in which the elements are called.
Thanks in advance !
Don't get me wrong but this question was asked so many times, but here's a solution for you:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
You need to use:
$("ul#gamesList").listview('refresh');
When working with a dynamically added jQuery Mobile you must manually start markup enhancement process. Read more about it in this article.
One other thing, never use document ready with jQuery Mobile, they should not be combined. Read more about it here. Sometimes it works sometimes not. Basically when working with jQuery Mobile always use page events.
Your final javascript should look like this:
$(document).on('pagebeforeshow', '#gameContainer', function(){
renderGames();
});
function renderGames(){
for (var i = 10 - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
Working example: http://jsfiddle.net/Gajotres/5uPfM/
Seems the for loop make the css cannot load properly. Don't know what is the 'objCreated'.
Try to migrate the code here in JSFiddle.
Here is the code:
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<li>Dummy</li>
</ul>
</div>
</body>
$(document).ready(function(){
renderGames();
});
function renderGames(){
$("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")
}
The css seems works on the injected elements. The list-style is "none" because of the jQuery Mobile UI css works.
first apply css and see your css file are linked properly
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
then JS and see your js file are linked properly
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>