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.
Related
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
I have a question for the jQuery Plugin "whatweather" from getkode.be
I have installed it and its running fine, now im looking at the layout, and i have some issues.
If I wan't to display all week days i use this code, but it's hard to changes the layout 100%
<script type="text/javascript">
$("div#whatweather").whatWeather({
id: "",
city:"Billund,Denmark",
days:"5",
refresh: 0,
dateFormat:"{{DD}}",
weekDays:["Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag"]
});
</script>
So i get this
If I then add a Template like this code.
<div id="whatweather"></div>
<script type="text/javascript">
var template = '<div class="{{cssClass}}">\
<p class="current">\
<span class="climacon {{currentWeatherIcon}} temp-pic"></span>\
<span class="city">{{city}} {{currentCondition.temp}}°</span>\
</p>\
<div class="next-days">\
{{#nextDays}}\
<div>\
<p>\
<span>{{date}}</span>\
<span class="climacon {{dayWeatherIcon}} temp-pic"></span>\
<span>{{tempMax}}°</span>\
</p>\
</div>\
{{/nextDays}}\
</div>\
</div>';
$("div#whatweather").whatWeather({
id: "",
city:"Billund,Denmark",
days:"5",
refresh: 0,
dateFormat:"{{DD}}",
weekDays:["Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag"],
templates: [template]
});
</script>
Then I get this
But after 1-2 sec. the "Next days" disappear, so I get this.
Do someone know how to make fix this little issue in the template code ?
You did not define option cssClass. Because of that you got default value which is widget-1. From the code of this plug-in:
templates: ['<div class="{{cssClass}}">\
...
<div class="next-days" style="display:none">\
...
That is the reason that your days data are hidden.
If you want to get them shown, you have to follow instructions written in documentation page. See example after sentence Voici le code pour obtenir ce widget. You have to define:
function myAfter(el, options){
el.on("click", function(){
$("p.current, div.next-days", el).toggleClass("transition");
});
which toggle display of days on/off. And you have to add after and cssClass option, something like:
cssClass:"whatWeatherMetro",
templates: [template],
after: myAfter
The last step is new css file. All is described there.
I am using dropzone.js to upload files. However, I'm having difficulty changing the default text.
I've tried instantiating the dropzone class:
$(document).ready(function(){
$(".foo").dropzone({ dictDefaultMessage: "hello" });
});
With this markup:
<div class="span4">
<form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop3" class="foo" enctype="multipart/form-data"> </form>
</div>
<div class="span4">
<form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop4" class="foo" enctype="multipart/form-data"> </form>
</div>
This certainly gives me the ability to upload files but the default text is blank.
I tested the following:
$(".foo").dropzone();
and I appear to get the same result - no default text. So.. how do I change the default text?
Add an element within your dropzone form as follows:
<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>
You can change all default messages with this:
Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";
When creating the dropzone you can set the default message like this.
var dropzone = new Dropzone("form.dropzone", {
dictDefaultMessage: "Put your custom message here"
});
Then
$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});
First add an id to your form, say mydz, then add this js:
Dropzone.options.mydz = {
dictDefaultMessage: "your custom message"
};
The whole page (index.php in this case):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="./dropzone.css">
<title></title>
</head>
<body>
<form action="upload.php" class="dropzone" id="mydz"></form>
<script type="text/javascript">
Dropzone.options.mydz = {
dictDefaultMessage: "Put your custom message here"
};
</script>
</body>
</html>
this text is in dropzone's default config, You can overwrite like this:
Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
myDropzonePhotos = new Dropzone('#dropzone-test',
{
url : 'upload_usuario.php?id_usuario=' + id_usuario,
maxFiles : 1,
thumbnailWidth : 1200,
thumbnailHeight : 300,
dictDefaultMessage : 'Change the text here!',
init: function()
{
....
I fiddled with this for hours.
For some reason, these 3 things needed to be done:
My dropzone tags could not be on the same page I was using dropzone on. I had to reference them on the template page
The element you are turning into a dropzone has to have a class of 'dropzone'
You have to add the following to the top of the js file for the page i was working on.
Dropzone.autoDiscover = false;
To Initialize:
var myDropzone = new Dropzone("#id-upload-dropzone", {
url: "/home/Upload",
dictDefaultMessage: 'Drop image here (or click) to capture/upload'
});
Once I had all 3 in order, the dictDefaultMessage option worked.
For localizing Dropzone in Asp.Net Razor Pages I use the below method to avoid decoded chars :
Create HTML element for all messages
<!-- localization elements -->
<div class="modal" aria-hidden="true">
<span id="dictDefaultMessage">#_localizer["Drop files here or click to upload."]</span>
<span id="dictFallbackMessage">#_localizer["Your browser does not support drag'n'drop file uploads."]</span>
<span id="dictFallbackText">#_localizer["Please use the fallback form below to upload your files like in the olden days."]</span>
<span id="dictFileTooBig">#_localizer["File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB."]</span>
<span id="dictInvalidFileType">#_localizer["You can't upload files of this type."]</span>
<span id="dictResponseError">#_localizer["Server responded with {{statusCode}} code."]</span>
<span id="dictCancelUpload">#_localizer["Cancel upload"]</span>
<span id="dictCancelUploadConfirmation">#_localizer["Are you sure you want to cancel this upload?"]</span>
<span id="dictUploadCanceled">#_localizer["Upload canceled."]</span>
<span id="dictRemoveFile">#_localizer["Delete"]</span>
<span id="dictRemoveFileConfirmation">#_localizer["Are you sure you want to delete this file?"]</span>
<span id="dictMaxFilesExceeded">#_localizer["You can not upload any more files."]</span>
<span id="dictFileSizeUnits_TB">#_localizer["TB"]</span>
<span id="dictFileSizeUnits_GB">#_localizer["GB"]</span>
<span id="dictFileSizeUnits_MB">#_localizer["MB"]</span>
<span id="dictFileSizeUnits_KB">#_localizer["KB"]</span>
<span id="dictFileSizeUnits_b">#_localizer["b"]</span>
</div>
Then bind messages to Dropzone element:
<script>
// get elements for localization
with (Dropzone.prototype.defaultOptions) {
dictDefaultMessage = document.getElementById("dictDefaultMessage").innerText;
dictFallbackMessage = document.getElementById("dictFallbackMessage").innerText;
dictFallbackText = document.getElementById("dictFallbackText").innerText;
dictFileTooBig = document.getElementById("dictFileTooBig").innerText;
dictInvalidFileType = document.getElementById("dictInvalidFileType").innerText;
dictResponseError = document.getElementById("dictResponseError").innerText;
dictCancelUpload = document.getElementById("dictCancelUpload").innerText;
dictCancelUploadConfirmation = document.getElementById("dictCancelUploadConfirmation").innerText;
dictUploadCanceled = document.getElementById("dictUploadCanceled").innerText;
dictRemoveFile = document.getElementById("dictRemoveFile").innerText;
dictRemoveFileConfirmation = document.getElementById("dictRemoveFileConfirmation").innerText; // if this is null, the user will not be prompted when deleting file.
dictMaxFilesExceeded = document.getElementById("dictMaxFilesExceeded").innerText;
dictFileSizeUnits = {
tb: document.getElementById("dictFileSizeUnits_TB").innerText,
gb: document.getElementById("dictFileSizeUnits_GB").innerText,
mb: document.getElementById("dictFileSizeUnits_MB").innerText,
kb: document.getElementById("dictFileSizeUnits_KB").innerText,
b: document.getElementById("dictFileSizeUnits_b").innerText
};
};
</script>
for a complete drag-drop file upload sample using Dropzone see this GitHub repository : https://github.com/LazZiya/FileUpload
If you aren't adverse to JQuery, this will hide the default image:
$('form.dropzone').find('div.default.message').css('background-image','none');
and, this will show the default span which you can change to be whatever you want:
$('form.dropzone').find('div.default.message').find('span').show();
$('form.dropzone').find('div.default.message').find('span').empty();
$('form.dropzone').find('div.default.message').find('span').append('Drop files here or click here to upload an image.');
in the css of dropzone look for
.dropzone .dz-default.dz-message
in this class delete
background-image: url("../images/spritemap.png");
the next thing to do is search this class
.dropzone .dz-default.dz-message span {
display: none;
}
and change it to display:block
If you are creating Dropzones Programmatically then you have to set your options like below:
Dropzone.autoDiscover = false;
profilePicture = new Dropzone('#profile-picture', {
url: "/uploadPicture.php",
// if you are using laravel ..., you dont need to put csrf in meta tag
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
dictDefaultMessage: "Your default message Will work 100%",
/other options
paramName: "profile_picture",
addRemoveLinks: true,
maxFilesize: 1,
maxFiles: 10,
dictRemoveFile: "Remove",
});
If you are using it like this, It wont work ...
let myDropzone = new Dropzone("#profile-picture", {
url: "/uploadPicture.php",
// if you are using laravel ..., you dont need to put csrf in meta tag
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
});
myDropzone.options.profilePicture = {
dictDefaultMessage: "This message not gonna work",
paramName: "profile_picture",
};
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
I am trying to get FusionCharts to export.
I have, besides XML files that specify registerWithJS="1",
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="FusionCharts/FusionChartsExportComponent.js"></script>
and
<div class="portlet" id="recent-portfolio-trends">
<div title="View graphs and charts of your portfolio." class="portlet-header">Recent Portfolio Trends</div>
<div class="portlet-content">
<!-- Trends -->
<span id="Trends-OS">FusionCharts will load here!</span>
<span id="Trends-Vol">FusionCharts will load here!</span>
<div id="fcexpDiv">FusionCharts Export Handler Component</div>
<div id="fcexpDiv2">FusionCharts Export Handler Component 2</div>
<script type="text/javascript">
var myChart = new FusionCharts( "FusionCharts/MSColumn2D.swf", "column", "350", "220", "0", "1" );
myChart.setXMLUrl("FusionCharts/trends-outstandings.xml");
myChart.render("Trends-OS");
var myExportComponent = new FusionChartsExportObject("fcExporter1", "FusionCharts/FCExporter.swf");
myExportComponent.debugMode = true;
myExportComponent.exportAttributes.exportAtClient = '1';
myExportComponent.exportFilename = "Outstanding";
myExportComponent.render("fcexpDiv");
</script>
<script type="text/javascript">
var myChart = new FusionCharts( "FusionCharts/MSCombi2D.swf", "column", "350", "220", "0", "1" );
myChart.setXMLUrl("FusionCharts/trends-volume.xml");
myChart.render("Trends-Vol");
var myExportComponent2 = new FusionChartsExportObject("fcExporter2", "FusionCharts/FCExporter.swf");
myExportComponent2.debugMode = true;
myExportComponent2.exportAttributes.exportAtClient = '1';
myExportComponent.exportFilename = "Volume";
myExportComponent2.render("fcexpDiv2");
</script>
Google searching suggests in various forms that I need to specify registerWithJS to be "1", perhaps in more than one place, and that I should get a diagnostic error code in an alert with debugMode set to True. (I do not get an alert or anything on Chrome's JavaScript console.) This is being served up by a distinct web server, so it's not a "local filesystem protection" issue.
What I do get are two charts rendered properly, plus two buttons that say "Waiting" and never, at least after a few minutes, change to say anything else. If I right-click the graphs, the contextmenu offers "Print Chart", "Copy data to clipboard", "About FusionCharts", "Settings...", "Global Settings...", and "About Adobe Flash Player 10.3.181.14..." but not the options to export as JPG, PNG, or PDF that should be available.
Suggestions for what I need to do?
You would need to set at-least three export related XML attributes in your XML to enable the export related context menu. These are : exportEnabled, exportAtClient and exportHandler.
Hence, your trends-outstandings.xml would contain:
<chart exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' ...>
and trends-volume.xml would contain:
<chart exportEnabled='1' exportAtClient='1' exportHandler='fcExporter2' ...>
Also please make sure you are using the latest FusionCharts.js and FusionChartsExportComponent.js.
Please try setting exportEnabled='1'