2012-01-20 73 views
2

我試圖在facebook模塊中執行$('#live-demo).fbwall來執行div。當我自己加載腳本而沒有其餘的頁面內容時,它可以正常工作。我做錯了現在有衝突的事嗎?我只學過html和css,現在正在努力學習其他一些語言,所以我知道我有很多學習要做。讓我知道是否需要發佈任何css或js文件。謝謝。爲什麼我的JQuery不會顯示在div中?

更新HTML包括迄今取得

編輯解決的變化。有一個太多的閉合標籤以及其他一些錯誤。

<!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

你需要用你的電話的。就緒()處理

$(document).ready(function() { 

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

這是因爲瀏覽器執行你讀它的方式相同的頁面。因此,自上而下的執行儘可能快,這意味着您的調用在#live-demo可能必須存在於DOM中之前執行。

通常,您希望在觸發頁面上發生的任何邏輯之前等待整個DOM加載。

編輯

這不是問題,因爲威廉提到(並適當編輯的問題),但由於一些好的狩獵,我們已經發現了問題 - 可以在評論進行跟蹤。

+0

就是這樣開始的。對不起,我忘了複製和粘貼之前把它放回去。我不知道爲什麼它不會在那裏工作。如果我擺脫所有其他的HTML,它確實是我想要的。它可能與其他幾個嵌套的div有關嗎?不應該只要我使用身份證的權利? –

+0

只需再次查看您的電話,向右滾動,我看到您有showGuestEntries:false,兩次,並在您的accessToken後沒有逗號。複製和粘貼問題? – Kamal

+0

是的...修復它。沒有明顯變化。謝謝。 –

1

總是包裹準備處理程序裏面jQuery代碼,以便在執行時的DOM完成加載像

$(document).ready(function(){ 

//your fb plugin code here 
}); 

,或者您可以使用速記方法

$(function(){ 
//your code here 

}); 

或者你可以把文檔末尾的js代碼,以確保它在DOM完成加載時執行

+0

我曾在那裏開始,但玩弄了一堆東西,忘了把它放回去。仍然沒有做出區別。謝謝你的信息! –

相關問題