We Keep Coding

Jwplayer with angularjs

I am trying in several ways to start jwplayer in my web app in which i use angularjs.. I need to pass at file option a dynamic link of the file. In my controller i can have the dynamic link with a simple function
getVideoStreaming: function(file) {
$scope.fileName = file.name;
$scope.documentId = document.id;
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
},
this function is called when i click in a button that opens a modal in which i want show the video.
<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button>
Now the question.. how can i pass this variable to my modal? According to the jwplayer basic configuration this is what i should do:
<!-- dialog video -->
<div id="videoPlayer" class="uk-modal">
<div class="uk-modal-dialog" style="width: 680px!important;">
<a class="uk-modal-close uk-close"></a>
<h3 class="uk-panel-title">
<i class="zmdi zmdi-collection-text"></i>
{{docName}}
</h3>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://example.com/uploads/file.mp4",
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
});
</script>
</div>
</div>
but of course, as i've just said, i need file dynamic. Is it possible find a solution to this?

I have not tried to use JWPlayer from within a modal, but the directive I wrote should work for you. If not, then maybe you can reverse engineer and adapt. See how I use ng-src for the video file, with the directive is watching for a change.
ng-jwplayer
or bower install ng-jwplayer --save
Then use like:
<jwplayer ng-src="{{ videoSrc }}"
player-options="options"
player-id="myPlayer1">
</jwplayer>
and move your options to
...
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
$scope.options = {
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
}
The package also uses a service to ensure the global jwplayer does not get instantiated multiple times.

filepicker.io -- easy implementation

I have a site, btstats.com, that provides the following service:
"It imports a JSON file from 'Bluescan 4.0 Scanner for Android' and generates graphs and stats".
I implemented Dropbox Chooser on my site with this simple and elegant code to provide the functionality, provided by Dropbox:
<script type="text/javascript">
document.getElementById('dropbox-bt').onclick = function()
{
Dropbox.choose
({
linkType: 'direct',
extensions: ['.json'],
multiselect: false,
success: function (files)
{
var dbSelected = "File selected: ";
var filenamePanel = document.getElementById('filenamePanel');
filenamePanel.textContent = dbSelected + files[0].name;
var postLink = files[0].link;
document.getElementById('postLink').value = postLink;
var postName = files[0].name;
document.getElementById('postName').value = postName;
}
});
};
</script>
What I like about the code above is that it is small and provides me the file link and file name.
I'm thinking about implementing filepicker.io, so I can provide to users more cloud storage options.
I couldn't find an easy way to add filepicker.io's window to my site that offers these options. First, I would like to implement it using a button, and I can't find on their documentation an example with getElementById.
Would it be possible for someone to guide me or write a small filepicker.io example based on my Dropbox implementation that provides the file link and file name? I'm not a Javascript expert.
Thanks in advance.

The filepicker code is quite similar:
filepicker.setKey('yourApikey');
document.getElementById('filepickerBtn').onclick = selectFile;
function selectFile(){
filepicker.pick(
// picker options
{
extension: '.json',
},
onSuccessCallback
);
};
function onSuccessCallback(Blob){
document.getElementById('postName').textContent = Blob.filename;
document.getElementById('postlink').textContent = Blob.url;
document.getElementById('results').textContent = JSON.stringify(Blob);
};
Sample html code:
<div class="container">
<h3>Filepicker example</h3>
<p>
<button id="filepickerBtn" class="btn btn-primary">
Select json file
</button>
</p>
<p>Filename: <span id="postName"></span></p>
<p>Filelink: <span id="postlink"></span></p>
<p>Results: <pre id="results">Upload file to see results</pre></p>
</div>
And working example here

Parsing Dynamic JSON Generated From Website (CoovaChilli) And Display It Into Javascript Webpage?

i really need your help to help me solving my problem. I setup a captive portal using CoovaChilli, and want to show the usage feedback provided by Coova JSON Interface that can be accessed via url like this http://login.domain.com:3990/json/status from the internal network where the CoovaChilli listen on. If you already logged in into the captive portal and then if you access that url you will see data formated like this in your browser:
{
"version": "1.0",
"clientState": 1,
"redir": {
"originalURL": "http://www.gstatic.com/generate_204",
"redirectionURL": "",
"logoutURL": "http://10.1.0.1:3990/logoff",
"ipAddress": "10.1.0.6",
"macAddress": "AA-BB-CC-DD-EE-FF"
},
"session": {
"sessionId": "5108c39600000003",
"userName": "user#ri",
"startTime": 1359529249,
"sessionTimeout": 0,
"idleTimeout": 900
},
"accounting": {
"sessionTime": 867,
"idleTime": 0,
"inputOctets": 1428643,
"outputOctets": 391752,
"inputGigawords": 0,
"outputGigawords": 0,
"viewPoint": "client"
}
}
My question is, what should i do if want to parsing that data into a webpage using *Javascript* so i can see that data formatted more nicely (html formatted). For example i can access it via url using same domain like this http://login.domain.com/status/status.html rather than unformatted data in the previous url ?
Please note : i want use javascript to parsing because the data is different by the user who logged in into that CoovaChilli, different user have different data, only user who logged in and accessing that url can see only their own statistic, so i think the best practice is use a client side language to parsing that data.
Any of your help is very appreciated. Thank you before.

Try this
This link may help you http://www.w3schools.com/json/json_intro.asp
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p>
Name: <span id="jname"></span><br>
Age: <span id="jage"></span><br>
Address: <span id="jstreet"></span><br>
Phone: <span id="jphone"></span><br>
</p>
<script>
var JSONObject = {
"name":"John Johnson",
"street":"Oslo West 16",
"age":33,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
Edit
If you want to remove var json you can use ajax or jquery
eg:
$.getJSON("your url",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
http://www.w3schools.com/jquery/ajax_getjson.asp

<script src="js/jquery.min.js"></script>
<script>
$.getJSON("http://10.1.0.1:3990/json/status?callback=?", function(data) {
console.log(data);
});
</script>

Inserting Anchors in a Javascript Photo Gallery - Not Working?

I am using jAlbum(with the lightflow skin) to create a photo gallery for my website. The gallery loads and is in a nice carousel format. I would like to add anchors that way I can link directly to a certain photo within the gallery. I tried to add an anchor in the HTML yet it does not work. I assume this is because when the page loads the gallery takes a few seconds to load and thus does not redirect to the anchor. I easily could be wrong and need some advice on what I should try to get anchors to work. Here is an example code for the anchor and the photo itself:
<div class="item">
<a name="anchor3" id="anchor3"></a>
<img class="content hidden" src="thumbs/tree-w-sun.jpg" alt="Gifts" />
<div class="ref hidden">item8</div>
<div class="caption"><h3>Gifts</h3></div>
<div class="comment hidden"></div>
<div class="author hidden"></div>
<div class="params hidden"></div>
<div class="info hidden"><div><p>Artist: UBhapE2</p></div></div>
<div class="thumbWidth hidden">261</div>
<div class="thumbHeight hidden">350</div>
<a id="item8" class="lightwindow hidden" title="<h3>Gifts</h3>"
rel="gal[cat]" href="slides/tree-w-sun.jpg" ></a>
</div>
I have tried linking to the anchor I inserted (anchor3) and to the id inserted by jAlbum (item8) and neither work.
There are a few scripts that control the gallery and will put them here:
Script 1 - "Lightflow JS"
var LightFlowGlobal = {};
function getParam( name ){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
Script 2 - "ContentFlow JS" This JS is long and for sake of space I put the link directly to the JS file here
Script 3 - This script is in the page:
<script language="JavaScript" type="text/javascript">
var startItem = getParam('p');
if(startItem == "") startItem = "first";
if(startItem.isNaN) startItem = "'"+startItem+"'";
new ContentFlow('contentFlow', {
reflectionColor: "#000000",
maxItemHeight: 350,
marginTop: 50,
reflectionHeight: 0.25,
endOpacity: 1,
startItem: startItem,
circularFlow: false,
stretchThumbs: false
});
function lightWindowInit() {
LightFlowGlobal.myLightWindow = new lightwindow({
infoTabName : "More Info",
rootPath: "res/lightwindow/",
loadingTxt: "loading or ",
cancelTxt: "cancel",
playTxt: "start slideshow",
stopTxt: "stop slideshow",
slowerTxt: "slower by 1 second",
fasterTxt: "faster by 1 second",
downloadSlideTxt: "Download",
downloadSlide: false,
showSlideshow: false,
slideshowDuration: 5000,
circular: false,
animationDuration: 0.25
});
}
LightFlowGlobal.readyJS=true;
var rootPath = ".";
</script>
I am unsure what other scripts or css is needed. I link to the test-gallery I am working with here if you need to view the page. I will post additional info if requested.
So now how do I get anchors to work with this? I am not that great at javascript so please explain the answer vs "you need to add this function to the script" without explaining.
Thank Your for any and all assistance!

On the ContentFlow site, under Documentation --> items as links, the developer specifically states that "no element within the item may contain any anchors". maybe someone can offer a way around this restriction.

I figured out a way answer was provided by the Photo Gallery Creater:
It's not only the js. You'd need to pass a parameter to AddThis in order to
identify the image. Without it, you wouldn't know which image has been clicked.
The best would be to use LightFlow's query paramter p=index, where index is the
number of the image of the current web page.
For example, the following link would focus the 4th image of the gallery
(index begins at 0): http://your-domain.com/album/index.html?p=3

How to translate into other languages my web page?

How can I translate my web pages? Actually what technology or what scripting-if require- should be used? For info; I have all translated text. But I do not want to create something like clone site for other language.
I used just javascript -including jquery .

Just using JavaScript...
<script type="text/javascript">
// JSON-formatted, potentially read from a database
var article = {
title: {
en_US: "Article Title",
fr_FR: "Titre de l\'Article"
},
content: {
en_US: "Content of the Article.",
fr_FR: "Contenu de l\'Article."
}
}
// simple function to write the info to the page
function get_i18n(item, lang) {
document.write(article[item][lang]);
}
</script>
<!-- English Version -->
<div class="story">
<h1 class="title"><script>get_i18n('title','en_US');</script></h1>
<p class="content"><script>get_i18n('content','en_US');</script></p>
</div>
<!-- French Version -->
<div class="story">
<h1 class="title"><script>get_i18n('title','fr_FR');</script></h1>
<p class="content"><script>get_i18n('content','fr_FR');</script></p>
</div>
Please Note: This isn't a very graceful solution. I'm sure there's a prettier method...

You actually mean "how to build multi lingual website" as you already have the "translated text" as you call it.
One way is to put the text inside containers then using client side code change the containers contents to the proper text according to selected language, having arrays with translated text in each language.
If you have server side language at your disposal it would be much better though - do you have such thing?

Using CSS attribute selectors:
<style type="text/css">
// hides all French blocks by default
div.story[lang="fr"] {
display: none;
}
// hide all English blocks
body[lang="fr"] div.story[lang="en"] {
display: none;
}
// show all French blocks
body[lang="fr"] div.story[lang="fr"] {
display: block;
}
</style>
<!-- Change this to the language of the blocks you want to display -->
<body lang="fr">
<!-- English block, shown by default -->
<div class="story" lang="en">
<h1 class="title">Article Title</h1>
<p class="content">Content of the Article.</p>
</div>
<!-- French block, hidden by default -->
<div class="story" lang="fr">
<h1 class="title">Titre de l'Article</h1>
<p class="content">Contenu de l'Article.</p>
</div>
</body>
This setup defaults to showing all English blocks, unless lang="fr" is set on the <body> tag.
Of course, you'll still need some way to modify the lang attribute of the <body> tag...

It would take too long for JavaScript to translate your site. I'd say find some software that can translate HTML files and keep both versions on your server. I know this isn't what you want, but it's the only practical way right now.

You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"TranslatorProvider": "Azure", // not required if you filled in all translations
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}", // not required if above is empty
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "ar",
"DisplayName": "Arabic",
"Direction": "rtl"
}
],
"Translations": [
{
"en": "Home",
"ar": "الصفحة الرئيسية"
},
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" (you can customize the style of your select the way you want).
More information found on https://www.angrymonkeycloud.com/translation

I have improved the first answer a bit. Just use a function to set the lanaguage value in localStorage and then get the language from there and dynamically change the HTML with the global variable lgn.
<script type="text/javascript">
// JSON-formatted, potentially read from a database
var article = {
title: {
en_US: "Article Title",
fr_FR: "Titre de l\'Article"
},
content: {
en_US: "Content of the Article.",
fr_FR: "Contenu de l\'Article."
}
}
// simple function to write the info to the page
function get_i18n(item, lang) {
document.write(article[item][lang]);
}
var lng; //global variable
if (localStorage.getItem('lng') == null) { //if I have no language saved just load the English language
lng = 'en_US';
localStorage.setItem('lng', lng);
}
if(localStorage.getItem("lng") == 'en_US'){
lng = 'en_US';
}
if(localStorage.getItem("lng") == 'fr_FR'){
lng = 'fr_FR';
}
console.log(lng);
function get_i18n(item, lng) {
document.write(article[item][lng]);
}
</script>
<div class="story">
<h1 class="title"><script>get_i18n('title',lng);</script></h1>
<p class="content"><script>get_i18n('content',lng);</script></p>
</div>