I have in my project Bootstrap5, ClipboardJS, JQuery and Tooltipster.
I have tried to follow exactly the initial instructions on the Tooltipster website, I could not figure out what I missed, here are two captions, the first of the JavaScript scripts and the other of one the components (buttons) where a tooltip should appear after clicking one of them:
<!-- (Right before </body>) -->
<!-- ClipboardJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
var btns = document.querySelectorAll('.btn');
var clipboard = new ClipboardJS(btns);
</script>
<!-- Tooltipster -->
<script type="text/javascript" src="tooltipster.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').tooltipster({
trigger: 'click'
});
});
</script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button class="btn btn-outline-dark rounded ms-2" title="Copied! 🙌" type="button" data-clipboard-target="#email">
Copy
</button>
Thank you for help.
I had to load JQuery before Tooltipster as Marc said in a comment, I was not aware it matters.
Related
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...
I want to provide a set of additional information in my bootstrap template. I want to have a set of terms and conditions with a plain english popover for certain key terms.
I've included all the correct links to the CDN and I get a popup from just the below code but when I view it as a whole page this stops working and just sends me back to the top of the page. Is there something that I need to bear in mind when doing this? I've spent days trying to tweak this to work?
Thank you
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/popover.js"></script>
<!-- Plugin JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
You didn't set right the CDN file. Please set the right path to the jquery library and try to remove the file jquery.slim if it's not required.
Checkout the snippet
$('[data-toggle="popover"]').popover();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
the website can be found here: http://www.healthygit.com
Basically when the site loads depending on what order I include the javascript depends what breaks, for example:
If I include the Menu JavaScript (below) first then the menu will not work but the image slider will.
Menu JS:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
But if I include the menu files last the menu will work and the slider will not, the slider files are:
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
The errors I am getting are:
ReferenceError: jQuery is not defined
...),delay:m(a(this).attr("delay"),bE),effect:r[a(this).attr("effect")]!=undefined?...
jquery....min.js (line 1)
And
ReferenceError: $ is not defined
$(document).ready(
preview.js (line 1)
Can anyone help me please?
I noticed in your webpage that you placed jQuery last. I think it should be at the first. Have you tried it in the following order:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
Tell me if it helps.
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.
I have a page, i want it to display some content in a modal dialog (jquery UI dialog) as soon as the page is loaded.
$(document).ready(function(){
$("#example").dialog();
});
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
Thanks
Your div tag isn't properly formatted and it needs to be closed. The following worked for me, but it needs proper CSS files.
<html>
<head>
<script type="text/javascript" language="javascript"
src="jquery/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="jquery/jquery.ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#example").dialog({modal: true});
});
</script>
</head>
<body>
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
</body>
</html>
Wayne Khan is right in that
the default behavior is to open when you call dialog(), unless you set autoOpen to false.
and tvanfosson has it nearly correct, though the default dialog is not Modal. To display a modal window, you must set the modal option to true
To illustrate, here's a trimmed-down excerpt from a small project I was working on tonight:
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript" src="./init.js"></script>
<link rel="stylesheet" href="./css.css" type="text/css" />
<script type="text/javascript">
$(function() {
$('#exampleNode').dialog({
modal: 'true'
});
});
</script>
...
For your reference:
The jQuery Dialog Documentation (see the bottom for a styling reference)
A Modal Dialog example
My small MIT licensed project, which has a modal dialog: inComeAgain?