2012-01-20 44 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

我曾在那里开始,但玩弄了一堆东西,忘了把它放回去。仍然没有做出区别。谢谢你的信息! –

相关问题