I'm setting up BootstrapVue in my project, and the CSS appears to be there, but I'm not sure how I can confirm that the JavaScript files are included.
In the bootstrap getting started guide, it says to include this JavaScript file:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
How can I confirm that it's getting included?
BootstrapVue does not use any of Bootstrap's javascript files. BootstrapVue has re-implemented their jQuery code using Vue (no jQuery required)
So there is no need to include Bootstrap's javascript file in your project.
Related
How to configure syntax highlighting for GitHub Pages to be identical to GitHub syntax highlighting?
GitHub uses a closed syntax highlighting library not available on GitHub Pages. Supposedly, it should be possible to get a reasonable result using the default Jekyll highlighter. However, for me it was simpler to switch to the highlight.js JS library. Here are the steps.
Disable Jekyll's highlighter in the _config.yml
Obtain the highlight.min.js library
Prebuilt library is available from the website or via CDNs.
A custom version can be generated online, if necessary.
Obtain a CSS theme file
Specific CSS theme can be picked chosen using online demo service. CSS files are also available via CDNs or can be downloaded for local access.
Load the library, theme file, and initialize the library
In my case, I placed the library in /assets/js/highlight.min.js and included the following lines in /_includes/head_custom.html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css">
<script type="text/javascript" src="{{ '/assets/js/highlight.min.js' | relative_url }}"></script>
<script>hljs.highlightAll();</script>
I also included a CSS element /_sass/custom/custom.scss in to overwrite code block background:
.hljs {background: #fdfdfa !important;}
I need a plugin to replicate the functionality I've been enjoying using magicSuggest.
I have found many autocomplete plugins for Vue but none that come bundled with tags.
Try any of the examples on this page to see how your selection is saved as a tag in the input.
http://nicolasbize.com/magicsuggest/examples.html
I am after a plugin that will work with Vue js 2.0
I found this gem, looks like a keeper. http://monterail.github.io/vue-multiselect/
You can also check dropdown provided by semantic-ui here, This can be easily integrated with VueJS.
Also discovered this one, http://sagalbot.github.io/vue-select/
Looks very similar to vue-multiselect.
Try this vue-multiselect. Its supporting many options like tagging, search, multiple select, single select, asynchronous search, vuex and more.
https://github.com/shentao/vue-multiselect
npm install vue-multiselect --save
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
I am somewhat new to AEM and Sightly. I have written a 'page' component to house my page content. I have a number of devices with different CSS under /etc/designs/myapp as follows:
/etc/designs/myapp
- /128/style.css
- /240/style.css
etc etc..
Back in my page component, I have a number of different HTML files that I use to trigger the correct CSS via a Sling selector. For example:
/apps/myapp/components/page
- 128.html
- 240.html
The purpose of these files is to include the HTML <head> section with the CSS as an inline style (cannot link to external CSS due to device limitations).
The problem that I am having is that if I place 128/style.css inside the component itself, the include works. If I have it under /etc/designs/myapp, I can't get it to include properly. I have tried using ${currentDesign.path # appendPath='/128/style.css'} and I have tried explicitly referencing the whole path.
Here is an example of 128.html, under the page component:
<html>
<head><!--/*
*/--><div data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap></div><!--/*
*/-->
<title>${currentPage.title}</title>
<div data-sly-unwrap data-sly-include="/etc/designs/myapp/128/style.css"></div>
</head>
<body class="main" role="document" data-sly-include="body.html"></body>
</html>
I realise that I need a <style></style> section wrapping any CSS that is included, but for now, I am just trying to get a page to include from /etc/designs.
Any help would be greatly appreciated.
From the definition of data-sly-include: https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html#include
data-sly-include: Replaces the content of the host element with the markup generated by the indicated HTML template file (Sightly, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current Sightly context (that of the including file); Consequently, for inclusion of Sightly files, the current data-sly-use would have to be repeated in the included file (In such a case it is usually better to use data-sly-template and data-sly-call)
It's not meant to be used for the type of inclusion you are trying to do since you are not calling any renderer. I think you should use client libraries and include your CSS files only, here is the documentation about this : http://blogs.adobe.com/experiencedelivers/experience-management/sightly-clientlibs/
You should define a client library category for each of your styles and call the right clientlib when you need it using <meta data-sly-call="${clientLib.css # categories='category.style.128'}" data-sly-unwrap></meta>
Hope this helps.
While working on a bootstrap implementation for Karamba! I get many conflicts from Makumba's default JS library prototype, which is conflicting with the one bootstrap is using - jQuery.
Is there a way to tell Makumba to not include it's Javascript files and libraries, as we any want to use our own JS?
I found a workaround for now:
It seems that Makumba searches for the <head> and </head>tags and inserts its javascript and css files right after or before them.
to avoid this, i added an attribute to these tags:
<head attr>
...
</head attr>
I know my question is similar to many others, but I hope the specifics are different enough to justify a new question. A joomla site I'm working on uses mod_superfishmenu. This loads jQuery 1.2.6. and extends it. I'm creating a component that uses the jQuery colorbox plugin that requires jQuery 1.3 or higher and again extends JQuery. One technique to have both is reassign jQuery to another name with jQuery.noConflict(). For instance,
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
var jQuery1 = jQuery.noConflict(true);
</script>
and then change all instances of jQuery in the JavaScript code for colorbox to jQuery1, and make sure all this loads before the superfish module loads its jQuery. But I don't like having to edit the colorbox code, or remembering to edit it again if I upgrade to a newer version. So, I thought it might be possible to load the older jQuery first, then use jQuery.noConflict(true) to rename it, then load the current jQuery, and transfer the plugins attached to the first jQuery to the second one. The part that copies the plugins looks like this:
<script type='text/javascript'>
var oldJquery = null;
if (jQuery != undefined) {
oldJquery = jQuery.noConflict(true);
}
</script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
jQuery.noConflict();
if (oldJquery) {
for (plugin in oldJquery.fn) {
if (!(plugin in jQuery.fn))
jQuery.fn[plugin] = oldJquery.fn[plugin];
}
}
</script>
This seems to work, but I'm concerned that I've overlooked some detail that can bite me later on. So if anyone sees a flaw in this approach, please point it out. I also welcome any critique that shows why this is a bad idea. Thanks.
Why not make a simple change to mod_superfishmenu and remove the line that include jQuery 1.2.6? This way your jQuery colorbox plugin will load jQuery 1.3 itself which mod_superfishmenu will also use. Simple one line change that is not difficult to do.
As a side note I think all developers for Joomla that include any javascript library should have backend settings in order for users to enable or disabled any library should they have conflicts.