JQuery работает на JSFiddle, но не на живой странице - PullRequest
Новая
       9

JQuery работает на JSFiddle, но не на живой странице

1 голос
/ 19 апреля 2011

ВОПРОС

Интересный вопрос, который, вероятно, имеет простое решение.С помощью @jessegavin я добавил на свою страницу функцию jQuery, которая управляет воспроизведением на странице звуковых элементов HTML5.Код красив и работает правильно на jsFiddle, но не в контексте моей страницы.

Я бросил время на ветер и методично прошел через это, чтобы попытаться изолировать мою ошибку, но сбезрезультатно.На самом деле я пошел на Аристотеля и применил научный метод.Пожалуйста, простите меня за этот вопрос.Это действительно мое последнее средство.

ПРЕКРАСНАЯ РЕШЕТКА

Вот мои выводы: все функции JavaScript для страницы работают правильно в контексте jsFiddle.После конкретного добавления функций по одной я могу сказать, что каждая из них работает надлежащим образом, и что все, кроме воспроизведения звука HTML5, работают как на jsFiddle, так и на странице live.То есть ТОЛЬКО воспроизведение аудио HTML5 не работает на странице в реальном времени.

Весь HTML проверен на 100%, весь CSS проверен на 100%.Обе группы кода добавляются в jsFiddle полностью.

Заголовок страницы загружает (в этом порядке) внешний документ CSS, jQuery 1.5.1 и jQuery UI 1.8.8 (то же самое для jsFiddle, за исключениемПользовательский интерфейс (1.8.9) с помощью команды Google onload, внешнего документа JavaScript (где находятся ВСЕ функции для сайта) и, наконец, функции Google Analytics.

JavaScript обернут в готовую структуру документа.

Я предполагаю, что расхождение лежит где-то в голове, но я не могу себе представить, что именно.Все внешние ссылки работают корректно, о чем свидетельствуют правильно работающие функции JavaScript (за исключением нового аудиоконтроллера).

POST SCRIPT

PS - работает только в Chromeи Safari на данный момент ... Сервер, на котором я размещаю два аудиофайла, не имеет правильного файла ht-access, объявляющего 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();
     });
 });

Ответы [ 2 ]

1 голос
/ 19 апреля 2011

Я вижу две ошибки 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 голосов
/ 11 июня 2011

URL-адрес http://fiddle.jshell.net/66FwR/3/show/ посмотрите на это.Он также включает в себя JQuery UI.Вы можете скопировать источник и использовать его.

...