So I'm trying to get full calendar installed on my website, and after a few issues, I managed to get to a point where I have no errors but the calendar itself isn't displaying correctly (like it doesn't have css).
I checked, and as far as I can tell, all of the files that need to be referenced are.
Any help would be greatly appreciated!
<!DOCTYPE html><head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- FullCalender files references -->
<script src="src/jquery.js"></script>
<script src='src/moment.min.js'></script>
<script src='src/fullcalendar.min.js'></script>
<script src="src/gcal.js"></script>
<!-- Custom styles for this template -->
<link href="components/style.css" rel="stylesheet">
<link src="src/fullcalendar.min.css" rel="stylesheet">
<link src="src/fullcalendar.print.css" rel="stylesheet">ipt>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'KEY',
events: {
googleCalendarId: 'ID#group.calendar.google.com'
}
});
});
</script><title>Western PA ARML</title></head> <nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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">Western PA ARML</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li>Home</li> -->
<li>Calendar</li>
<li>Join the Team</li>
<li>People</li>
<li>Archive</li>
<li>Links</li>
<li>About</li>
<!--<li>Photos</li>-->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<body>
<div id="content"><div class="section">
<h1>Calendar</h1>
<div id='calendar'></div>
</div> </div> <!--Content-->
<div class="footer">
Ⓒ 2017 Western Pennsylvania ARML Team
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
</body>
</html>
This is how it looks -
A few things which are issues with your code (starting from the original edit up to the current version):
1) You need to make sure your CSS and JS files are all based on the same version of fullCalendar, and also that your jQuery and momentJS files are compatible versions, and loaded in the correct order (see https://fullcalendar.io/support/ and https://fullcalendar.io/docs/usage/ respectively).
2) Don't use fullCalendar.io as a CDN. Either use the recommended CDNJS site (as per https://fullcalendar.io/download/) or download and host the files yourself.
3) <script>window.jQuery || document.write('<script src="src/jquery.js"><\/script>')</script> seems to be redundant, since you already included jQuery just above.
4) gcal.js needs to be loaded after fullCalendar.js, because it depends on it in order to work properly.
5) I realised your <link> tags are specified incorrectly. You need to put the URL in a "href" attribute, not a "src" (that's used for script tags). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link fpr the spec.
6) You're loading the "print" CSS and the regular CSS both into the code, but the "print" style will override the regular style (because it's loaded later). You need to put a media query in the "print" one to ensure it only gets used when the user tries to print the page. e.g.
<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">
Additional side comments:
1) You don't need jQuery-UI for this to work, and nothing else on your page seems to make use of it, so you can remove it.
2) You have HTML which is outside both the <head> and <body> tags. This is not valid. Anything you want to display should be inside <body>. Many browsers might be tolerant of this problem but it's messy and technically invalid HTML, so you can't expect it to always work properly.
You're placing your css in the wrong place.
<link href="components/style.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
Placing the code like this will cause external css resources to override your custom css.
Instead place it like this:
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
<link href="components/style.css" rel="stylesheet">
Related
I wanna change the style of some elements which are affected by the bootstrap classes of the parents element.
-I put the link of the stylesheet below the one of bootstrap
-I even moved the .css file outside the html's folder as adiviced in a similar topic but it still doesn't work
(IF I PUT THE CODE IN THE INTERNAL STYLESHEET IT WORKS INSTEAD)
For now I'm just trying to remove the style from the list
BE AWARE: running this code from the snippet is gonna show you no issues, however on the browser it doesn't actually work
Here's the code
ul {
list-style-type: none;
}
<!doctype html>
<html lang="en-us">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<!--
<style>
ul{
list-style-type:none;
}
</style>
-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul>
<li>
<a class="active" href="/home.html">Home</a></li>
<li>
Blog
</li>
<li>
Digital Nomad
</li>
<li>
About
</li>
</ul>
</div>
</nav>
</div>
<div class="col-sm-4">
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
You need to look at CSS Specificity rules. Just because you define a rule doesn't automatically mean it overrides a rule declared earlier.
Specificity is calculated on 4 factors abcd:
a (1 if inline, 0 if in a file),
b number of IDs in CSS rule
c number of attribute selectors, classes and pseudo-classes,
d number of element names and pseudo-elements.
The rule with the largest 4 digit number abcd wins and overrides lesser declarations, so inline declarations will override anything declared in an included CSS file.
Other CSS Specificity articles
CSS Tricks
Specificity calculator
Possible Solutions
It's generally not a good idea to change 'base' styles or to override Bootstrap styles directly.
You can override other declarations by adding !important to your rules, but this is generally regarded as a poor solution.
Add your own class and/or id to elements which you wish to customise.
If you wish to have a quick effect, then you can add your own specific id or class to the body element and then declare your rules relying on descendents of that id or class. Using an id in this way will give your rules a specificity of 01xx in a file, which will probably be enough to override Bootstrap rules.
e.g
CSS in file:
#mypage ul {
list-style-type:none;
}
HTML:
<body id="mypage">
...
<ul>
</ul>
</ul>
Can you verify that your external style sheet is actually being loaded? If it works when written in the internal style tag, but not in an external file, it sounds like that file isn't loading properly. That could be an issue with the file name, the path to the file, or even an invalid structure of the file itself.
Include your own stylesheet above the bootstrap link
<link rel"stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
I had this problem a lot of times, this works for me every time since the CSS stylesheet above is preferred over the one below
Further to my last answer, this works fine in Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/myrule.css">
<meta charset="UTF-8">
<title>Tests</title>
</head>
<body id="mypage">
<div class="container-fluid">
<!-- rest of your html here -->
myfile.css just contains:
#mypage ul {
list-style-type:none;
}
I recently started fiddling around with Bootstrap modals on a site I'm working on, and they won't seem to show up at all on my site. I read some of the other posts and tried what they said to try, and none of it worked. Here's the site itself The only active modal is the launch demo modal button, so try that one
Here's my <head> portion:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>#OnlyAtLSA</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#button").click(function(){
$('#modal').modal('show');
});
});
</script>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/assets/css/ie-emulation-modes-warning.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
</head>
and here is my trigger button:
<button type="button" class="btn btn-primary btn-xlarge" data-toggle="modal" data-target="#mission">
Launch demo modal
</button>
And here is my modal itself:
<!-- Our Mission -->
<div class="modal fade" id="mission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Our Mission</h4>
</div>
<div class="modal-body">
<p>The Legal Studies Academy is welcome to all students who have a deep interest in and curiosity about the law, law-related fields, and legal and ethical issues. The First Colonial Legal Studies Academy functions as a school-within-a-school to offer students the opportunity to not only embrace an academic curriculum that will fully prepare them for post-secondary education, but will also allow career exploration within the area of legal studies. Students enrolled in the Legal Studies Academy will receive a solid foundation in core subjects as well as practice and experience in a work-site learning component.<br>
The Academy curriculum goes beyond the basic four-year high school requirement by infusing law-related units into the core subject areas of English, science, and social studies and by providing students with specialized coursework. The program of studies is extended through seminars and field trips on law-related subjects. In addition, they Academy offers students the opportunity to experience the reality of law careers by emphasizing active learning in criminal investigations and Mock Trials in our courtroom.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Our Mission -->
Anybody see anything wrong??
If you don't mind using the bootstrap js CDN then it is probably the easist option:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
This will load all of the bootstrap JS functionality into your site. It will make it easier to use other bootstrap JS as well if you want to.
Otherwise, you can download the file locally and serve it like you are serving the bootstrap css.
Then, I would just build around this code
http://getbootstrap.com/javascript/#live-demo
Which I think is where you got your current code.
I am working on a bootstrap site and are having issues with my navbar-toggle when viewed on my iphone and ipad. The dropdown button is visible, but does not respond or expand. Seems to be working well in all my computer's browsers.
I am using bootstrap v3.3.5 and jquery-1.11.3
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<link href="includes/css/fonts.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'>
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
Here is my navbar
<!--Navbar-->
<div class="navbar" role="navigation">
<div class="container">
<!--navbar responsive toggle-->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- brand and toggle grouped together for better mobile display -->
<img class="navbar-brand" src="images/navbar_logo.png" alt="logo">
</div><!--end of navbar-header-->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div><!-- end of collapse-->
</div><!-- end of container-->
</div><!-- end of navbar -->
bottom links.
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.11.3.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
here is a js.fiddle if you would like to see the css: https://jsfiddle.net/Dinkledine/asLLydyz/8/
I've seen similar posts to this, and these are the workarounds I've gathered. So far none of them have worked. So i'm starting to think its my markup.
ive tried:
updating bootstrap from v3.3.4 to v3.3.5.....
updating jquery from 1.8.2 to 1.11.3.....
replacing "ontouchstart" to "disable-ontouchstart" within bootstrap.min.css
thanks for your help!
Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
Safari on iPhone only support click event for <a> and <input> element.
You can find your fix here.
<button class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
in css:
body{z-index:-1}
I am not able to get the navbar button to toggle the menu down when the navbar is collapsed for smaller browsers. I have tried all the suggestions on this forum regarding different js links and I have looked at the source code of numerous bootstrap example sites where the button works but I am still not able to get this to work. I can even build it in bootply where it works fine and when I bring it into my file directory it doesn't work.
Is there something in this code that is obviously preventing this from working?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Snow's Farm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no">
<meta name="description" content>
<meta name="author" content="">
<link href="./bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./main.css" rel="stylesheet" media="screen">
</head>
<body class="bs-docs-home" style data-twttr-rendered="true">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Snow's Farm</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="dropdown" href="www.google.com"><p>The Farm Family</p></a></li>
<li><p>Mulch</p></li>
<li><p>Soil</p></li>
<li><p>Stone</p></li>
<li><p>Christmas Trees</p></li>
<li><p>Delivery</p></li>
<li><p>Pricing Documents</p></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="./respond.min.js"></script>
<script src="./jquery.js"></script>
I have the following Javascript/jQuery on my page:
<script>
$("#mymarkdown").load("./LPInfo.md");
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
</script>
That page is here:
http://www.nickhodges.com/LeanTed/bootstrap/about.html
The page uses bootstrap. I've looked and see no errors in the console when rendering the code.
As you can see, it is not doing what I want, which is using markdown.js to render the contents of a file into HTML.
Here's the weird part, and the root of my question:
If I open the page as a local file, Chrome does nothing. IE9 will open and properly render the page, but only after I give permission to run the script.
Both browsers fail to render the page correctly using the above link. Firefox has the same result.
I confess to being pretty much of a n00b on all this, but I'm at a loss to explain the inconsistent behavior. I understand that the code is accessing a local file, but that shouldn't be a problem when accessed via the web server, right?
Anyway, and help will be appreciated.
UPDATE:
Here's the code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LeanTed Markdown Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">LeanTed Markdown Editor</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div id="mymarkdown"></div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script src="markdown.js"></script>
<script>
$("#mymarkdown").load("./LPInfo.md");
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
</script>
</body>
</html>
The problem is that you're trying to run markdown.toHTML on the contents of #mymarkdown before it has fully loaded into the DOM (load being asynchronous). Use the "complete" callback of load and it works:
$("#mymarkdown").load("./LPInfo.md", function() {
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
});
(The reason it works locally is probably because lpinfo.md is loaded near-instantaneously, either because 1. an Ajax call to the localhost is extremely fast, or 2. your browser already has the file from localhost cached.)
Do it like so:
$(function () {
$.get( './LPInfo.md', function ( data ) {
$( '#mymarkdown' ).html( markdown.toHTML( data ) );
});
});
So, the code is inside a DOMContentLoaded handler to make sure that the DOM is ready (since you're injecting content into it). Also, $.get is the appropriate retrieval mechanism here. You're doing a .load() which doesn't make much sense in your situation.
What you're doing with .load():
getting the MD file via Ajax,
inserting its contents into the DOM,
retrieving that content from the DOM,
processing the content with Markdown,
inserting the resulting HTML source code into the DOM.
What my code is doing:
getting the MD file via Ajax,
processing its contents with Markdown,
inserting the resulting HTML source code into the DOM.
Have a look at this or that question on how to enable local file system access via XHR.
Your actual problem is that .load() does only start the asynchronous load of the file. But even before it is loaded, you get the HTML content (likely empty?) and render it as markdown. Soon after, the element will get overwritten from the ajax callback. Use the callback parameter!
And don't use load at all if you are not loading HTML. jQuery has a powerful ajax function on which you even could set up a Markdown2html converter which is automatically used when a markdown file is served and html is wanted:
$.ajaxSetup({
accepts: {
"markdown": "text/x-markdown" // MIME type
},
contents: {
"markdown": /markdown/ // MIME type matcher
},
converters: {
"markdown html": markdown.toHTML
}
});
But for your purpose, just use a simple .ajax call:
$.ajax("./LPInfo.md").done(function(md) {
$(function() {
$("#mymarkdown").html(markdown.toHTML(md));
});
});