Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 6,792 Points

Need Help with HideSeek Plugin

Hello, I'm currently working on the Techdegree Project #4 (Front-End Web Development) and can't seem to figure out the HideSeek Plugin. I have read through the docs extensively and set it up in my project correctly, but every time I call the hideseek function, the console says this function doesn't exist.

I believe there might be a problem with the downloaded jquery.hideseek.min.js file which I got from the site of the plugin because my code editor Atom is throwing lots of errors on this file but I'm not sure if that's normal.

One last thing I wanted to mention. I came across someone's code-pen who is using the exact same setup and their hideseek plugin is working just fine. Even after I set my project up just like theirs (for testing purposes) I still couldn't get mine to work :/

Here is a reference to someone else's code-pen https://codepen.io/sanjeevbeekeeper/pen/eepxOG

Any help would be greatly appreciated!

Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 6,792 Points 
<p>This is the code!</p>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Interactive Photo Gallery</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css">
  <link href="css/lightbox.min.css" rel="stylesheet" type="text/css">
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <div class="gallery">
      <input id="search" name="search-highlight" type="text" data-toggle="hideseek" data-list=".list" placeholder="Start Typing Here">
      <ul class="list">
        <li>
          <a href="./images/01.jpg" data-lightbox="mygallery" data-title="Hay Bales<br>I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="./images/01-small.jpg" alt="Hay Bales"></a>
        </li>
        <li>
          <a href="./images/02.jpg" data-lightbox="mygallery" data-title="Lake&lt;br&gt;The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="./images/02-small.jpg"></a>
        </li>
        <li>
          <a href="./images/03.jpg" data-lightbox="mygallery" data-title="Canyon&lt;br&gt;I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="./images/03-small.jpg"></a>
        </li>
        <li>
          <a href="./images/04.jpg" data-lightbox="mygallery" data-title="Iceberg&lt;br&gt;It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="./images/04-small.jpg"></a>
        </li>
        <li>
          <a href="./images/05.jpg" data-lightbox="mygallery" data-title="Desert&lt;br&gt;The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="./images/05-small.jpg"></a>
        </li>
        <li>
          <a href="./images/06.jpg" data-lightbox="mygallery" data-title="Fall&lt;br&gt;The red cliffs were beautiful. Fall is coming, I love when the leaves on the trees start to change color."><img src="./images/06-small.jpg"></a>
        </li>
        <li>
          <a href="./images/07.jpg" data-lightbox="mygallery" data-title="Plantation&lt;br&gt;I drove past this plantation yesterday, everything is so green!"><img src="./images/07-small.jpg"></a>
        </li>
        <li>
          <a href="./images/08.jpg" data-lightbox="mygallery" data-title="Dunes&lt;br&gt;My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="./images/08-small.jpg"></a>
        </li>
        <li>
          <a href="./images/09.jpg" data-lightbox="mygallery" data-title="Countryside Lane&lt;br&gt;We enjoyed a quiet stroll down this countryside lane."><img src="./images/09-small.jpg"></a>
        </li>
        <li>
          <a href="./images/10.jpg" data-lightbox="mygallery" data-title="Sunset&lt;br&gt;Sunset at the coast! The sky turned a lovely shade of orange."><img src="./images/10-small.jpg"></a>
        </li>
        <li>
          <a href="./images/11.jpg" data-lightbox="mygallery" data-title="Cave&lt;br&gt;I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="./images/11-small.jpg"></a>
        </li>
        <li>
          <a href="./images/12.jpg" data-lightbox="mygallery" data-title="Bluebells&lt;br&gt;I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."><img src="./images/12-small.jpg"></a>
        </li>

      </ul>
    </div> <!-- End of Gallery DIV -->
  </div>
  <footer>
    <!-- Require jQuery-->
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <!-- Require HideSeek Plugin-->
    <script src="js/jquery.hideseek.min.js"></script>
    <!-- Require Lightbox-->
    <script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
    <!-- Require external JS file -->
  </footer>
</body>
</html>
Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 6,792 Points 
<p>And here is my external app.js file</p>
//Initialize Hide Seek Function
$(document).ready(function() {
    $('#search').hideseek();
});

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points

This seems to be missing

<!-- Require external JS file -->
    <script src="js/app.js"></script>

also if I added text to your links I could do a search (for example on 'my link')

<li>
          <a href="./images/09.jpg" data-lightbox="mygallery" data-title="Countryside Lane&lt;br&gt;We enjoyed a quiet stroll down this countryside lane."><img src="./images/09-small.jpg" >my link</a>
        </li>
Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 6,792 Points

Interesting. Thank you for the response. I can now see how this works but my main issue is that I'm still getting a console error saying hideseek() is not a function when it references the jquery.hideseek.min.js file. Because of this, I can't actually search by attributes like 'text', 'title', or 'attribute'. Is it possible that the downloaded file which has the jquery.hideseek.min.js file has bad code?

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points

Don't know. I downloaded version 0.5.4 from here

https://plugins.jquery.com/hideseek/

Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 6,792 Points

Yeah... it's the same version I'm running but I'm still getting hideseek() is not defined on my console :/ I can't use the functionality of the plugin if the function never gets called. I'll have to look into it more.