|
JavaScript - Play Song - Thought It Worked, But Not
I have searched looking for a means to simply play a song using JavaScript and here is what I have found:
Code: if (document.getElementById)
var song = document.getElementById("media")
else
var song = document.all.tags("media")
var playSong = "<a href='javascript:song.Play()'>a test<\/a>"
document.write(playSong)
Other JS sets the name and id of the song to "media". When I click on the written link nothing happens ... isn't the global function Play() built into Quicktime?? Similar Tutorialsim trying to make a calendar verification in javascript for client side registration page....but i stuck in "calendar function"....when i run the code without "calendar function" it works,,,,can anybody tells me wht am i doing wrong....the code is shown below <html> <head> <script type="text/JavaScript" language="javascript" > <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) { if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; } } else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function calendar(day,month,year) { if(year%4==0) { if((month=="April")||(month=="June")||(month=="September")||(month=="November")) { if((day<0)||(day>30)) { alert("Invalid Date."); return false; } } if((month=="January")||(month=="March")||(month=="May")||(month=="July")||(month=="August")||(month= ="October")||(month=="December")) { if((day<0)||(day>31)) { alert("Invalid Date."); return false; } } if(month=="February") { if((day.value<0)||(day.value>29)) { alert("Invalid Date."); return false; } } return true; } else{ if((month=="April")||(month=="June")||(month=="September")||(month=="November")) { if((day<0)||(day>30)) { alert("Invalid Date."); return false; } } if((month=="January")||(month=="March")||(month=="May")||(month=="July")||(month=="August")||(month= ="October")||(month=="December")) { if((day<0)||(day>31)) { alert("Invalid Date."); return false; } } if((month=="February")) { if((day<0)||(day>28)) { alert("Invalid Date."); return false; } } return true; } function ValidateForm(){ var day = document.frmSample.Day; var year = document.frmSample.Year; var month = document.frmSample.Month; if ((day.value=="")||(day.value="Date")) { alert("Please enter your birthdate."); day.focus(); return false; } if ((month.value=="Month")||(month.value=="")) { alert("Choose Month."); month.focus(); return false; } if ((year.value=="Year")||(year.value=="")||(year.value<1950)||(year.value<2000)) { alert("Invalid Birth Year."); year.focus(); return false; } if(datcomb(day.value,month.value,year.value)==false) { alert("Wrong Combination of D-M-Y."); day.focus(); month.focus(); year.focus(); return false; } return true; } //--> </script> </head> <body> <form name="frmSample" method="post" onSubmit="return ValidateForm()"> <input type="text" name="Day" id="Day" value="Date" size="5" /> <select title="- Select Month -" style="font-size:12px" name="Month" id="Month" class=""> <option value="" selected="selected">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <input type="text" name="Year" id="Year" size="5" value="Year" /> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html> good evening guys, i am new in JS ,so forgive my little knowledge,here is what i wanna do i have 10 songs in file ,i need to play them one after another when the page is loaded,and each time the page is loaded the playlist changes randomly (i dont want to play the same order of songs each time) so far i did a random array of the songs,each time the page is loaded,the order of the array will be change as well, but i don't know how to attach this array to the mediaplayer any idea plz ???????? here is what i did <script type="text/javascript"> var playlist = new Array(); var playlistnames = new Array(); var play = new Array(); playlistnames [0]="songs\play1.mp3"; playlistnames [1]="songs\play2.mp3"; playlistnames [2]="songs\play3.mp3"; playlistnames [3]="songs\play4.mp3"; playlistnames [4]="songs\play5.mp3"; playlistnames [5]="songs\play6.mp3"; playlistnames [6]="songs\play7.mp3"; playlistnames [7]="songs\play8.mp3"; playlistnames [8]="songs\play9.mp3"; playlistnames [9]="songs\play10.mp3"; var i=0; for (i=0;i<10; ) { var x = Math.floor(Math.random()*10); if (x != playlist[0] && x!= playlist[2]&& x!= playlist[3]&& x!= playlist[4]&& x!= playlist[5]&& x!= playlist[6]&& x!= playlist[7]&& x!= playlist[8]&& x!= playlist[9]&& x!= playlist[1]) { playlist[i]=x; play[i]=playlistnames[playlist[i]]; i++; } } </script> Hi! I'm using NiftyPlayer (http://www.varal.org/niftyplayer/) to play an mp3 on my website. I'd like it to refresh the page when the song is over (I have some php grabbing songs from a database and choosing the one to play at random). NiftyPlayer has two functions that are probably useful for this. First, if you have a link go to: Code: javascript:alert(niftyplayer('niftyPlayer1').getState())
It will display the current state of the player (stopped, playing, paused, finished). Presumably, a piece of javascript could poll this variable every second, and once it equals "finished", execute the redirect. However, I think this other piece of code included with NiftyPlayer would help even more. In the .js file, it says the following: Code: this.registerEvent = function (eventName, action) {
// eventName is a string with one of the following values: onPlay, onStop, onPause, onError, onSongOver, onBufferingComplete, onBufferingStarted
// action is a string with the javascript code to run.
//
// example: niftyplayer('niftyPlayer1').registerEvent('onPlay', 'alert("playing!")');
this.obj.SetVariable(eventName, action);
};
So it would appear that I could use something like this to automatically refresh when the song is over: Code: niftyplayer('niftyPlayer1').registerEvent('onSongOver', 'location.reload(true)');
The problem here is that I have no javascript experience and have no idea how to implement either of these ideas. Help? I got this code to WORK with Buttons... But, i can NOT get it to work with URLs/LINKs... dose anyone have any suggestions? The URL alternative LINKs are placed below the buttons... but like i have said, they don't work. Help Pleeeeese. Thanks. ****HEAD <script language="javascript" type="text/javascript"> function getCheckedValue() { document.getElementById("presentationsNavBars").style.display = 'block'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue2() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'block'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue3() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'block'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue4() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'block'; } </script> ****** BODY <div class="student_text"> <asp:RadioButton ID="RadioButton1" GroupName="reg" Text="presentations" runat="server" OnClick="return getCheckedValue();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" runat="server" onclick="getClickedValue();">Presentations_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton2" GroupName="reg" Text="proposals" runat="server" onclick="return getCheckedValue2();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue2();">Proposals_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton3" GroupName="reg" Text="postings" runat="server" onclick="return getCheckedValue3();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue3();">Postings_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton4" GroupName="reg" Text="myaccount" runat="server" onclick="return getCheckedValue4();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue4();">Myaccount_link_ex</a><br /> </div> <br /><br /> ****************************** start display ***************************** <br /><br /> <div id="presentationsNavBars" style="display: none;"> SOME HTML HERE ..........presentations nav bar............ </div> <div id="proposalsNavBars" style="display: none;" > SOME HTML HERE 44444444 proposals nav bar 44444444444 </div> <div id="postingsNavBars" style="display: none;" > SOME HTML HERE 2222222 postings nav bar 2222222222222 </div> <div id="myaccountNavBars" style="display: block;" > SOME HTML HERE 33333333 myaccount nav bar 33333333 </div> <br /><br /> ****************************** end ***************************** Thanks to this forum, I finally got my calculator working and want to share it with everyone who can use it. The code below divides the time input by the distance input and displays the resulting pace in a min:sec format. Enter 12 miles, for example, and 1 hour, 33 minutes and 15 seconds, and the code displays 7:46 mpm (minutes per mile). My first version uses one function to do everything, but this morning I decided to teach myself how one function passes stuff to another. So I began trying to perform the min:sec conversion in a function named Pace2minsec and pass the result to the Pace function for display in the form. After several failures, I learned that a function returns its calculation to whatever code calls it. Ah ha, I thought, I need to have Pace call Pace2minsec. Yeah, pretty basic stuff but I am a raw beginner with Javascript, and thought there might be others here like me who could benefit from my mistakes. Even after discovering the call-return process, I had to get the names of the variables correct before it would work. One mistake I made was thinking that I could have a variable with the same name in both functions. Wrong. Even though they were both inside their own function and therefore local variables, apparently, since one function called the other, the names had to be different. In both functions, I had a variable named totalsec, but only when I renamed it totalseconds in the first function did my code work. Another glich was discovering that I had to tell the second function what variable it had to use for its operation. My first stab at that was to put the line Pace2minsec(minsec) in the first function. Wrong. Then I tried Pace2minsec(totalsec). Wrong again. And finally, Pace2minsec(totalseconds) which worked fine. Probably obvious to most, but it sure wasn't to me. Trial and error scripting! But I'm getting there, one principle at a time... <CODE> <html> <head> <script> function Pace(D, H, M, S, form) // Is form really necessary? { var dist = parseFloat(D); // Makes entry a number? var hours = parseFloat(H); var mins = parseFloat(M); var secs = parseFloat(S); var pacedecimal = (hours*60 + mins + secs/60) / dist; // Total minutes in decimal var totalseconds = pacedecimal*60; // Total seconds in decimal form.pace.value =Pace2minsec(totalseconds) + " " + "mpm"; // Tell Pace2minsec what variable to use? } function Pace2minsec(totalsec) { var minsec = ''; sec = Math.round(totalsec%60); // remainder of totalsec div by 60 min = Math.round((totalsec-sec)/60); // total seconds minus remainder minsec = min + (sec>9?":":":0") + sec; // min:sec format adds :0 if sec<10 return(minsec); // Pass min:sec format to Pace, the calling function } </script> </head> <body style="margin-top:100px; text-align:center; font-family:arial; background-color:silver;"> <form name="pacer"> <table style="font-size:14px; font-weight:bold;" cellspacing="0" border="0"> <tr> <td>DIST</td> <td><input type="text" name="dist" size="3"></td> <td width="8"></td> <td>TIME</td> <td><input type="text" name="hours" size="1">:</td> <td><input type="text" name="mins" size="1">:</td> <td><input type="text" name="secs" size="1"></td> <td width="24"></td> <td><input TYPE="button" VALUE="Pace" onClick="Pace(this.form.dist.value, this.form.hours.value, this.form.mins.value, this.form.secs.value, this.form)"></td> <td width="4"></td> <td><input type="text" name="pace" size="8"></td> <td width="6"></td> <td><input TYPE="reset" VALUE="Clear" onClick="clearForm(this.form)"></td> </tr> </table> </form> </body> /html> </CODE> My community runs a set of forums, (phpbb with the Brushed Metal template, if that is important.) and people often use large images in their posts. This ends up cutting off the majority of the image, so we thought we'd install an auto-resize script, to resize anything wider than 600 px. It works too well, it also resizes the banner at the top of the screen. A bunch of us hacked at it trying to get it to work, but none of us know anything about javascript, so it's not going so well. Either the script still resizes everything, or it does nothing at all. Here's the earliest version I could find. It's not the original script, however... Code: <script>
onload_functions.push('resizeimg();');
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
im = document.getElementsByTagName('img')[i];
if (im.source == 'http://lalala.com/lalala/lalala.png')
/*PATH TO TOP BANNER THAT SHOULD NOT BE RESIZED*/
{
continue;
}
if (im.width > 600)
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title = 'Click Here To See Image Full Size ';
}
}
}
}
</script>
We're stuck, we have no idea what to do. Hi I'm looking for solutions to play a movie file (it can be any format) on a keyboard press. I have this 'textsizer' code so far which I have adapted to work with swapimage but wondered if it would be possible to adapt this to play a movie too. function textsizer(e){ var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit. var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode var actualkey=String.fromCharCode(unicode) if (actualkey=="a") MM_swapImage('Image1','','marta3.jpg',1) if (actualkey=="z") MM_swapImgRestore('Image1','','marta.jpg',1) } document.onkeypress=textsizer Hope someone can help Thanks I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hello all; I am doing a site for a local business that uses radio advertising and has a jingle that they want to play once per visit only (so it does not play over again of they return to the same page later that day). I have tried to use yahoo player, Google player and the infamous wma player and all work well. I especially like the yahoo player but as will all the players I could not find a way to have it only play once per day per visitor. Is there a way to accomplish this? I was thinking using a tracking cookie but have no idea how to implement it. In the end I would like to accomplish the following: mp3 plays automatically on page load audio only playes once per day per visitor hava small player so if the visitorr wants to hear the jingle again they can do so. the player should be compact and cross browser compatible. Should be compatible with HTML 5.0 Transitional or at the very least 4.01 Any help would be appreciated. Please help, I have a page with 3 images. I want my visitors to hear an mp3 audio once they hover their mouse on each image. image1 = audio1.mp3 image2 = audio2.mp3 image3 = audio3.mp3 But here are the challenges. 1- I want the audio files to play on the same page where the images are, without opening a new page. 2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page. 3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome) Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions. I spent a long time looking online, but most of what I found is only compatible in one browser or the other. Any help would be appreciated. I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas? Here is the code file thus far... Code: <html>
<head>
<title>Timer</title>
<link href="timer.css" rel="stylesheet" type="text/css" />
<embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
<script type="text/javascript">
var seconds = 0;
var clockId;
var running = false;
function runClock() {
seconds++;
document.timer.timerClock.value = seconds;
}
function startClock() {
if (!running) {
clockId = setInterval('runClock()',1000);
running = true;
}
}
function stopClock() {
if (running) {
clearInterval(clockId);
running = false;
}
}
function resetClock() {
document.timer.timerClock.value = 0;
seconds = 0;
}
</script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">
<p>
<span>Timer<br />
</p>
</div>
<div id="intro">
<p>Click to begin timer</p>
<p id="buttons">
<input onclick="startClock()" type="button" value="Begin Seconds Counter" />
<br />
<input name="timerClock" id="timerClock" value="0" />
<br />
<input onclick="stopClock()" type="button" value="Stop Timer" />
<br />
<input onclick="resetClock()" type="button" value="Reset Timer" />
</p>
</div>
</form>
</body>
</html>
hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs. i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong: Code: function EvalSound()
{
var sound1 = document.getElementById("sound1");
var choice = sound1.options[sound1.selectedIndex].value;
var sound2 = document.getElementById("sound2");
var choice2 = sound2.options[sound2.selectedIndex].value;
var pic1 = document.getElementById("first_pic");
var pic2 = document.getElementById("second_pic");
soundManager.play(choice);
soundManager.play(choice2);
}
Thanks for any help I can't seem to play MP3s with jPlayer, only OGG. Any ideas? My custom code is below: Code: <script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){
Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
jQuery.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
jQuery(this.cssSelector.jPlayer).jPlayer(this.options);
jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
jQuery(this).blur();
return false;
});
jQuery(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
jQuery(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
jQuery(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
jQuery(this.cssSelector.playlist + " ul").append(listItem);
jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = jQuery(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
jQuery(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
jQuery(self.cssSelector.playlist + "_item_" + index).click();
jQuery(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
jQuery(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
},
supplied: "mp3",
addMedia: function(media){
this.playlist.push(media);
this.playlistNext();
}
};
});
var last_el='';
jQuery('.track .wrap .play').click(function(){
var cur_img = jQuery(this).css('backgroundImage');
if(cur_img.substring(cur_img.length-10)=='play.png")'){
if(last_el!=''){
last_el.css('background-image','url("img/play.png")');
}
var el = jQuery(this);
last_el = el;
parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
el.css('background-image','url("img/pause.png")');
}else{
parent.frames[1].pauseSong();
}
});
jQuery('.jp-interface .jp-pause').click(function(){
last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
var el = jQuery(this);
var href = el.attr('href');
if(href.substring(0,1)=='/'){
parent.location.href = parent.location.href + href.substring(1,href.length);
}
});
//]]>
</script>
I can't seem to play MP3s with jPlayer, only OGG. Any ideas? My custom code is below: Code: <script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){
Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
jQuery.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
jQuery(this.cssSelector.jPlayer).jPlayer(this.options);
jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
jQuery(this).blur();
return false;
});
jQuery(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
jQuery(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
jQuery(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
jQuery(this.cssSelector.playlist + " ul").append(listItem);
jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = jQuery(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
jQuery(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
jQuery(self.cssSelector.playlist + "_item_" + index).click();
jQuery(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
jQuery(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
},
supplied: "mp3",
addMedia: function(media){
this.playlist.push(media);
this.playlistNext();
}
};
});
var last_el='';
jQuery('.track .wrap .play').click(function(){
var cur_img = jQuery(this).css('backgroundImage');
if(cur_img.substring(cur_img.length-10)=='play.png")'){
if(last_el!=''){
last_el.css('background-image','url("img/play.png")');
}
var el = jQuery(this);
last_el = el;
parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
el.css('background-image','url("img/pause.png")');
}else{
parent.frames[1].pauseSong();
}
});
jQuery('.jp-interface .jp-pause').click(function(){
last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
var el = jQuery(this);
var href = el.attr('href');
if(href.substring(0,1)=='/'){
parent.location.href = parent.location.href + href.substring(1,href.length);
}
});
//]]>
</script>
Just so you know: this is not my idea, the person whose site this is wants a short blip sound played whenever you roll over the links in the sidebar. I know it's not advised, but she insists. So can anybody tell me how this is done? I've tried implementing a few scripts but no luck in Firefox or Chrome. Thanks. Been given a task to edit a simple javascript slide show to have form buttons This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle. Quote: <script type="text/javascript"> var hol_pics = new Array(); // Create Array Object for (var i=0;i<9;i=i+1) { hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects hol_pics[i].src="harbour"+i+".jpg"; // Preload Images } i=0; // 'Remember' original image displayed by img tag function next_photo() { i=i+1; if(i>8) i=0; // Increment image index but keep in range 0 - 8 // above 2 lines can be replaced by alternative code: i=(i+1)%9; document.images[0].src = hol_pics[i].src; // Display next image } function back_photo() { i=i-1; if(i<0) i=8; // Decrement image index but keep in range 0 - 8 // above 2 lines can be replaced by alternative code: i=(i-1+9)%9; document.images[0].src = hol_pics[i].src; // Display next image } //]]> </script> </head> <body> <h1>Basic Slide Show</h1> <p> <img src="harbour0.jpg" width="324" height="432" alt=></a> <form action=""> <input type="button" value="Previous" name="button" onclick="back_photo()" /> <input type="button" value="Next" name="button" onclick="next_photo()" /> </form> Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated. Page can be seen he test site Code for page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
font-family: Arial, sans-serif;
background: url(images/bg.gif) #FFF;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width:950px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
background:#fff;
border-left:1px solid #036;
border-right:1px solid #036;
}
#footer, #push {
clear:both;
width:950px;
height: 30px;
margin:0 auto;
background:#036;
font-size:11px;
text-align:center;
color:#FFF;
}
#push {
background:none;
}
/* Navigation */
#nav ul, #nav li {
display:inline;
list-style-type:none;
}
#nav li {
height:55px;
width:119px;
background:url(button.jpg);
display:block;
}
#nav a {
height:32px;
width:119px;
display:block;
text-decoration:none;
background:url(button.jpg);
}
#nav a:hover {
background:url(button.jpg);
background-position:0px 55px;
}
#nav span {
display:block;
padding-top:10px;
color:#000;
font-weight:bold;
text-align:center;
}
/* Picture Gallery */
#right {
width:400px;
height:100%;
position: absolute;
top: 0px;
left:500px;
}
#filler {
background:url(fish9.jpg) top center no-repeat;
border-bottom:1px solid #333;
display:inline;
width:400px;
height:300px;
text-align:center;
position: absolute;
top:0;
left:0;
}
#thumbs {
width:400px;
position: absolute;
top: 330px;
left:0;
}
#thumbs ul {
display:inline;
list-style-type:none;
}
#thumbs ul li {
width:92px;
height:69px;
float:left;
display:inline;
padding-left:6px;
padding-bottom:6px;
}
#thumbs ul li a {
text-decoration:none;
}
#thumbs a img {
border: none;
}
#thumbs ul li.extrapixels {
padding-left:7px;
}
#message {
width:400px;
float:left;
height:70px;
text-align:center;
position: absolute;
top: 300px;
left:0;
color:#333;
}
#bigDynPic {
width:400px;
height:300px;
text-align:center;
position: absolute;
top: 0px;
left:0;
}
#bigDynPic img {
border-bottom:1px solid #333;
display:block;
}
#bigDynPic p {
font-family:Verdana, Sans-serif;
font-weight:bold;
font-size:80%;
background:#fff;
color:#333;
margin:0;
padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
function dyngallery()
{
var picId='bigDynPic';
var loadingId='loadingmessage';
var d=document.getElementById('thumbs');
if(!d){return;}
if(!document.getElementById(loadingId))
{
var lo=document.createElement('div');
d.parentNode.insertBefore(lo,d);
lo.id=loadingId;
lo.style.display='none';
}
var piclinks=d.getElementsByTagName('a');
for(var i=0;i<piclinks.length;i++)
{
piclinks[i].onclick=function()
{
document.getElementById(loadingId).style.display='block';
var oldp=document.getElementById(picId);
if(oldp)
{
oldp.parentNode.removeChild(oldp);
}
var nc=document.createElement('div');
d.parentNode.insertBefore(nc,d);
nc.style.display='none';
nc.id=picId;
var newpic=document.createElement('img');
newpic.src=this.href;
newpic.alt=this.getElementsByTagName('img')[0].alt;
newpic.title='Click to return to images';
newpic.onload=function()
{
document.getElementById(loadingId).style.display='none';
}
newpic.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
nc.appendChild(newpic);
np=document.createElement('p');
np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
nc.appendChild(np);
nc.style.display='block';
return false;
}
}
}
window.onload=function()
{
if(document.getElementById && document.createTextNode)
{
document.body.onmouseover=function()
{
dyngallery();
}
}
}
// -->
</script>
<script type="text/javascript">
<!--
window.onload = initMenu;
function initMenu() {
var e=document.getElementById('nav');
var links=e.getElementsByTagName('A');
for(i=0; i < links.length; i++) {
var thisLink = links[i];
if(thisLink.parentNode.tagName == "LI"){
setActivity(thisLink);
}
}
}
function setActivity(thisLink){
thisLink.onmouseover = mouseOver;
thisLink.onmouseout = mouseOut;
}
function mouseOver() {
this.parentNode.style.background = 'url(button.jpg) 0px 55px';
return this;
}
function mouseOut() {
this.parentNode.style.background = 'url(button.jpg)';
return this;
}
// -->
</script>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Page1</span></a></li>
<li><a href="index.html"><span>Page2</span></a></li>
<li><a href="index.html"><span>Page3</span></a></li>
<li><a href="index.html"><span>Page4</span></a></li>
</ul>
<div id="right">
<div id="filler"> </div>
<div id="message">Click on thumbnail for larger picture</div>
<div id="thumbs">
<ul>
<li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
<li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
<li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
<li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
<li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
<li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
<li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
<li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
</ul>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p>© 2009</p>
</div>
</body>
</html>
Scripts would normally be external, I just put them in the page for now for simplicity. Thanks. this site plays music when you are there. how do they do it? Hello Friends, I have an <img> Tab to play a video(of type .wmv). The image tag is as follows: <img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838> Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop. How can I achieve the above requirement? Thanks. I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. |
|||||||