我正在尝试让$('#live-demo).fbwall在facebook模块中的div内执行。当我自己加载脚本而没有其余的页面内容时,它工作正常。我做错了什么现在有冲突吗?我只学过html和css,现在正试图掌握其他一些语言,所以我知道我有很多学习要做的事情。如果我需要发布任何css或js文件,请告诉我。感谢。
更新了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"><</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">></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"><</a>
<a href="#next" title="Next" id="next-slide">></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>
答案 0 :(得分:1)
总是将jquery代码包装在ready处理程序中,以便在DOM完成加载时执行,如
$(document).ready(function(){
//your fb plugin code here
});
或者您可以使用简写方法
$(function(){
//your code here
});
或者你可以将js
代码放在文档的末尾,以确保在DOM加载完成后执行
答案 1 :(得分: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});
});
});
这是因为浏览器以与您阅读相同的方式执行页面。所以自上而下它会尽快执行,这意味着你的调用会在#dive-demo可能存在于DOM之前执行。
通常,您希望在触发页面上发生的任何逻辑之前等待整个DOM加载。
修改
这不是威廉提到的问题(并且适当地编辑了问题),但由于一些好的狩猎,我们发现了问题 - 可以在评论中找到。