Mobiscroll, I can't get a basic scroller to show up

StackOverflow https://stackoverflow.com/questions/16008029

  •  04-04-2022
  •  | 
  •  

Question

I'm trying to get a mobiscroll scroller in my web app. I tried following their most basic tutorial found here: http://docs.mobiscroll.com/25 and I don't get anything to show up. I'm a super huge noob when it comes to javascript and feel dumb that I can't get through a three line tutorial. Here is some code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <!-- Bootstrap -->
    <link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>

<style>
...
</style>
...


<input id="scroller" name="scroller" />

 ...

  </body>
<script type="text/javascript"> 
...
//google analytics stuff
...
$(function(){
    // create a datetimepicker with default settings
    $("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});
</script>

</html>
Was it helpful?

Solution

You have to inlcude the downloaded mobiscroll js and css files in the head section (after jquery). Also, move your initialization code before the closing </body> tag

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>

<!--Mobiscroll-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>

</head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top