Develop Reference

Vimeo video, progress and disable fast forward

I am working on a site used for mandatory instruction. We have to make sure the student watches the video and doesn't fast forward. I would also like to remember the progress the student made in the video in case they need to leave then return later to complete watching.
I have used this JS to remove the ability to fast forward. I'm just not sure how to get the code to remember the progress, then start at that point if the student returns later.
var iframe = document.querySelector("iframe");
var player = new Vimeo.Player(iframe);
var timeWatched = 0;
player.on("timeupdate", function(data) {
if (data.seconds - 1 < timeWatched && data.seconds > timeWatched) {
timeWatched = data.seconds;
}
});
player.on("seeked", function(data) {
if (timeWatched < data.seconds) {
player.setCurrentTime(timeWatched);
}
});
Thanks for any help on this.

you can store the current time in database for future use and then pass to the js whenever user views the video

AngularJs controller .appendChild() adding up each time view is visited

I have created a chat feature recently and I notice a curious bug. The following is the code I am using in my controller:
myFirebase.on('child_added', function(snapshot) {
var msg = snapshot.val();
var msgUsernameElement = document.createElement("b");
msgUsernameElement.textContent = msg.user;
var msgTextElement = document.createElement("p");
msgTextElement.textContent = msg.message;
var msgElement = document.createElement("div");
msgElement.appendChild(msgUsernameElement);
msgElement.appendChild(msgTextElement);
document.getElementById("messages").append(msgElement);
});
Suppose we enter the Chat view for the first time, then when I chat, the .appendChild() is working perfectly fine and the typed message shows up in the div 'messages'. Now Suppose we leave the Chat view and re-enter it, and type and send another chat message, then the .appendChild() is executed twice and the same message is appears twice in the div 'messages'. This continues linearly so if we re-enter the controller for the fifth time and send a message, the message is appended to the div 'messages' five times...
What is going on here?
I am using the Ionic Framework and the ready-made app template 'Tabs'. My chat feature is in the chat-details controller.

The problem is because the event handler is being added twice, once when you first visit the chat page, and again when you come back. To confirm that, visit it a third time, and you should see it 3x.
The solution is to put in an $onDestroy handler to remove the event handler. If the event handler can't be removed (ie it doesn't have an off method), then you should set a variable to tell you that it is initialised, and you check that on initialising the page (to prevent you doing it twice)

So Mikkel gave the right suggestion to initialize a variable and basically use that as a flag to make sure that my event handler is not called multiple times, given multiple entries to the Chat view, but only once. The following is my solution:
if (window.localStorage.getItem("notVisited") == null){ //This initilizes a variable in localstorage
window.localStorage.setItem("notVisited","true");
}
var startListening = function() {
myFirebase.on('child_added', function(snapshot) {
var msg = snapshot.val();
var msgUsernameElement = document.createElement("b");
msgUsernameElement.textContent = msg.user;
var msgTextElement = document.createElement("p");
msgTextElement.textContent = msg.message;
var msgElement = document.createElement("div");
msgElement.appendChild(msgUsernameElement);
msgElement.appendChild(msgTextElement);
document.getElementById("messages").append(msgElement);
});
window.localStorage.setItem("notVisited","false");
}
if (window.localStorage.getItem("notVisited") == "true") {
startListening();
}
Now after implementing this, I ran into a new problem which was that with this new code, each time I re-entered the view, the previous chat messages would not show up. So I added this:
if (window.localStorage.getItem("notVisited") == "false"){
$http({
url: "https://uniff-f4136.firebaseio.com/" + chatKey + ".json",
method: "GET"
}).then(function (response) {
for (var i in response.data){
var msgUsernameElement = document.createElement("b");
msgUsernameElement.textContent = response.data[i].user;
var msgTextElement = document.createElement("p");
msgTextElement.textContent = response.data[i].message;
var msgElement = document.createElement("div");
msgElement.appendChild(msgUsernameElement);
msgElement.appendChild(msgTextElement);
document.getElementById("messages").append(msgElement);
}
});
}
In the end, this made my chat work though I do not like the repetition of code. I hope others find this insightful.
Finally, to learn about using firebase to build a real time web chat app, visit this Google CodeLabs link: https://codelabs.developers.google.com/codelabs/cloud-firebase-chat/#4

Extracting page id from a facebook page url

I have an application where when a user enters their facebook fan page url, I extract the page id and store that into the database to be used later in facebook graph api.
I have added the following js to extract page id:
<script>
var fburl= "https://www.facebook.com/audi";
if(fburl.indexOf("?") != -1) {
var fburl_new=fburl.split("/");
var fburl_newer=(fburl_new[fburl_new.length-1])
var fburl_newer =fburl_newer.split("?");
var fbnameonly=(fburl_newer[fburl_newer.length-2]);
} else {
var fbnameonly = fburl.substring(fburl.lastIndexOf('/') + 1);
}
if(fbnameonly==undefined) {
console.log(fburl);
}else {
console.log(fbnameonly);
}
</script>
So, if I a user enters a facebook url like: https://www.facebook.com/audi, I get the output audi which is fine.
If a user enters facebook url as : https://www.facebook.com/pages/abc-def/1234568, I get the output 1234568 which is fine.
but for urls like:
https://www.facebook.com/abc-def-12345678/ (should return 12345678)
or
https://www.facebook.com/audi/timeline?ref=page_internal (should return audi)
I am unable to get the page id, is there any better way by which I can extract page id from any facebook fan page url and use it in facebook graph api like: https://graph.facebook.com/page_id dynamically ?

I figured out a better way to get page id from any facebook page url, I am not sure if there is even better option to do this but here is the code what I have used:
$fbUrl = "https://www.facebook.com/Lo-stile-di-Anna-1521824524722026";
$graphUrl = "https://graph.facebook.com/?id=".$fbUrl."&access_token=xxxxx&fields=id";
$output = file_get_contents($graphUrl);
$output = json_decode($output, TRUE);
echo $output["id"]; // returns 1521824524722026
I tried this with various facebook urls and it worked everytime, hope this helps someone in the future.

strophe.js and openfire who terminates connection on page reload?

I am using symfony2 to build some app. In that app I have chat app. I am using attached session in chat.
1) On login I fire up event listener to catch user/pass from login, connect to openfire server and get sid and rid.
2) After that i am storing that data in session so I can use them later on every page where I have chat.
Problem occurs when page is reloaded/refreshed.
My guess this is because ajax request to url:7070/httpd-bind is canceled strophe sends terminate to openfire server. Bu I can not find anywhere terminate stanza.
I am have patched strophe.js to use sync on page unload but again that is not working.
Chat.connection.flush();
Chat.connection.sync = true; // Switch to using synchronous requests since this is typically called onUnload.
Chat.connection.disconnect();
Please suggest solution for this, I am on 10 hour coding and I have no idea how to solve this.
I can sotre user/pass in session but that is just stupid. Why attached session exists if I have to do that.

UPDATE
After trying to figure about this rid plus+1 etc I noticed that rid is changing on presence, on message on message sent on roster on roster change so I made a XMLHttpRequest on each to remember new rid in session. For some reason localstorage is sometimes working sometimes not.
Now i have rid up to date all the time.
I think I got this. Problem was in rid and presence.
1) First you have to figure out from your logs if your rid is increasing or decreasing.
My was decreasing by one. So I substract -1 from my Chat.connection.rid
2) In my openfire logs I figured out that I was sending unavailable status on page refresh
so I changed my window.unload function to send presence to online. N
Now I am refreshing page million times and i never got disconnected.
Now I just have to figure out how to remember connection.rid to localStorage for non HTML browsers.
To start openfire in debug mode you just add ./openfire.sh -debug. Then you will be able to se everything in debug.log
This did trick for me. If this is doing trick for you please +1 and accept answer.
Do not forget to terminate session on logout :)
UPDATE
This is my on window.onunload function
window.onunload = function(ev){
var initialPresence = $pres().c('show').t("cao").up().c('status').t("sad");
Chat.connection.send(initialPresence);
store.set('session_rid', parseInt(Chat.connection.rid)-1);
//save rooster contacts state
var contacts = document.getElementById('records').getElementsByTagName('li');
var id_value;
var class_value;
var status;
var el;
for(i= 0; i < contacts.length; i++){
el = contacts[i].getElementsByClassName("mood")[0];
status = el.textContent || el.innerText;
Array.prototype.slice.call(contacts[i].attributes).forEach(function(item) {
if(item.name == "id"){
id_value = item.value;
}
if(item.name == "class"){
class_value = item.value;
}
store.set('user'+i, { id: id_value, class_name: class_value, status : status });
});
}
Chat.disconnect();
}
This is my on window.onload function
window.onload = function(){
if(store.get("session_rid")){
var obj;
var id;
var class_name;
var status;
store.forEach(function(val, key) {
if(val !== "session_rid"){
setTimeout(function(){
obj = eval(key);
id = obj.id;
class_name = obj.class_name;
status = obj.status;
if(document.getElementById(id)){
document.getElementById(id).className = class_name;
document.getElementById(id).getElementsByClassName("mood")[0].innerHTML = "<span>"+status+"</span>";
}
}, 1000);
}
})
}
}
This is working for me. I used store.js to store data so it can work on IE.
I used attached sessions.
//json is from ajax call on some php script that has started attached session on user login
var obj = JSON.parse(json);
connection = new Strophe.Connection(BOSH_SERVICE);
connection.attach(obj.fulljid,
obj.sid,
(store.get("session_rid") ? store.get("session_rid"):obj.rid),
justDoIt);
full_jid = obj.fulljid;

How do I use part of a text form input to add and make it go to an url?

The title might not be clear, but I'll explain it here. I'm a total newbie and I have almost no knowlege in JS, so please be clear.
My main code is here:
function goTo()
{
var url = "http://myurl.com/";
var name = document.forms[0].name.value;
window.location = url+name;
return false;
}
The code uses a set url and a form value, then if I press the send button, it jumps to the preset url + the form value.
But what I want, is to get just the last part of the input, so for example, this is my input:
http://lolsite.com/testing/files/HAfg76SDA
And I want the code to get the part of the input after the "/", so the finished product would be "HAfg76SDA". Now I want to snip this product at the end of my preset url, so when I press the submit button, it goes to:
http://myurl.com/HAfg76SDA
I would like to know if is this even possible, and if it is, I would nedd a code i could use straight away. Btw. I tried to use
function goTo()
{
var url = "http://myurl.com/";
var name = document.forms[0].name.value.(lastIndexOf("/")+1);
window.location = url+name;
return false;
}
but it doesn't seem to work.

function goTo()
{
var url = "http://myurl.com/";
var name = document.forms[0].name.value;
window.location = url+name.substr(name.lastIndexOf('/')+1);
return false;
}