Menu icon Foundation
Foundation.js / jquery.js not working when .html file extension changed to .php

I'm building a small website using foundation 5 sass.

I have a slider on the page and some drop down menu's at the top of the page.

Everything is working fine whilst working in the .html file extension. However, when I change over to .php file extension the drop down menu's and slider no longer work.

I'm sure this is something very simple that I'm forgetting/missing but for the life of me I can't figure it out.

Any help would be great.

Thanks

<!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>One Wise Owl</title>
        <link rel="stylesheet" href="css/app.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>   
    <body>
        <div class="contain-to-grid">        
            <div class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1>
                            <a href="index.html" class="name">One Wise Owl</a>
                        </h1>
                    </li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="has-dropdown"><a href="#">Brands</a>
                            <ul class="dropdown">
                                <li><a href="#">Our Legacy</a></li>
                                <li><a href="#">A.P.C.</a></li>
                                <li><a href="#">Han Kjøbenhavn</a></li>
                                <li><a href="#">New Balance</a></li>
                                <li><a href="#">Universal Works</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown"><a href="#">Clothing</a>
                            <ul class="dropdown">
                                <li><a href="#">T-Shirts</a></li>
                                <li><a href="#">Knitwear &amp; Jumpers</a></li>
                                <li><a href="#">Shirts</a></li>
                                <li><a href="#">Jackets</a></li>
                                <li><a href="#">Denim</a></li>
                                <li><a href="#">Trousers</a></li>
                                <li><a href="#">Shorts</a></li>    
                            </ul>
                        </li>
                        <li><a href="#">Footwear</a></li>
                        <li><a href="#">Accessories</a></li>
                    </ul>
                </section>
            </div>
        </div>
        <div class="row show-for-large-up">
            <div class="medium-4 columns">
                <h4>Brands</h4>
                <ul>
                    <li><a href="#">Our Legacy</a></li>
                    <li><a href="#">A.P.C.</a></li>
                    <li><a href="#">Han Kjøbenhavn</a></li>
                    <li><a href="#">New Balance</a></li>
                    <li><a href="#">Uniform Wares</a></li>
                </ul>
                <h4>Clothing</h4>
                <ul>
                    <li><a href="#">T-Shirts</a></li>
                    <li><a href="#">Knitwear &amp; Jumpers</a></li>
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Jackets</a></li>
                    <li><a href="#">Denim</a></li>
                    <li><a href="#">Trousers</a></li>
                    <li><a href="#">Shorts</a></li>                        
                </ul>
                <h4>Footwear</h4>
                <ul>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Trainers</a></li>
                </ul>
            </div>
            <div class="large-8 columns">
                <h4 class="center">Featured Items</h4>
                <ul class="orbit-slider" data-orbit>
                    <li>
                        <img src="img/norseshirt.jpg">
                        <div class="orbit-caption">
                            <p>A wise owl once said "Get yo'self some garments"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/uniform-wares.jpg">
                        <div class="orbit-caption">
                            <p>The owl says "Get yo'self a time piece"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/newbalance.jpg">
                        <div class="orbit-caption">
                            <p>The wise one says "Get yo'self some trainers"</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row show-for-medium-down">
            <div class="small-10 small-offset-1 columns">
                <h4 class="center">Featured Clothes</h4>
                <ul class="orbit-slider" data-orbit>
                    <li>
                        <img src="img/norseshirt.jpg">
                        <div class="orbit-caption">
                            <p>A wise owl once said "Get yo'self some garments"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/uniform-wares.jpg">
                        <div class="orbit-caption">
                            <p>The owl says "Get yo'self a time piece"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/newbalance.jpg">
                        <div class="orbit-caption">
                            <p>The wise one says "Get yo'self some trainers"</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <?php include("inc/products.php"); ?>
        <div class="row">
            <div class="large-12">
            <h4 class="center">Latest Stock</h4>
            </div>
        </div>
        <div class="row">
            <div class="large-3 columns">

            </div>
            <div class="large-3 columns">

            </div>
            <div class="large-3 columns">
                
            </div>
        </div>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

            

         

PHPjqueryfoundation.js

I'm building a small website using foundation 5 sass.

I have a slider on the page and some drop down menu's at the top of the page.

Everything is working fine whilst working in the .html file extension. However, when I change over to .php file extension the drop down menu's and slider no longer work.

I'm sure this is something very simple that I'm forgetting/missing but for the life of me I can't figure it out.

Any help would be great.

Thanks

<!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>One Wise Owl</title>
        <link rel="stylesheet" href="css/app.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>   
    <body>
        <div class="contain-to-grid">        
            <div class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1>
                            <a href="index.html" class="name">One Wise Owl</a>
                        </h1>
                    </li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="has-dropdown"><a href="#">Brands</a>
                            <ul class="dropdown">
                                <li><a href="#">Our Legacy</a></li>
                                <li><a href="#">A.P.C.</a></li>
                                <li><a href="#">Han Kjøbenhavn</a></li>
                                <li><a href="#">New Balance</a></li>
                                <li><a href="#">Universal Works</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown"><a href="#">Clothing</a>
                            <ul class="dropdown">
                                <li><a href="#">T-Shirts</a></li>
                                <li><a href="#">Knitwear &amp; Jumpers</a></li>
                                <li><a href="#">Shirts</a></li>
                                <li><a href="#">Jackets</a></li>
                                <li><a href="#">Denim</a></li>
                                <li><a href="#">Trousers</a></li>
                                <li><a href="#">Shorts</a></li>    
                            </ul>
                        </li>
                        <li><a href="#">Footwear</a></li>
                        <li><a href="#">Accessories</a></li>
                    </ul>
                </section>
            </div>
        </div>
        <div class="row show-for-large-up">
            <div class="medium-4 columns">
                <h4>Brands</h4>
                <ul>
                    <li><a href="#">Our Legacy</a></li>
                    <li><a href="#">A.P.C.</a></li>
                    <li><a href="#">Han Kjøbenhavn</a></li>
                    <li><a href="#">New Balance</a></li>
                    <li><a href="#">Uniform Wares</a></li>
                </ul>
                <h4>Clothing</h4>
                <ul>
                    <li><a href="#">T-Shirts</a></li>
                    <li><a href="#">Knitwear &amp; Jumpers</a></li>
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Jackets</a></li>
                    <li><a href="#">Denim</a></li>
                    <li><a href="#">Trousers</a></li>
                    <li><a href="#">Shorts</a></li>                        
                </ul>
                <h4>Footwear</h4>
                <ul>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Trainers</a></li>
                </ul>
            </div>
            <div class="large-8 columns">
                <h4 class="center">Featured Items</h4>
                <ul class="orbit-slider" data-orbit>
                    <li>
                        <img src="img/norseshirt.jpg">
                        <div class="orbit-caption">
                            <p>A wise owl once said "Get yo'self some garments"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/uniform-wares.jpg">
                        <div class="orbit-caption">
                            <p>The owl says "Get yo'self a time piece"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/newbalance.jpg">
                        <div class="orbit-caption">
                            <p>The wise one says "Get yo'self some trainers"</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row show-for-medium-down">
            <div class="small-10 small-offset-1 columns">
                <h4 class="center">Featured Clothes</h4>
                <ul class="orbit-slider" data-orbit>
                    <li>
                        <img src="img/norseshirt.jpg">
                        <div class="orbit-caption">
                            <p>A wise owl once said "Get yo'self some garments"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/uniform-wares.jpg">
                        <div class="orbit-caption">
                            <p>The owl says "Get yo'self a time piece"</p>
                        </div>
                    </li>
                    <li>
                        <img src="img/newbalance.jpg">
                        <div class="orbit-caption">
                            <p>The wise one says "Get yo'self some trainers"</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <?php include("inc/products.php"); ?>
        <div class="row">
            <div class="large-12">
            <h4 class="center">Latest Stock</h4>
            </div>
        </div>
        <div class="row">
            <div class="large-3 columns">

            </div>
            <div class="large-3 columns">

            </div>
            <div class="large-3 columns">
                
            </div>
        </div>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan almost 6 years ago

Hey Gareth!

Oh yep, I didn't see that you didn't initialize Foundation. You can shorten your current code like this:

<script type="text/javascript">
  $(document).foundation();
</script>

This post has been closed. No new replies can be added.

Zackery Gianotti almost 6 years ago

Are you running Wamp or Lamp? A local host? PHP is not browser based like JavaScript and requires a host (whether it be local or online.) You can test this by uploading your page to your server and see if it works. If it does, you need a local host to work locally. If you need help just reply to this message and I can help you further, but you can get information about how to run Wamp (for Windows) or Lamp (for Linux) by going to www.wampserver.com -- Happy Coding!

Wing-Hou Chan almost 6 years ago

Hey Gareth!

I would double check your file paths and also check for console errors.

I'm assuming your CSS is working fine?

Are you working on it locally or online. If it is online could you post a link? It would help diagnosis a lot!

Gareth Edwards almost 6 years ago

Hi guys,

Thanks for quick reply.

I was using MAMP to view the PHP file, there were no console errors and the CSS was working perfectly.

I managed to solve the issue by initialising foundation at the bottom of the page like so:

<script>
        $(document).ready(function(){
            $(document).foundation();
        });
</script>

I hadn't had to include this prior to to changing the file extension to .php because I thought foundation.js was initialised through app.js.

Wing-Hou Chan almost 6 years ago

Hey Gareth!

Oh yep, I didn't see that you didn't initialize Foundation. You can shorten your current code like this:

<script type="text/javascript">
  $(document).foundation();
</script>

Gareth Edwards almost 6 years ago

Thanks for you help, Chan.

Much appreciated.

Zackery Gianotti almost 6 years ago

Oh yeah! I should've noticed! -- Ran into a similar problem too on the last project :-)

Glad everything worked out!

Cheers!

Gareth Edwards almost 6 years ago

All good, Thanks for your help Zack.