0
Объединение личного портфолио проектов & и попытка использовать плагин jQuery для «Voodoo» Vu Khanh Truong для реального портфолио. Вы можете просмотреть его here. Проблема заключается в том, что на моей странице возникают следующие ошибки:Elastic_Grid | «Uncaught TypeError: Невозможно прочитать свойство« toLowerCase »неопределенного«
1) У меня есть заголовок для раздела портфолио, и когда я загружаю страницу с запущенным плагином, он заставляет мой заголовок исчезать.
2) Предполагается, что будут кнопки фильтрации, которые отображаются на основе разных тегов, используемых для категоризации вашего контента, и они не отображаются.
3) Он загружает миниатюры предварительного просмотра для разных категорий, которые я использую, но когда я нажимаю на них, он не загружает модальные полноразмерные изображения (и описания), как предполагается к.
Когда я открываю консоль в Chrome, я получаю эту ошибку:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
Я попытался создать JSFiddle размещать реплицировать проблема у меня, но я думаю JSFiddle не позволить вам использовать определенные скрипты или что-то еще? 'Cuz, когда я пытаюсь включить все сценарии, которые я использую на странице, он дает мне 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>
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" я ссылка в разделе HTML выше)
/* Begin 'scrollTo' */
$(document).ready(function() {
$('#topNav a').click(function() {
$.scrollTo(this.hash, 1200, {offset: -70}, {easing:'swing'});
return false;
});
});
/* End 'scrollTo' */