I would like to install a new javascript script on my wiki.
So I have to call this following scripts:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand">
<link rel="stylesheet" type="text/css" href="library/pretty-json-master/css/pretty-json.css">
<script type="text/javascript" src="library/pretty-json-master/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/libs/underscore-min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/libs/backbone-min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/pretty-json-debug.js"></script>
What is the best practice to add this on all my pages ?
Thx
There might be other ways, but you could create a light MediaWiki extension which only sets $wgResourceModules. See Manual:$wgResourceModules.
1/ Create a new extension in "extensions" folder (extensions/jsonTree/)
2/ Create a php file in this folder (jsonTree.php)
$wgHooks['BeforePageDisplay'][] = 'onBeforePageDisplay';
function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
$script = '
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand">
<link rel="stylesheet" type="text/css" href="/extensions/jsonTree/modules/css/pretty-json.css">
<script type="text/javascript" src="/extensions/jsonTree/modules/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/extensions/jsonTree/modules/libs/underscore-min.js"></script>
<script type="text/javascript" src="/extensions/jsonTree/modules/libs/backbone-min.js"></script>
<script type="text/javascript" src="/extensions/jsonTree/modules/pretty-json-debug.js"></script>
';
$out->addHeadItem("jsonTree script", $script);
return true;
}
3/ Include this file in LocalSettings.php
require_once( "$IP/extensions/jsonTree/jsonTree.php" );
Related
I just created the most basic TimelineView under FullCalendar:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8' />
<link href='./fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href="layout.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'></script>
<script src='./fullcalendar/packages/core/main.js'></script>
<script src='./fullcalendar/packages/timegrid/main.js'></script>
<script src='./fullcalendar/packages/core/locales/fr.js'></script>
<script src='./fullcalendar/packages-premium/timeline/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timegrid/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timeline/main.js'></script>
<script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
<script>
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey:'',
plugins: ['resourceTimeline' ],
defaultView: 'resourceTimelineMonth'})
calendar.render();
</script>
The issue is that it renders a grey column in the 2nd place which I do not want
How to remove / hide this column ?
Thanks
You forgot to include the resource-timeline CSS file. I can't reproduce your problem with a standard Scheduler setup. Demo: https://codepen.io/ADyson82/pen/WNQyrzN
But if you remove that file then your problem starts to occur. Demo: https://codepen.io/ADyson82/pen/mdeKVLQ
I can also see that the relevant CSS file is missing from your code shown above. In your case I expect you need a link like this:
<link href='./fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
The FullCalendar plugin index shows what JS and CSS file (if any) is needed for each plugin to work correctly.
In an html file, I need to reference a script outside of the html's parents directory. Attached is a picture of the directory. I need to make a script reference from layout.html to js/index.js. I've tried:
<script src = "{{ url_for('shop', filename = 'index.js') }}"> </script>
<script type="text/javascript" src="~/../js/index.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="~/js/index.js"></script>
But none of these works. Please help!
Directory
Replace yours into this:
<script type="text/javascript" src="/js/index.js"></script>
This is my folder structure on the server:
How do you start the angular JS app inside the AngularJSAPP folder from index in the current folder?
Angular JS app
how should the link look like?
When I tried something like:
Angular JS app
the server returned code 404. it cant find the files.
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="services/data.service.js"></script>
<script src="services/user.service.js"></script>
<script src="services/localstorage.service.js"></script>
<script src="services/data.salescharts.service.js"></script>
<script src="directives/directives.js"></script>
<script src="js/admincontroller.js"></script>
<script src="js/carcontroller.js"></script>
<script src="js/logincontroller.js"></script>
<script src="js/saleschartcontroller.js"></script>
<script src="js/registercontoller.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
According to information from comments.
You need to add ../ before every path.
Without that browser is trying to find files in the same directory with index.html.
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-route/angular-route.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
......
I'm using Foundation 5 magellan navigation but smooth scroll doesn't work. In example all is fine: http://foundation.zurb.com/docs/components/magellan.html
My code: http://jsfiddle.net/5LKzf/
<head>
<link rel="stylesheet" href="css/foundation-5.2.2/css/foundation.css" />
<link rel="stylesheet" href="css/foundation-5.2.2/css/normalize.css" />
<script src="css/foundation-5.2.2/js/vendor/modernizr.js"></script>
</head>
<body>
//my link
<li class="item-109 menu-el active"><dd data-magellan-arrival="/"><a href="#/" >Main Page</a></dd></li>
//my anhor
<a class="link-pos" data-magellan-destination="/" name="/"> </a>
<script src="css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script src="css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script src="css/foundation-5.2.2/js/foundation.min.js"></script>
<script>
$( document ).foundation();
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>
</body>
Did I forget to include any files?
According to the docs
"Make sure jquery.js, foundation.js, and foundation.magellan.js have been included on your page before continuing. For example, add the following before the closing tag:"
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
According to the code you posted, you are missing the magellan js, which would explain why it doesnt work!
I have worked with Foundation 5, and with some features you need to ensure you include the relevant javascript.
I hope this helps!
I am having trouble redirecting my website if it detects that CSS3 is not supported. I use CSS3 animations so I decided to test for them but I can't get it to redirect let alone do an alert() message in my . Please help me out. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>95.3 FM - KXLE Stream</title>
<script type="text/javascript" src="modernizr.custom.86596.js"></script>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script> //THIS IS WHAT WILL NOT WORK********************************************
if (!Modernizr.cssanimations) {
window.location.href = 'www.google.com';
}
</script>
</head>
You want to use
if (Modernizr.cssanimations) {
window.location.replace("http://google.com");
}
Solved it! I was not pointing to the proper location of the modernizer js file in my head.