Comunidad de diseño web y desarrollo en internet online

plugin jquery viewportCheker no funciona con bootstrap 3

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 01 Jul 2014 05:18 am
Hola gente que tal.

TEngo un tiempo trabajando con bootstrap y de verdad que hace el trabajo más rapido. Pero encuentro un inconveniente al momento de usar un plugin externo, en este caso http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/.

El asunto está en que casi todos los plugins debo abrirlos e incluirlos en mi bootstrap.min.js para que funcionen.

Pero este plugin ni haciendo eso funciona.

Ya he probado sin bootstrap y me funciona perfecto/.

Tienen de idea de como hacerlo funcionar?

les dejo mi index.html para que vean. Es un one page design con muchos carousels.


Código HTML :



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yuma Coffe</title>

    <!-- Bootstrap -->
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


    <link rel="stylesheet" href="style.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <link href='http://fonts.googleapis.com/css?family=Dosis:300,400,700' rel='stylesheet' type='text/css'>
<!-- <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> -->


 
  </head>
  <body>
  <div class="boton">
  <a href="#" class="botonup"></a>
  </div>
<div class="row header">
  
<div class="container">
<div class="row">
  <div class="col-lg-2 logo"><a href="http://www/"><img src="img/logo.png" alt=""></a></div> <!-- fin logo -->
  <div class="col-lg-8 navegacion">
  
<nav>

<a href="#" id="menu-icon"></a>

<ul>

<li><a href="#" class="b0">Process</a></li>
<li><a href="#" class="b1">Speacilty Coffe</a></li>
<li><a href="#" class="b2">About Us</a></li>
<li><a href="#" class="b3">Coffe Products</a></li>
<li><a href="#" class="b4">Online Store</a></li>
<li><a href="#" class="b5">Social</a></li>

</ul>

</nav>

  </div> <!-- fin navegacion -->
  <div class="col-lg-2 social">
    
 <ul>
      <li><a href="http://www.twitter.com"><img src="img/fb.png" alt="" /></a></li>
      <li><a href="http://www.twitter.com"><img src="img/instagram.png" alt="" /></a></li>
      <li><a href="http://www.twitter.com"><img src="img/pinterest.png" alt="" /></a></li>
      <li><a href="http://www.twitter.com"><img src="img/twitter.png" alt="" /></a></li>
      
      </ul>

  </div> <!-- fin social -->
</div>
</div><!--  fin container -->
</div> <!-- fin header -->


<div id="myCarousel-1" class="carousel slide" data-ride="carousel">
<!-- <ol class="carousel-indicators">
<li data-target="#myCarousel-1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-1" data-slide-to="1"></li>
<li data-target="#myCarousel-1" data-slide-to="2"></li>
<li data-target="#myCarousel-1" data-slide-to="3"></li>
<li data-target="#myCarousel-1" data-slide-to="4"></li>
<li data-target="#myCarousel-1" data-slide-to="5"></li>
<li data-target="#myCarousel-1" data-slide-to="6"></li>
<li data-target="#myCarousel-1" data-slide-to="7"></li>
<li data-target="#myCarousel-1" data-slide-to="8"></li>
</ol> -->
<div class="carousel-inner">
<div class="item bg bg0 active">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bg2">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bg3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bg4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bg5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bg6">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bg7">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bg8">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
</div> <!-- fin carousel inner -->
<!-- <a class="left carousel-control" href="#myCarousel-1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>



<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL 1 hhhhhhhhhhhhhhhhhhhhhhhh -->





<!-- ARRANCA EL PROCESO -->





<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp1 active">
<div class="container">
<div class="carousel-caption proceso">

<img src="img/p1_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p1 -->



<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp2 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p2_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p2 -->

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp3 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p3_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p3 -->

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp4 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p4_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p4 -->



<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp5 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p5_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p5 -->


<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp6 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p6_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p6 -->






<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp7 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p7_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p7 -->




<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item bg bgp8 active">
<div class="container">
<div class="carousel-caption proceso">
<img src="img/p8_1.png" alt="">
</div>
</div>
</div>


</div> <!-- fin carousel inner -->
</div> <!-- fin p8 -->


<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL SPECIALTY COFFE  hhhhhhhhhhhhhhhhhhhhhhhh -->


<!-- COMIENZA SPECIALTY COFFE -->


<div id="myCarousel-2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel-2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-2" data-slide-to="1"></li>
<li data-target="#myCarousel-2" data-slide-to="2"></li>
<li data-target="#myCarousel-2" data-slide-to="3"></li>
<li data-target="#myCarousel-2" data-slide-to="4"></li>
<li data-target="#myCarousel-2" data-slide-to="5"></li>
<li data-target="#myCarousel-2" data-slide-to="6"></li>
<li data-target="#myCarousel-2" data-slide-to="7"></li>
<li data-target="#myCarousel-2" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bgs1 active">
<div class="container">
<div class="carousel-caption">
<h1>MEET YUMA</h1>
<p>Feel free to see our process clicking border page arrow or just explore our site using top menu</p>

</div>
</div>
</div>
<div class="item bg bgs2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bgs5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->

</div> <!-- fin carousel inner -->
<a class="left carousel-control" href="#myCarousel-2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL SPECIALTY COFFE  hhhhhhhhhhhhhhhhhhhhhhhh -->

<!-- COMIENZA abouts -->

<div id="myCarousel-3" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel-3" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-3" data-slide-to="1"></li>
<li data-target="#myCarousel-3" data-slide-to="2"></li>
<li data-target="#myCarousel-3" data-slide-to="3"></li>
<li data-target="#myCarousel-3" data-slide-to="4"></li>
<li data-target="#myCarousel-3" data-slide-to="5"></li>
<li data-target="#myCarousel-3" data-slide-to="6"></li>
<li data-target="#myCarousel-3" data-slide-to="7"></li>
<li data-target="#myCarousel-3" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bgs1 active">
<div class="container">
<div class="carousel-caption">
<h1>MEET YUMA</h1>
<p>Feel free to see our process clicking border page arrow or just explore our site using top menu</p>

</div>
</div>
</div>
<div class="item bg bgs2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bgs5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->

</div> <!-- fin carousel inner -->
<a class="left carousel-control" href="#myCarousel-3" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-3" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>



<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL ABOUT US  hhhhhhhhhhhhhhhhhhhhhhhh -->





<!-- COMIENZA Coffe Products -->

<div id="myCarousel-4" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel-4" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-4" data-slide-to="1"></li>
<li data-target="#myCarousel-4" data-slide-to="2"></li>
<li data-target="#myCarousel-4" data-slide-to="3"></li>
<li data-target="#myCarousel-4" data-slide-to="4"></li>
<li data-target="#myCarousel-4" data-slide-to="5"></li>
<li data-target="#myCarousel-4" data-slide-to="6"></li>
<li data-target="#myCarousel-4" data-slide-to="7"></li>
<li data-target="#myCarousel-4" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bgs1 active">
<div class="container">
<div class="carousel-caption">
<h1>MEET YUMA</h1>
<p>Feel free to see our process clicking border page arrow or just explore our site using top menu</p>

</div>
</div>
</div>
<div class="item bg bgs2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bgs5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->

</div> <!-- fin carousel inner -->
<a class="left carousel-control" href="#myCarousel-4" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-4" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>



<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL Coffe Producst  hhhhhhhhhhhhhhhhhhhhhhhh -->





<!-- COMIENZA ONLINE STORE -->

<div id="myCarousel-5" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel-5" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-5" data-slide-to="1"></li>
<li data-target="#myCarousel-5" data-slide-to="2"></li>
<li data-target="#myCarousel-5" data-slide-to="3"></li>
<li data-target="#myCarousel-5" data-slide-to="4"></li>
<li data-target="#myCarousel-5" data-slide-to="5"></li>
<li data-target="#myCarousel-5" data-slide-to="6"></li>
<li data-target="#myCarousel-5" data-slide-to="7"></li>
<li data-target="#myCarousel-5" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bgs1 active">
<div class="container">
<div class="carousel-caption">
<h1>MEET YUMA</h1>
<p>Feel free to see our process clicking border page arrow or just explore our site using top menu</p>

</div>
</div>
</div>
<div class="item bg bgs2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bgs5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->

</div> <!-- fin carousel inner -->
<a class="left carousel-control" href="#myCarousel-5" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-5" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>



<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL ONLINE STORE  hhhhhhhhhhhhhhhhhhhhhhhh -->






<!-- COMIENZA social -->

<div id="myCarousel-6" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel-6" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-6" data-slide-to="1"></li>
<li data-target="#myCarousel-6" data-slide-to="2"></li>
<li data-target="#myCarousel-6" data-slide-to="3"></li>
<li data-target="#myCarousel-6" data-slide-to="4"></li>
<li data-target="#myCarousel-6" data-slide-to="5"></li>
<li data-target="#myCarousel-6" data-slide-to="6"></li>
<li data-target="#myCarousel-6" data-slide-to="7"></li>
<li data-target="#myCarousel-6" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bgs1 active">
<div class="container">
<div class="carousel-caption">
<h1>MEET YUMA</h1>
<p>Feel free to see our process clicking border page arrow or just explore our site using top menu</p>

</div>
</div>
</div>
<div class="item bg bgs2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div>
<div class="item bg bgs4">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->
<div class="item bg bgs5">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>
</div>
</div> <!-- fin item -->

</div> <!-- fin carousel inner -->
<a class="left carousel-control" href="#myCarousel-6" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel-6" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>



<!-- Hhhhhhhhhhhhhhhhhhhhhh   FIN CAROUSEL SOCIAL  hhhhhhhhhhhhhhhhhhhhhhhh -->



  


  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

 



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
   <script src="js/viewportchecker.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.proceso').addClass("hidden").viewportChecker({
      classToAdd: 'visible animated fadeIn', // Class to add to the elements when they are visible
      offset: 100    
     });   
});            
</script>


  
  </body>
</html>





He probado otros plugins y es lo mismo. Creo que es lo único que no me gusta de Bootstrap.

Por unasemana

Claber

166 de clabLevel



 

Envíale un mensaje privado    

Venezuela

firefox
Citar            
MensajeEscrito el 01 Jul 2014 02:54 pm
Disculpa la respuesta, pero no sabes integrar modulos agenos a tu programa, llega un momento que utilizas tantos plugins que se sobreescriben unos a otros y no sabes como hacer que trabajen en conjunto.

Pues bien el posible problema es que bootstrap y tu plugin compartan nombres de metodos por lo que se sobreescriben y no haccen lo que deberian.

¿como hacer que funcionen? Bueno podrias crear instancias de cada plug en un objeto por separado para trabajarlo, aqui un mini ejemplo de lo que deberias de hacer:

Código Javascript :

(function ( $ ) {
    $.tuPlugin = function(element, options) {
        //Aqui el codigo del plug in
        var f = this;
        return f;
    };

    $.fn.tuPlugin = function(options) {
        return new $.tuPlugin(this, options);
    };
}( jQuery ));


Aqui un poco de infor para definir una clase en JS:

http://www.phpied.com/3-ways-to-define-a-javascript-class/

aqui algo similar con Jquery

http://ajaxian.com/archives/jquery-class

Este articulo tambien esta muy bueno

http://www.scorchsoft.com/blog/how-to-write-object-oriented-javascript/

Saludos y suerte.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 01 Jul 2014 08:25 pm
vale muchas gracias por la info, voy a leer lo que me indicas a ver que puedo hacer. Es mi segunda vez que uso bootstrap pero le encuentro ese problema. espero poder solucionar con esto.

Estaré informando

Por unasemana

Claber

166 de clabLevel



 

Envíale un mensaje privado    

Venezuela

chrome
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.