Databases
StackOverflow2013
Postsdbo
POCode is Working on Fiddle but not on Website
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCode is Working on Fiddle but not on Website
    primarykey
    data
    text
    <p>This is working fine on Fiddle, but not so fine on my site. I can't seem to figure out the difference.</p> <p>I've already tried removing the whole Videobox inclusion, and that didn't fix it. </p> <p>I also realize that jQuery and Mootools is a bit much, but I really like the Videobox, and I really like the audio player. </p> <p>As far as things working on my site, everything works the way it should, except for the second function in my javascript.</p> <p><strong>Here's the Fiddle:</strong> <a href="http://jsfiddle.net/HM8m7/4/" rel="nofollow">http://jsfiddle.net/HM8m7/4/</a></p> <p><strong>My Site's HTML:</strong></p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Music&lt;/title&gt; &lt;script type="text/javascript" src="videobox/js/mootools.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="videobox/js/swfobject.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="videobox/js/videobox.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" /&gt; &lt;link rel="stylesheet" href="libs/css/styles.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="src/jquery.ubaplayer.js"&gt;&lt;/script&gt; &lt;script&gt; jQuery.noConflict(); jQuery(function () { jQuery("#ubaPlayer").ubaPlayer({ codecs: [{ name: "MP3", codec: 'audio/mpeg;' }] }); }); jQuery('a[rel=vidbox]').click(function () { if (jQuery("#ubaPlayer").ubaPlayer("playing") === true) { jQuery("#ubaPlayer").ubaPlayer("pause"); } return false; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content_wrapper"&gt; &lt;div id="table_container"&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Title&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;div id="ubaPlayer"&gt;&lt;/div&gt; &lt;ul class="controls"&gt; &lt;a href="http://www.youtube.com/v/2sAnENc6ObI&amp;autoplay=1" rel="vidbox" title="The Rainbox Connection - Live at the Berklee Performance Center"&gt;&lt;img src="playbtn.png" class="fakeplay" alt="Play Button"&gt;The Rainbow Connection (Video)&lt;/a&gt; &lt;ul class="controls"&gt; &lt;li&gt;&lt;a class="audioButton" href="mp3/closetoyou.mp3"&gt; Close to You&lt;/a&gt;&lt;/li&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Audio Player Script:</strong></p> <pre><code>(function($) { var defaults = { audioButtonClass: "audioButton", autoPlay: null, codecs: [{ name: "OGG", codec: 'audio/ogg; codecs="vorbis"' }, { name: "MP3", codec: 'audio/mpeg' }], continuous: false, extension: null, flashAudioPlayerPath: "libs/swf/player.swf", flashExtension: ".mp3", flashObjectID: "audioPlayer", loadingClass: "loading", loop: false, playerContainer: "player", playingClass: "playing", swfobjectPath: "libs/swfobject/swfobject.js", volume: 1 }, currentTrack, isPlaying = false, isFlash = false, audio, $buttons, $tgt, $el, playTrack, resumeTrack, pauseTrack, methods = { play: function(element) { $tgt = element; currentTrack = _methods.getFileNameWithoutExtension($tgt.attr("href")); isPlaying = true; $tgt.addClass(defaults.loadingClass); $buttons.removeClass(defaults.playingClass); if (isFlash) { if (audio) { _methods.removeListeners(window); } audio = document.getElementById(defaults.flashObjectID); _methods.addListeners(window); audio.playFlash(currentTrack + defaults.extension); } else { if (audio) { audio.pause(); _methods.removeListeners(audio); } audio = new Audio(""); _methods.addListeners(audio); audio.id = "audio"; audio.loop = defaults.loop ? "loop" : ""; audio.volume = defaults.volume; audio.src = currentTrack + defaults.extension; audio.play(); } }, pause: function() { if (isFlash) { audio.pauseFlash(); } else { audio.pause(); } $tgt.removeClass(defaults.playingClass); isPlaying = false; }, resume: function() { if (isFlash) { audio.playFlash(); } else { audio.play(); } $tgt.addClass(defaults.playingClass); isPlaying = true; }, playing: function() { return isPlaying; } }, _methods = { init: function(options) { var types; //set defaults $.extend(defaults, options); $el = this; //listen for clicks on the controls $(".controls").bind("click", function(event) { _methods.updateTrackState(event); return false; }); $buttons = $("." + defaults.audioButtonClass); types = defaults.codecs; for (var i = 0, ilen = types.length; i &lt; ilen; i++) { var type = types[i]; if (_methods.canPlay(type)) { defaults.extension = [".", type.name.toLowerCase()].join(""); break; } } if (!defaults.extension || isFlash) { isFlash = true; defaults.extension = defaults.flashExtension; } if (isFlash) { $el.html("&lt;div id='" + defaults.playerContainer + "'/&gt;"); $.getScript(defaults.swfobjectPath, function() { swfobject.embedSWF(defaults.flashAudioPlayerPath, defaults.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, { id: defaults.flashObjectID }, _methods.swfLoaded); }); } else { if (defaults.autoPlay) { methods.play(defaults.autoPlay); } } }, updateTrackState: function(evt) { $tgt = $(evt.target); if (!$tgt.hasClass("audioButton")) { return; } if (!audio || (audio &amp;&amp; currentTrack !== _methods.getFileNameWithoutExtension($tgt.attr("href")))) { methods.play($tgt); } else if (!isPlaying) { methods.resume(); } else { methods.pause(); } }, addListeners: function(elem) { $(elem).bind({ "canplay": _methods.onLoaded, "error": _methods.onError, "ended": _methods.onEnded }); }, removeListeners: function(elem) { $(elem).unbind({ "canplay": _methods.onLoaded, "error": _methods.onError, "ended": _methods.onEnded }); }, onLoaded: function() { $buttons.removeClass(defaults.loadingClass); $tgt.addClass(defaults.playingClass); audio.play(); }, onError: function() { $buttons.removeClass(defaults.loadingClass); if (isFlash) { _methods.removeListeners(window); } else { _methods.removeListeners(audio); } }, onEnded: function() { isPlaying = false; $tgt.removeClass(defaults.playingClass); currentTrack = ""; if (isFlash) { _methods.removeListeners(window); } else { _methods.removeListeners(audio); } if (defaults.continuous) { var $next = $tgt.next().length ? $tgt.next() : $(defaults.audioButtonClass).eq(0); methods.play($next); } }, canPlay: function(type) { if (!document.createElement("audio").canPlayType) { return false; } else { return document.createElement("audio").canPlayType(type.codec).match(/maybe|probably/i) ? true : false; } }, swfLoaded: function() { if (defaults.autoPlay) { setTimeout(function() { methods.play(defaults.autoPlay); }, 500); } }, getFileNameWithoutExtension: function(fileName) { //this function take a full file name and returns an extensionless file name //ex. entering foo.mp3 returns foo //ex. entering foo returns foo (no change) var fileNamePieces = fileName.split('.'); fileNamePieces.pop(); return fileNamePieces.join("."); } }; $.fn.ubaPlayer = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { return _methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jquery.ubaPlayer"); } };})(jQuery); </code></pre> <p><strong>Videobox Script:</strong></p> <pre><code>var Videobox = { init: function (options) { // init default options this.options = Object.extend({ resizeDuration: 400, // Duration of height and width resizing (ms) initialWidth: 250, // Initial width of the box (px) initialHeight: 250, // Initial height of the box (px) defaultWidth: 625, // Default width of the box (px) defaultHeight: 350, // Default height of the box (px) animateCaption: true, // Enable/Disable caption animation flvplayer: 'swf/flvplayer.swf' }, options || {}); this.anchors = []; $A($$('a')).each(function(el){ if(el.rel &amp;&amp; el.href &amp;&amp; el.rel.test('^vidbox', 'i')) { el.addEvent('click', function (e) { e = new Event(e); e.stop(); this.click(el); }.bind(this)); this.anchors.push(el); } }, this); this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body); this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body); this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body); this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer); new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this); this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom); this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom); new Element('div').setStyle('clear', 'both').injectInside(this.bottom); var nextEffect = this.nextEffect.bind(this); this.fx = { overlay: this.overlay.effect('opacity', {duration: 500}).hide(), center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}), bottom: this.bottom.effect('margin-top', {duration: 400}) }; }, click: function(link) { return this.open (link.href, link.title, link.rel); }, open: function(sLinkHref, sLinkTitle, sLinkRel) { this.href = sLinkHref; this.title = sLinkTitle; this.rel = sLinkRel; this.position(); this.setup(); this.video(this.href); this.top = Window.getScrollTop() + (Window.getHeight() / 15); this.center.setStyles({top: this.top+'px', display: ''}); this.fx.overlay.start(0.8); this.step = 1; this.center.setStyle('background','#fff url(loading.gif) no-repeat center'); this.caption.innerHTML = this.title; this.fx.center.start({'height': [this.options.contentsHeight]}); }, setup: function(){ var aDim = this.rel.match(/[0-9]+/g); this.options.contentsWidth = (aDim &amp;&amp; (aDim[0] &gt; 0)) ? aDim[0] : this.options.defaultWidth; this.options.contentsHeight = (aDim &amp;&amp; (aDim[1] &gt; 0)) ? aDim[1] : this.options.defaultHeight; }, position: function(){ this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'}); }, video: function(sLinkHref){ if (sLinkHref.match(/youtube\.com\/watch/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('='); this.videoID = videoId[1]; this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/metacafe\.com\/watch/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('/'); this.videoID = videoId[4]; this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/google\.com\/videoplay/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('='); this.videoID = videoId[1]; this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&amp;hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/ifilm\.com\/video/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('video/'); this.videoID = videoId[1]; this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000"); this.so.addVariable("flvbaseclip", this.videoID+"&amp;"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/\.mov/i)) { this.flash = false; if (navigator.plugins &amp;&amp; navigator.plugins.length) { this.other ='&lt;object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"&gt;&lt;param name="src" value="'+sLinkHref+'" /&gt;&lt;param name="scale" value="aspect" /&gt;&lt;param name="controller" value="true" /&gt;&lt;param name="autoplay" value="true" /&gt;&lt;param name="bgcolor" value="#000000" /&gt;&lt;param name="enablejavascript" value="true" /&gt;&lt;/object&gt;'; } else { this.other = '&lt;object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"&gt;&lt;param name="src" value="'+sLinkHref+'" /&gt;&lt;param name="scale" value="aspect" /&gt;&lt;param name="controller" value="true" /&gt;&lt;param name="autoplay" value="true" /&gt;&lt;param name="bgcolor" value="#000000" /&gt;&lt;param name="enablejavascript" value="true" /&gt;&lt;/object&gt;'; } } else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) { this.flash = false; this.other = '&lt;object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"&gt;&lt;param NAME="URL" VALUE="'+sLinkHref+'"&gt;&lt;param&gt;&lt;param NAME="AUTOSTART" VALUE="false"&gt;&lt;/param&gt;&lt;param name="showControls" value="true"&gt;&lt;/param&gt;&lt;embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"&gt;&lt;/embed&gt;&lt;/object&gt;' } else if (sLinkHref.match(/\.flv/i)) { this.flash = true; this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000"); } else { this.flash = true; this.videoID = sLinkHref; this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); } }, nextEffect: function(){ switch (this.step++){ case 1: this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]}); break; this.step++; case 2: this.center.setStyle('background','#fff'); this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ; this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''}); if (this.options.animateCaption){ this.fx.bottom.set(-this.bottom.offsetHeight); this.bottomContainer.style.height = ''; this.fx.bottom.start(0); break; } this.bottomContainer.style.height = ''; this.step++; } }, close: function(){ this.fx.overlay.start(0); this.center.style.display = this.bottomContainer.style.display = 'none'; this.center.innerHTML = ''; return false; }};window.addEvent('domready', Videobox.init.bind(Videobox)); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USpianoman
    1. USpianoman
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. USpianoman
      1. VTFavorite
    1. COany error in the console
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. USArun P Johny
    2. COtry this, write the javascript with in this function. $(document).ready(function() { //your jquery script });
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. USRaj Adroit
    3. CO@ArunPJohny: No errors at all.
      singulars
      1. POCode is Working on Fiddle but not on Website
      1. USpianoman
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload