0

I have tried everything I know and I cannot locate the problem here. I'm using Laravel 4 and fullpage js for it's wonderful content separation properties with Bootstrap 3. Everything works fine until I try to embed a google map iframe into the about section. When I do, the menu links cease to function, but when I remove the iframe... everything is gravy.

I am using the blade templeting system so I will post code as I have it organized.

main.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>SPA | @yield('title')</title>

    <!-- animate.css Style Sheet -->
    {{ HTML::style('assets/css/animate.css') }}

    {{ HTML::style('assets/css/bootstrap.min.css') }}
    {{ HTML::style('assets/css/style.css') }}

    {{ HTML::style('assets/js/fullPage/jquery.fullPage.css') }}

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- Load the navigation bar -->
    @include('navigation')
    <div class="fullpage">

        <!-- Load the Header section -->
        @include('sections.header')

        <!-- Load the About section -->
        @include('sections.about')

        <!-- load the Menu section -->
        @include('sections.menu')

        <!-- load the Contact section -->
        @include('sections.contact')
    </div>
</body>
<!-- Load jQuery & bootstrap js core files first -->
{{ HTML::script('assets/js/jquery.min.js') }}
{{ HTML::script('assets/js/bootstrap.min.js') }}

<!-- Load fullPagejs and it's supplied components -->
{{ HTML::script('assets/js/fullPage/vendors/jquery.easings.min.js') }}
{{ HTML::script('assets/js/fullPage/vendors/jquery.slimscroll.min.js') }}
{{ HTML::script('assets/js/fullPage/jquery.fullPage.min.js') }}

<script>
    $(document).ready(function(e) {

    $('.fullpage').fullpage({
        css3: true,
        anchors: ['home', 'about', 'menu', 'contact'],
        menu: '#main-menu',
        scrollOverflow:true,
        resize : false,
        paddingTop: '60px',

        afterRender: function () {
            //Start the whole shabang when DOM and APIs are ready by calling initialize()
            initialize();
        }
    });
});
</script>
</html>

about.blade.php

<div class="section bbq-about" id="bbq-about">
    <div class="col-12">
        <div class="row">
            <div class="well">
                <div class="page-header">
                    <h1>The Best Hickory Smoked BBQ Around! <small>Your Taste Buds Will Thank You</small></h1>
                    <p class="lead">Some solid leading copy will help get your users engaged.</p>
                    <a class="btn btn-large btn-primary" href="#contact">Contact Us Now</a>
                    <a class="btn btn-large btn-link" href="#contact">Do something else</a>
                </div><!-- ./page-header -->
            </div><!-- ./well -->
        </div>
    </div>
    <div class="col-sm-6">
        <h3>Stuff</h3>
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#map" data-toggle="tab">Location</a></li>
                <li><a href="#story" data-toggle="tab">Our Story</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="bbq-map">
                    <h4><span class="glyphicon glyphicon-map-marker"></span> Our Location <small>Right Beside The Silver Dollar</small></h4>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3263.894014442773!2d-81.6058718!3d35.1093573!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88571b5799c9a41f%3A0xab1a38f8b5d56ef4!2s1425+Wilcox+Ave%2C+Gaffney%2C+SC+29341!5e0!3m2!1sen!2sus!4v1423796759172" width="100%" height="200" frameborder="0" style="border:0"></iframe>
                </div>
                <div class="tab-pane story" id="story">
                    <h4> The Owners<small> Jeff And Tom</small></h4>
                    {{ HTML::image('http://placehold.it/350x150', 'The Owners', array('class' => 'thumbnail pull-left')) }}
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consequatur consectetur illo veritatis deserunt dolores quos ab possimus sint debitis, repudiandae perspiciatis, unde laborum qui, sequi necessitatibus cum nihil consequuntur.</p>
                </div>
            </div>
        </div><!-- ./tabs -->
    </div><!-- ./left section -->
    <div class="col-sm-6">
        <h3>More Stuff</h3>
    </div>
    <!-- ./right section -->
</div>

Please, any assistance that would point me in the right direction would be appreciated.

Vulgar Kitten
  • 1
  • You'd better add a link reproducing the problem. Otherwise its impossible to figure out what's going on. It might well be related with [this bug](http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d). – Alvaro Feb 13 '15 at 12:15
  • It would also be nice to know what you mean with "the menu links cease to function". Where is that menu? Is it fixed? Is it over the map? We need more info. – Alvaro Feb 13 '15 at 12:18
  • Working as expected in [this reproduction](http://jsfiddle.net/97tbk/471/). – Alvaro Feb 13 '15 at 12:21

0 Answers0