treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Twitter Bootstrap - Help Needed

  • Hi guys,

    I've just started developing a site in Twitter Bootstrap and got a couple of quick questions.

    You can see the site here and I was wondering why the Javascript Carousel isn't showing? When I check the code in firebug the whole section is faded out.

    Can anyone tell me where I am going wrong? The instructions for implementing the Carousel are here.

    I wasn't sure how to "call" via javascript using $('.carousel').carousel(). Perhaps this is the problem???

    Also, I've added my company logo to the navbar, but ideally I want this to sit above the navbar. I tried simply adding a new div above which contained the logo but I could get it to show. Can anyone advise on how I would do this?

    Any help would be much appreciated.

    Thanks,


    Ross
  • The URL of your images are wrong.

    <div class="item"><img alt="" url="img/http://dummyimage.com/500x350/000000/ffffff"></div&gt;
    Should be:

    http://dummyimage.com/500x350/000000/ffffff
    Not sure if that will fix your problem entirely, but start there.
  • Thanks Senff, I've taken out the '/img' before the url's but unfortunately that didn't work. Any other ideas?
  • None of your JS files are loading - are they are your server?
  • I have a 'js' folder in the website directory that contains the 'bootstrap-carousel.js' file. However it doesn't seem to be linking to it. I'm not sure what I am doing wrong. It's probably something quite straight forward, but I can't figure it out.


    Ross
  • Well obviously you need to call the JS then.

    Try adding this inside your head tag.

    <script src="js/your-script-name.js"></script>
  • You're probably calling the JS files in the wrong folder, or you have them misplaced.

    At the end of your code, you're calling all the JS files like this:

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>

    etc. etc.

    However, those files can not be found:
    http://www.rossparker.co.uk/bootstrap/js/jquery.js
    http://www.rossparker.co.uk/bootstrap/js/bootstrap-transition.js
    http://www.rossparker.co.uk/bootstrap/js/bootstrap-alert.js
    etc. etc, they all give 404 errors.

    I checked in the root folder, but they're also not there:
    http://www.rossparker.co.uk/js/jquery.js
    http://www.rossparker.co.uk/js/bootstrap-transition.js
    http://www.rossparker.co.uk/js/bootstrap-alert.js
    etc.

    So basically, just make sure you have placed all the JS files in the right location, and then call them using the proper path.

  • Hmm... the files are definitely there but as I'm working on the site in Coda on my machine. I think it's to do with the way that I am linking to them. The links like this below just don't work.

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


    I'm sure it's something quite straight forward. If anyone has a chance to look it may help by looking at the download files for Twitter Bootstrap, as I haven't edited them much at all yet.

    Hope someone can help me find a solution.


    Thanks,

    Ross
  • When you say the files are definitely there...they are definitely WHERE? Cause if you follow any of the links I posted in my previous post, you'll see that they're definitely not there.

    (Unless they are, but made hidden/unaccessible/secret.)
  • Figured it out. I had installed the bootstrap-carousel.js plug-in thinking that's all I needed, but I hadn't installed the other files you mentioned:
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>

    I installed all of the files and now it works. Sorry that it was such as basic mistake, and thanks for helping me out.