2011-04-19 29 views
1

問題jQuery的原理上的jsfiddle但不是在活頁

有趣的,可能有一個簡單的解決方案。在@jessegavin的幫助下,我在頁面上添加了一個jQuery函數,用於控制頁面上HTML5音頻元素的播放。代碼很漂亮,並且可以在jsFiddle上正常工作,但是在放入我的頁面上下文中時無法正常工作。

我已經把時間拋向風,有條不紊地逐步試圖隔離我的錯誤,但無濟於事。真的,我去亞里士多德這一個,並運用科學的方法。請原諒我這個問題的重要性。這真是我的最後一招。

細節問題

這裏是我的發現:所有的JavaScript函數在的jsfiddle的背景下,頁面正常工作。每次專門添加一個函數後,我可以說它們各自工作正常,除了jsFiddle和實時頁面上的HTML5音頻播放外,其他所有功能都可以正常工作。也就是說只有HTML5音頻播放在實時頁面上不起作用。

所有的HTML 100%驗證,所有的CSS 100%驗證。這兩個組都是代碼全部添加到jsFiddle中。

頁面標題通過Google的onload命令加載(按此順序)外部CSS文檔,jQuery 1.5.1和jQuery UI 1.8.8(與jsFiddle相同,除UI之外,它是1.8.9) JavaScript文檔(網站的所有功能都駐留在該網站上)以及Google Analytics(分析)功能。

JavaScript包裝在文檔就緒框架中。

我的猜測是這個差異存在於頭部某處,但我無法想象它到底是什麼。所有外部鏈接都正常工作,JavaScript功能正常工作(新的音頻控制器除外)。

後處理腳本

PS-只有Chrome和Safari的作品尚未..我主持兩個音頻文件關閉的服務器沒有正確的HT-訪問文件中聲明OGG的作爲正確的MIME類型。我也會爲此提出一個問題。

資源

的jsfiddle:http://jsfiddle.net/66FwR/3/

HTML(品目只,身體正處於的jsfiddle)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset=utf-8> 
<meta name="description" content="Fernando Garibay- Producer, Songwriter, Artist, Multi-Instrumentalist, and Programmer" /> 
<meta name="keywords" content="Fernando Garibay, Music, Producer, Songwriter, Artist, Mutli-Instrumentalist, Programmer." /> 
<title>Fernando Garibay - Music</title> 
<link rel="icon" type="image/png" href="http://www.fernandogaribay.com/favicon.ico" /> 
<link href="../styles/fernando.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAqfg-jHFfaMB9PWES0K_8ChTCwkclEZER8BG2IP57SKkFV1O9hxSZkzKYPDs-3mbhEluKXjbKUAB7sQ"></script> 
<script type="text/javascript"> 
  google.load("jquery", "1.5.1"); 
  google.load("jqueryui", "1.8.8"); 
</script> 
<script type="text/javascript" src="../scripts/fernando.js"></script> 
<script type="text/javascript"> 
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-XXXXXXX-1']); 
    _gaq.push(['_trackPageview']); 
    (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
</script> 
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--Copyright 2011, Fernando Garibay, Inc--> 
<!--Developed by Minimal +--> 
</head> 
<body onload="message()"> 

的JavaScript(在上的jsfiddle工作的功能,但不在實況頁面)

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
     song.play(); 
     else 
     song.pause(); 
    }); 
}); 
+0

有可能是'jQuery衝突'的問題..你得到什麼錯誤? – diEcho 2011-04-19 04:47:33

+0

@diEcho。沒有具體的錯誤;當它在頁面中時,我沒有看到音頻控制功能的結果。它被證明在jsFiddle中有功能......這就是整個網站JavaScript的背景。 – technopeasant 2011-04-19 04:50:26

+0

@diEcho。是的,音頻標籤的播放應該由上述功能來控制。它適用於jsFiddle,但不在活動頁面的上下文中。 – technopeasant 2011-04-19 05:28:39

回答

1

我看您的實際網頁上的兩個JavaScript錯誤(在Chrome和Firefox):

Uncaught TypeError: Object [object Object] has no method 'fancybox'

Uncaught ReferenceError: message is not defined

你在參考書的fancybox()在fernando.js和消息<body onload="message()">。這些錯誤很可能會阻止您的音頻控制代碼運行。

+0

是的。拉出一個版本而不是另一個版本。我知道我錯過了一些東西。我怎麼能給你更多的榮譽? – technopeasant 2011-04-19 10:16:19

+1

所有在一天的工作,都是。Firebug和Web Inspector是你的朋友。 – 2011-04-19 10:58:26

相關問題