I have a requirement wherein based on some condition I have to switch between flash and HTML flowplayer.
It is a single page app.
currently I am doing the following. But is there a better approach?
$.getScript("flowplayer/flowplayer-3.2.12.min.js", function(){
$.getScript("flowplayer/jdataview.js", function(){
$.getScript("flowplayer/easybits-helper.js", function(){
$.getScript("flowplayer/easybits-mp4.js", function(){
$.getScript("flowplayer/easybits-multistreaming.js", function(){
$.getScript("flowplayer/easybits-flowplayer-flash-scrubber-preview.js", function(){
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
$.getScript("flowplayer/flowplayerhtml5/flowplayer.min.js", function() {
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
});
});
});
});
});
});
});
/* and to render a flash video I use */
flashFlowplayer(sourceElement[0].id, {
src: "flowplayer/flowplayer.commercial-3.2.16.swf",
wmode: 'opaque'
}, oFlowPlayerConfig);
/* to render htmlFlowplayer I use */
$el.htmlFlowplayer({
"ratio": oParam.ratio,
"embed": false,
"playlist":[[{ "mp4": sVideoUrl }]],
});
You can load the scripts by using <script> elements instead of this deeply nested mess of $.getScript. The browser might download them in any order but it will execute the contents in order. That means the browser might request easybits-helper.js already while it's executing the content of flowplayer-3.2.12.min.js.
This code is equivalent to the above:
<script type="text/javascript" src="flowplayer/flowplayer-3.2.12.min.js" />
<script type="text/javascript" src="flowplayer/jdataview.js" />
<script type="text/javascript" src="flowplayer/easybits-helper.js" />
<script type="text/javascript" src="flowplayer/easybits-mp4.js" />
<script type="text/javascript" src="flowplayer/easybits-multistreaming.js" />
<script type="text/javascript" src="flowplayer/easybits-flowplayer-flash-scrubber-preview.js" />
<script type="text/javascript">
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
</script>
<script type="text/javascript" src="flowplayer/flowplayerhtml5/flowplayer.min.js" />
<script type="text/javascript">
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
</script>
but it allows the client to cache the scripts properly and load them in parallel. It's also much more readable.
Related
I have an HTML and JS file. Should the user want to overwrite the default settings that are declared in the external JS file all they have to do is include the following as an inline script:
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
The problem I am facing is that my external script is not picking up the user settings and is setting everything as default.
var defControls = {
transition : 'default',
nextText : 'Next »'
};
var userControls = {};
// CHECKS FOR userControls
if (Object.getOwnPropertyNames(userControls).length > 0) {
var controls = Object.assign({}, defControls, userControls);
} else {
controls = defControls;
}
console.log(userControls);
console.log(controls);
console.log(defControls);
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
</body>
</html>
You have four and half mistakes in your code:
You have to write inline script with code: var userControls = {transition: 'fade', nextText: 'Next'}; before external JS file. And do not forget ; on the end (it is the half mistake).
The line var userControls = {}; in external JS file has overwrited the settings in userControls in inline script. I think you wanted to write instead var controls = {};.
The var controls = {}; you have to write before if...else statement.
You write console.log(userControls); instead of console.log(JSON.stringify(userControls)); Your code writes only [object Object] in developer console from IE. But in Chrome it is okey.
Solution with corrected code
<!DOCTYPE html>
<html><head>
<!--
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script type="text/javascript">
var userControls =
{
transition : 'fade',
nextText : 'Next'
};
</script>
<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS
src="script.js" -->
<script type="text/javascript">
var defControls =
{
transition : 'default',
nextText : 'Next »'
};
//THIS WAS THE MISTAKE: var userControls = {}; this line has overwrited the settings
var controls = {};
// CHECKS FOR userControls
if(Object.getOwnPropertyNames(userControls).length > 0)
{
controls = Object.assign({}, defControls, userControls);
}
else
{
controls = defControls;
}
console.log('userControls =\n' + JSON.stringify(userControls, null, '\t'));
console.log('controls =\n' + JSON.stringify(controls, null, '\t'));
console.log('defControls =\n' + JSON.stringify(defControls, null, '\t'));
</script>
</head>
<body></body>
</html>
It's because that you inserted the user choice after your js file loads. It goes through the following control first
if (Object.getOwnPropertyNames(userControls).length > 0)
so this will always evaluate to false. That's why you keep getting default values. You should either insert the user choice script first or some async functionality in the js file.
I keep getting Uncaught ReferenceError: $ is not defined error.
I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?
I have this inside the head of my HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
This is my Javascript file:
function typing(id, sentence){
var result = $.Deferred();
var index=0;
var intObject= setInterval(function() {
document.getElementById(id).innerHTML+=sentence[index];
index++;
if(index==sentence.length){
clearInterval(intObject);
}
}, 100);
return result.promise();
}
var sleep = function(ms) {
var result = $.Deferred();
setTimeout(result.resolve, ms);
return result.promise();
};
typing('container','Subject Name:').then(function() {
return sleep(500);
}).then(function() {
return typing('container',' Carlos Miguel Fernando')
});
Where did I go wrong?
Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>
But not
<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Note the order of tags.
These tags do not need to be in the head, and in fact, putting them there is not best practice. They must be in head or body. Best practice barring a specific reason to do something else is to put them at the very end of body, e.g.:
<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>
I have the following code:
<script language="javascript" type="text/javascript">
$.fn.dataTableExt.oPagination.input = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
....
},
"fnUpdate": function (oSettings, fnCallbackDraw) {
....
}
};
</script>
and it works, but when I create external file and put this code inside this file (of course without <script></script> ) - it does not work. Why?
just make sure the jQuery is the first script you load
<script type="text/javascript" src="jquery.js"><scrip>
<script type="text/javascript" src="yourScript.js"><script>
I just started playing around with backbone.js and am enjoying the quirks of using it.
However am trying to use it for handling events in views for a site am working on.
Am also using namespaces to organise my code
var App = App || {};
App.Views = App.Views || {};
App.Views.Sidebar = Backbone.View.extend({
el: '#app-wrapper',
events : {
"click #rf":"test"
; },
test: function(e) {
alert("testing");
}
})
}
});
Heres the html, its just a skeleton of the site
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
App.Views.Sidebar;
</script>
</head>
<body>
<div id="app-wrapper">
<div id="app-header">
<ul>
<li id="rf">Test</li>
</ul>
</div>
</div>
</body>
</html>
However this snippet doesn't seem to work, the test() method is not called when click the #rf element.
Am doing something wrong, am pretty new to this.
You have not instantiated your view. Try something like this:
var myView = new App.Views.Sidebar();
(instead of: App.Views.Sidebar; )
Also don't forget to instantiate your views once the document has been loaded. Something like this (if you use JQuery):
$(function() {
// Initialize Backbone views.
var myView = new App.Views.Sidebar();
});
I have a site using javascript popup effect like this:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script src="greybox/AJS.js" type="text/javascript"></script>
<script src="greybox/AJS_fx.js" type="text/javascript"></script>
<script src="greybox/gb_scripts.js" type="text/javascript"></script>
<link href="greybox/gb_styles.css" type="text/css" rel="stylesheet">
<script language="JAVASCRIPT">
function loadWindow(){
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
}
window.onload = loadWindow;
</script>
But everytime my visitor go to the homepage, my popup always shown. How to do making this popup only display one time?
Please Help me
you can use cookies and jquery
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script>
function loadWindow() {
if ($.cookie('popup_flag') != 'true') {
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
$.cookie('popup_flag', 'true');
}
}
</script>
Personally i would go with JStorage, its a HTML5 jQuery Plug-in the uses the local storage on most popular browsers.
Example:
var loadWindows = function()
{
if(!$.jSotreage.get('welcome_flag'))
{
GB_ShowCentre('Free Support!') // Blah
$.jStorage.set('welcome_flag',true);
}
}
Uses JSON To serialize all data in the local storage:-
jStorage: http://plugins.jquery.com/project/jStorage
Draft: http://dev.w3.org/html5/webstorage/
Without jQuery: Storing Objects in HTML5 localStorage
You can store around 5MB Per domain so this would be benificial and should take over the use of cookies within the javascript environment.