I'm trying to initialize this plugin in different ways, inside my HTML document, but it seems isn't working...
I attached a picture of the Usage documentation, and this is the link of the plugin: https://unpkg.com/darkreader.
I'm using javascript for that, and not typeScript.
enter image description here
Here you haven't mentioned how you're including plugin in HTML document, So try to add jquery first and after that include this script like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>
</script>
<script src="/scripts/darkreader.js"></script>
</head>
<body>
</body>
</html>
This is the end of my HTML file:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Google LogIn Client -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- DarkReader Dark theme plugin -->
<script src="https://unpkg.com/darkreader#4.7.15/darkreader.js"></script>
<script type="text/javascript">
import {
enable as enableDarkMode,
disable as disableDarkMode,
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
</script>
I tried to initialize the plugin, but still not working...
Related
<!-- Vendor JS Files -->
<script src="../assets/vendor/jquery/jquery-3.6.0.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/datatables/datatables.js"></script>
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../assets/vendor/chart.js/chart.min.js"></script>
<script src="../assets/vendor/echarts/echarts.min.js"></script>
<script src="../assets/vendor/quill/quill.min.js"></script>
<script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="../assets/vendor/tinymce/tinymce.min.js"></script>
<script src="../assets/vendor/php-email-form/validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.0.0-beta2/js/tempus-dominus.js"></script>
<script src="https://kit.fontawesome.com/a98bc9d553.js" crossorigin="anonymous"></script>
<!-- Template Main JS File -->
<script src="../assets/js/main.js"></script>
What's wrong with my script init? already tried, it always give me Uncaught TypeError: $(...).tempusDominus is not a function eventhough the Jquery already at the top
This page outlines using the picker with jQuery. The jQuery-provider.js file must be included after the main picker code. jQuery is no longer a requirement and is here for backwards compatibility.
Forgot to include the JSProvider.js
var result = document.getElementById("result")
//can't add bootstrap classes to <div> and <table>
<div class="container"><table class="table">
result.innerHTML = "<div><table><thead><tr><td>Column A</td>
First of all in your code the outer div doesn't seem to have an id attached to it, call the div like:
<div id="result>
To add bootstrap to your html you have to first import the css file and put it in the head element of your html like:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
Then add the javascript, jquery, and popper.js file to the end of the body of the html:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Also make sure to add your javascript to the html using the script tag as seen above or put it b/w the script tags
<script>
some js
</script>
I'm including datatables.js to my Liferay theme so it can be used for all the portlets in that theme. I have included it in the
portal_normal.vm
just above te end og the body tag like this
<script src="$theme_dir/js/jquery.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/modernizr.min.js"></script>
<script src="$theme_dir/js/clndr.js"></script>
<script src="$theme_dir/js/moment.min.js"></script>
<script src="$theme_dir/js/es.js" type="text/javascript"></script>
<script src="$theme_dir/js/fullcalendar.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap-year-calendar.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap-year-calendar.es.js" type="text/javascript"></script>
<script src="$theme_dir/js/form-solicitud.js" type="text/javascript"></script>
<script src="$theme_dir/js/filterable.pack.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/datatables.js" type="text/javascript"></script>
</body>
The problem is that the datatable.js seems to load correctly, but when I refresh the page with F5 it doesn't load the js.
I've tried to load the js also in the
portal_pop_up.vm
but it doesn't work at all.
I want to play around with the ExtJs calendar and was wondering which js files i will need to include to do so?
The example from the Ext website includes many js files and I am wondering which ones are necessary and which ones are not. I'm assuming it depends on what functionality I wish the calendar to have, so lets just say I want to expose all of its functionality for now.
the following is a list of js and css files from the example on the Ext website:
<!-- Calendar-specific includes -->
<link rel="stylesheet" type="text/css" href="resources/css/calendar.css" />
<script type="text/javascript" src="src/Ext.calendar.js"></script>
<script type="text/javascript" src="src/templates/DayHeaderTemplate.js"></script>
<script type="text/javascript" src="src/templates/DayBodyTemplate.js"></script>
<script type="text/javascript" src="src/templates/DayViewTemplate.js"></script>
<script type="text/javascript" src="src/templates/BoxLayoutTemplate.js"></script>
<script type="text/javascript" src="src/templates/MonthViewTemplate.js"></script>
<script type="text/javascript" src="src/dd/CalendarScrollManager.js"></script>
<script type="text/javascript" src="src/dd/StatusProxy.js"></script>
<script type="text/javascript" src="src/dd/CalendarDD.js"></script>
<script type="text/javascript" src="src/dd/DayViewDD.js"></script>
<script type="text/javascript" src="src/EventRecord.js"></script>
<script type="text/javascript" src="src/views/MonthDayDetailView.js"></script>
<script type="text/javascript" src="src/widgets/CalendarPicker.js"></script>
<script type="text/javascript" src="src/WeekEventRenderer.js"></script>
<script type="text/javascript" src="src/views/CalendarView.js"></script>
<script type="text/javascript" src="src/views/MonthView.js"></script>
<script type="text/javascript" src="src/views/DayHeaderView.js"></script>
<script type="text/javascript" src="src/views/DayBodyView.js"></script>
<script type="text/javascript" src="src/views/DayView.js"></script>
<script type="text/javascript" src="src/views/WeekView.js"></script>
<script type="text/javascript" src="src/widgets/DateRangeField.js"></script>
<script type="text/javascript" src="src/widgets/ReminderField.js"></script>
<script type="text/javascript" src="src/EventEditForm.js"></script>
<script type="text/javascript" src="src/EventEditWindow.js"></script>
<script type="text/javascript" src="src/CalendarPanel.js"></script>
Calender is not included with the main extjs javascript files. You can use the calendar-all.js with the CSS instead of having the individual files added from the src directory. The calendar-all.js file is available in the calendar example folder itself.
So, you will require:
<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/css/calendar.css" />
<!-- Scripts -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="calendar-all.js"></script>
FYI, you can also check out Ext Calendar Pro as well, which is the full product version of the example that shipped with 3.3. (Full disclosure: I am the author)
It has additional examples and complete docs and many bugs have been fixed since that example was created.
But yes, if you just want to play around with the one in 3.3 simply include calendar-all.js as mentioned above.
I think you only need this ones:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
Everything else is loaded by Ext JS by itself.
I am using jquery and its related plugins in my site.
Since i use more js. for visiting each page in my site. all the js loads so site loading time increases.
How to use js libraries efficiently without loading js for each page visit.
UPDATE:
I am using
<!-- JQUERY-->
<script src="{$TEMPLATE_FACK}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$.noConflict();
</script>
<script src="{$TEMPLATE_FACK}/js/global.js" type="text/javascript"></script>
<!-- JQUERY.VALIDATE SCRIPT -->
<script src="{$TEMPLATE_FACK}/js/jquery.validate.js" type="text/javascript"></script>
<!--JS VALIDATION SCRIPTS -->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jsvalidate.js"></script>
<!--jQuery URL Script-->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jquery.url.js"></script>
<!-- TINYMCE SCRIPTS -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/tinymce/jquery.tinymce.js"></script>
<script src="{$TEMPLATE_FACK}/tinymce/tiny_mce_src.js" type="text/javascript"></script>
<script src="{$TEMPLATE_FACK}/js/quicktags.js" type="text/javascript"></script>
<!-- WORD COUNT -->
<script src="{$TEMPLATE_FACK}/js/jquery.wordcount.js" type="text/javascript"></script>
<!-- Thick box scripts -->
<script src="{$TEMPLATE_FACK}/js/thickbox.js" type="text/javascript"></script>
<!--JS FOR GRAPH (Highcharts Refer: http://highcharts.com/ref/#plotOptions-pie-point-events)-->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<!--<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/modules/exporting.js"></script>-->
<!--JS FOR Tag adding in Faq add1.html - added by Mogan Dec 02, 2010-->
<script src="{$TEMPLATE_FACK}/js/create_html.js" type="text/javascript"></script>
<!--FANCY BOX -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.fancybox-1.3.2.js"></script>
This much of js i am using in header section. once i am visiting each page all these loads again and again
The user doesn't have to load it each time, just be sure to set your cache headers correctly so the user caches the JavaScript files that are reused. For libraries specifically (since this is tagged jQuery), look at using a CDN - which will also have the cache headers I mention, as well as parallelizing the download since it's not on your own domain.
Also, you can use a Content delivery network (CDN) for libraries like jQuery etc. Google provides a bunch.
Additionally to the previous answer you should minify all javascript file together, optionally you can use gzip compression.