Menu icon Foundation
Can't get orbit to work. This is my code.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Inforcer Home</title> 
    <link rel="stylesheet" href="./css/foundation.css" />
    <script src="./js/modernizr.js"></script>
	<script src="./js/foundation.js"></script>
  </head>
  <body>
    <div class="large-12 columns">
     <div align="left"><img src="img/logo.svg" alt="The Inforcer LLC" width="180" height="85" border="0">
    <span>FORCIBLE ENTRY TRAINING</span></div>
    <nav>
<ul class="button-group">
    <li><a href="index.html" class="button">Home</a></li>
    <li><a href="moreinfo.html" class="button">More Info</a></li>
    <li><a href="videos.html" class="button">Videos</a></li>
    <li><a href="trainingvideo.html" class="button">Training</a></li>
    <li><a href="trainingvideo.html" class="button">Training</a></li>
    <li><a href="products.html" class="button">Products</a></li>
    <li><a href="photos.html" class="button">Photos</a></li>
    <li><a href="aboutus.html" class="button">About Us</a></li>
    </ul>
    </nav>
   </div>
  
<!-- End Header and Nav -->
 
<!-- First Band (Slider) -->


    <ul class="example-orbit" data-orbit>
      <li>
        <img src="./img/1.jpg" alt="slide 1" />
        <div class="orbit-caption"> Caption One. </div> 
      </li> 
      <li>
        <img src="./img/2.jpg" alt="slide 2" /> 
        <div class="orbit-caption"> Caption Two. </div> 
      </li>
      <li> 
        <img src="./img/3.jpg" alt="slide 3" /> 
        <div class="orbit-caption"> Caption Three. </div> 
      </li>
    </ul>
  
<!-- Three-up Content Blocks -->
 
  <div class="row">
    <div class="large-4 columns">
      <img src="img/13.jpg" />
      <h4>Made In the USA.</h4>
      <p><strong>The INFORCER</strong> is the most realistic and versatile forcible entry simulator on the market today. </p>
    </div>
    
    <div class="large-4 columns">
      <img src="img/12.jpg" />
      <h4>Used by 100's of First Responders Around the Globe</h4>
      <p><strong>The INFORCER</strong> has a proven design that will enable your firefighters to gain valuable, hands-on, practical and realistic forcible entry training using both a set of irons and a power saw all from one simulator.</p>
    </div>
    
    <div class="large-4 columns">
      <img src="img/4.jpg" />
      <h4> 8 forcible entry techniques</h4>
      <p><strong><em><a href="http://theinforcer.com/products.html#puck">New Cut hockey puck locks</a></em></strong><br>
        <strong>Outward swinging door<br>
Inward swinging door </strong><br>
<strong>Drop bar bolt cutting <br>
Hinge cutting<br>
Baseball bat breach Inward swinging door</strong><br>
<strong>Dead bolt cutting Padlock cut or break<br>
Cut links of chain </strong>      </p>
    </div>
  
  </div>
    
<!-- Call to Action Panel -->
<div class="row">
    <div class="large-12 columns">
    
      <div class="panel">
        <h4>Get in touch!</h4>
            
        <div class="row">
          <div class="large-9 columns">
            <p>We'd love to hear from you, you attractive person you.</p>
          </div>
          <div class="large-3 columns">
            <a href="#" class="radius button right">Contact Us</a>
          </div>
        </div>
      </div>
      
    </div>
  </div>
 
  <!-- Footer -->
  
  <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>© The Inforcer LLC 2014-2015.</p>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
            <li><a href="index.html">Home</a></li>
            <li><a href="moreinfo.html">More Info</a></li>
            <li><a href="videos.html">Videoes</a></li>
            <li><a href="videotraining.">Training</a></li>
          </ul>
        </div>
      </div>
    </div> 
  </footer>
  <script src="./js/jquery.js"></script>
    <script src="./js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

            

         

Orbitfoundation.js

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Inforcer Home</title> 
    <link rel="stylesheet" href="./css/foundation.css" />
    <script src="./js/modernizr.js"></script>
	<script src="./js/foundation.js"></script>
  </head>
  <body>
    <div class="large-12 columns">
     <div align="left"><img src="img/logo.svg" alt="The Inforcer LLC" width="180" height="85" border="0">
    <span>FORCIBLE ENTRY TRAINING</span></div>
    <nav>
<ul class="button-group">
    <li><a href="index.html" class="button">Home</a></li>
    <li><a href="moreinfo.html" class="button">More Info</a></li>
    <li><a href="videos.html" class="button">Videos</a></li>
    <li><a href="trainingvideo.html" class="button">Training</a></li>
    <li><a href="trainingvideo.html" class="button">Training</a></li>
    <li><a href="products.html" class="button">Products</a></li>
    <li><a href="photos.html" class="button">Photos</a></li>
    <li><a href="aboutus.html" class="button">About Us</a></li>
    </ul>
    </nav>
   </div>
  
<!-- End Header and Nav -->
 
<!-- First Band (Slider) -->


    <ul class="example-orbit" data-orbit>
      <li>
        <img src="./img/1.jpg" alt="slide 1" />
        <div class="orbit-caption"> Caption One. </div> 
      </li> 
      <li>
        <img src="./img/2.jpg" alt="slide 2" /> 
        <div class="orbit-caption"> Caption Two. </div> 
      </li>
      <li> 
        <img src="./img/3.jpg" alt="slide 3" /> 
        <div class="orbit-caption"> Caption Three. </div> 
      </li>
    </ul>
  
<!-- Three-up Content Blocks -->
 
  <div class="row">
    <div class="large-4 columns">
      <img src="img/13.jpg" />
      <h4>Made In the USA.</h4>
      <p><strong>The INFORCER</strong> is the most realistic and versatile forcible entry simulator on the market today. </p>
    </div>
    
    <div class="large-4 columns">
      <img src="img/12.jpg" />
      <h4>Used by 100's of First Responders Around the Globe</h4>
      <p><strong>The INFORCER</strong> has a proven design that will enable your firefighters to gain valuable, hands-on, practical and realistic forcible entry training using both a set of irons and a power saw all from one simulator.</p>
    </div>
    
    <div class="large-4 columns">
      <img src="img/4.jpg" />
      <h4> 8 forcible entry techniques</h4>
      <p><strong><em><a href="http://theinforcer.com/products.html#puck">New Cut hockey puck locks</a></em></strong><br>
        <strong>Outward swinging door<br>
Inward swinging door </strong><br>
<strong>Drop bar bolt cutting <br>
Hinge cutting<br>
Baseball bat breach Inward swinging door</strong><br>
<strong>Dead bolt cutting Padlock cut or break<br>
Cut links of chain </strong>      </p>
    </div>
  
  </div>
    
<!-- Call to Action Panel -->
<div class="row">
    <div class="large-12 columns">
    
      <div class="panel">
        <h4>Get in touch!</h4>
            
        <div class="row">
          <div class="large-9 columns">
            <p>We'd love to hear from you, you attractive person you.</p>
          </div>
          <div class="large-3 columns">
            <a href="#" class="radius button right">Contact Us</a>
          </div>
        </div>
      </div>
      
    </div>
  </div>
 
  <!-- Footer -->
  
  <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>© The Inforcer LLC 2014-2015.</p>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
            <li><a href="index.html">Home</a></li>
            <li><a href="moreinfo.html">More Info</a></li>
            <li><a href="videos.html">Videoes</a></li>
            <li><a href="videotraining.">Training</a></li>
          </ul>
        </div>
      </div>
    </div> 
  </footer>
  <script src="./js/jquery.js"></script>
    <script src="./js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

            

         
Rafi Benkual almost 6 years ago

Your markup works correctly http://cdpn.io/JAytg (click edit pen to see code)

Rafi Benkual almost 6 years ago

If you look in the browser console, you will see that your JS does not have the right pathnames. https://www.evernote.com/shard/s304/sh/cc2aeaa1-2f9c-43a2-8ffe-6d721e2de14a/e5a0f54ed14e4d81f30cc3cc80aff533

That should fix it.

Tim Wermund almost 6 years ago

I feel like i am getting closer, Here is my code. Still does not render correctly.

<!doctype html>




The Inforcer Home




$(window).load(function() {
$('example-orbit').orbit({ fluid: '16x6' });
});

FORCIBLE ENTRY TRAINING


Home
More Info
Videos
Training
Training
Products
Photos
About Us


<!-- End Header and Nav -->

<!-- First Band (Slider) -->

<ul class="example-orbit" data-orbit>
  <li>
    <img src="./img/1.jpg" alt="slide 1" />
    <div class="orbit-caption"> Caption One. </div> 
  </li> 
  <li>
    <img src="./img/2.jpg" alt="slide 2" /> 
    <div class="orbit-caption"> Caption Two. </div> 
  </li>
  <li> 
    <img src="./img/3.jpg" alt="slide 3" /> 
    <div class="orbit-caption"> Caption Three. </div> 
  </li>
</ul>

<!-- Three-up Content Blocks -->

Made In the USA.
The INFORCER is the most realistic and versatile forcible entry simulator on the market today.

<div class="large-4 columns">
  <img src="img/12.jpg" />
  <h4>Used by 100's of First Responders Around the Globe</h4>
  <p><strong>The INFORCER</strong> has a proven design that will enable your firefighters to gain valuable, hands-on, practical and realistic forcible entry training using both a set of irons and a power saw all from one simulator.</p>
</div>

<div class="large-4 columns">
  <img src="img/4.jpg" />
  <h4> 8 forcible entry techniques</h4>
  <p><strong><em><a href="http://theinforcer.com/products.html#puck">New Cut hockey puck locks</a></em></strong><br>
    <strong>Outward swinging door<br>

Inward swinging door
Drop bar bolt cutting
Hinge cutting
Baseball bat breach Inward swinging door
Dead bolt cutting Padlock cut or break
Cut links of chain

<!-- Call to Action Panel -->

  <div class="panel">
    <h4>Get in touch!</h4>

    <div class="row">
      <div class="large-9 columns">
        <p>We'd love to hear from you, you attractive person you.</p>
      </div>
      <div class="large-3 columns">
        <a href="#" class="radius button right">Contact Us</a>
      </div>
    </div>
  </div>

</div>

<!-- Footer -->

© The Inforcer LLC 2014-2015.



Home
More Info
Videos
Training
Training
Products
Photos
About Us

      </ul>
    </div>
  </div>
</div> 

$(document).foundation();

Shawn Jones almost 6 years ago

If you look in the docs at the rendered html, there are some things missing like the orbit-container, which makes me think the .js is not being loaded in. I do notice that in the link above to your site that you are calling Jquery twice, once from your js folder and the other from Google. That could cause a problem. I would just use the Google one.

Rafi Benkual almost 6 years ago

If you include the data-orbit attribute, this triggers the JS to mirror the "rendered html" example we provided. It saves you markup.

@tim, your Orbit markup is correct, there is something else happening on the page. Anyone see it?

Rafi Benkual almost 6 years ago

@Tim,

We should keep this issue all on one conversation. We deleted the other post.

Looking at the site, we can recommend changing the scripts.
http://www.theinforcer.com/newinforcerweb/

You don't need this
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Try loading in just:

     <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

Tim Wermund almost 6 years ago

I took code out and got the same results.