работает в jsfiddle, но не в реальной

У меня есть эта jsfiddle о QTIP 2-плагин:работает в jsfiddle, но не в реальной

Этот список открывает speechbubbles на "наведении курсора мыши":

<ul id="ul1"> 
    <li data-browser="firefox">Firefox</li> 
    <li data-browser="ie">IE</li> 
    <li data-browser="opera">Opera</li> 
</ul>

Я также осуществляется на тест-сервере:

http://test81063.test-account.com/info/test.php

, но там он не работает, никто не мог бы мне объяснить, почему? Я делаю это точно так же, как и документация плагина, которая хочет, чтобы я это сделал. Привет!

источник

2013-12-06 user2999787

Console ясно говорит, что вы забыли inlcude JQuery библиотеки –

И есть '' {отсутствует в строке 11. Используйте [JavaScript ошибка консоли] (HTTP: // WWW .netmagazine.com/tutorials/javascript-debugging-beginners), чтобы увидеть сообщения об ошибках. – JJJ

i добавляет {. Теперь я получаю синтаксическую ошибку, но все должно быть в порядке, почему? – user2999787

Я тестировал URL вы предоставили:

http://test81063.test-account.com/info/test.php

я обнаружил, что я не включала Jquery файл jQuery 1.8.3 на странице PHP.

Включите его, а затем проверьте результат.

<!-- Include either the minifed or production version, NOT both!! --> 
<script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script> 

    <!-- Optional: imagesLoaded script to better support images inside your tooltips --> 
    <script type="text/javascript" src="qtip/imagesloaded.pkg.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $("#ul1").on('mouseenter', 'li[data-browser]', function (event) { 
      var browser = $(this).data('browser'); 

      $(this).qtip({ 
       overwrite: false, 
       content: '<img src="http://media1.juggledesign.com/qtip2/images/browsers/64-' + browser + '.png" alt="' + browser + '"/>', 
       position: { 
        my: 'right center', 
        at: 'left center', 
        target: $(this), 
        viewport: $('#ul1') 
       }, 
       show: { 
        event: event.type, 
        ready: true 
       }, 
       hide: { 
        fixed: true 
       } 
      }, event); 
     }); 
    }); 
    </script>

добавить также таблицу стилей в заголовок страницы и ее работа отлично:

<style type="text/css"> 
     li 
     { 
      width: 100px; 
      background-color: #cef; 
      margin: 10px; 
      outline: 1px solid #000; 
     } 
    </style>

источник

2013-12-06 14:38:37

i включил jquery 2.0.3 вместо jquery.qtip.min.js, все еще не работает , есть идеи ? – user2999787

да, посмотрите – user2999787

добавлено, нет отображения ошибок, но также нет отображения речи-пузыря, изменен исходный код :( – user2999787

Как Bhavesh Kachhadiya сказал, что вы должны включить JQuery, и вам необходимо включить его перед кодом, или в браузере не знает, что такое $ (документ).

Включите его в голове, как это:

<head> 
    <meta charset="UTF-8" /> 
    <script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="qtip/jquery.qtip.min.css" /> 
</head>

источник

2013-12-06 14:52:04 Fels

Собственно подсказка работает на вашей странице, но это не видно из-за полноширинныхul

Вашего ulwidth находится в состоянии дефолта 100% сейчас.

уменьшить его, чтобы вы могли сделать всплывающую подсказку видимой.

применить что-то вроде этого:

#ul1 { 
width:250px; 
margin:0; 
padding:0; 
}

источник

2013-12-06 15:03:33

Эту вещь не нужно делать. –

отлично, это был БУГ! – user2999787

@ user2999787 действительно какой именно ваш идеальный ответ :) –

работает в jsfiddle, но не в реальной

ответ

Смежные вопросы