Apologies for no Fiddle; just trying to understand SoundManager 2's basics and failing miserably.
Why doesn't this work:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
// Ready to use; soundManager.createSound() etc. can now be called.
}
});
</script>
<script>
$(document).ready(function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/sound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
});
</script>
But this does:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/mySound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
}
});
</script>
I don't get it... at all. Does every sound have to be loaded into onready()? And if so, how is that remotely useful for 90% of use cases? I have to be missing something. The examples they provide make it seem as easy putting this anywhere in my code:
soundManager.createSound({
id: 'mySound2',
url: 'audio/mySound2.mp3'
});
soundManager.play('mySound2');
Yet it doesn't work. Why?
From the comments
The API properbly need to do some thing on intialize and before it is ready to run. If you call createSound before the API have finished loading there will be a error. Instead of using $(func..) as you starting point, you could try using the onready, and call the $(functio.. from inthere
I have made a non-working fiddle of what i mean: http://jsfiddle.net/YdC8j -- I have not working with soundmanager I am just guessing
Related
Hello guys I'm using full calendar for my calendar. The problem I'm facing right now is I'm populating all of the events in my calendar. Now for instance if I have 10 events on a day it will all those events rather then showing 4 events and then giving a plus event to see all the other event. I can't understand why am I facing this problem. Please tell me what is it that I'm doing wrong. Here is the code through which I'm populating my event:
viewRender: function (view) {
$.ajax({
type: "POST",
url: base_url +"apps/calendar/getByMonth",
async : false,
dataType: 'html',
data: {'type': $('#formName').val() },
success: function(mark_up){
mark_up = JSON.parse(mark_up);
$.each(mark_up["task"], function() {
this.start = this.end;
});
my_events = mark_up["task"];
console.log(my_events);
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', my_events);
}
});
}
When the calendar then I make a ajax call to get all the events and then assign those events to my_events.
Use below parameter in your fullcalendar configuration
$('#calendar').fullCalendar({
eventLimit: 4, // Here
viewRender: function (view) {
// Your code mentioned in your question.
}
});
This is just an example to place eventLimit.
This works for me.
It's the full calendar default.
see
http://fullcalendar.io/docs/display/eventLimit/
eventLimit 2.1.0 Limits the number of events displayed on a day.
Boolean, Integer. default: false
Usage
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
Just use it as false.
I don't know which version you'r using, but it's strange that it isn't false as default.
I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()
How we can ignore URLs with Pace.js progress animation to one of my ajax calls,
I followed the following as mentioned in the documentation, I am trying to ignore a URL 'getTip' but it still triggers the pace animation.
ajax: {
trackMethods: ['GET', 'POST'],
trackWebSockets: false,
ignoreURLs: ['arterySignalR', 'browserLink', 'getTip']
}
Or how can I use the Pace.ignore in the following call:
$("a[name^='qtipname']").each(function() {
var $this = $(this);
var id = $this.attr('rel');
$this.qtip({
content:{
text: 'Loading...',
ajax: {
url: urlTip,
type: 'GET',
loading: false,
data: {"objectID": id}
}
},
show: 'mouseover', // Show it on mouseover
hide: {
delay: 200,
fixed: true // We'll let the user interact with it
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow',
width: 290
}
});
});
I realize this is an older post, however I recently had this requirement and this post was one of the first to come up...thought I would put my resolution here in case anyone else needs it.
Set pace options for the ignoreURLs before you load the pace.min.js library
<script>
paceOptions = {
ajax: {ignoreURLs: ['some-substring', /some-regexp/]}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Example of one of my ignoreURLs:
<script>
paceOptions = {
ajax: {ignoreURLs: ['staffNameAutoComplete']}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Where 'staffNameAutoComplete' is part of the ajax URL I am calling.
http://www.website.com/json.php?request=staffNameAutoComplete
Although there is plenty of information on the web regarding splash images in Flowplayer, I am having difficulty finding anything useful when using Flashembed to embed video. Here is what I have, which does not work:
<script language="JavaScript">
flashembed("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
splash: true,
clip: {
autoPlay: false,
autoBuffering: true,
playlist: [{url:"images/home-video-splash.jpg"}, {url: "http://myWebsite.com/video/myVideo.flv"}]
}
}
});
</script>
Any help would be greatly appreciated!
HAH! What a simple solution, rcdmk - you were right, and I also had some of my .js turned around the wrong way. So with your suggestion, and some proper syntax, which is always helpful, here is what I ended up with that now works:
<img src="images/home-video-splash.jpg" />
<script language="JavaScript">
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
clip: {
playlist: [
{
url: 'images/home-video-splash.jpg'
},
{
url: 'http://myWebsite.com/video/myVideo.flv',
autoPlay: false,
autoBuffering: true
}
]
}
}
});
</script>
My callback code (js file) is something like
function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: function(el){
addwindow(el, Id, bURL,purl);
},
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(el, Id, bURL,purl) {
//alert(el);
alert("add buttons " +{Id);
}
My problem is the call function is not going to addwindow. When I alert “Id” in addcontent it is displaying but not addwindow as the control is not moving to addwindow.
How can I trace/track what is the exception which is preventing the control to move onto addwindow.?
The proper approach to creating the callback with params is to use createCallback or createDelegate. Your functions are (apparently) executing in global scope so it wouldn't make much practical difference, but createDelegate allows your callback to execute within the same scope as the original function, which makes it the best default choice usually. So it would be something like:
autoLoad: {
url: tUrl,
callback: addwindow.createDelegate(this, [Id, bURL,purl]),
scripts: true,
nocache: true
},
Again, note that the this in your case will be the global Window object, but this is still a good practice to get into so that doing the same thing in the future within a class method will work as expected.
function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: addwindow(Id, bURL,purl),
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(Id, bURL,purl) {
//alert(el);
alert("add buttons " +Id);
}