I set up video lesson site with moodle. I will share my video with jwplayer my code is shown below.
<p>
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript"> jwplayer.key="KEY";</script>
</p>
<div id='player'>
<img src='jwplayer/preview.jpg' alt='RTSP Link' /><br />
</div>
<script type="text/javascript">
jwplayer('player').setup({
id : 'playerID',
fallback: false,
width: '920', height: '518',
image: 'jwplayer/preview.jpg',
sources: [{
file: "http://WowzaAdress:1935/vod/smil:Lesson1.smil/jwplayer.smil?protocol=rtmpe"
},{
file: "http://WowzaAdress:1935/vod/Lesson1.mp4/playlist.m3u8"
}],
rtmp: {
bufferlength: 3
},
});
</script>
I want to hide this code when users view with right click "Page source".
How can I do it?
I would use a tool like - http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
So then you get:
<script>
<!--
document.write(unescape("%3Cp%3E%0A%20%20%3Cscript%20src%3D%22jwplayer/jwplayer.js%22%20type%3D%22text/javascript%22%3E%3C/script%3E%0A%20%20%3Cscript%20type%3D%22text/javascript%22%3E%20jwplayer.key%3D%22KEY%22%3B%3C/script%3E%0A%3C/p%3E%0A%3Cdiv%20id%3D%27player%27%3E%0A%20%20%3Ca%20href%3D%22rtsp%3A//WowzaAdress%3A554/vod/mp4%3ALesson1.mp4%22%3E%3Cimg%20src%3D%27jwplayer/preview.jpg%27%20alt%3D%27RTSP%20Link%27%20/%3E%3Cbr%20/%3E%3C/a%3E%0A%3C/div%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Ajwplayer%28%27player%27%29.setup%28%7B%0Aid%20%20%3A%20%27playerID%27%2C%0Afallback%3A%20false%2C%0Awidth%3A%20%27920%27%2C%20height%3A%20%27518%27%2C%0Aimage%3A%20%27jwplayer/preview.jpg%27%2C%0Asources%3A%20%5B%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/smil%3ALesson1.smil/jwplayer.smil%3Fprotocol%3Drtmpe%22%0A%7D%2C%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/Lesson1.mp4/playlist.m3u8%22%0A%7D%5D%2C%0Artmp%3A%20%7B%0Abufferlength%3A%203%0A%7D%2C%0A%7D%29%3B%0A%3C/script%3E"));
//-->
</script>
Related
I am using Kendo UI for JQuery and need to create a data-bound Kendo menu. By data bound, I mean that the items need to be data bound to an array property of a Kendo observable. The issue is that it appears that MVVM binding messes up formatting and functionality of the items. Here is my code (based on the example found in Kendo's documentation) :
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Select an item</h4>
<ul data-role="menu"
data-bind="events: { select: onSelect },
visible: isVisible"
style="width: 100%;">
<li>
Products
<ul data-template="menu-item-template" data-bind="source: items">
</ul>
</li>
</ul>
</div>
</div>
<script id="menu-item-template" type="text/x-kendo-template">
<li data-bind="text: text"></li>
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
items: ["Product1", "Product2", "Product3"],
onSelect: function (e) {
var text = $(e.item).children(".k-link").text();
kendoConsole.log("event :: select(" + text + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section .box-col li {
margin-bottom: 0;
}
</style>
The result of executing this code looks like this:
Notice how the formatting of the items is messed up (no margins, etc.).
Do you know what's the proper way to combine data binding and Kendo menu?
Thank you!
Personally, I don't care for the MVVM style. It is too much boilerplate in my opinion.
Here is an example of setting up the menu by passing an object representing the various configuration values. Doing it like this, I do not get the same formatting issues that you get:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<title>user1044169 Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<ul id="menu"></ul>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: 'Products',
items: [
{ text: 'Product1' },
{ text: 'Product2' },
{ text: 'Product3' }
]
}
],
select: function(e) {
var text = $(e.item).children(".k-link").text();
console.log(text);
}
});
});
</script>
</body>
</html>
Notes : I tired all questions and answers related this topic.
I use form tag then work completely fine. See Code Here .
I want to "place" a drop zone in my div tag, but somehow it doesn't work. See the code here.
Snippet Example Below.
Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
//url: "/file/post",
addRemoveLinks: true,
maxFilesize: 0.5,
dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>',
dictResponseError: 'Error uploading file!'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<div class="clsbox-1" runat="server">
<div class="dropzone clsbox" id="mydropzone">
</div>
</div>
After a long research I have finally got the best solution.
HTML
<div class="clsbox-1" runat="server" >
div class="dropzone clsbox" id="mydropzone">
</div>
</div>
JavaScript
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", { url: "/file/post"});
// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });
JSFiddle Demo Here
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>
I am using Kendo UI - Editor.
If I click on Show Message link, "Click Success!" message should appear inside Editor
I want to show Custom Text inside Editor on Clicking on "Show Message" link...
Pleae Help !!!
$(document).ready(function(){
$(".importeditor").kendoEditor({
tools: [
"bold",
{
name: "custom",
myText: "Show Message",
template: $("#toolTemplate").html()
},
]
});
});
jQuery('#ClickMe').on('click', function () {
jQuery(".importeditor").data('kendoEditor').val('Click Success!');
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div class="textedit1">
<textarea rows="10" cols="45" name="textarea" class="txtarea importeditor"></textarea>
</div>
<script id="toolTemplate" type="text/x-kendo-template">
#= myText #
</script>
Use the value method IE
jQuery(".importeditor").data('kendoEditor').value('Click Success!');
Also you might want to fix your href in the a tag
#= myText #
I am using Twitter helper from Microsoft.Web.Helpers http://twitterhelper.codeplex.com/
But it is a bit delaying page load, so i am wondering is it possible to load the scripts of that helper after page is ready?
For example Twitter.Search("Hot Tweets") produce this scripts:
SCRIPTS:
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"/>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'search',
search: 'Hot Tweets',
interval: 6000,
title: '',
subject: '',
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
And than that scripts producing this html:
HTML:
<div class="twtr-widget twtr-paused" id="twtr-widget-1">
<div class="twtr-doc" style="width: 250px;">
<div class="twtr-hd">
<div class="twtr-bd">
<div class="twtr-ft">
</div>
</div>
</div>
But it is not allowing to generate scripts separate so i would wrap them in to $(document).ready()
I can just split that code copy paste scripts and html separately....sounds a bit silly. So i am just wondering may be some one may suggest something more clever?
Using defer <script type='text/javascript' defer src=''></script> will cause your scripts to be run after the document has been parsed and loaded.
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js" defer></script>
<script type="text/javascript" defer>
new TWTR.Widget({
version: 2,
...
http://www.hunlock.com/blogs/Deferred_Javascript