2012-01-20 3 views
2

$ ('live-demo) .fbwall을 facebook 모듈에서 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

당신은 .ready() 핸들러

$(document).ready(function() { 

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

브라우저가 당신이 그것을 읽을 같은 방법으로 페이지를 실행하기 때문에 발생에 전화를 포장해야합니다. 따라서 top-down은 # live-demo가 반드시 DOM에 존재하기 전에 호출이 실행된다는 것을 의미하는 가능한 한 빨리 실행됩니다.

일반적으로 페이지에서 발생하는 로직을 실행하기 전에 전체 DOM이로드 될 때까지 기다리고 싶습니다. 코멘트에 추적 할 수 있습니다 - 윌리엄 언급 (적절하게 질문을 편집)하지만, 덕분에 좋은 사냥에, 우리는 문제를 발견 한 것처럼

편집

이 문제가 아니었다. 는 DOM이

$(document).ready(function(){ 

//your fb plugin code here 
}); 

같은로드가 완료되면 실행하거나 또는 당신이 배치 할 수 있습니다 짧은 손 방법

$(function(){ 
//your code here 

}); 

을 사용할 수 있도록

+0

처음에는 그랬습니다. 죄송합니다. 복사하고 붙여 넣기 전에 다시 넣는 것을 잊어 버렸습니다. 나는 왜 그것이 거기에 한 번 작동하지 않을지 전혀 모른다. 만약 내가 다른 모든 HTML을 없애 버리면, 내가 원하는 것을 정확하게 해낸다. div가 여러 다른 사람들의 안에 중첩되어있는 것과 관련이있을 수 있습니까? ID를 올바르게 사용하면 안 될까요? –

+0

전화를 다시 보면서 오른쪽으로 스크롤하면 accessToken 뒤에 showGuestEntries : false, 두 번 및 쉼표가 없습니다. 복사하여 붙여 넣기 문제가 있습니까? – Kamal

+0

예 ... 고쳐주었습니다. 분명히 변화가 없다. 그래도 고마워. –

1

는 항상 준비 핸들러 내부에 jQuery 코드를 래핑 js 코드는 DOM의로드가 완료 될 때 실행되도록 문서 끝에 있습니다.

+0

나는 거기서 시작해야만했지만 잔뜩 놀고 있었고 다시 넣는 걸 깜박했다. 차. 정보를위한 감사합니다! –

관련 문제