Including jQuery or JavaScript in a Bootstrap framework

Question

I'm trying to implement the following functionality:

jQuery: Find word and change every few seconds

i.e. eliciting a word to change every few seconds on my site.

I've tried to incorporate the code from the above example- but I've not been able to get it to work.

There must be something wrong with the way that I'm configuring jQuery or JavaScript, but I can't tell why or how.

This is the code I'm using:

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Heroic Features - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="assets/css/heroic-features.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>









        <!-- begin: navbar -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Bootstrap Kickstart</a>
                </div>
                <!-- begin: navbar-collapse -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li class="">
                            <a href="demoElements.html">Demo Elements</a>
                        </li>
                        <li class="">
                            <a href="stickyFooter.html">Sticky footer</a>
                        </li>
                    </ul>
                </div>
                <!-- end: navbar-collapse -->
            </div>
        </div>
        <!-- end: navbar -->







































    <!-- Page Content -->
    <div class="container">

        <!-- Jumbotron Header -->
        <header class="jumbotron hero-spacer">
            <h1>A Warm Welcome!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
            <p><a class="btn btn-primary btn-large">Call to action!</a>
            </p>
        </header>

        <hr>

        <!-- Title 
        <div class="row">
            <div class="col-lg-12">
                <h3>Latest Features</h3>
            </div>
        </div>
         /.row -->

        <!-- Page Features -->
        <div class="row text-center">

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Training</h3>
                        <p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements </p>
                        <p>
                            <a href="#" class="btn btn-default">More Info</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Building</h3>
                        <p>Creating value, realizing highly scalable products and services along the full pipeline, from ideation to implementation</p>
                        <p>
                            <a href="#" class="btn btn-default">More Info</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Researching</h3>
                        <p>The best way to predict the future is to invent it, our original research initiatives position us at the forefront of blockchain expertise</p>
                        <p>
                            <a href="#" class="btn btn-default">More Info</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Advising</h3>
                        <p>Wedding our fundamental technological insights to your domain-specific knowledge, creating the future together</p>
                        <p>
                            <a href="#" class="btn btn-default">More Info</a>
                        </p>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.row -->

        <hr>

<div>
    <span>This is so</span>
    <span id="changerificwordspanid">awesome</span>
</div>


        <hr>


<div>
    <span>This is so</span>
    <span id="rotate-word">awesome</span>
</div>


        <hr>



        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->



    <!-- jQuery -->
    <script src="../libs/jquery/dist/jquery.js">

$(function() {
    var words = ['cool', 'fantastic', 'incredible', 'awesome'],
        index = 0,
        $el = $('#rotate-word')
    setInterval(function() {
        index++ < words.length - 1 || (index = 0);
        $el.fadeOut(function() {
            $el.text(words[index]).fadeIn();
        });
    }, 3000); 
});

    </script>





    <!--
     Bootstrap Core JavaScript

    <script src="/assets/js/bootstrap.min.js">
    </script>

    -->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

(function(){
    var words = [
        'awesome',
        'incredible',
        'cool',
        'fantastic'
        ], i = 0;
    setInterval(function(){
        $('#changerificwordspanid').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
    }, 2000);

})();


</script>


</body>

</html>

Can anyone spot where I've gone wrong?

Second attempt:

---
home: active
---
    {{> navbar }}

    {{!-- begin: content container --}}
    <div class="container">

        {{!-- begin: content --}}
        <h1>Your partner in blockchain!</h1>


        <div class="row">

          <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/100/technics/1" alt="Training">
              <div class="caption">
                <h3>Training</h3>
                <p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
                <p><a href="#" class="btn btn-success" role="button">More Info</a></p>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/100/technics/2" alt="Training">
              <div class="caption">
                <h3>Training</h3>
                <p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
                <p><a href="#" class="btn btn-success" role="button">More Info</a></p>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/100/technics/3" alt="Training">
              <div class="caption">
                <h3>Training</h3>
                <p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
                <p><a href="#" class="btn btn-success" role="button">More Info</a></p>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/100/technics/4" alt="Training">
              <div class="caption">
                <h3>Training</h3>
                <p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
                <p><a href="#" class="btn btn-success" role="button">More Info</a></p>
              </div>
            </div>
          </div>

        </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span>This is so</span>
    <span id="rotate-word">awesome</span>
</div>


<script src="libs/jquery/dist/jquery.js"></script>
<script>
<script>
$(function() {
    var words = ['cool', 'fantastic', 'incredible', 'awesome'],
        index = 0,
        $el = $('#rotate-word')
    setInterval(function() {
        index++ < words.length - 1 || (index = 0);
        $el.fadeOut(function() {
            $el.text(words[index]).fadeIn();
        });
    }, 3000); 
});
</script>

        {{!-- end: content --}}

    </div>
    {{!-- end: content container --}}

Jaromanda X · Accepted Answer · 2017-02-15 00:59:50Z

4

anything inside a script block <script></script> where the script tag has a src attribute, is ignored

    <script src="../libs/jquery/dist/jquery.js">
// this is ignored    
$(function() {
    var words = ['cool', 'fantastic', 'incredible', 'awesome'],
        index = 0,
        $el = $('#rotate-word')
    setInterval(function() {
        index++ < words.length - 1 || (index = 0);
        $el.fadeOut(function() {
            $el.text(words[index]).fadeIn();
        });
    }, 3000); 
});

    </script>

what you want is

    <script src="../libs/jquery/dist/jquery.js"></script>
    <script>
// this will run
$(function() {
    var words = ['cool', 'fantastic', 'incredible', 'awesome'],
        index = 0,
        $el = $('#rotate-word')
    setInterval(function() {
        index++ < words.length - 1 || (index = 0);
        $el.fadeOut(function() {
            $el.text(words[index]).fadeIn();
        });
    }, 3000); 
});

    </script>

answered Feb 15, 2017 at 0:59

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smatthewenglish Over a year ago

I've tried to follow your advise, I put it in the section of the original post labeled second attempt, but still it doesn't seem to work.

Collectives™ on Stack Overflow

Including jQuery or JavaScript in a Bootstrap framework

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related