JavaScript - Jplayer Mp3 Issue
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 have the Jplayer.swf in multiple folders too to prevent path errors, but that still seems to not help. Anybody? Similar TutorialsI 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? 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> Hi I am trying to implement a scroll to DIV (i.e. smooth scrolling with some easing) on various events in jPlayer, a javascript audio playlist. Essentially the playlist is in a scrolling DIV with scrollbars and mousewheel scrolling, and when the track changes I would like it to trigger a scroll to the currently playing track, i.e. the new track, such that it is centred vertically in the DIV (which has a variable height). I thought I would start first with trying to add some code to the #jplayer_next event which usually looks like this: Code: $("#jplayer_next").click( function() { playListNext(); $(this).blur(); return false; }); I came up with the following code to add: Code: $("#jplayer_playlist").scrollTop($(".jplayer_playlist_current").offset().top); where #jplayer_playlist is the scrolling DIV and .jplayer_playlist_current is the class of the currently playing track. The code does do something, but I am seeing fairly nonsensical jumping around the div, which does seem somewhat related to the currently playing track, but certainly not what I am looking for. You can see the playlist here. The currently playing track is highlighted in green, and, when you click on the next button, the DIV certainly isn't scrolling smoothly to the currently playing track! If someone could help me amend the code to get this working properly I'd be grateful. Thanks, Nick I am using a javascript audio player on a webpage that has an option to download the track by right clicking on a link called 'mp3' at the end of each track in the playlist. When the user right clicks on the track name however all that can be downloaded is an html file. I am trying to find a way of changing this so that right clicking on the track and choosing the 'save link as' option will download the mp3. I have been led to believe that I can use a script such as this one: http://abeautifulsite.net/blog/2008/...-click-plugin/ to generate a custom content menu for downloading tracks, or somehow downloading the mp3, but I am at a loss at to how to do this. Here's a screenshot of a track in the playlist: And here is the source: Code: {name:"foster manganyi na tintsumi ta tilo - zion (ndzi teke riendzo no. 1) <span style=\"color:#BDBDA1; font-size:12px;\">[from nick]</span>",mp3:"./songs//nick/zion.mp3"} I would be grateful for any advice on getting this working, Thanks, Nick Freaking IE. Must die. Really it must. Unfortunately, I have to code for it, and I can't figure out what went wrong he http://wyqued-design.com/dev/skyview/index.html The navigation, and layout, breaks in IE 7. Any ideas? -Emilie I have the following sample html file (attached). I am trying to display the calculated field using javascript and I created a function (I am a newbie) to do so. However, it persistently shows NaN instead of the required number. I have tried my best over a coupla hours racking my brains and the internet as to why it shows as not a number. I will appreciate any help. Thanks, Can someone help tell me where i've gone wrong! My finished script works in all browser except IE in IE it works on some machines not others, if i put the finesed page in a Iframe on another site it works but not in the original URL and on my machine it works if i go directly to the URL however if i hit refresh it doesn't work until i go directly to the URL again! In developer tools it comes up with the following error: SCRIPT5022: DOM Exception: TYPE_MISMATCH_ERR (17) cgl.js, line 147 character 3 here is the script it is referring too! Please help!!! PHP Code: var CGL = {}; CGL.canvas = { DEFAULT_CONTEXT : "2d", DEFAULT_CANVAS_ID : "cglcanvas", CANVAS_CONTAINER : "", CANVAS_WIDTH : 300, CANVAS_HEIGHT : 200, TARGET_FPS : 60, setDefault : function(option, value){ CGL.canvas[option] = value; }, getDefault : function(option){ return CGL.canvas[option]; }, /** * @method createCanvas(id, width, height) * @param id : sets the CANVAS_CONTAINER * @param width : sets the CANVAS_WIDTH * @param height : sets the CANVAS_HEIGHT * * Creates a <canvas> element that will be used as the main graphics container for the game! */ createCanvas : function(id, width, height){ var canvas = document.createElement("canvas"); CGL.canvas.CANVAS_WIDTH = width; CGL.canvas.CANVAS_HEIGHT = height; CGL.canvas.CANVAS_CONTAINER = id; canvas.setAttribute("width", width); canvas.setAttribute("height", height); canvas.style.borderColor = "black"; canvas.style.borderStyle = "solid"; canvas.style.borderWidth = "1px"; canvas.setAttribute("id", CGL.canvas.DEFAULT_CANVAS_ID); document.getElementById(id).appendChild(canvas); var elem = document.createElement("div"); elem.setAttribute("id", "status"); elem.style.width = width + "px"; elem.style.height = "120px"; elem.style.overflowY = "scroll"; elem.style.borderColor = "black"; elem.style.borderStyle = "solid"; elem.style.borderWidth = "1px"; elem.style.color = "black"; elem.style.backgroundColor = "white"; elem.style.display = "none"; document.getElementById(id).appendChild(elem); }, /** * @method getContext() * * Returns the graphic context as chosen by the DEFAULT_CONTEXT global. */ getContext : function(){ var canvas = document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID); return canvas.getContext(CGL.canvas.DEFAULT_CONTEXT); } }; CGL.image = { IMAGE_ID : 0, DEFAULT_IMAGECONT_ID : "imgcont", createImageContainer : function() { var div = document.createElement("div"); div.setAttribute("id", CGL.image.DEFAULT_IMAGECONT_ID); div.style.display = "none"; document.body.appendChild(div); }, load : function(src, id){ var img = document.createElement("img"); img.setAttribute("src", src); img.setAttribute("id", id); img.setAttribute("onload", "notifyLoaded(" + id + ")"); document.getElementById(CGL.image.DEFAULT_IMAGECONT_ID).appendChild(img); }, Image : function(source, uid, srcx, srcy){ var img = { id : uid, x : srcx, y : srcy }; CGL.image.load(source, uid); return img; }, render : function(ctx, img){ ctx.drawImage(document.getElementById(img.id), img.x, img.y); }, renderAt : function(ctx, imgid, x, y){ ctx.drawImage(document.getElementById(imgid), x, y); }, renderPart : function(ctx, imgid, srcx, srcy, srcwidth, srcheight, destx, desty, destwidth, destheight){ ctx.drawImage(document.getElementById(imgid), srcx, srcy, srcwidth, srcheight, destx, desty, destwidth, destheight); } }; CGL.sprite = { Sprite : function(frames, time){ var sprite = { active : true, speed : time || 500, activeFrame : 0, maxFrames : frames.length - 1, images : frames, timeCount : 0, loop : true, nextFrame : function(){ sprite.activeFrame += 1; if(sprite.activeFrame > sprite.maxFrames) { if(sprite.loop) { sprite.activeFrame = 0; } else { sprite.activeFrame = 0; sprite.active = false; } } }, setSpeed : function(time){ sprite.speed = time; }, setLoop : function(looping){ sprite.loop = looping; }, setActiveFrame : function(actFrame){ sprite.activeFrame = actFrame; }, stop : function(){ sprite.active = false; }, start : function(){ sprite.active = true; }, replay : function(){ sprite.activeFrame = 0; sprite.active = true; }, update : function(time){ if(sprite.active) { sprite.timeCount += time; } if(sprite.timeCount > sprite.speed) { sprite.nextFrame(); sprite.timeCount = 0; } }, render : function(ctx, x, y){ ctx.drawImage(document.getElementById(sprite.images[sprite.activeFrame]), x, y); } }; return sprite; } }; CGL.resource = { RESOURCES : 0, loadImages : function(xml){ var image, elem, i; var img = new Array(); var imgsrc, imgid; xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ image = xmlhttp.responseXML.documentElement.getElementsByTagName("image"); for(i = 0; i < image.length; i++){ elem = image[i].getElementsByTagName("src"); try{ imgsrc = elem[0].firstChild.nodeValue; } catch(er){ } elem = image[i].getElementsByTagName("id"); try{ imgid = elem[0].firstChild.nodeValue; } catch(er){ } CGL.image.load(imgsrc, imgid); img[i] = imgid; CGL.resource.RESOURCES++; CGL.util.printLn("Loaded Image: " + imgsrc + " With ID: " + imgid); } } }; xmlhttp.open("GET",xml,false); xmlhttp.send(); return img; } }; CGL.highscore = { highscore : function(url, posts) { var highScore = { name : new Array(posts), score : new Array(posts), level : new Array(posts), size : posts, getHighScore : function() { highScore.size = 10; xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var string = xmlhttp.responseText; var list = eval( "(" + string + ")" ); for(i = 0; i < list.length; i++){ highScore.name[i] = list[i].name; highScore.score[i] = list[i].score; highScore.level[i] = list[i].level; } highScore.size = list.length; } } xmlhttp.open("GET",url + "?action=get&posts=" + highScore.size ,false); xmlhttp.send(); }, recordHighScore : function(name, level, score) { xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { CGL.util.printLn(xmlhttp.responseText); } } xmlhttp.open("GET",url + "?action=put&name=" + name + "&score=" + score + "&level=" + level ,false); xmlhttp.send(); }, reInit : function() { for(var i = 0; i < highScore.size; i++) { delete highScore.name[highScore.size-i]; delete highScore.score[highScore.size-i]; delete highScore.level[highScore.size-i]; } } }; return highScore; } }; CGL.ajax = { _createXHR : function() { try { return new XMLHttpRequest(); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} return null; } }; CGL.util = { MESSAGE_ID : 0, LASTUPDATE : 0, UPDATE_RPS : 40, printLn : function(message) { var elem = document.createElement("p"); elem.setAttribute("id", CGL.util.MESSAGE_ID); document.getElementById("status").appendChild(elem); document.getElementById(CGL.util.MESSAGE_ID).innerHTML = CGL.util.MESSAGE_ID + " : " + message; CGL.util.MESSAGE_ID++; }, gameTimer : function() { delta = new Date(); if(delta.getTime() > CGL.util.LASTUPDATE + 1000/CGL.util.UPDATE_RPS) { CGL.util.LASTUPDATE = delta.getTime(); return true; } else return false; }, }; CGL.math = { Vector2 : function(vx, vy) { var Vector2 = { x : vx || 0.0, y : vy || 0.0, interpolate : function(a_vec, b_vec, a_f){ return a_vec.mul(a_f).add(b_vec.mul(1-a_f)); }, mul : function(other){ Vector2.x *= other.x; Vector2.y *= other.y; }, mulScale : function(scale) { Vector2.x *= scale; Vector2.y *= scale; }, sub : function(other) { Vector2.x -= other.x; Vector2.y -= other.y; }, add : function(other) { Vector2.x += other.x; Vector2.y += other.y; }, div : function(other) { Vector2.x /= other.x; Vector2.y /= other.x; }, divScale : function(scale) { Vector2.x /= scale; Vector2.y /= scale; }, scale : function(a_f, a_g){ return new CGL.math.Vector2d(a_f * Vector2d.m_x, a_g * Vector2d.m_y); }, dot : function(other) { return ((Vector2.x * other.x) + (Vector2.y * other.y)); }, neg : function() { return new CGL.math.Vector2(-Vector2.x, -Vector2.y); }, normalize : function() { var l = Vector2.length(); if(l == 0){ return; } Vector2.x /= l; Vector2.y /= l; }, lengthSquared : function() { return (Vector2.x * Vector2.x) + (Vector2.y * Vector2.y); }, length : function() { return Math.sqrt(Vector2.lengthSquared()); }, toString : function() { return "[Vector (" + Vector2.x + ", " + Vector2.y + ")]"; }, copy : function(other) { Vector2.x = other.x; Vector2.y = other.y; }, draw : function(ctx) { /* Convert to Local space */ var lx, ly; if(Vector2.x < 0.0) { lx = (-Vector2.x * -50) + 200; } else { lx = (Vector2.x * 50) + 200; } if(Vector2.y > 0.0) { ly = (Vector2.y * -50) + 200; } else { ly = (-Vector2.y * 50) + 200; } ctx.beginPath(); ctx.arc(lx, ly, 2, 0, Math.PI*2, true); // Outer circle ctx.fill(); } }; return Vector2; }, getNormal : function(vx, vy) { var n = new CGL.math.Vector2(vy.x, vy.y); n.sub(vx); n = new CGL.math.Vector2(n.y, -n.x); n.normalize(); return n; } }; CGL.ui = { Button : function(imgs, srcx, srcy, srcwidth, srcheight) { var button = { images : imgs, x : srcx, y : srcy, width : srcwidth, height : srcheight, active : false, clicked : false, update : function(mx, my, mb) { if(mx > button.x && mx < button.x + button.width && my > button.y && my < button.y + button.height) { button.active = true; } else { button.active = false; } if(button.active && mb) { button.clicked = true; } }, activated : function() { return button.clicked; }, deactivate : function() { button.clicked = false; }, render : function(ctx) { if(!button.active) { ctx.drawImage(document.getElementById(button.images[0]), button.x, button.y); } else { ctx.drawImage(document.getElementById(button.images[1]), button.x, button.y); } } }; return button; } }; CGL.event = { MOUSEX : 0, MOUSEY : 0, KLEFT : false, KRIGHT : false, KDOWN : false, KUP : false, KSPACE : false, KPAUSE : false, CLICKED : false, ACTIVEGAMEKEY : true, handleEventMovement : function(e) { CGL.event.getCursorPosition(e); }, handleEventClick : function(e) { CGL.event.CLICKED = true; }, clearEvents : function() { CGL.event.KLEFT = false; CGL.event.KRIGHT = false; CGL.event.KDOWN = false; CGL.event.KUP = false; CGL.event.KSPACE = false; CGL.event.KPAUSE = false; CGL.event.CLICKED = false; }, handleEventKey : function(e) { if(CGL.event.ACTIVEGAMEKEY) { e.stopPropagation(); e.preventDefault(); } switch(e.keyCode) { case 19: CGL.event.KPAUSE = true; break; case 32: CGL.event.SPACE = true; CGL.util.printLn("Space was triggered!"); break; case 37: CGL.event.KLEFT = true; break; case 38: CGL.event.KUP = true; break; case 39: CGL.event.KRIGHT = true; break; case 40: CGL.event.KDOWN = true; break; case 65: CGL.event.KLEFT = true; CGL.util.printLn("Left was triggered!"); break; case 87: CGL.event.KUP = true; CGL.util.printLn("Up was triggered!"); break; case 68: CGL.event.KRIGHT = true; CGL.util.printLn("Right was triggered!"); break; case 80: CGL.event.KPAUSE = true; break; case 83: CGL.event.KDOWN = true; CGL.util.printLn("Down was triggered!"); break; default: break; }; }, getCursorPosition : function(e) { if (e.pageX != undefined && e.pageY != undefined) { CGL.event.MOUSEX = e.pageX; CGL.event.MOUSEY = e.pageY; } else { CGL.event.MOUSEX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; CGL.event.MOUSEY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } CGL.event.MOUSEX -= document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID).offsetLeft; CGL.event.MOUSEY -= document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID).offsetTop; } }; I have a big issue. I am doing this: I have a menu and when you click tje linsk it loads content using jquery post into a div. It alway loads javascript with it. But I find when they click another menu item it loads a different section into the div along with different javascript. But the dom is still keeping the old javascript. After about 40 clicks the site wants to stop working. How can I resolve this? Thanks I have created a quick little pricing engine to price some of the products that we sell. I was able to use a nice template online and it worked for most of what we offer. However, I needed to add a few filters and while doing so, needed to tweak the JS even further than I was originally comfortable with doing. Long story short, here is the main pricing page - www.pricemyleads.com - and this is the page in question as of now - www.pricemyleads.com/taxaged.html The js file for this page is - http://www.pricemyleads.com/js/taxag...alculations.js Any help is greatly appreciated. You'll see the issue when you start clicking on the check boxes. Thanks, brmacdon Hi I am new here and also to java Any help you can give me would be gratefuly appreciated as I feel I am being very dumb over what should be a simple fix. The following code is working accept for the part where the original image (Main Image) is replaced with either Image1/Image2 when mouse over occurs but wont revert back to its original image (MainImage) once onmouseout? There-in lies my problem: Code: <body> <tr> <!-- <td><table width="100%" bgcolor="#b0b0b0" border="0" cellpadding="10" cellspacing="1"> --> <tbody><tr> <td bgcolor="#ffffff"> <table width="86%" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <script language="JavaScript" type="text/javascript"> function fda(pic){ document.getElementById("PicViewer").src=pic; } </script> </table> <div align="center"> <table border="0" cellPadding="0" width="950" height="650" style="border-collapse: collapse" bordercolor="#111111"> <tr> <td width="15" bgcolor="#111111" height="542" rowspan="3"> <p align="center"> </td> <td bgcolor="#405E76" height="650" colspan="9" background="http://www.mypersonalpage.talktalk.net/ebay/Webpage/polaroid.jpg" valign="top"> <p align="center"> <img src="http://i99.photobucket.com/albums/l290/big_poppa_duke/mainimg.png" class="biankuang2" id="PicViewer" border="0" width="640" height="480" vspace="55" hspace="0"></td> <td width="15" bgcolor="#111111" height="542" rowspan="3"> </td> </tr> <tr> <td width="15" bgcolor="#405E76" height="80"> </td> <td width="121" bgcolor="#405E76" align="center"> </td> <td width="145" bgcolor="#405E76" align="center"> </td> <td width="145" bgcolor="#405E76" align="center"> <img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img2.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td> <td bgcolor="#405E76" align="center" width="145"> </td> <td width="145" bgcolor="#405E76" align="center"> <img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img3.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td> <td width="145" bgcolor="#405E76" align="center"> </td> <td width="121" bgcolor="#405E76" align="center"> </td> <td width="14" bgcolor="#405E76"> </td> </tr> </table> P.s something I found strange when loading my page it seems to load twice with a defining click. Very annoying and wonder if it's possible to remove that bit too. Thank you very much for any help. hey guys im not quite sure how to explain this but i have a installed something called "hostpay" if any of you are familular with is, its on an client management system which has everything in it using ruby which was created by my provider. in it has a domain search and to use the domain search i use this code Code: <form method='get' action='http://www.nandahosting.co.uk/manage/dac' onsubmit="return check_domain_input()" accept-charset='utf-8'> <input type="text" name="domain" value="Domain Name Search..." onclick="this.value='';"/> <input name="search" type="submit" class="btn" value="" /> </form> but it will only work if you use that code inside the hostpay template files which was created by my provider. the hostpay is installed to a directory called "manage" What i am trying to do is to get a domain search box to work outside the hostpay folder(sent the information accross to the hostpay template, whatever is typed in the domain search box then search for the domain) i know this is possible as i have seen other people do it but not sure how to do it myself. for examlpe: www.pixelinternet.co.uk/domain-names.html (they have a domain box on that page which transferes it over, they have hostpay installed to a directory called "piXel") how do i alter the code i put on here to do what i want it to do? thankyou very much So I have a search function that searches through an XML file depending on which criteria the user wants to search. It works great so far in Firefox, OK in IE and not at all in Chrome. There's only one problem I have with IE which is you have to click submit, you cant hit the enter key to search. Is this fixable? Ive tried writing a function where if it detects the enter key press, it "clicks" submit, but that didn't work. In chrome, I search for something but it says there's nothing to be found. My code is below and any help or a point in the right direction would be greatly appreciated. Code: <script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } function getType() { for (var i=0; i < 3; i++) { if (document.frmMain.criteria[i].checked) { var rad_val = document.frmMain.criteria[i].value; } } return rad_val; } window.onload = loadIndex; function loadIndex() { // load indexfile // most current browsers support document.implementation if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.load("wdparts.xml"); } // MSIE uses ActiveX else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("wdparts.xml"); } } function searchIndex() { // search the index (duh!) if (!xmlDoc) { loadIndex(); } // get the search term from a form field with id 'searchme' var searchterm = document.getElementById("searchme").value; var searchtype = getType(); var allitems = xmlDoc.getElementsByTagName("item"); results = new Array; if (searchterm.length < 3) { alert("Enter at least three characters"); } else { // see if the XML entry matches the search term, // and (if so) store it in an array \ for (var i=0;i<allitems.length;i++) { var name = allitems[i].getAttribute(searchtype); var exp = new RegExp(searchterm,"i"); if ( name.match(exp) != null) { results.push(allitems[i]); } } // send the results to another function that displays them to the user showResults(results, searchterm); } } // Write search results to a table function showResults(results, searchterm) { if (results.length > 0) { // if there are any results, write them to a table var reout = 'You searched for <b><i>'+searchterm+'</i></b><br><br>'; reout += '<table border="1" style="width: 100%;">'; reout += '<tr><th>Manufacturer</th><th>Product Number</th><th>Description</th><th>Link</th></tr>'; for(var i=0; i<results.length; i++) { reout += '<tr>'; reout += '<td>' + results[i].getAttribute("line") + '</td>'; reout += '<td>' + results[i].getAttribute("pnum") + '</td>'; reout += '<td>' + results[i].getAttribute("description") + '</td>'; reout += '<td>' + results[i].getAttribute("link") + '</td>'; reout += '</tr>'; } reout += '<table>'; document.getElementById('test').innerHTML = reout; } else { // else tell the user no matches were found alert('No results found for '+searchterm+'!'); } } </script> Code: <p><form name="frmMain" id="frmMain" action=""> <b>Search by: </b> <input type="radio" name="criteria" value="line" checked="checked">Manufacturer <input type="radio" name="criteria" value="pnum">Product Number <input type="radio" name="criteria" value="description">Description <br><br> <input id="searchme" type="text" size="20"> <input value="Search" id="btnSearch" onclick="searchIndex(); return false;" type="submit"> </form></p> <p id = "test"></p> </div> EDIT: I also noticed that if i have a description like "Aluminum painted brush", I can search single words("aluminum" or "brush"), or words next to each other ("aluminum painted" or "painted brush") but I cant search separate words like "aluminum brush" and have it return the item because their is another word between the two. How would I edit it so that I can return the item? Quote: Hi, below code is only working in Firefox but not in Internet Explorer. Once I select YES from drop down list, then the next text box should be greyed out and the second should show value 10. This works in Firefox but not in Firefox . Code: <html> <head> <title>Untitled</title> <script> function enable() { document.myForm.textbox.disabled = false; document.myForm.textbox2.value = 0; } function disable() { document.myForm.textbox.disabled = true; document.myForm.textbox2.value = 10; } function value() { document.myForm.textbox2.value = 10; } </script> </head> <body> <form name="myForm"> <table> <tr> <label> Do you accept </label> <td> <select name="na"> <option value="yes" onclick="disable()"> YES </option> <option value="no" onclick="enable()"> NO </option> <option value="NA" onclick="disable()"> NA </option> </select> <input type="text" name="textbox" value="" disabled> <input type="text" name="textbox2" value="10" > </td> </tr> <tr> <td> </td> </tr> </form> </body> </html> hi, i have a problem with innerHTML if i wrote document.getElementById('someid').innerHTML = "ok"; then it wroks but when i wrote document.getElementById('someid').innerHTML = "<sometext> ok"; it does not work. i.e. <sometext> is not visible if check on firebug / dom it display.. <sometext> ok </sometext> please help.. how do i print / display above string as it as. you may download file or check below link.. please click here Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse. For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated Code: <script type = "text/javascript"> function dIM(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function dateDifference(birthdate1, birthdate2) { var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(), year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate(); if (day1 < day2){ month1--; day1 += dIM (year2, month2);day }; if (month1 < month2) { year1--; month1 += 12; } return [year1 - year2, month1 - month2, day1 - day2]; } function ageCalculator() { var day = document.age.inputdate.value; var month = (document.age.inputmonth.value - 1); var year = document.age.inputyear.value; var now = new Date(); thisday = now.getDate(); thismonth = now.getMonth(); thisyear = now.getFullYear(); var first = new Date(thisyear, thismonth - 1, thisday); var second = new Date(year, month - 1, day); var yourage; var datediff; if (day == "" || month == "" || year == "") { alert ("Please fill in all of the boxes before getting your age"); } else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year))) { alert ("Please only enter digits in the day, month or year boxes"); return false; } datediff = dateDifference(first,second); if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;} yourage = thisyear-year; var next = parseInt(year)+datediff[0]+1; var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0); var daysleft = difference/1000/60/60/24; document.age.daysremaining.value = daysleft+" days left for your next birthday"; document.age.ageoutput.value = yourage; } function clear(form){ form.Result.value = ""; } </script> <center> <p> <form name = age> <p>Day of birth <input type="text" id="inputdate" size="2"><br/> Month of birth <input type="text" id="inputmonth" size="2"><br/> Year of birth <input type="text" id="inputyear" size="4" ><br/> <input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/> <input type="reset" name="Reset" id="button" value="Reset" /> </p> <p> You are <input type = "text" name = "ageoutput" size = "4" value = "0"> years old <input type = "text" name = "daysremaining" value = "0" /> </p> </form> I had someone develop the javascript code to randomize the ads on my website: VillageOfManito dotcom and it worked great for many years. The ads were all contained in the left hand column which were called into the page via ASP code. Now I've been asked to split the ads into two columns, but when I divided the code and ads, the randomizer broke. See: VillageOfManito dotcom /template.asp You can also view the code for the columns he VillageOfManito dotcom /left_column.htm VillageOfManito dotcom /right_column.htm when I call up the individual columns (htm/javascript pages) by themselves, the randomizer works fine. the "break" occurs when the asp page is opened, where the 2 htm/javascript pages are called into the main page... are they causing conflict with each other? I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox. Here's the relevant parts of the code: Javascript (in an external file) Code: var body = document.body; body.addEventListener("load", Foo(), false); function Foo(){ addEventListener(document.getElementsByName("start"),"click", alert("hello"), false); } HTML Code: <html> <head> <title>BREAKOUT!</title> <script src="breakout.js" type="text/Javascript" > </script> <LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css"> </head> <body id="body"> <!-- etc.... --> I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines. I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/# |