0

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>
Chase Roberts
  • 9,082
  • 13
  • 73
  • 131

1 Answers1

1

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>
istvan.halmen
  • 3,320
  • 1
  • 23
  • 29
  • So it looks like I have to have the jquery mobile js included or it doesn't work. Only problem is that jQuery mobile adds this goofy "loading" text to the bottom of the page and some weird yellow horizontal line artifacts. I included the mobile jquery stylesheet and that took care of the artifacts and the loading text but it is overriding a lot of my custom css. – Chase Roberts Apr 17 '13 at 17:53
  • You only need to include jquery mobile js and css, if you downloaded mobiscroll with jquery mobile as selected framework. If you don't use jquery mobile in your project, download mobiscroll again with jquery as framework (http://download.mobiscroll.com/#/datetime/animation/jquery) – istvan.halmen Apr 18 '13 at 05:46