CODEWITHSUNDEEP
jqueryhtmlruby-on-railstwitter-bootstraptwitter-bootstrap-2
ElMerroPero
ElMerroPero

Reputation: 59

Am I Missing something from within this <head> tag?

This is a rails project using Bootstrap 2.3. I am new to bootstrap. I am having linking issues ONLY from the index page. I have 5 views (HOME, About Traderoom,BIOS, and Contact) If I am on the ABOUT page, ALL links work fine. If I am on the Home(Index.html.erb) page, then I cannot click on TradeRoom, Bio, or Contact. I can only click on About Us. In addition, how can I be sureI a have all the necessary Bootstrap files in my Assets folder ? after downloading Bootstrap, I coded the NAVBAR first and it collapses as it should. Since it collapsed, I assumed I had all the necessary Bootstrap files.

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>TraderTwitch Live</title>

    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">TraderTwitch.com</a>
          <div class="nav-collapse">
              <ul class="nav">
                <li><%= link_to "Home",home_index_path %></li>
                <li><%= link_to "About",home_about_path %></li>
                <li><%= link_to "LIVE Trading Room",home_traderoom_path %></li>
                <li><%= link_to "Bios",home_bio_path %></li>
                <li><%= link_to "Contact Us",home_contact_path %></li>
              </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
    <%= image_tag 'Zlan.png' %>
    </div> 
    <br>
    <div class="container">
        <div class="row">
            <div class="span10"><%= yield %></div>
            <div class="span2">
                <strong><p style="text-align:center; font-size:20px">Real-Time <br>Trade Results</p></strong>   
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="row">
                <div class="span2">
                <h6>Copyright &copy; 2014 TraderTwitch.com</h6>
                </div>

                <div class="span4">
              <h6>About Us</h6>
              <p>We are going to be te best Futures Trading Room, PERIOD !!</p>
                </div>

                <div class="span2">
              <h6>Navigation</h6>
              <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">LIVE Trading Room</a></li>
                  <li><a href="#">Bios</a></li>
                  <li><a href="#">Contact Us</a></li>
              </ul>
                </div>

                <div class="span2">
                <h6>Follow Us</h6>
                      <ul>
                          <li><a href="#">Twitter</a></li>
                          <li><a href="#">Facebook</a></li>
                          <li><a href="#">Google Plus</a></li>
                          <li><a href="#">YouTube</a></li>
                     </ul>
                </div>
            </div>
        </div>
    </footer> 
  </body>
</html>

home/index.html.erb

<div class ="row">
    <div class="span10">
        <div class="well"> 
            <h2>Hello Traders, </h2>
            <p class="lead"> &nbsp &nbsp &nbsp &nbspLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </br></br>



            <h3>Our Thinking is .......</h3>
            <p class="lead">&nbsp &nbsp &nbsp &nbsp Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </br>
            </br>

            We look forward to seeing you in the TradeRoom !
            </p>
            <a href="#myModal" role="button" class="btn btn-large  btn-info" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Keep Me Posted</a>

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


<div class="modal fade" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">We're shooting for a Nov 10 '14 launch</h4>
    </div>
    <div class="modal-body">
        <h3 style="text-align:center"><a href="mailto:[email protected]">EMAIL: [email protected]</a></h3> 

        <h4 style="text-align:center">Email us to stay in the loop. </h4> 
        <hr>

        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email:</label>
                <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputTwitter">Twitter User</label>
                <div class="controls">
                <input type="text" id="inputTwitter" placeholder="Twitter User">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputSession">Primary Trading Session</label>
                <div class="controls">
                    <select name="selTradingSession">
                        <option value"0">U.S. Session</option>
                        <option value"1">European Session</option>
                        <option value"2">Asian Session</option>
                    </select>
                </div>
                <br>
                <div class="text-center"><button type="submit" class="btn">Send</button></div>
            </div>

            <p><small class="text-muted">*We will not give out your email or twitter handle.</small></p>
        </form>
    </div> 
</div>

home_controller.rb 

class HomeController < ApplicationController
  def index
  end

  def about
  end

  def contact
  end

  def traderoom
  end

  def testimonials
  end

  def bio
  end
end

config\routes.rb

Tradertwitch::Application.routes.draw do
  get "home/index"
  get "home/about"
  get "home/contact"
  get "home/traderoom"
  get "home/testimonials"
  get "home/bio"
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  root 'home#index'

Upvotes: 0

Views: 70

Answers (2)

ElMerroPero
ElMerroPero

Reputation: 59

UGH !!!

I turned this 

<div class="modal fade" id="myModal">

into this 

<div class="modal hide fade" id="myModal">

and now all links work fine. Modal fade was allowing the modal to open up as designed, but it was causing problems in my NAVBAR links.

WHY was "modal fade" working without the "hide" ?

Upvotes: 0

Marek Takac
Marek Takac

Reputation: 3048

It's because there's an invisible modal window blocking the links (with id myModal). Get rid of the modal and it will work.

Upvotes: 1

Related Questions