I want to dynamically load stylesheets and scripts that are in a variable. This is my current code.
<span ng-init="stylesheets = []"></span>
<span ng-init="scripts = []"></span>
<span ng-repeat="script in scripts">
<script src="{{script}}"></script>
</span>
<span ng-repeat="stylesheet in stylesheets">
<link rel="stylesheet" href="{{stylesheet}}"/>
</span>
My code is already working except that initially it loads the literals {{script}} and {{stylesheet}} which is adding up to the request time to the server.
I would like to avoid this.
Related
I am building an online community for IB Math students and for that I plan to use Circle.so. Circle.so seems like a great option given its features (like code injection) and design.
One of the features that the forum tool (such as Circle) needs to have is the ability to render Math notation (LaTeX) or allow code injection so KaTeX or MathJax can be used. KaTeX seems to solve the problem. I am testing/trying to install KaTeX and I have the options to inject code in the head and as a javascript snippet (as shown in the image below).
I have zero programming skills, I wonder if anyone has done it or could help me accomplish that. For the head portion, I placed the following code (it didn't work).
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
KaTeX's documentation can be found here.
Obs: Circle.so has the option to insert custom CSS (if that helps)
This is a 2 part problem, one pretty easy the other a bit harder.
Problem 1
Parsing KATEX
This is relatively easy,
We add the scripts and styles on the page and our custom script to select and render text.
This can go under Header code snippets
Notice: No defer attribute to make it load before JS code runs.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>
And some JS to render KATEX strings.
katex.renderToString( katexText, {
throwOnError: false
});
Unresolved issues
We don't know...
which text to render Katex.
where to place the rendered text.
Problem 2
How do users insert Katex
This is a challenging one coz we don't control the UI. However a workaround could be to use Code option from the toolbar.
However we don't want to parse and potentially break all code blocks, but only specific ones, for this we could add in a key word to trigger katex and keyword can just be katex. So to use katex, users would add a code block with katex on first line and our JS will take it from there.
This can go under Header code snippets
<script id=''>
// Find all `pre` tags
document.querySelectorAll('.trix-content pre').forEach(function(el) {
// Get text inside
var text = el.innerText.replace(/^\s+|\s+$/gm, '');
// Do stuff if text starts with `latex`
if (0 === text.indexOf('katex')) {
var renderedKatex = katex.renderToString(
text.replace('katex', ''),
{throwOnError: false}
);
// Populate katex and additional markup for formatting
el.outerHTML =
'<span></span><section class="katex-wrap">' +
renderedKatex + '</section>';
}
})
<script>
Before scripts
After scripts
Working snippet
// Find all `pre` tags
document.querySelectorAll('.trix-content pre').forEach(function(el) {
// Get text inside
var text = el.innerText.replace(/^\s+|\s+$/gm, '');
// Do stuff if text starts with `latex`
if (0 === text.indexOf('katex')) {
var renderedKatex = katex.renderToString(text.replace('katex', ''), {
throwOnError: false
});
// Populat katex and additional markup for formatting
el.outerHTML = '<span></span><section class="katex-wrap">' + renderedKatex + '</section>';
}
})
.post__more {
display: none;
}
<!-- THIS GOES IN HEAD CODE SNIPPETS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>
<h1>Typical circle.so markup</h1>
<h2>Main post content markup</h2>
<div class="post__body">
<div class="post__inside trix-v2 expanded">
<div class="react-trix-content fullscreen-preview-enabled">
<div>
<div class="trix-content">
<pre>katex
c = \pm\sqrt{a^2 + b^2}</pre>
</div>
</div>
</div>
</div>
</div>
<h2>Comment post content markup</h2>
<div class="post__body" data-controller="post">
<div class="post__inside">
<div class="trix-content">
<div>Ordinary code block,</div>
<pre>const jsVar = 'mi secreto';</pre>
<div>
<br>Latex code block<br><br>
</div>
<pre>katex
e = mc^2</pre>
<div></div>
</div>
</div>
</div>
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
I have a list of the days and hours of operation of a business:
{% load static %}
<link type = "text/javascript" href="{% static 'core/js/index.js' %}">
<div class = "col-md-4">
<div class = "business-hours">
<h2 class="title">Opening Hours</h2>
<ul class="list-unstyled opening-hours">
<li>Sunday <span class="pull-right">Closed</span></li>
<li>Monday <span class="pull-right">9:00-22:00</span></li>
<li>Tuesday <span class="pull-right">9:00-22:00</span></li>
<li>Wednesday <span class="pull-right">9:00-22:00</span></li>
<li>Thursday <span class="pull-right">9:00-22:00</span></li>
<li>Friday <span class="pull-right">9:00-23:30</span></li>
<li>Saturday <span class="pull-right">14:00-23:30</span></li>
</ul>
</div>
</div>
And am trying to use JavaScript so that the current day is highlighted when a user visits the website:
// highlight current day on opeining hours
$(document).ready(function() {
$('.opening-hours li').eq(new Date().getDay()).addClass('today');
});
The above JavaScript is not producing any results and I am not sure why. Note: this is in a Django project with app core, and the JS file is located at core/static/core/js/index.js.
EDIT:
This is the error message shown in the console:
error: Bootstrap's JavaScript requires jQuery
That error message means that either jQuery wasn't loaded, or it wasn't loaded before Bootstrap's JavaScript. You will need to load jQuery before loading the Bootstrap JavaScript file. Your script tags should look something like this:
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
Im building a web application that has some server side layouts and partials. I'm trying to insert partials into the dom using javascript depending on which button the user clicks. Below I've included a simple example that shows what I want to do, obviously it doesn't work. I know you can registerPartials by writing them in the same document and so on, but is there a similar function to be able to use a partial from the server? I wish i could call registerPartial and just pass it the url to the partial or something. For the below example, assume the following folder structure, and that I've registered the partials folder accordingly:
-web
L views
L partials
L edit-user.handlebars
L reset-pass.handlebars
L main.handlebars
code:
<script type="text/javascript">
var edit = {{> edit-user}};
var resetPass = {{> reset-pass}};
$(document).ready(function(){
$("#editMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(edit);
});
$("#resetPassMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(resetPass);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav id="menu" class="navbar navbar-default">
<div class="container-fluid">
<!--<div class="navbar-header navbar-brand" id="beingEdited">Admin</div>-->
<ul id="menu-items" class="nav navbar-nav">
<li id="editMenuAction" data-toggle="tooltip" title="Edit this user's profile."><a>Edit Profile <span class="glyphicon glyphicon-edit"></span></a></li>
<li id="resetPassMenuAction" data-toggle="tooltip" title="Reset user's password."><a>Reset Password</a></li>
</ul>
</div>
</nav>
<div id="changesDiv">
</div>
Handlebars won't do http requests for you. I think you have three options:
You could write a small utility function that requests the template, compiles it, and uses it.
Or, if your templates are precompiled, you could consider using requirejs or a similar tool to dynamically load the script.
What I do on my site is precompiled the Handlebars and bundle those functions into my js files which use them, eliminating any latency between when data is ready to be rendered and the actual render.
My project consists of a menubar, and I would like to have the submenus display below when the mouse hovers over each button (hoverIntent). I am using the Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew) to create these features.
My project workspace consists of a main project php folder, including an index file which calls a jquery.min.js and subsequently the hoverintent.js and menubar.js.
Below is the start of the hoverintent.js:
(function($) {
// Alert Point A
$.fn.hoverIntent = function(f,g) {
// Alert Point B
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
etc...
})
My problem is that although I can reach the first alter point A I have in my code (and can generate the alter box), the program won't run the $.fn.hoverIntent = function(f,g){...} (where I have the second Alert Point B). I have a similar problem with my menubar.js (where the main functions of the code won't load).
What is usually the most common source of this problem and the best way to fix it?
It should be noted that I do call a jQuery earlier on in a different php project folder (still inside the project workspace) that has to do with a separate login program for this software. The Index file jumps to the login program to get the user's credentials before returning to the index document to display the main content.
I made sure this was the same jQuery file I later referenced in the index file before the hoverintent.js and menubar.js. Is this what is causing the issue?
Sorry I don't have all the code at this time to share, I will try to get the rest out soon. Thanks in advance.
----------------UPDATE-------------------------------
My main index file includes the head with the following code. Note the "../" are required since the wet-boew project folder is seperate from the main program project folder (index) in the workspace:
<head>
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script>
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script>
<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script>
<title>Title of the Project</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/ico" href="images/icon.ico">
<script src="../wet-boew-master/build/js/settings.js"></script>
<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/>
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head>
Further down, inside the body of the index we have the menubar:
<body>
<div id="wb-body">
<div id="wb-head">
<div id="wb-head-in">
<header>
<div id="wu-bnr" role="banner">
<nav role="navigation">
<div id="wu-psnb" >
<div id="wu-psnb-in">
<div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;">
<div>
<ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar">
At which point my menubar options and their respective submenus are listed as such:
<li *class=""* role="presentation">
<section role="presentation">
<h3 role="presentation">
<a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true">
<span class="expandicon">
<span class="sublink"><?=$glb_string["activities"]?></span>
</span>
<span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span>
</a>
</h3>
<div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**>
<div class="span-2" role="presentation">
<ul role="presentation">
<li role="presentation"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></li>
<li role="presentation"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></li>
</ul>
</div>
</div>
</section></li>
Would this be the correct location for my id="MyHoverIntent" (Bold **) in the code above?
It should also be noted that the italic code (*) above isn't changing (I'm assuming because the menubar and hoverIntent main functions aren't running). This would normally auto-update as the user hovers over each menubar option or leaves it. I know this because of the sample file that was included in the WET-BOEW folder that shows a fully functioning page (with a menubar and hoverIntent working) and these changes were observed in Firebug. Although for some reason Firebug showed that the sample never referenced menubar.js.
It's a little hard to tell what exactly you are doing that stops your code from working since we only have half of the code right now but a few things come to mind. First, the hoverIntent function will get called when you actually call it on a jQuery Object like so
$('#myHoverIntent').hoverIntent();
Second, make sure you are not doing that before the hoverIntent function actually gets defined and lastly, make sure you are passing window.jQuery into your immediately-invoked function expression
Here is a fiddle of a working example: http://jsfiddle.net/G3vCS/