After including jquery plugin countdown not working - javascript

I have a content editor webpart in sharepoint with the following code, However the countdown is not working.
What I noticed is that this site is using an old version of jquery 1.6.3, I wonder if that might be the cause or not.
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script class="ms-rteForeColor-3" type="text/javascript">
$(function () {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});
</script>
<div id="countdownBox">
<h3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</h3>
<span class="countdown" id="countdown"></span>
</div>
Update 1
Error in firefox console. the error is flooded too many times on the console
Timestamp: 10/07/2013 08:13:21
Warning: Error in parsing value for 'filter'. Declaration dropped.
Source File: https://xx/Communities/xx/Pages/project-xx.aspx
Line: 0
Source Code:
alpha(opacity=99.00000000000007)
this is the generated html, I wonder if the css has to be in the head?
<DIV id=WebPartWPQ7 class="ms-WPBody noindex" allowDelete="false" width="100%" HasPers="false" WebPartID="c1b5cf92-534f-4d23-8cd0-8c0fbe8f541b">
<SCRIPT type=text/javascript src="/Style%20Library/countdown/jquery.countdown.js">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script type="text/javascript">
$(document).ready(function() {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});</SCRIPT>
<DIV id=countdownBox>
<H3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</H3><SPAN id=countdown class=countdown></SPAN></DIV></DIV>

The jsFiddle works fine: http://jsfiddle.net/Fnsgk/3
However you should add a closing script tag:
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
</script>

Related

how can I make a Inline calendar using bootstrap, javascript, jquery

I have a index.html file. I want to create a inline calendar using bootstrap.But I am getting an error called "VM1487:3 Uncaught TypeError: $(...).datetimepicker is not a function".I donot know good bootstrap, javascript.please help me someone,Here is my code:
/index.html
<div class="form-group all-forms">
<div class="col-sm-3 col-sm-offset-5 r-view">
<div id="datetimepicker"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
You are using datetimepicker while it should be datepicker. As per the docs. Try this and it should work. Make sure include right css and right js.
These are the css and js files for datetimepicker that must be included before use with jquery and bootstrap js:
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
// your options
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Hope this helps.

gridstack basics, how to make the demo work

Really noob question, but I don't understand what am I doing wrong here ?
<head>
<link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"> azazfaz</div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>
<script type="text/javascript">
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
I get this error:
gridstack.js:391 Uncaught TypeError: undefined is not a function
pointing to this line in gridstack:
var is_nested = this.container.closest('.' + opts.item_class).size() > 0;
EDIT:
I found the problem, if I replace this lines
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
then it works , any idea why ?
As a workaround, you can do the following to make gridstack work when the size() function doesn't exist:
$.fn.size = function(){
return this.length;
};
jQuery 3.0 removes the jQuery.fn.size method. It's probably safer to just stick with 1.11.x when using this library.
https://github.com/jquery/jquery/issues/1749
(BTW I actually get this.container.closest(...).size is not a function as the reported error).
You can use jQuery 3.0 and above if you make an edit to gridstack.js as suggested by https://api.jquery.com/size/
Change Line 511 in gridstack.js (version 0.2.5) from:
var isNested = this.container.closest('.' + opts.itemClass).size() > 0;
to
var isNested = this.container.closest('.' + opts.itemClass).length > 0;
and gridstack works fine.

Javascript prettyPrint an external java file

I'm really new to web development and I'm kind of lost here.
I'm using Bootstrap, and I'm trying to display java code (in a file called test.java) that's on my local machine on the webpage. The file is displayed, but it doesn't get syntax coloured. Please help!
I have in the header:
for prettify:
<link rel="stylesheet" type="text/css" href="../localfile/prettify.css"/>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="../localfile/prettify.js"></script>
and for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And this is the script
<script type="text/javascript">
$(document).ready(function() {
jQuery(function($) {
$.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
prettyPrint();
}, "text");
});
});
</script>
and this for the div:
<div class="panel-body" >
<pre id="sourceCodeDestination" class="prettyprint linenums lang-java">
</pre>
</div>
I finally figured out what the problem was after reading the answer to this question, here.
So, I changed the script to this and it works just fine. I just removed the prettyprinted class before calling prettyPrint.
<script type="text/javascript">
jQuery(function ($) { $.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
$('#sourceCodeDestination').removeClass("prettyprinted");
prettyPrint();
}, "text");
});
</script>

Auto refresh a specific div blogger javascript

I use a Javascript widget on a blogspot. It include a div with some javascripts that get some "non-statical" strings from a server and print them on the page. Until here everything works fine, the problem is that I would like to update the execution of this div every few seconds in order to have updated strings, without refreshing the whole page, but just the specific widget (div). I have added another script that tries to refresh the specific div, but I had no luck. Please see the code below
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
Script for refreshing:
<script type="text/javascript">
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",5000);
}
function startTime()
{
document.getElementById('info').innerHTML = ??? // reload div
}
</script>
Additionally something like this could be used, but this method reload the whole page and not the specific div.
<script>
setInterval(function() {
parent.location.reload(true);
}, 5000);
</script>
Last Update
I try with Ajax and with created element.
With this technique, load the contains of the scripts but the document.write() not function.
Because this write() need the refresh page()!!
Just returning a value from a function does not place that value into an HTML element in any way. One could either use document.write (not recommended), or access the element via its id and write the desired element content via .innerHTML=…
Explain.
If you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like
<div id="message"></div>
and then use
document.getElementById("message").innerHTML = "New title";
or if you are using jQuery:
$("#message").html("New title");
or if you are using a console enabled browser (Firefox, Chrome etc.)
console.log("New title");
instead of
document.write("New title");
THEN document.write only for page loading time.
You have to change the scripts and replace document.write()
I put the my code with createElement and on the comment you look the my work.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/song/uk23-free:5106">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/listeners/uk23-free:5106">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="http://shoutcast.mixstream.net/status/uk23-free:5106.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
var myVar=setInterval(function(){myTimer()},timeoutPeriod);
function myTimer()
{
document.getElementById("info").innerHTML="";
var b=document.createElement('B');
b.appendChild( document.createTextNode("Song") );
document.getElementById("info").appendChild(b);
// span.innerHTML="";
// span.appendChild( document.createTextNode("hello") );
// document.getElementById('myspan').innerHTML = 'newtext';
var src1 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
script1 = document.createElement('SCRIPT');
script1.type="text/javascript";
script1.src = src1;
document.getElementById("info").appendChild(script1);
var br= document.createElement('BR');
document.getElementById("info").appendChild(br);
document.getElementById("info").appendChild(br);
var b=document.createElement('B');
b.appendChild( document.createTextNode("Listeners") );
document.getElementById("info").appendChild(b);
var src2 = 'http://shoutcast.mixstream.net/js/listeners/uk23-free:5106',
script2 = document.createElement('SCRIPT');
script2.type="text/javascript";
script2.src = src2;
document.getElementById("info").appendChild(script2);
document.getElementById("info").appendChild(br);
var b=document.createElement('B');
b.appendChild( document.createTextNode("Server Status") );
document.getElementById("info").appendChild(b);
var src3 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
script3 = document.createElement('IMG');
script3.src = src3;
script3.alt="Stream status";
script3.width="17";
script3.height="17";
script3.align="absmiddle";
document.getElementById("info").appendChild(script3);
//
// document.body.appendChild(script);
//
// document.body.info.appendChild(b);
// document.getElementsByTagName('b')[1].appendChild( document.createTextNode("Listeners") );
// document.body.info.appendChild(script2);
// var br= document.createElement('BR');
//
// document.body.info.appendChild(br);
}
// // create an object of the head element of current page
// var hdEl = document.getElementsByTagName("song");
//
// //check for previously appended child
// //(it ensures that each time the button is pressed it
// // removes the previously loaded script element)
// if (hdEl.childNodes.length > 1) {
// hdEl.removeChild(hdEl.lastChild);
// }
//
// // Now add this new element to the head tag
//
//
// //Create a 'script' element
// var scrptE = document.createElement("script");
//
// // Set it's 'type' attribute
// scrptE.setAttribute("type", "text/javascript");
//
// // Set it's 'language' attribute
// scrptE.setAttribute("language", "JavaScript");
//
// // Set it's 'src' attribute
// scrptE.setAttribute("src", "http://shoutcast.mixstream.net/js/song/uk23-free:5106");
//
// // Now add this new element to the head tag
// hdEl.appendChild(scrptE);
// // document.getElementsByTagName("song").appendChild(scrptE);
// //This is a old:
// setTimeout("alert("ojk");",timeoutPeriod);
// // This function!!!
// setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// var oHead = document.getElementsByTagName('HEAD').item(0);
// var oScript= document.createElement("script");
// oScript.type = "text/javascript";
// oScript.src="other.js";
// oHead.appendChild( oScript);
}
</script>
</body>
</html>
UPDATE:
THEN....
I change your site and now function!!!
And on the my pc this site is refresh every 5 second!!!
You have always the two particular errors.
This work for you but you have the particular error.
Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". on the sentence n° 13 and also for sentence n°18.
http://xxxx
This error I find with the tool's chrome (Inspect element).
The solution is on Stackoverflow or prefier the blog.
I have the software is Kubuntu (KDE + Ubuntu) and I don't know for change the value 's registry.
Solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
//This is a old:
//setTimeout("location.reload(true);",timeoutPeriod);
// This function!!!
setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
}
</script>
</body>
</html>
Or other solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body >
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
// function timedRefresh(timeoutPeriod) {
// setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// document.getElementById("info").innerHTML=document.getElementById("info").innerHTML
// }
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
document.getElementById("info").innerHTML = document.getElementById("info").innerHTML;
}
</script>
</body>
</html>
This is a old site but not refresh the site.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
setInterval(function(){
document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;
}, 5000);
</script>
</body>
</html>
here is a fiddle working example of how i typically declare my set interval functions...
this one is setting the inner html of my #info div to a timestamp just so u can see that it is functional.
fiddle here with set interval
but i think there is another flaw in this process...
it looks like here you are updating the contents of the div to exactly the same html as they were before:
document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;
this is likely your issue, the external scripts you are using are likely writing html, and you are just copying it rather than running those scripts again. what you want to do is run some sort of AJAX call to rerun those scripts.
you can do this more easily with the jquery library if you are interested in going that route. or to maintain strict javascript i would reccomend starting here:
w3 ajax tutorial

Include JQuery countdown in Django

I'm new with Django and this question is probably very basic. I would like to implement this Jquery countdown (http://keith-wood.name/countdown.html) in my Django app. But I have no idea how to include some javascript in my django templates.
Here is what I tried to include in my template:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">#import "/Users/marc-antoine.lacroix/Desktop/JQuery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.countdown-fr.js"></script>
<script language="javascript">
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
</script>
But nothing appears in my page. What did I do wrong? Is it the good way to include JQuery in my template?
I know several questions has been asked about it, but I didn't find how to solve my problem.
Any help would be very welcome.
Now, I tried:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">#import "/Users/marc-antoine.lacroix/Desktop/JQuery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.countdown-fr.js"></script>
<script language="javascript">
$(document).ready(function(){
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
});
</script>
</head>
<body>
<div id="defaultCountdown"> </div>
</body>
Still nothing!
Did you include <div id="defaultCountdown"></div> somewhere on your page?
Also it would be a good idea to put your javascript code inside ready event, like so:
$(document).ready(function(){
//your code here
});

Categories

Resources