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>
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>
Related
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
I'm trying to load a layout((https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045#add-comment) but my efforts are turning unsuccessful.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css"></script>
<!-- Bootstrap CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="icon" href="signup.js">
</body>
The code above shows the links for the template, the Stylesheet and JavaScript. I really don't know what I am missing that would cause it not to reflect.
For CSS, you should use <link rel="stylesheet">(...)</link> instead of <script> tag
As far as i can notice,
there is no starting <body> tag or starting <div> tag.
Maybe you copy-pasted it wrong, please look into it and try again.
Head section sould be something like
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" type="text/css" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
I'm a beginner creating an app through jQuery Mobile, i am trying to incorporate a custom theme through theme roller and it prompted me to use these lines of code:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
I have already put the themes folder in the apps folder however I am trying to figure out how to include these lines within this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
All while not changing the layout and current look. The end goal is to figure out how to change the background and button colors on my app. Thank you!
I just uploaded my website on a free host server but it doesn't work properly. I don't know why...
can you help me please ?
see the link :
https://electrophotonique.000webhostapp.com/
Your code is fine but you just need to put your scripts at the end of your code before the </body> tag Like this :
<html>
<head>
<link rel="stylesheet" href="CSS/style2.css">
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png">
<meta charset="utf-8">
<title>Electrophotonique Ingenierie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- YOUR CODE - START -->
.....
<!-- YOUR CODE - END -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src="js/button.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ui-view>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>
As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.
You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.
For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.
Im a bit of noob when it comes to coding. still learning as i go
Im trying to add this Javascript library to my website
http://buzz.jaysalvat.com
In their documents it say to add some code to specify the mp3 file
Here is my head Tag
<html>
<head>
<title>Through The Glass Eye</title>
<meta name="viewport" content="width=1120,user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.poptrox-2.1.js"></script>
<script src="js/config.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
</script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
The site is loading and i checked with firebug the Jscript is loading...
Am i doing this correctly???? Thanks a lot in advance
in case you want to make it play right after the page is loaded, use the ready event, your code could be as in this example:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
$(document).ready(function(){
mySound.play();
});
</script>
</head>
tested in jquery 1.10.2