將個人&項目組合放在一起,並試圖將Vu Khanh Truong的「elastic_grid」jQuery插件用於實際投資組合。你可以查看它here。問題是它似乎在我的頁面上導致以下錯誤:Elastic_Grid | 「Uncaught TypeError:無法讀取屬性'toLowerCase'undefined」
1)我有一個投資組合部分頭,當我加載插件運行的頁面時,它會使我的頭部消失。
2)正應該被過濾出現基於用於分類內容不同的標籤按鈕,以及那些沒有出現。
3)它加載我正在使用的不同類別的預覽縮略圖圖像,但是當我點擊它們時,它不會將模式加載到全尺寸圖像(和描述)至。
當我在Chrome中打開控制檯,我得到這個錯誤:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
我試圖創建的jsfiddle張貼到複製我有這個問題,但我猜的jsfiddle不讓你使用某些腳本或其他東西? '因爲每當我嘗試包括我在頁面上使用的所有腳本時,它會給我提供MIME類型控制檯中的錯誤。
我已經安裝&根據文檔使用插件,我不是最好的去構造Javascript,所以我不明白爲什麼我得到這些錯誤。 :P如果有人可以幫助,我將不勝感激。
HTML<!-- "DOCTYPE" Declaration -->
<!DOCTYPE HTML>
<!-- Start HTML -->
<html lang="en">
<!-- Start HTML Header -->
<head>
<title>My Portfolio</title>
<!-- Stylesheets -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /><!-- Bootstrap.css -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Font-Awesome -->
<link href="elastic/css/elastic_grid.min.css" rel="stylesheet" type="text/css" /><!-- Elastic CSS -->
<link href="mycss.css" rel="stylesheet" type="text/css" /><!-- Custom CSS -->
<!--Javascripts -->
<script src="jquery/jquery.js"></script><!-- jQuery -->
<script src="bootstrap/js/bootstrap.js"></script><!-- Bootstrap jQuery -->
<script src="jquery/jquery.scrollTo.js"></script><!-- "scrollTo" Smooth Scrolling jQuery plugin -->
<!-- Elastic -->
<script src="elastic/js/modernizr.custom.js"></script><!-- Modernizr -->
<script src="elastic/js/classie.js"></script><!-- Classie -->
<script src="elastic/js/elastic_grid.min.js"></script> <!-- Elastic -->
<!-- Initializing & Customizing JS -->
<script src="js/my.js"></script><!-- Personal Javascript for initializing & using Javascript & jQuery plugins -->
</head>
<!-- Start Page Body -->
<body data-spy="scroll" data-target="#topNav" data-offset="75">
<!-- Start Navigation -->
<nav id="topNav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-collapse collapse " id="myNavbar" role="navigation">
<!-- Site Logo -->
<a href="#home"><img src="imgs/logo_ph.png" alt="Logo placeholder" class="navbar-brand img-responsive" /></a>
<!-- Start Navbar Links -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-right nav-pills">
<li role="presentation"><a href="#about">About Me</a></li>
<li role="presentation"><a href="#portfolio">Portfolio</a></li>
<li role="presentation"><a href="#contact">Contact Me</a></li>
<li role="presentation"><a href="#footer"><i class="text-center fa fa-angle-double-down fa-lg"></i></a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation -->
<!-- Start Site Container -->
<div class="container container-fluid" id="home">
<br><br>
<!-- Start "About Me" Section -->
<section id="about" class="secB center-block">
<h1 class="text-center">About Me</h1>
<br><br>
<img class="me-left" src="imgs/me-1.png" alt="Me" />
<p>This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
<img class="me-right" src="imgs/me-1.png" alt="Me" />
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text </p>
<div class="clearfix"></div>
</section>
<!-- End "About Me" Section -->
<!-- Start "Portfolio" Section -->
<section id="portfolio" class="secA center-block">
<h1 class="text-center">Sample Work</h1>
<br><br>
<div id="portfolio">
<script type="text/javascript">
$(function(){
$("#portfolio").elastic_grid({
'filterEffect': 'fallperspective',
'hoverDirection': true,
'hoverDelay': 0,
'hoverInverse': false,
'expandingSpeed': 500,
'expandingHeight': 500,
'items' :
[
{
'title' : 'Covers',
'description' : ' A collection of media covers I\'ve designed',
'thumbnail' : ['imgs/covers/s/1.jpg', 'imgs/covers/s/2.jpg'],
'large' : ['imgs/covers/l/1.jpg', 'imgs/covers/l/2.jpg'],
'button_list' :
[
{ 'title':'Demo', 'url' : 'http://bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags' : ['Covers']
},
{
'title' : 'Logos',
'description' : ' A collection of business logos I\'ve designed',
'thumbnail' : ['imgs/logos/s/1.jpg', 'imgs/logos/s/2.jpg'],
'large' : ['imgs/logos/l/1.jpg', 'imgs/logos/l/2.jpg'],
'button_list' :
[
{ 'title':'Demo', 'url' : 'http://bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags' : ['Logos']
}
]
});
});
</script
</div>
</section>
<!-- End "Portfolio" Section -->
<!-- Start "Contact" Section -->
<section id="contact" class="secB center-block">
<h1 class="text-center">Hire Me!</h1>
<h5 class="text-center">...or you know...just HMU to chat. :P</h5>
<br><br>
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text This is some text
</section>
<!-- End "Contact" Section -->
<!-- End Site Container -->
</div>
<!-- Start "Footer" Section -->
<footer class="footer center-block" id="footer">
<!-- Footer Content-->
<div class="footer-content">
<!-- Footer text -->
<div class="footer-text text-center">
<span class="text-primary">Port-FAUX-lio</span> | © Husayn Muhammad 2016
</div>
<!-- Social Media -->
<div class="footer-icons-box text-center">
<div class="fa-stack fa-2x sm-icon">
<a href="mailto:[email protected]">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</a>
</div>
<div class="fa-stack fa-2x sm-icon">
<a href="http://twitter.com/cloud4xL" target="_blank">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</a>
</div>
<div class="fa-stack fa-2x sm-icon">
<a href="http://freecodecamp.com/cloud4xL" target="_blank">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
</a>
</div>
<div class="fa-stack fa-2x sm-icon">
<a href="https://www.linkedin.com/in/husayn-muhammad-040614106?trk=nav_responsive_tab_profile" target="_blank">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- End "Footer" Section -->
<!-- End Body -->
</body>
<!-- End HTML -->
</html>
CSS
body {
background-color: #e1e1e1;
min-width: 430px !important;
}
/****** TOP NAVIGATION STYLES ******/
.navbar {
background-color: #f2f2f2 !important; /*#190c03*/
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.5);
}
.navbar-brand {
float: left !important;
height: auto !important;
transform: translateX(0);
opacity: 1;
transition: transform 0.4s, opacity 0.4s;
}
.navbar-brand:hover {
transform: translateX(25px);
opacity: 0;
transition: transform 0.4s, opacity 0.4s;
}
.navbar-right {
margin-right: 15px !important;
}
.navbar-header {
position: relative !important;
float: left !important;
width: 100% !important;
}
.navbar-toggle {
/* margin-top: 0px !important; */
}
.navbar ul {
float: right !important;
}
.nav-pills > li {
border: 1px solid rgba(0, 0, 0, 0.4);
background-color: #d8661A;
border-radius: 5px;
margin-top: 3.5%;
margin-right: 5px;
box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4);
transform: scale(1, 1);
transition: box-shadow 0.4s, transform 0.4s;
}
.nav-pills > li:hover {
transform: translateY(-5px);
border: 1px solid rgba(0, 0, 0, 0.7);
transition: transform 0.4s, border 0.4s;
}
.navbar-inverse .navbar-nav > .active > a {
background-color: transparent !important;
}
.nav-pills > li.active {
transform: translateY(-5px);
height: 50%;
border: 1px solid rgba(0, 0, 0, 0.7);
color: white !important;
background-color: #337ab7 !important;
transition: transform 0.4s, color 0.4s, background-color 0.4s;
}
.nav-pills > li a {
color: white !important;
border-bottom: 1px solid transparent !important;
transition: color 0.4s, border-bottom 0.4s !important;
}
.nav-pills > li.active > a:hover {
color: white !important;
}
/****** HEADER IMAGE STYLES ******/
.mast {
width: auto;
position: relative;
height: 600px;
margin-top: 7%;
margin-bottom: 2%;
/* box-shadow: 0 4px 2px 0px rgba(0, 0, 0, 0.7); */
}
/****** <SECTION> STYLES ******/
.secA, .secB {
width: auto;
min-height: 400px;
height: auto;
padding: 4% 10% 8%;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.secA {
background-color: rgba(0, 0, 0, 0.4);
overflow: auto !important;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.secB {
background-color: rgba(0, 0, 0, 0.2);
}
/****** ABOUT ME SECTION STYLES ******/
.me-left {
float: left;
max-height: 200px;
border: 5px solid black;
border-radius: 50%;
padding-left: 8px;
margin: 10px 10px 10px 0px;
background-color: white;
transform: scaleX(-1);
}
.me-right {
float: right;
max-height: 200px;
border: 5px solid black;
border-radius: 50%;
padding-left: 8px;
margin: 10px 0px 10px 10px;
background-color: white
}
/*********************************
**********sdFilterMe CSS**********
#sdfm-wrapper img,
.sdfm-overlay {
//Define the WIDTH of sdFilterMe Images
width: 200px !important;
//Define the HEIGHT of sdFilterMe Images
height: 200px !important;
border-radius: 7px;
overflow: hidden !important;
}
.sdfm-inner-wrapper {
border-radius: 10px;
margin: 5px !important;
}
.sdfm-overlay {
background-color: rgba(0, 0, 0, 0.7) !important;
color: white !important;
font-size: 0.35em !important;
text-overflow: clip !important;
}
.sdfm-overlay span {
padding: 5% !important;
margin: 8% auto !important;
max-width: 85% !important;
height: auto !important;
word-wrap: break-word !important;
border-radius: 2px !important;
}
*********************************/
/****** FOOTER STYLES ******/
.footer {
width: auto;
/* min-height: 150px; */
/*margin-bottom: 5px !important;*/
background-color: #1b1d1e;
padding: 1.5% 5%;
z-index: 3;
border-top: 1px solid red;
}
.footer-content {
/* border: 1px solid yellow; */
margin: 0 auto;
padding: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.footer-text {
font-size: 1.5em;
font-weight: normal;
color: rgba(255, 255, 255, 0.7);
/* border: 1px solid white; */
width: auto;
padding: 5px;
margin-left: 25px;
margin-right: 25px;
margin-top: 0.73%;
display: flex;
flex-flow: row wrap;
align-self: flex-start;
justify-content: center;
}
.footer-icons-box {
/* border: 1px solid red; */
width: auto;
padding: auto;
margin-left: 25px;
margin-right: 25px;
display: flex;
flex-flow: row wrap;
align-self: flex-end;
}
.sm-icon {
display: inline-block;
text-align: right;
}
.fa-circle {
color: rgba(255, 255, 255, 0.9);
transition: all 0.4s;
}
.footer-icons-box .fa-envelope,
.fa-twitter, .fa-free-code-camp, .fa-linkedin {
color: #1b1d1e;
transform: scale(1, 1);
transition: all 0.4s;
}
.footer-icons-box .fa-envelope:hover,
.fa-twitter:hover, .fa-free-code-camp:hover,
.fa-linkedin:hover {
color: #337ab7 !important;
transform: scale(0.8, 0.8);
transition: all 0.4s;
}
JS(從 「my.js」 文件I在HTML部分中引用上文)
/* Begin 'scrollTo' */
$(document).ready(function() {
$('#topNav a').click(function() {
$.scrollTo(this.hash, 1200, {offset: -70}, {easing:'swing'});
return false;
});
});
/* End 'scrollTo' */