5

Bueno, no me funciona el plugin. La verdad ya no se que probar, porque en todos los tutoriales que he visto ponen todo igual y les funciona pero a mi no. Incluso he copiado el código de esos tutoriales a un proyecto nuevo y ha funcionado, por lo tanto hay algo que no estoy teniendo en cuenta. Les dejo mi index.html y mi hoja de estilos donde defino todo.

index.html:

<!DOCTYPE html>
<html ng-app="missingDog2">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Missing Dog 2</title>
        <script src="resources/dependencies/angular.min.js"></script>
        <script src="resources/dependencies/angular-route.min.js"></script>
        <script src="resources/dependencies/angular-resource.min.js"></script>
        <script src="resources/app/js/app.js"></script>
        <script src="resources/app/js/Services/MascotaService.js"></script>
        <script src="resources/app/js/Controllers/MainController.js"></script>
        <script src="resources/app/js/Controllers/FormController.js"></script>
        <link href="resources/dependencies/bootstrap.min.css" rel="stylesheet">
        <link href="resources/dependencies/bootstrap-theme.min.css" rel="stylesheet">
        <link href="resources/app/css/mystyles.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    </head>
    <body>
        <!-- HEADER -->
        <header class="page-header row-header">
            <div class="container-fluid row-header">
                <div class="row row-header well">
                    <!-- HEADER IMAGE -->
                    <div class="col-xs-1">
                        <img ng-src="resources/app/images/beagles.png" id="imgHeader" alt="Missing Dog 2" class="img-rounded img-responsive"/>
                    </div>
                    <!-- HEADER TITLE AND TEXT -->
                    <div class="col-xs-11">
                        <h1><a href="#home">Missing Dog</a></h1>
                        <p>
                            Missing Dog is a community that ensures support and charity towards stray dogs. 
                            It's a pleasure to help you find your lost pet!
                        </p>
                    </div>
                </div>
            </div>
            <nav class="navbar navbar-default row-header" role="navigation" data-spy="affix" data-offset-top="104.97">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-2 navbar-header">
                            <a class="navbar-brand" href="#home">Missing Dog</a>
                        </div>
                        <ul class="col-lg-10 navbar-nav nav">
                            <li class="active"><a href="#home">Home</a></li>
                            <li><a href="#form">Report a Missing Dog</a></li>
                            <li><a href="#view">View the Missing Dogs</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <!-- MAIN CONTENT -->
        <div id="mainContent" class="container-fluid">

                <!-- HOME -->
                <section id="home" class="row row-content">
                    <div class="col-xs-offset-3 col-xs-7 well">
                        <div class="col-xs-6">
                            <img alt="Missing Dog 2" ng-src="resources/app/images/dog-brown.jpg" class="img-thumbnail img-responsive">
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, repellendus. 
                                Quae enim, aspernatur odit beatae illo, placeat earum impedit magni veniam. 
                                Laboriosam aperiam esse eum dolorem amet ipsum sapiente odit. Lorem ipsum dolor sit amet, 
                                consectetur adipisicing elit. Mollitia soluta eaque velit? Quam quasi, at voluptate dicta dignissimos, 
                                quibusdam reiciendis, rem aut amet quos ut dolore blanditiis, doloremque velit mollitia! Lorem ipsum dolor 
                                sit amet, consectetur adipisicing elit. Animi minus inventore corporis quasi! Nam eius quos aut dolore 
                                quibusdam quis placeat, quia, inventore dolor amet, soluta molestiae mollitia dicta praesentium. Lorem ipsum 
                                dolor sit amet, consectetur adipisicing elit. Alias et impedit, natus fuga sit earum hic reiciendis 
                                cupiditate atque dignissimos aperiam magnam esse eum, quibusdam id illum facilis optio! Eaque. 
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus veritatis natus sed ipsa, recusandae 
                                doloribus cupiditate, incidunt. Impedit nam rerum sed doloremque nisi quasi non dolores eius. Odit ad, 
                                repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odit, veniam magnam quia 
                                dignissimos itaque eos reiciendis labore quasi, architecto facere amet nobis blanditiis eveniet. 
                                Earum temporibus non doloribus ex.
                            </p>
                        </div>
                    </div>
                </section>

                <!-- FORM FOR REPORTING MISSING DOGS -->
                <section id="form" class="row row-content" ng-controller="FormController">
                    <div class="well col-xs-offset-3 col-xs-7">
                        <div class="col-xs-offset-4 col-xs-8">
                            <h1>Report a Missing Dog</h1>
                        </div>
                        <div class="col-xs-offset-1 col-xs-11"> <!-- col-xs-offset-1  -->
                            <form class="form-horizontal" name="mascotasForm" ng-submit="guardar()">
                                <div class="form-group">
                                    <label class="control-label col-xs-2" for="name">Name: </label>
                                    <div class="col-xs-8">
                                        <input class="form-control" name="name" type="text" required placeholder="Name of the dog" ng-model="mascota.nombre" /> <br/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-2" for="race">Race: </label>
                                    <div class="col-xs-8">
                                        <input class="form-control" name="race" type="text" required placeholder="Race of the dog" ng-model="mascota.raza" /> <br/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-2" for="description">Description: </label>
                                    <div class="col-xs-8">
                                        <input class="form-control" name="description" type="text" required placeholder="A little description" ng-model="mascota.descripcion" /> <br/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-2" for="lostPlace">Place where pet has lost: </label>
                                    <div class="col-xs-8">
                                        <input class="form-control" name="lostPlace" type="text" required placeholder="Place where you lost your dog" ng-model="mascota.lugar" /> <br/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-2 col-xs-offset-3">
                                        <input class="form-control" type="submit" value="Report" />
                                    </div>
                                    <div class="col-xs-2">
                                        <input class="form-control" type="reset" value="Cancel" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>

                <!-- LIST OF MISSING DOGS -->
                <section id="view"  class="row row-content" ng-controller="MainController">
                    <div class="col-xs-offset-3 col-xs-7 well">
                        <div class="col-xs-offset-3 col-xs-9">
                            <h1>View the list of Missing Dogs</h1>
                        </div>
                        <div class="col-xs-offset-2 col-xs-10">
                            <div class="form-group">
                                <label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
                                <div class="col-xs-8 col-xs-offset-1">
                                    <input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
                                </div>
                            </div>

                            <div class="col-xs-10">
                                <table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Race</th>
                                            <th>Description</th>
                                            <th>Place</th>
                                            <th>¿Found?</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="mascota in mascotas | filter: {raza : query}">
                                            <td>{{ mascota.nombre }}</td>
                                            <td>{{ mascota.raza }}</td>
                                            <td>{{ mascota.descripcion }}</td>
                                            <td>{{ mascota.lugar }}</td>
                                            <td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)">Lost</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>

        </div>

        <!-- FOOTER -->
        <footer class="row-footer">
            <div class="container">
                <div class="row">
                    <p class="text-center">&copy Copyrigth 2016 Missing Dog</p>
                </div>
            </div>
        </footer>

        <script scr="resources/dependencies/jquery-3.1.0.min.js"></script>
        <script scr="resources/dependencies/bootstrap.min.js"></script>
    </body>
</html>

mystyles.css:

body {
    position: relative;
    color: #0ee6f1;
    font-family: "Ubuntu", sans-serif;
}

h1 a:link {
    text-decoration: none;
}

#mainContent {
    background-image: url("../images/dogs-greenfield2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#imgHeader {
    max-width: 126.91px;
    max-height: 95px;
    margin: 15px 15px;
}

.row-header {
    margin: 0 auto;
    padding: 0;
}

.row-content {
    margin: 0 auto;
    padding: 50px 0px 50px 0px;
    border-bottom: 1px ridge;
    min-height: 400px;
}

.row-footer {
    background-color: #b1cbbb;
    color: floralwhite;
    margin: 0 auto;
    padding: 20px 0px 20px 0px;
}

.well {
    background: #b1cbbb;
    color: floralwhite;
}

.table-striped > tbody > tr:nth-child(odd){
   background-color: #b5d2b9;
}

.affix {
    top: 0;
    width: 100%;
}
2
  • ¿Puedes aclarar cómo "no me funciona el plugin"? A mí me funciona sin ningún tipo de problema usando el código que compartes (sólo tuve que hacer un ajuste mínimo en CSS para arreglar un problema con un z-index)
    – Alvaro Montoro
    Commented el 28 sept. 2016 a las 6:30
  • Es como si no lo hubiera configurado. Es decir, es como si la etiqueta <nav> no tuviera role="navigation", data-spy="affix" y data-offset-top="104.97". Simplemente es como si no hubiera indicado que se use el plugin. No hace nada, se comporta como si no estuviera el plugin, y en la consola del navegador tampoco tengo errores ni nada por el estilo, es como si todo estuviera normal. Commented el 28 sept. 2016 a las 6:56

1 respuesta 1

4

Tu código parece funcionar sin necesidad de realizar ninguna modificación (sólo añadiendo un z-index:1 para el .affix para que quede por encima del resto de elementos):

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  body {
    position: relative;
    color: #0ee6f1;
    font-family: "Ubuntu", sans-serif;
  }

  h1 a:link {
    text-decoration: none;
  }

  #mainContent {
    background-image: url("../images/dogs-greenfield2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  #imgHeader {
    max-width: 126.91px;
    max-height: 95px;
    margin: 15px 15px;
  }

  .row-header {
    margin: 0 auto;
    padding: 0;
  }

  .row-content {
    margin: 0 auto;
    padding: 50px 0px 50px 0px;
    border-bottom: 1px ridge;
    min-height: 400px;
  }

  .row-footer {
    background-color: #b1cbbb;
    color: floralwhite;
    margin: 0 auto;
    padding: 20px 0px 20px 0px;
  }

  .well {
    background: #b1cbbb;
    color: floralwhite;
  }

  .table-striped > tbody > tr:nth-child(odd){
    background-color: #b5d2b9;
  }

  .affix {
    top: 0;
    width: 100%;
    z-index:1;
  }
</style>

<!-- HEADER -->
<header class="page-header row-header">
  <div class="container-fluid row-header">
    <div class="row row-header well">
      <!-- HEADER IMAGE -->
      <div class="col-xs-1">
        <img ng-src="resources/app/images/beagles.png" id="imgHeader" alt="Missing Dog 2" class="img-rounded img-responsive"/>
      </div>
      <!-- HEADER TITLE AND TEXT -->
      <div class="col-xs-11">
        <h1><a href="#home">Missing Dog</a></h1>
        <p>
          Missing Dog is a community that ensures support and charity towards stray dogs. 
          It's a pleasure to help you find your lost pet!
        </p>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default row-header" role="navigation" data-spy="affix" data-offset-top="104.97">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-2 navbar-header">
          <a class="navbar-brand" href="#home">Missing Dog</a>
        </div>
        <ul class="col-lg-10 navbar-nav nav">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#form">Report a Missing Dog</a></li>
          <li><a href="#view">View the Missing Dogs</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<!-- MAIN CONTENT -->
<div id="mainContent" class="container-fluid">

  <!-- HOME -->
  <section id="home" class="row row-content">
    <div class="col-xs-offset-3 col-xs-7 well">
      <div class="col-xs-6">
        <img alt="Missing Dog 2" ng-src="resources/app/images/dog-brown.jpg" class="img-thumbnail img-responsive">
      </div>
      <div class="col-xs-6">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, repellendus. 
          Quae enim, aspernatur odit beatae illo, placeat earum impedit magni veniam. 
          Laboriosam aperiam esse eum dolorem amet ipsum sapiente odit. Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Mollitia soluta eaque velit? Quam quasi, at voluptate dicta dignissimos, 
          quibusdam reiciendis, rem aut amet quos ut dolore blanditiis, doloremque velit mollitia! Lorem ipsum dolor 
          sit amet, consectetur adipisicing elit. Animi minus inventore corporis quasi! Nam eius quos aut dolore 
          quibusdam quis placeat, quia, inventore dolor amet, soluta molestiae mollitia dicta praesentium. Lorem ipsum 
          dolor sit amet, consectetur adipisicing elit. Alias et impedit, natus fuga sit earum hic reiciendis 
          cupiditate atque dignissimos aperiam magnam esse eum, quibusdam id illum facilis optio! Eaque. 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus veritatis natus sed ipsa, recusandae 
          doloribus cupiditate, incidunt. Impedit nam rerum sed doloremque nisi quasi non dolores eius. Odit ad, 
          repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odit, veniam magnam quia 
          dignissimos itaque eos reiciendis labore quasi, architecto facere amet nobis blanditiis eveniet. 
          Earum temporibus non doloribus ex.
        </p>
      </div>
    </div>
  </section>

  <!-- FORM FOR REPORTING MISSING DOGS -->
  <section id="form" class="row row-content" ng-controller="FormController">
    <div class="well col-xs-offset-3 col-xs-7">
      <div class="col-xs-offset-4 col-xs-8">
        <h1>Report a Missing Dog</h1>
      </div>
      <div class="col-xs-offset-1 col-xs-11"> <!-- col-xs-offset-1  -->
        <form class="form-horizontal" name="mascotasForm" ng-submit="guardar()">
          <div class="form-group">
            <label class="control-label col-xs-2" for="name">Name: </label>
            <div class="col-xs-8">
              <input class="form-control" name="name" type="text" required placeholder="Name of the dog" ng-model="mascota.nombre" /> <br/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-xs-2" for="race">Race: </label>
            <div class="col-xs-8">
              <input class="form-control" name="race" type="text" required placeholder="Race of the dog" ng-model="mascota.raza" /> <br/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-xs-2" for="description">Description: </label>
            <div class="col-xs-8">
              <input class="form-control" name="description" type="text" required placeholder="A little description" ng-model="mascota.descripcion" /> <br/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-xs-2" for="lostPlace">Place where pet has lost: </label>
            <div class="col-xs-8">
              <input class="form-control" name="lostPlace" type="text" required placeholder="Place where you lost your dog" ng-model="mascota.lugar" /> <br/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-2 col-xs-offset-3">
              <input class="form-control" type="submit" value="Report" />
            </div>
            <div class="col-xs-2">
              <input class="form-control" type="reset" value="Cancel" />
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <!-- LIST OF MISSING DOGS -->
  <section id="view"  class="row row-content" ng-controller="MainController">
    <div class="col-xs-offset-3 col-xs-7 well">
      <div class="col-xs-offset-3 col-xs-9">
        <h1>View the list of Missing Dogs</h1>
      </div>
      <div class="col-xs-offset-2 col-xs-10">
        <div class="form-group">
          <label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
          <div class="col-xs-8 col-xs-offset-1">
            <input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
          </div>
        </div>

        <div class="col-xs-10">
          <table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
            <thead>
              <tr>
                <th>Name</th>
                <th>Race</th>
                <th>Description</th>
                <th>Place</th>
                <th>¿Found?</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="mascota in mascotas | filter: {raza : query}">
                <td>{{ mascota.nombre }}</td>
                <td>{{ mascota.raza }}</td>
                <td>{{ mascota.descripcion }}</td>
                <td>{{ mascota.lugar }}</td>
                <td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)">Lost</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

</div>

<!-- FOOTER -->
<footer class="row-footer">
  <div class="container">
    <div class="row">
      <p class="text-center">&copy Copyrigth 2016 Missing Dog</p>
    </div>
  </div>
</footer>

Lo que me hace pensar que si no te funciona es porque hay algún conflicto de algún tipo:

  • Asegúrate de que todos los ficheros se estén cargando de manera correcta y que estén en la ruta especificada.
  • Comprueba que no sobreescribes los estilos de .affix o .affix-top en ninguna de las hojas de estilos (la del theme o la de mystyles.css).
  • Prueba a ver si hay algún conflicto con alguno de los ficheros JavaScript que se incluyen en la página (incluí Angular y no vi ningún problema).
11
  • Directamente no le añade la clase affix ni la affix-top. Lo controle con las herramientas de depuración de Chrome y la etiqueta <nav> no tiene esas clases, ni cuando esta arriba de todo, ni cuando hago scroll. Commented el 28 sept. 2016 a las 7:23
  • @AugustoHerbel Estás hablando del HTML, yo estoy hablando del CSS y el JS. Tu código sin modificaciones, solo quitando algunos archivos CSS y JS funciona sin problemas (míralo arriba).
    – Alvaro Montoro
    Commented el 28 sept. 2016 a las 12:55
  • Perdón, no se si me explique bien. Estoy chequeando con las herramientas de depuración de Chrome y no hace el cambio de clases cuando lo tiene que hacer, ni siquiera le agrega la clase affix-top (que se supone es la que tiene cuando no esta fija a la parte superior de la página) al elemento <nav>. De todas formas estoy pensando que tiene que ser algo de mi navegador o algo de mi computadora, porque copie exactamente el código como lo pusiste y no me anda. @Alvaro Montoro Commented el 28 sept. 2016 a las 18:18
  • 2
    Es un secreto ;-)
    – Alvaro Montoro
    Commented el 28 sept. 2016 a las 18:38
  • 2
    Si, en efecto parece que era eso. Cambie los scripts por los del CDN y anduvo, al parecer no estaba cargando jQuery. Ahora esta andando. Mil gracias @Alvaro Montoro. Commented el 28 sept. 2016 a las 18:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.