Develop Reference

Opening a modal in a function call instead of .click()

I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?

I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.

I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});

Get access to script element of DOM using PHP

I have to get access to the following the mp3 file names in a DOM element using PHP. I have got all script elements using getElementsByTagName but am unable to get the file name.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: 'http://d2ik8svv2swg1p.cloudfront.net/courses/39T.mp3'
});
},
ended: function (event) {
$("#jquery_jplayer_1").jPlayer("play", 0);
},
swfPath: "/js",
supplied: "mp3",
cssSelectorAncestor: "#jp_interface_1"
})
.bind($.jPlayer.event.play, function () {
$(this).jPlayer("pauseOthers");
});

this will get ugly...
<?php
error_reporting(E_ALL);
header("content-type: text/plain;charset=utf8");
$html=base64_decode('IDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCiAgICAvLzwhW0NEQVRBWw0KICAgICQoZG9jdW1lbnQpLnJlYWR5KGZ1bmN0aW9uICgpIHsNCiAgICAgICAgJCgiI2pxdWVyeV9qcGxheWVyXzEiKS5qUGxheWVyKHsNCiAgICAgICAgICAgIHJlYWR5OiBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICAgICAgJCh0aGlzKS5qUGxheWVyKCJzZXRNZWRpYSIsIHsNCiAgICAgICAgICAgICAgICAgICAgbXAzOiAnaHR0cDovL2QyaWs4c3Z2MnN3ZzFwLmNsb3VkZnJvbnQubmV0L2NvdXJzZXMvMzlULm1wMycNCiAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgIH0sDQogICAgICAgICAgICBlbmRlZDogZnVuY3Rpb24gKGV2ZW50KSB7DQogICAgICAgICAgICAgICAgJCgiI2pxdWVyeV9qcGxheWVyXzEiKS5qUGxheWVyKCJwbGF5IiwgMCk7DQogICAgICAgICAgICB9LA0KICAgICAgICAgICAgc3dmUGF0aDogIi9qcyIsDQogICAgICAgICAgICBzdXBwbGllZDogIm1wMyIsDQogICAgICAgICAgICBjc3NTZWxlY3RvckFuY2VzdG9yOiAiI2pwX2ludGVyZmFjZV8xIg0KICAgICAgICB9KQ0KLmJpbmQoJC5qUGxheWVyLmV2ZW50LnBsYXksIGZ1bmN0aW9uICgpIHsgDQogICAgJCh0aGlzKS5qUGxheWVyKCJwYXVzZU90aGVycyIpOw0KfSk7DQo=');
$domd=#DOMDocument::loadHTML($html);
$ele=$domd->getElementsByTagName("script");
$ele=$ele[0];
$matches=array();
$i=preg_match_all('/mp3\s*\:[^\\\']*\\\'([^\\\']*)/i',$ele->textContent,$matches);
$url=$matches[1][0];
$name=basename($url);
var_dump($name,$url,$matches,$i);
your name is now in $name

Assign jPlayer function to custom button

I'm trying to attach a Play/Pause functions of jPlayer to a custom css button.
Function:
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: server
}).jPlayer("play");
},
swfPath: "js/",
wmode: "window",
solution: "flash,html",
supplied: "mp3",
preload: "none",
volume:0.75,
cssSelectorAncestor: "",
cssSelector: {
play: "#play",
pause: "#pause"
}
});
$("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", {
mp3: server
});
});
Controlers in jPlayer.min.js:
play:".jp-play",pause:".jp-pause",stop:".jp-stop"
Button:
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<section>
<a class="cssbutton" href="#" id="button"></a>
<span></span>
</section>
How do i go about adding these functions to the button?

Either give your button the ID play or change the CSS selector of your play button to your current ID:
$("#jquery_jplayer_1").jPlayer({
...
cssSelector: {
play: "#button",
...
}
});
Remember, the selectors that you refer to when constructing $("...").jPlayer({...}); should map to elements on your page, as explained in the Docs.

jplayer multiple instances one page - however the amount is variable

I am currently working with jPlayer to give the user some audio playback, if they wish to hear an audio sample, there is a slight complication in that the user first all creates a search, that can return a variable amount of audio files on the results page.
I have looked at the docs for jPlayer and it looks like you need to create a jPlayer instance for each audio file you wish to play, their examples are hard coded, which is great if you know that you will get the same number of results everytime you search for a sample. However for me 1 search could return 1 clip while another search could return 60 clips.
I have tried to implement multiple instances of jplayer like this, but to no avail as I get no audio output.
$('.jp-audio').each(function(index) {
var count = index+1;
$(this).attr("id", "jp_container_"+count)
$(".jp-stop").hide();
$("#jquery_jplayer_"+index+1).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:$(this).find('a.jp-play').attr('rel'),
wav:$(this).find('a.jp-play').attr('rel')
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "/media/js/jPlayer",
solution: "flash, html",
supplied: "mp3, wav",
wmode: "window",
preload: "auto"
});
$('body').append("<div id='jquery_jplayer_"+count+"' class='jp-jplayer'></div>");
});
How can I create a new jplayer instance for each of my audio clips? Below is the example from the Docs,
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_2").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
wmode: "window"
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_1").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_2",
wmode: "window"
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_3",
wmode: "window"
});
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
$("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});
taken from the source at,
http://jplayer.org/latest/demo-03/

in your case you only need one instance of jPlayer. If your Search Results HTML looked like this:
<ul>
<li data-m4a-path="http://www.example.com/track.m4a">Artist - Track</li>
< ... >
</ul>
then you could add this javascript to play the track:
$("li[data-m4a-path]").click(function () {
$("#jquery_jplayer_1").jPlayer("setMedia", {m4a: $(this).attr("data-m4a-path")});
});

use this: http://kolber.github.io/audiojs/
i have this on my portfolio website i'm working on and it's working very fine until now
and i need this a lot on a soundtrack portfolio
hope it helps

how to wait the execution of line in Javascript?

$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300);
// Here I want wait that the div_id can complete its shake
alert('hello');
}
.delay I tried but it is not working.

$(this).effect("shake", { times:3 }, 300, function() {
// this will alert once the animation has completed
alert('hello');
});

If you're using jQuery UI, you should just be able to add a callback as the 4th parameter.
See: http://jqueryui.com/demos/effect/
$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300, function(){
alert('hello');
});
}

$(this).effect("shake", { times:3 }, 300, function() {
alert('hello');
});