Twitter Bootstrap Question posted in

Twitter bootstrap – Scrollbox jquery is not working?

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML marquee Tag</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

    <!-- Main CSS -->
    <link href="style.css" rel="stylesheet" media="screen">

    <!-- Responsive Framework -->
    <link href="responsive.css" rel="stylesheet" media="screen">        

    <!-- Fontawesome CSS -->
    <link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">      
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


    <!-- scrollbox Script -->
    <script src="js/jquery.scrollbox.js"></script>


    <script type="text/javascript">

        $('#demo').scrollbox({
           linear: true,
           step: 1,
           delay: 0,
           speed: 100
         });

      </script>    

      </head>
      <body>

      <div class="row">

        <div class="col-lg-6" id="demo">
          <ul>
            <li><a href="#">This text will scroll from bottom to up</a></li>
            <li><a href="#">This text will scroll from bottom to up</a></li>
            <li><a href="#">This text will scroll from bottom to up</a></li>
         </ul>
       </div>





     </div>

    </body>
    </html>

This is my original code for scrollbox. Its not working yet…..
At first, i attached the google apis, then scrollbox script imported from Github, then the function and the list with a div calling id=”demo”

Tags:

2

Answers


  1. 0

    Your <script> tags should be inverted, since scrollbox.js depends on jquery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.scrollbox.js"></script>

    Generally speaking, when something you expect does not happen, the first thing to check is the error log in Developer Tools (just press F12 in IE, FF or Chrome).

    Login or Signup to reply.
  2. 0
    1. Make sure jQuery is loaded BEFORE the scrollbox.js
    2. Use some of the CSS from the site of scrollbox

    I added a few things like the CSS and more items to scroll.

    Then I imported the scrollbox from the GitHub and changed the style 

    $('#demo').scrollbox({
   linear: true,
   step: 1,
   delay: 0,
   speed: 100
 });

    and now it works

    FIDDLE

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search