JQuery Help, Code Not Working. Can you please help?

Question

So I am building a photo gallery, and I am implementing two JQuery files.

Here is my code, I don't think the JQuery is working due to the top of the first image is supposed to have white little dots that will select the next image.

Here is my HTML code with my JQuery in it.

<!DOCTYPE html>

  <html>

    <head>

      <meta charset="utf-8">

      <title> Java Pictures </title>

      <link rel="stylesheet" type="text/css" href="pictures.css"> 

      <link rel="stylesheet" type="text/css" href="normalize.css">

      <script type="text/javascript" src="jquery-2.1.1.min.js"> </script>

      <script type="text/javascript" src="jquery.cycle2.min.js"> </script>

      <script type="text/javascript">

        $("#Slider").cycle({

          fx:       'scrollHorz',
          Next:     '#Next',
          Prev:     '#Prev',
          Pager:    '#Pager',

        });

      </script>

    </head>

    <body>

      <header>

        <a href="index.html">

        <h1> Pictures </h1>

        </a>

        <nav>

          <ul>

            <li> <a href="index.html"> Home </a> </li>
            <li> <a href="statistics.html"> Statistics </a> </li>
            <li> <a href="pictures.html"> Pictures </a> </li>

          </ul>

        </nav>

       </header>

       <section>

        <div id="Open">



        <div id="Pager"></div>



        <div id="Pause">&asymp;</div>



        <div id="Play">&delta;</div>



        <div id="Next">&rang;</div>



        <div id="Prev">&lang;</div>



        <div id="Slider">



        <div class="Items">

            <img src="Images/Coder.jpg" />

        <div class="Info">

             <h2> Average Day </h2>

              <p>
                This how you would be typically coding something, so an average day.
                <a href=""> Learn More! </a>
              </p>

        </div>

        </div>

           <div class="Items">

            <img src="Images/IDE.png" />

        <div class="Info">

             <h2> An IDE </h2>

              <p>
                This is what compiles your Java code. 
                <a href=""> Download Here! </a>
              </p>

        </div>

        </div>

        <div class="Items">

            <img src="Images/Java.jpg" />

        <div class="Info">

             <h2> Java Logo </h2>

              <p>
                There is Java Coding, and then there is Java Coffee. This is coding.
                <a href=""> Official! </a>
              </p>

        </div>

        </div>

        <div class="Items">

            <img src="Images/JCode.jpg" />

        <div class="Info">

             <h2> Some Java Coding </h2>

              <p>
                Just a sneak peak on what you could do in Java.
                <a href=""> Want To Know? </a>
              </p>

        </div>

        </div>

        <div class="Items">

            <img src="Images/jscript.png" />

        <div class="Info">

             <h2> More Than One Java! </h2>

              <p>
                This is another form of java; called JavaScript.
                <a href=""> Progress Here! </a>
              </p>

        </div>

        </div>  

        </div>

        </div>

      </section>

    </body>

  </html>

Then here is my CSS.

#Open {
  width: 960px;
  height: 500px;
  display: block;
  position: relative;
  margin: auto;
}

#Slider {
  width: 960px;
  height: 500px;
  display: block;
  position: absolute;
  overflow: hidden;
}

.Info {
  width: 960px;
  height: 80px;
  display: block;
  position: relative;
  bottom: 100px;
  background: #C0C0C0;
  z-index: 99;
}

.Info h2 {
  font-family: 'Concert One', cursive;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  padding: 15px 0 0 20px;
}

.Info p {
  font-family: 'Concert One', cursive;
  font-size: 15px;
  font-weight: lighter;
  color: #000000;
  padding: 0 0 0 20px;
  line-height: 1px;
}

#Play {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  position: absolute;
  top: 0;
  right: 44px;
  background: #4EEE94;
  color: #000000;
  cursor: pointer;
  z-index: 999;
  transform: rotate(90deg);
  -webkit-transform-rotate(90deg);
}

#Pause {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  position: absolute;
  top: 0;
  right: 88px;
  background: #4EEE94;
  color: #000000;
  cursor: pointer;
  z-index: 999;
}

#Next {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: #4EEE94;
  color: #000000;
  cursor: pointer;
  z-index: 999;
}

#Prev {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  position: absolute;
  top: 0;
  right: 133px;
  background: #4EEE94;
  color: #000000;
  cursor: pointer;
  z-index: 999;
}

#Pager {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  cursor: pointer;
  z-index: 999;
}

#Pager a {
  width: 10px;
  height: 10px;
  display: inline-block;
  position: relative;
  border: 1px solid #FFFFFF;
  border-radius: 20px;
  background: #FFFFFF;

}

/******************************

  GENRAL CSS 

******************************/

img {
  width: 961px;
  height: 400px;
}

Answer 1 · 2014-11-21T04:23:50Z

November 21, 2014 4:23am

The problem might be with your css. Normalize.css should be on top of (or the first) stylesheet in your html.

Answer 2 · 2015-01-23T15:33:39Z

January 23, 2015 3:33pm

you may need the

$(document).ready(function(){

//your code

)}; function

also you don't need the type tag in HTML5, although it causes no harm if left in.

Welcome to the Treehouse Community

Looking to learn something new?

Leon Kenedy

Leon Kenedy

JQuery Help, Code Not Working. Can you please help?

2 Answers

Ian Conery

Ian Conery

Dom Smith

Dom Smith