2012-01-20 4 views
2

Я пытаюсь получить $ ('# live-demo) .fbwall для выполнения внутри div в модуле facebook. Когда я загружаю скрипт самостоятельно, без остальной части содержимого страницы, он отлично работает. Я что-то не так, что сейчас противоречит? Я только что узнал html и css, и теперь я пытаюсь найти некоторые другие языки, поэтому я знаю, что у меня есть много возможностей для обучения. Дайте мне знать, если мне нужно опубликовать любые файлы css или js. Благодарю.Почему мой JQuery не появится в div?

Обновленный HTML, чтобы включить изменения, сделанные до сих пор

EDIT решаемая. Было слишком много закрывающих тегов вместе с несколькими другими ошибками.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="This Moment, Studio, Design, Web, Icons, Logos" /> 
    <meta name="description" content="This Moment Studio is a photography agency that takes amazing photos!" /> 
    <meta name="author" content="William McKenney" /> 
    <meta name="robots" content="all" /> 
    <title>This Moment Studio</title> 
    <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" /> 
    <link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/> 
    <style type="text/css"> 
     div#live-demo { 
     width:500px; 
     height:300px; 
     overflow:auto; 
    } 
    </style> 
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script> 
       <script type="text/javascript"> 
        $(document).ready(function() { 
         $('#live-demo').fbWall({ 
          id:'308294672531766', 
          accessToken:'323594700988256|g0Zr3Y_0tzS6TGo-DFjtNKfiJA8', 
          showGuestEntries:false, 
          showComments:false, 
          max:3, 
          timeConversion:12}); 
         }); 
       </script> 
</head> 
<body> 
    <!-- STATUS BAR --> 
    <div id="status-bar"> 
     <div id="status-bar-content"> 
      <form action="#search" method="post" id="search-form"> 
       <p> 
        <input type="text" name="query" value="Search" /> 
        <input type="submit" name="submit" value="Search!" /> 
       </p> 
      </form> 
      <div id="status-bar-commands"> 
       <p id="welcome">Welcome, Guest</p> 
       <p id="action-bar"> 
        <a href="#login" title="Login">Login</a> 
        <a href="#sitemap" title="Sitemap">Sitemap</a> 
        <a href="#license" title="License">License</a> 
       </p> 
      </div> 
     </div> 
    </div> 
    <!-- HEADER --> 
    <div id="header"> 
     <div id="logo"> 
      <h1><a href="#home" title="Home Page">This Moment</a></h1> 
      <h2>Studio</h2> 
     </div> 
    </div> 
    <!-- CONTENT --> 
    <div id="content"> 
     <!-- TABS --> 
     <ul id="tabs"> 
      <li id="previous"> 
       <a href="#previous" title="Previous">&lt;</a> 
      </li> 
      <li id="home" class="current"> 
       <a href="#home" title="Home">Home</a> 
      </li> 
      <li id="portfolio"> 
       <a href="#portfolio" title="Portfolio">Portfolio</a> 
      </li> 
      <li id="about"> 
       <a href="#about" title="About">About</a> 
      </li> 
      <li id="contact"> 
       <a href="#contact" title="Contact">Contact</a> 
      </li> 
      <li id="next"> 
       <a href="#next" title="Next">&gt;</a> 
      </li> 
     </ul> 
     <!-- PAGE WRAPPER --> 
     <div id="page-wrapper"> 
      <!-- SLIDESHOW --> 
      <div id="slideshow"> 
       <div id="slides"> 
        <a href="#portfolio.work1" title="See details" class="thumb default-slide"> 
         <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> 
        </a> 
        <a href="#portfolio.work2" title="See details" class="thumb"> 
         <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> 
        </a> 
        <a href="#portfolio.work3" title="See details" class="thumb"> 
         <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> 
        </a> 
       </div> 
       <div id="slideshow-commands"> 
        <a href="#previous" title="Previous" id="previous-slide">&lt;</a> 
        <a href="#next" title="Next" id="next-slide">&gt;</a> 
        <h4> 
         <a href="#portfolio.work1" title="See details" id="slide-title"> 
          Flex Engine Web Design 
         </a> 
        </h4> 
       </div> 
      </div> 
      <!-- MESSAGE --> 
      <div id="message"> 
       <h3>We build great websites!</h3> 
       <p> 
        Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus. 
        Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, 
        metus sed luctus condimentum, quam turpis interdum tortor, 
        in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna, 
        ultricies vitae, porttitor ut, dignissim vitae, elit. 
       </p> 
       <p id="contact-info"> 
        <span id="phone">+33 1 23 45 67 89</span> 
        <span id="address"> 
         34, Avenue des Champs-<br /> 
         Elys꦳, 75006, Paris,<br /> 
         France 
        </span> 
       </p> 
      </div> 
     </div> 
     <!-- BLOG MODULE --> 
     <div class="module" id="blog"> 
      <h4 class="module-header-bar">Latest entries from the blog</h4> 
      <div class="blog-entry"> 
       <h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5> 
       <p class="meta">By Jonathan Davidson - 05/08/09</p> 
       <blockquote class="content"> 
        <p> 
         Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus. 
        </p> 
       </blockquote> 
      </div> 
      <div class="blog-entry"> 
       <h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a></h5> 
       <p class="meta">By The Team - 05/01/09</p> 
       <blockquote class="content"> 
        <p> 
         Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit. 
        </p> 
       </blockquote> 
      </div> 
      <div class="blog-entry"> 
       <h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5> 
       <p class="meta">By Nicholas Denman - 05/01/09</p> 
       <blockquote class="content"> 
        <p> 
         Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem. 
        </p> 
       </blockquote> 
      </div> 
      <p id="read-more-wrapper"> 
       <a href="#blog" title="Read More"> 
        Read More 
       </a> 
      </p> 
     </div> 
     <!-- FACEBOOK MODULE --> 
     <div id="live-demo"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footer-image"></div> 
     <p id="footer-text"> 
      Copyright ɠ2009 Roadside Studio<br /> 
      All Rights Reserved 
     </p> 
    </div> 
</body> 
</html> 
+1

какая ошибка вы испытываете? также оберните код внутри обработчика 'ready' – Tassadaque

+0

Любой, кто интересуется .fbWall, может проверить код с [Neosmart] (http://neosmart.de/social-media/facebook-wall). –

+0

упаковка не помогла. когда я избавляюсь от всего другого html и просто имею, что один div работает нормально. поэтому не уверен, что происходит. как я могу проверить на ошибку? –

ответ

0

Вам нужно обернуть вызов в .ready() обработчик

$(document).ready(function() { 

$('#live-demo').fbWall({ 
         id:'308294672531766', 
         accessToken:'323594700988256|g0Zr3Y_0tzS6TGo-DFjtNKfiJA8'         showGuestEntries:false, 
         showGuestEntries:false, 
         showComments:false, 
         max:3, 
         timeConversion:12}); 
      }); 
}); 

Это происходит потому, что браузер выполняет страницу таким же образом, вы читали его. Таким образом, сверху вниз он выполняется как можно быстрее, что означает, что ваш вызов выполняется до того, как в DOM может существовать # live-demo.

Как правило, вы хотите дождаться загрузки всей DOM, прежде чем запускать любую логику, которая происходит на странице.

EDIT

Это был не вопрос, как Уильям упомянул (и редактировал вопрос надлежащим образом), но благодаря некоторой хорошей охоте, мы нашли этот вопрос - можно проследить в комментариях.

+0

было так, как с самого начала. жаль, что я забыл вернуть его перед копированием и вставкой. я понятия не имею, почему это не сработает, когда оно есть. если я избавлюсь от всего другого html, он сделает именно то, что я хочу. может ли это иметь дело с тем, что div находится внутри нескольких других? не должен ли я использовать идентификатор? –

+0

Просто взглянув на ваш звонок снова, прокручивая вправо, я вижу, что у вас есть showGuestEntries: ложь, дважды и без запятой после вашего доступа. Копировать и вставить вопрос? – Kamal

+0

да ... исправил это. никаких изменений явно. Спасибо хоть. –

1

всегда обернуть код JQuery внутри готового обработчика, так что он выполняется, когда DOM закончил загрузку как

$(document).ready(function(){ 

//your fb plugin code here 
}); 

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

$(function(){ 
//your code here 

}); 

в качестве альтернативы вы можете код js в конце документа, чтобы убедиться, что он выполняется, когда DOM закончил загрузку

+0

У меня было это там, чтобы начать, но играл с кучей вещей и забыл вернуть его обратно. разница. спасибо за информацию, хотя! –