In my project I'm using AdminLTE from https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js but it doesn't load SidebarSearch.js on it.
How do I use this plugin in my project? Does anyone have a simple example to show me, because in the documentation itself it is not clear how to use this plugin.
mainly at this point:
$('[data-widget="sidebar-search"]').SidebarSearch('toggle')
Where in HTML / JS should I put this line of code?
To answer your question, simply add it in a script tag before the closing body tag of your page, example:
<html>
<head>
...
</head>
<body>
...
<script>
$(document).ready(function()
{
// Example to toggle dropdown list of the search bar
$('[data-widget="sidebar-search"]').SidebarSearch('toggle');
// Example to initialize the plugin with options
let options = {
arrowSign: '/',
minLength: 2,
highlightClass: 'text-yellow',
notFoundText: 'No results'
...
};
("[data-widget="sidebar-search"]").SidebarSearch(options);
});
</script>
</body>
</html>
However this method seems to return duplicate results.
Preferred method
Just add the options as attributes beside data-widget="sidebar-search".
It should look like this data-not-found-text='No results' data-highlight-class='text-yellow' data-min-length='2'
adminLTE documentation
Related
So I need to add the attribute media="all" to these two link tags:
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">
but my local HTML file is configured as:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css # categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>
It is a language called HTL, HTML Template Language. There's a way to add attributes via HTL but you need to create a whole java class in the back end and call it, it's a headache.
I want to know if I can add some javascript to append the attribute media="all" to the link tags to these specific CSS file path.
I was thinking of putting both paths inside a div and then with javascript find that div and append an attribute to each link tag inside that div.
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';
// Here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
element.media = 'all';
});
A script tag is being created and I want to add async="" to this:
<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js # categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' # resourceType='granite/contexthub/components/contexthub'}" />
Yes, it looks fine. But your code has a mistake. You should get the first element from the collection to access <head></head> element.
var head = document.getElementsByTagName('head')[0];
Why would you do that? Just do not use the clientlib mechanism. Most frontend developers will use their IDEs to build and minify CSS and JS anyway so there is not much to be lost if you import those artifacts at buildtime and add the tags in your code directly in the way you need them.
quick question. When publishing an element to webcomponents.org, many elements have a nice demo, which you can open on the side and preview the element.
I created a demo for my element in demo/index.html but I can't figure out how to link this page properly for webcomponents.org to recognize.
I tried replicating the entire structure of the polymer/paper-button element, but it didn't work.
I'm using the Polymer 2.0 preview and the iron-demo-helpers to format the example.
Any ideas?
Thanks!
in your bower.json you can provide multiple demos via
"demos": {
"Demo": "demo/index.html"
},
for the inline demo you can add something like this to your README.md
## Demo
<!---
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="grain-read-more.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<grain-read-more>
<h3>Read More</h3>
<div slot="more">
The Content is only visible if grain-read-more is opened
</div>
</grain-read-more>
```
It does not run javascript instead of showing the code on webpage. Anyone can tell me why?
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
I can confirm that JavaScript.html was created.
You have the correct syntax in your printing scriptlet The official documentation has an exmaple of HTML, CSS and JavaScript in Separated files, they create an include function in the .gs, but the syntax is the same:
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Make sure that:
Your JavaScript.html contain <script> tags respectively, because they are HTML snippets and not pure .js files:
JavaScript.html
<script>
$(function() {
console.log('Page is loaded');
});
</script>
Your doGet() function returns an HtmlTemplate object using the createTemplateFromFile(filename) function:
code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
I am having problem with autocomplete mode with dhtmlx combo.
The includes files are as follows:
// Images
<script>
window.dhx_globalImgPath="combo/dhtmlxCombo/codebase/imgs/";
</script>
// CSS
<link rel="stylesheet" type="text/css" href="combo/dhtmlxCombo/codebase/dhtmlxcombo.css">
// Required JS files
<script src="combo/dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script src="combo/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script src="combo/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
I have no issues with the code above and works well.
The following code I have on the page I have the combo itself is as follows:
<!-- HTML Combo -->
<div id="pickup" style="width:260px;"></div>
<!-- Initialisation of combo -->
<script>
var x = new dhtmlXCombo("pickup",260,"image");
// this works
x.loadXML("list.xml");
x.enableFilteringMode(true);
</script>
My problem is i want to use autocomplete mode by using the following line of code:
x.enableFilteringMode(true, "list.xml", true, true)
When i try the above line, it doesnt give error but it doesnt filter either. However im told to use a php file but i don't know what I need to put in the list.php file itself. I can code just dont know what to put in. Can anyone shed some light, the docs arent that helpful.
enableFilteringMode enables server-side filtering. It means that when you type something in the combo header, this text is sent to the script that is defined the second parameter of the method. The script generates XML with options that correspond the mask.
Therefore, you can't use static XML in this case.
You can find a demo of the dynamic loading in the dhtmlxCombo package:
dhtmlxCombo/samples/04_filtering/01_combo_big_db.html
Also, you can use dhtmlxConnector that provides a ready solutions for the server side (PHP, ASP.NET, etc.). The dhtmlxConnector package includes a demo with dhtmlxCombo, e.g.:
dhtmlxConnector_php_v10_110725/php/samples/combo/02_sql.html
How do you integrate CKFinder with the new CKEditor.
It is very underdocumented on the website, and i am literally getting nowhere.
A step by step guide would be greatly appreciate as, as far as i am aware.. this is the only free/good image upload solution for a wysiwyg editor that is any good. Can someone confirm?
Thanks
You can find a tutorial on integrating CKFinder with CKEditor here:
http://www.webshaolin.com/index.php?page=article&articleid=40
Try doing following steps.
1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below.
3. Create index file (index.html) which will be containing the editor as below code.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<h1>CKEditor CKFinder Integration using PHP</h1>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
</body>
</html>
so your folder structure will be something like this:
htdocs
|_integrated
|_ckeditor
| |_config.js
| |_...
|_ckfinder
| |_config.php
| |_...
|_uploads
|_index.html
Now open file config.php inside ckfinder & make following changes:
function CheckAuthentication() {
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
return true; // not good option though; go for sessions
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.
Check the documentation site for your server language: http://docs.cksource.com/CKFinder_2.x
For example this part of the PHP docs: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration
And btw, CKFinder is not free, you must get a license in order to use it.
First you must have a textbox to convert to CKEditor:
<textarea id="newTextArea">Some text</textarea>
Then all you need is some javascript code for the conversion of this texteditor to a CKEditor instance and the integration of this editor with CKFinder.
<script type="text/javascript">
var newCKEdit = CKEDITOR.replace('newTextArea');
CKFinder.setupCKEditor(newCKEdit, '/ckfinder/');
</script>
The second parameter of the setupCKEditor function must be the folder in your website where you uploaded ckfinder.
http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration