1
我發現了一個完美的我丈夫網站的開源代碼。我改變了它的喜好，但它不斷給控制檯一個惱人的錯誤：jQuery上下文爲空+ IE錯誤未顯示聯繫人/生物盒
無法獲得未定義的空引用屬性「ownerDocument」。
在Firefox它只是說：類型錯誤：上下文是空
錯誤是假想在這裏：jQuery的1.10.2.js，行1822字符2
Sizzle.contains = function(context, elem) {
// Set document vars if needed
if ((context.ownerDocument || context) !== document) {
setDocument(context);
}
return contains(context, elem);
};
我想我做的事情在我的代碼錯誤，但我似乎無法說出在哪裏。
此外還有一個奇怪的IE錯誤：聯繫人和生物頁面消失，當我打開菜單時，它在那裏，但只有當我選擇頁面的那一部分，然後它消失時纔會出現。我不知道這是否與上述錯誤有關。
它適用於Safari，Firefox，Chrome，但大多數訪問者使用IE。
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">
<head>
<title>Franklin Cando - Photographe</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Franklin Cando - Photographe" />
<meta name="keywords" content=""/>
<!--I added this as a test, since I saw somewhere that this could help-->
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<link rel="shortcut icon" href="/images/icons/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});
</script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m)
{
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},
i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-44223947-1', 'franklincando.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="st_main" class="st_main">
<img src="images/album/AK9A4519.jpg" alt="" class="st_preview" id="bigImage"
style="display:none;"/>
<div class="st_overlay"></div>
<h1>
<a class="titelLink" href="http://www.franklincando.com/">Franklin Cando</a>
</h1>
<div id="st_loading" class="st_loading"><span>Loading...</span></div>
<ul id="st_nav" class="st_navigation">
<li>
<span class="st_link">Biographie<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<table>
<!--CONTENT-->
</table>
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper" id="form_div_parent">
<div class="st_subcontent" id="form_div_child">
<div class="contactinfo" id="contactinfo_div">
<h3>Contact</h3><br/>
<!--CONTENT-->
<form id="contactForm" method="post" action="php/send_form.php" >
<!--CONTENT-->
<input class="button" type="button" onclick="validateForm()"
value="Envoyer"/>
<input class="button" type="reset" onclick="resetForm()"
value="Effacer"/>
</form>
</div>
</div>
</li>
<li class="album">
<span class="st_link">Photos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper" id="wrapper">
<div class="st_thumbs" id="thumbs">
<!--IMAGES-->
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
jQuery的JS
<script type="text/javascript">
$(document).ready(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the facebook button - iris
var $fb = $('#fb');
$fb.hide();
//let's load the current image and just then display the navigation menu
$('<img>').load(function(){
$loader.hide();
if ($currImage.width() > $currImage.height()){
$currImage.css({"width":"100%"});
}
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
$fb.show();
},1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element where the thumbs are going to be
displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current opened menu (if any)
$(document).on('click','.st_arrow_down',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show();
});
$(document).on('click','.st_arrow_up',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//clicking on a thumb, replaces the large image
$(document).on('click','.st_thumbs img',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
if ($this.width() > $this.height()){
$this.css({"width":"100%"});
}
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//hide image menu upon mouse out - iris
$list.find('.st_thumbs').bind('mouseleave',function(){
hideThumbs();
});
//function to hide the current opened menu //.css({"display":"none"}) // to hide
the bigger text boxes - iris
function hideThumbs(){
$list.find('li.current').animate({'height':'50px'},400,
function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide()
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//makes the thumbs div scrollable on mouse move the div scrolls automatically
function makeScrollable($outer, $inner){
var extra = 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({overflow:'hidden'});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft
+ lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left)
* (containerWidth-divWidth)/divWidth -
extra;
$outer.scrollLeft(left);
});
}
});
</script>
PS：關於縮進真的很抱歉。我在這篇文章中花了很多時間，發佈後它仍然看起來不像是應該的。我希望它仍然清楚。
噢，好的謝謝:)解決了控制檯錯誤！但我仍然留在IE中的怪異錯誤：/我認爲他們可能是相關的，但沒有...聯繫人/生物盒仍然沒有顯示打開菜單項，但他們在那裏好嗎...不知道這可能是什麼？ –