We Keep Coding

Why doesn't my page auto refresh properly?

My goal is to refresh the page when the class p.fancybox-error is visible, but I would like to know why this part of the code doesn't work at the top of my page.
<script type="text/JavaScript">
var theDiv = document.querySelector("p.fancybox-error");
theDiv.addEventListener("click", function() {
setTimeout(function(){ location.reload(); }, 5000);
});
</script>
I put it under this line:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
But it gives me this error:
null is not an object (evaluating 'theDiv.addEventListener')
Thanks a lot guys, just take a look to #Stephane's answer, it works perfectly for me.

This polls every second looking for your class and auto-reloads when it exists
$(function() {
setInterval(function() {
if($("p.fancybox-error").length) location.reload();
}, 1000);
});

Cannot get simple JQuery commands to work

I'm having a ton of problems understanding Javascript and JQuery at the moment - they're causing me major headaches. Here's what I'm trying to do:
Replace the end of long item descriptions with ellipses. I want it to work for however many item descriptions that I have.
I tried doing it myself, completely failed, then tried to use a jquery.ellipsis plugin. Linking \jquery.ellipsis-master\jquery.ellipsis-master\src\jquery.ellipsis.js seems to have stopped my code from running at all. The alert does not show.
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript">
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
Can somebody explain which file from Github I'm supposed to use? The ellipsis plugin is from https://github.com/bebraw/jquery.ellipsis

You cannot put your JS code in a <script> element that has a src attribute. It's one or the other. To do what you need you have to add your own <script /> tag, like this:
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript"></script>
<script>
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({
visible: 3,
more: '…',
moreClass: 'more',
separator: ' ',
atFront: false
});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
</script>

You need to put your script inside a <script></script> tag if it's in your html. This is basically telling the browser that anything between these tags is JS. The external link to a script is used to define a link to an external JS file. You can check out this detailed article that explains how exactly JS is embedded http://docstore.mik.ua/orelly/webprog/jscript/ch12_02.htm
It will work if you do this
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript"></script>
<script>
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
</script>
Cheers and happy coding!

JWPlayer handle youtube errors

I would like to handle the youtube errors in the JWPlayer, so in case the video doesn't exists or is not available for the country show a message on the player, or with javascript, i am doing something like this...
var options = {
height: 330,
},
flashplayer: '/player.swf',
width: 560,
events:{
onError:function(obj){
alert('ERROR'+obj);
}
} ,
debug: 'console'
};
jwplayer("player").setup(options);
jwplayer("player").play();
but its not getting inside from the onError event, even though the video doesnt even exist... and i can see in the console.. LOG (Error loading preview image: Error #2036)
In the case of youtubes restriction country i cannot even see that in the console.
In any case the video just show the loading animation, which it makes belieave the user that it can be load in any time, which its not true.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/assets/jwplayer.min.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/assets/swfobject.js"></script>
<div id="player"></div>
</body>
<script type="text/javascript">
//<![CDATA[
window.onload=createPlayer();
function createPlayer() {
var flashvars = {
file:"http://www.youtube.com/watch?v=pnEHsUWFuNM",
autostart:"true"
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:"player1",
name:"player1"
}
swfobject.embedSWF("#{facesContext.externalContext.requestContextPath}/assets/player.swf", "player", "320", "196", "9.0.115", false, flashvars, params, attributes);
}
function loadPlayer() {
var options = {
height: 325,
flashplayer: '#{facesContext.externalContext.requestContextPath}/assets/player.swf',
width: 560,
events:{
onError:function(error){
alert('Error loading your link, please try another one');
}
} /* ,
debug: 'console'*/
};
options.file = 'http://www.youtube.com/watch?v=pnEHsUWFuNM';
options.events.onReady= function(){
jwplayer("player").play();
};
jwplayer("player").setup(options);
}
//]]>
</script>
loadPlayer to try with jwplayer.js and the createPlayer directly from SWFObject... that video exist just that it shouldnt be shown in germany, still its trying to load it.
and if i set any other unexisting URL let say "http://www.youtube.com/watch?v=ABC" still keeps trying to load the unexisting video.

It looks like JW5 doesn't support catching YouTube errors. However, the following setup with JW6 works:
<!DOCTYPE html>
<html>
<head>
<title>YouTube Test Page</title>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
jwplayer("player").setup({
file: "https://www.youtube.com/watch?v=ABCD",
events:{
onError: function() {
jwplayer().load({file: "http://content.longtailvideo.com/videos/flvplayer.flv",duration: "27"});jwplayer().play()
}
}
});
</script>
</body>
</html>

Dynamically loading a script changes its behaviour

I wanted paperjs to load after a button is pressed to turn on animations but it seems the paperscript doesn't work if paper is loaded after page load.
If you comment out the setTimeout and uncomment the direct $.getScript - paperjs will fire the alert('hi'). I don't get it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
$("#jq").text("jQuery is now loaded.")
var lateLoad = function() {
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
};
//setTimeout(lateLoad, 100);
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
I'm using Chrome 23.0.1271.97 m on Windows 7 x64. Anybody have an idea what's going on here?

I think I figured out a workaround as well - paper.PaperScript.load() or to elaborate:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("#jq").text("jQuery is now loaded.")
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
var lateLoad = function() {
$.getScript(paper_url, function() {
$("#pp").text("Paperjs is now loaded.");
paper.PaperScript.load(); // <-- The fix!
});
};
setTimeout(lateLoad, 1000);
//$.getScript(paperUrl, function() {
// $("#pp").text("Paperjs is now loaded.");
//});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
That causes paperscript to scan for all the paperscripts. I found it at https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270 while googling for "paperscript" in the github repo. Though it still doesn't explain why paper doesn't do the load() on its own when dynamically loaded.
EDIT - I understand what went wrong. It's related to https://github.com/jquery/jquery/blob/master/src/core.js#L768 because paperjs doesn't check if the window loaded event had already fired i.e document.readyState === "complete". I submitted a pull request to paperjs https://github.com/paperjs/paper.js/pull/156

I think it is easier to load it via require.js. All you need is a require.config object, defined in e.g. main.js:
requirejs.config({
paths : {
'jquery' : "path/to/jquery"
'paper' : "path/to/paper"
},
shim: {
'jquery' : {
exports: 'jQuery'
},
'paper' : {
exports: 'paper'
}
}
});
You will need to load require.js with the above config via the data-main attribute:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
Then you define a module (e.g. 'paperStuff') where your paper logic will be:
define(['jquery', 'paper'], function($, paper) {
// do some cool stuff
});
When you want to load your paperStuff, you just do
var paperStuff = require('paperStuff');
...

Move your paperscript code into an external file (i.e. pstest.js) and modify your lateLoad to:
var lateLoad = function() {
$.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
function() {
$("#pp").text("Paperjs is now loaded.");
$.getScript("pstest.js");
} )
}

Can someone find an error with this code?

When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!

have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/

Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here

It is jquery function, you have to register jquery javascript framework first