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!

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

HTML

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Posted by Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

Framework Basics: Modal Windows missing step?

I'm sorry, but unless I am going crazy this video omits adding the custom data attribute of toggle to the Text-me-the-link button. when I was following along I was therefore stumped that my version did not open up a modal window at about 4min and 45 secs in we set the anchor but nothing else only when comparing the recording with my code did I see the extra attribute

<a class="btn btn-default btn-lg hidden-xs" data-toggle="modal" href="#textModal">Text me the link</a>

I watched it again and unless I missed it again we didn’t write this attribute in.

10 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thanks, Maximiliane Quel, glad to hear! I've updated the project files and added notes to the "Teacher Notes" section of the video page regarding the data-toggle attribute.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Maximiliane Quel – You are correct, thanks for catching that! I'll make the fix happen. In the meantime, I'll update the project files with a comment about the "data-toggle" attribute. :)

Tom Hoadley
Tom Hoadley
6,308 Points
Tom Hoadley
Tom Hoadley
6,308 Points

Hi Guil! Just wanted to ask a quick quesiton! Has Foundation been updated since this project was filmed? I ask because the CSS styling downloaded from http://foundation.zurb.com/ is different to the Project-files CSS styling. Thanks for your time!

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thomas Hoadley It has. They work exactly the same way, though – just a few differences and a lot of performance improvements. We'll be releasing a new stage really soon called "What's New in Foundation 5" which covers the latest updates and how to easily migrate from version 4 to 5.

Tom Hoadley
Tom Hoadley
6,308 Points
Tom Hoadley
Tom Hoadley
6,308 Points

That would be awesome! Thanks :)

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

thanks! otherwise really enjoying the project. super-fast cheat sheet into using these frameworks. glad you are doing the heavy lifting figuring out how to get around. ;0)

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Sorry for Hijacking this forum but it is kind of relevant will foundation and Sass be getting covered in the foundation framework video series?

Cheers Anthony

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

HI Guil, Do you think this may be happening before I pay for a Zurb Foundation course at $149.00? I have F5 all installed via the CLI with no issues running a new project and then compiling the Sass files using compass watch i'm just getting a bit stuck on where and what files to edit full the best/most efficient methods and to get the JS features to work correctly.

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Anthony Hind,

It's scheduled for January 6th (at the very latest), but we're trying really hard to get it out sooner. :)

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

You are a HERO :) I am muddling along so thats great to know I can correct all my errors soon :)

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

That would be great! I have just got Foundation 5 all working with the CLI on a mac book pro and just testing things out but it is a bit confusing with regards to what files should be edited and where to add new lines of Sass for example I have created an _main.scss file that I then import into the apps file is something like that the correct method and if I want to override the navbar should I create another file called _nav and then import that file into the apps.scss.

Hope that makes sense!

Tom Hoadley
Tom Hoadley
6,308 Points
Tom Hoadley
Tom Hoadley
6,308 Points

Hi Andy, I'm having the same problem as you and am also looking for the best way to structure a new foundation 5 Sass project! I did find the treehouse tutorial on Sass really helpful, and there's alot of great stuff here - http://alwaystwisted.com/post.php?s=2012-07-08-stu-goes-sass but if anyone did have any insight I'm all ears!

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Hi Thomas,

Thanks for this just seen the response :)

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

Hi,

sorry to keep this up, but does anyone else have an issue with the glyph icon right arrow not showing up?

I have tried using different classes. I have gone through the custom css file step by step and finally copy pasted the code for both the index.html and the mystyles.css and still can't get the icon to show up. I Chrome I still only get a box and in Firefox the placeholder text is missing and instead of the glyphicon I have E092.

All the other glyphicons in the section above work absolutely fine. It's only the one within the span element that isn't showing up:

 <!-- Panel -->
      <div class="panel panel-default hidden-xs">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-1">
            <form>
              <p><strong>Enter your number and we'll text you a link</strong></p>
              <label class="sr-only">Phone Number</label>
              <input class="form-control phone-txt" type="text" placeholder="Phone Number">
              <button class="btn btn-submit" type="submit">
                <span class="glyphicon glyphicon-arrow-right"></span>
              </button>
            </form>
          </div>
          <div class="col-sm-5">
            <p><strong>Or visit an app store to download now!</strong></p>
            <a class="btn btn-default btn-lg" href="#">iOS</a>
            <a class="btn btn-default btn-lg" href="#">Android</a>
          </div>
        </div>
      </div>
<!-- End panel -->

.phone-txt {
    padding: 24px 12px;
    width: 90%;
}
.btn-submit {
    color: inherit;
    font-size: 1.6em;
    background: transparent;
    position: absolute;
    right: 55px;
    bottom: 3px;
}

I am sort of out of ideas where else to look for the issue. Anyone got the same problem or any ideas?

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Can we add a class to the twitter bootstrap carousel created in the framework videos so each slide has a background image? 

<!-- Carousel -->
    <div id="myCarousel" class="carousel slide jumbotron">
      <div class="container ">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="item active">
            <h1>3D Laser Scanner Hire </h1>
            <p class="lead">NEW! The Ultra-high speed scanners (up to 1 million points/second).</p>
            <p class="btn-group">
              <a class="btn btn-success btn-lg" href="#">Quick Enquiry</a>
              <a class="btn btn-default btn-lg hidden-xs" data-toggle="modal" href="#textModal">Request Call Back</a>
            </p>           
          </div>
          <div class="item">
            <h1>Learn how to build it for iOS</h1>
            <p class="lead">We'll teach you how to build it from scratch!</p>
            <p><a class="btn btn-success btn-lg" href="#">Get started today!</a>      
          </div>
          <div class="item">
            <h1>Learn how to build it for Android</h1>
            <p class="lead">We'll teach you how to build it from scratch!</p>
            <p><a class="btn btn-success btn-lg" href="#">Get started today!</a></p>           
          </div>
        </div>     
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>      
    </div> <!-- End Carousel -->
Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Sorry but my code wont format not sure whats happening

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

try putting putting in another empty line between your text and the backticks with html specification then break to yet another line with the code so you have the backticks on their own line and with distance to the paragraph before . happend to me once and this seemed to solve it ...

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points 
<p>This is code!</p>
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points 
<!-- Carousel --> 
<div id="myCarousel" class="carousel slide jumbotron"> 
    <div class="container "> 
        <ol class="carousel-indicators"> 
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active"> 
                <h1>3D Laser Scanner Hire </h1>
                <p class="lead">NEW! The Ultra-high speed scanners (up to 1 million points/second).</p>
                <p class="btn-group">
                    <a class="btn btn-success btn-lg" href="#">Quick Enquiry</a>
                    <a class="btn btn-default btn-lg hidden-xs" data-toggle="modal" href="#textModal">Request Call Back</a>
                </p>
            </div>

            <div class="item">
                <h1>Learn how to build it for iOS</h1>
                <p class="lead">We'll teach you how to build it from scratch!</p>
                <p>
                <a class="btn btn-success btn-lg" href="#">Get started today!</a>
                </p>
            </div>

            <div class="item">
                <h1>Learn how to build it for Android</h1>
                <p class="lead">We'll teach you how to build it from scratch!</p>
                <p>
                    <a class="btn btn-success btn-lg" href="#">Get started today!</a>
                </p>
            </div>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>
<!-- End Carousel -->

I think you are also missing a closing paragraph tag in your code in the second paragraph of the second div within the carousel-inner div, i.e. on about line 25. ;0)

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Thanks for the tip :)