html5 player doesn't load without a refresh .. how to fix this?
<!--IsvideoFileStart-->
<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<div class="nexmoe-item">
<div class="mdui-center" id="dplayer"></div>
</div>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
lang:'zh-en',
video: {
url: '<!--FileDownUrl-->',
type: 'auto'
}
});
document.getElementById('dplayer').load();
</script>
<!--IsvideoFileEnd-->
plz help me, thank you!
Try to reload it by running $.pjax.reload({ container: '#dplayer' });
Related
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
So I'm working on a site where the user logs into my Soundcloud app and automatically follows me. I am able to login but it doesn't follow. I can't seem to figure this out.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
<script>
SC.initialize({
client_id: '551f515f1sa1f51sa51f65sa165',
redirect_uri: 'http://mydomain/callback.html'
});
SC.connect().then(function() {
// Follow user with ID 3207
SC.put('/me/followings/3207');
});
</script>
</head>
<body>
<img onclick="SC.connect()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
</body>
</html>
Any help would be appreciated!
Try doing this:
<script type="text/javascript">
SC.initialize({
client_id: "551f515f1sa1f51sa51f65sa165",
redirect_uri: "http://mydomain/callback.html",
scope: "non-expiring"
});
function SC_login()
{ SC.connect(function() {
SC.get("/me", function(me) {
/* Follow */
SC.put('/me/followings/215527712');
});
});
}
</script>
and on your image
<img onclick="SC_login()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
Also, could you post your callback.html so I could take a look at it?
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I am not a jQuery person, wish I was. I have fiddled with no conflict, but it still lets only one of the scripts work at a time, not both. I am using a scroll to jquery script and colorbox (like lightbox) Here is my code. Any help is awesome.
<!--jquery scroll-->
<script src="js_scroll/jquery.js"></script>
<script src="js_scroll/jquery.scrollTo.js"></script>
<script src="js_scroll/jquery.nav.js"></script>
<script>
$(document).ready(function() {$('#nav').onePageNav();});
</script>
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</body>
If you want to load multiple jQuery libraries, this is the way.
<script src='jquery-1.3.2.js'></script>
<script>
var $j132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var $j142 = jQuery.noConflict();
</script>
now use $j132() for jQuery 1.3.2 operations and $j142() for jQuery 1.4.2
I had the same problem with ColorBox and ScrollBar I solved by using the
<script>var $jQuery171 = $.noConflict(true);</script> after my scroll bar java
the final results was
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
and then come the scroll bar java
<!--Scroll Plans-->
<link rel="stylesheet" type="text/css" href="../../../siteroots/aboutScroll/general.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>var $jQuery171 = $.noConflict(true);</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
})
</script>
<!--End Scroll Plans-->
I used the <script>var $jQuery171 = $.noConflict(true);</script> in the scroll Java only and it's working fine now.
I donwloaded this release, and I'm trying to run an example from the docs.
After expanding the Dojo download, my dojo dir is:
js/dojo-release-1.5.0/dijit
js/dojo-release-1.5.0/dojo
js/dojo-release-1.5.0/dojox
The buttons show up, but hide button does not hide the div.
Do I need to add other Dojo libraries along with the reference to dojo.js?
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
});
HTML:
<button dojoType="dijit.form.Button" id="buttonOne">
Hide Me!
</button>
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
<div id="findMe">
Hiya!
</div>
There are a couple of things you may be missing. As Daniel says, adding parseOnLoad=true as a djConfig param will help. Alternatively you can add djConfig params as a global JS variable before your dojo.js script tag, i.e.
<script>
var djConfig = {
parseOnLoad: true
}
</script>
A final alternative is to manually call the parser yourself. To do this, modify your JS to:
dojo.require("dijit.form.Button");
// You need to manually require the parser if you're going to call it yourself
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
// New line, parse the doc
dojo.parser.parse();
});
Additionally to parsing, you may need to add a theme (you've not mentioned if you've done this or not). The easiest way to do this is to add the class name to your body tag and import the css.
...
<link rel="stylesheet" type="text/css" href="/js/dojo-release-1.5.0/dijit/themes/claro/claro.css">
</head>
<body class="claro">
...
</body>
http://telliott.net/dojoExamples/dojo-buttonHelloWorld.html contains an example of this all working for you, feel free to go crib.
Reading http://dojotoolkit.org/reference-guide/djConfig.html#djconfig and http://dojotoolkit.org/reference-guide/dijit/info.html#dijit-info would probably be a good idea also.
HTH.
Tom
try adding djConfig="parseOnLoad:true" when add the dojo.js to the page.
ex:
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
//Daniel