JavaScript - Need Help Getting 2 Scripts To Play Nicely Together
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. Similar TutorialsIs possible to call cgi scripts from javascript scripts?
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> 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. 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. 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. this site plays music when you are there. how do they do it? 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. 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> 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. Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. Thanks . 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? 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> Hi Everyone I don't have a clue what i'm doing with this and don't expect someone to just give me the code if it is actually possible (although it would be nice). I've created a site and in the admin area the page will update and tell me if there is a new message from a user, I have this page automatically refreshing every 5 minutes and wondered if it's possible to play a sound file if the term "unread" appears anywhere on the page? Thanks for any help you can provide. I have a list of videos on one side of my page and a larger player in the main content column on the left. how can i click a video on the right and have it play in the big player on the left? image URL (in case it doesnt show in the post) http://mydomainsample.com/tims/ScreenShot.png also i would prefer to do this with links to youtube/vimeo rather than putting video files on my server. I'm trying to make a website where when certain keys are pressed, (in this example the key can be "a") it triggers an image change and plays a sound that loops at the same time. Is this possible? I also wanted to have a function where if you click a certain area it changes the sounds for each key to a different one. Should the whole script be nested within an if else statement where if that function is clicked, it causes the sounds to be the second set and if it isn't, they play as the normal set? I'd also prefer to not use HTML5 audio tags if possible.
I have created a webpage using wordpress for a customer, he wants an embedded video to be played every time a visitor comes to the websites. i did it in the beginning with you tube and it was easy but he is hosting his videos in a lame company and no matter what i try, i am not able to make the video play on load, guys can you please help me with this. here is an example of embed code from that website <object id="player" width="550" height="380" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ><param name="movie" value="http://www.videozer.com/embed/RLyPu" ></param><param name="allowFullScreen" value="true" ></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.videozer.com/embed/RLyPu" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="550" height="380"></embed></object> I am doing a program to teach pre-schoolers on how to use the keyboard. If there any possible if I press the arrow up key, It will then show a excellent swf, that I have make. if wrong if will come out try again swf using javascript. please help me. im stuck. |