1. 首页
  2. 问答
  3. Elastic_Grid | “Uncaught TypeError：无法读取属性'toLowerCase'undefined”

Elastic_Grid | “Uncaught TypeError：无法读取属性'toLowerCase'undefined”

2017-02-09 177 views
0

将个人&项目组合放在一起，并试图将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> | &copy; 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' */

来源

2017-02-09 cloud4xL

回答

0

在Elastic_grid.js搜索for'if（numOfTag> 1）{ 在菜单中创建“Everything”选项： createList（“config.something”）; $。每个（itemsByTags，功能（I，I）{ createList（I） }）

，并改变与createList的粗体字行（ “全部”）;

来源

2017-04-01 13:45:53

0

尝试：

在elastic_grid中找到。未定义

[...] 
     function createList(text) { 
     // This is a helper function that takes the 
     // text of a menu button and array of li items 
     if (text != '' && text !== undefined) { 
      var filter = text.toLowerCase().replace(' ', '-'); 
      var li = $('<li>'); 
      var a = $('<a>', { 
[...]

固定toLowerCase（）：：JS函数createList（文本）

并改变下列行：

[...] 
    function createList(text) { 
     var filter = text.toLowerCase().replace(' ', '-'); 
     // This is a helper function that takes the 
     // text of a menu button and array of li items 
     if (text != '') { 
      var li = $('<li>'); 
      var a = $('<a>', { 
[...]

https://github.com/vukhanhtruong/jquery-elastic-grid/pull/6/commits/5e6ceb02dccb57af536e1728dc5950d1622d0361为

来源

2017-05-06 08:35:15 RoxVision

相关问题

 相关问题