This question already has answers here:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Closed 8 years ago.
I want to use Google CDN for jQuery and jQuery UI..
I'm using the answer from here for jQuery.
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
but i don't understand this bit:
if (typeof jQuery == 'undefined')
so how can i do it for jQuery UI?
also, will this work with custom jQuery UI theme as this produces a custom js file too?
You can make the call using
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
You can also link to other Ui themes by changes the name of the theme. In This case change the name base to any other theme name /base/jquery-ui.css to any other theme.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
Check out the jQuery UI Blog for a link of all CDN links http://blog.jqueryui.com/
If you're concerned that the Google CDN ever fails or goes down, you can fall back to a local copy when the CDN is offline (this example is baked into templates like HTML5 Boilerplate):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')
</script>
If you are having a custom jQuery UI theme, you have to host that on your own server. Google only hosts the main jQuery UI themes.
If you want to check whether or not the jQuery UI library has loaded, you can do this:
if (jQuery.ui) {
}
Here is the list, just change to the version you need.
https://developers.google.com/speed/libraries/devguide#jquery-ui
Related
This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
I can't get my font-awesome icons to show up. Tried importing css with multiple methods
(3 answers)
Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?
(4 answers)
Closed 2 years ago.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
This is the link where I need to get the script code from, but the link from here is not working.
The link to put in my HTML:
<script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
I think you are looking for a CDN.
You can simply google for packageName CDN.
I use bootstrap CDN for my projects, I would add this in my HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
But the CDN link might be different (e.g. you might want to use a different version of the package) so I suggest you to search it on the internet.
I am creating a project using Javascript. In my project i am using kendo with bootstrap. The Problem some of the kendo and bootstrap are conflicting.I know there is $.noconflict, But this create me lot of problems. Mainly the kendodropdown is conflicting.
<!-- Mainly scripts -->
<script src="$themeDisplay.getPathThemeRoot()/js/jquery-2.1.1.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/bootstrap.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.mousewheel.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.jscrollpane.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/custom.js?v=$version"></script>
If I remove the bootstrap file then kendo functions working properly.Please help me for using kendo and bootstrap together.
The exact issue is when i open dropdown and scrolls it automatically closes.
This is the code:
$("#searchTktID").kendoDropDownList({
filter: "startswith",
});
and am handling this situation using
close: function(e){
if(isScroll) {
e.preventDefault();
}
},
open:function(){
isScroll = true;
},
But this is not correct way i think.
Without knowing your exact problem it sounds like it may be a script ordering problem.
For example this is how I include the scripts in my projects for kendo and bootstrap integrated MVC apps.
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-switch.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2019.2.514/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Scripts/umd/popper.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
#Scripts.Render("~/bundles/fa")
#Scripts.Render("~/bundles/Custom")
As long as you ensure that the bootstrap.js file is loaded after the kendo.js files you should be good.
As I said in my comment I have been using this approach for both version 3.x and 4.x
Edit: Please see a this dojo with bootstrap and kendo libraries working together.
https://dojo.telerik.com/AkIBOjOr/2
One thing to check is that you aren't reloading JQuery after you have loaded the kendo js files as that will show the kendoDropDownList is not a function error.
Edit 2: I have added filtering on the cap colour dropdown list.
That is one of the downsides of Kendo, you will need to customize your controls to look the way you would like. Kendo override your base bootstrap css, and mainly on the controls like dropDown, comboBox, autoComplete they are quite problematic. One solution is to use the telerik theme builder
You are able to customize your controls and download the CSS files. Other solution will be choosing a different theme from the bootstrap theme but both solutions need to override your css to get the final design you intend.
general documentation for setup a theme
I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!
You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH
You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)
Here is the code that includes the jquery reference:
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet prefetch" href="popup.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
When I comment out the jquery reference the page loads much quicker (albeit without the necessary functionality). I have also tried storing the file locally but that did not help the issue.
First of all, consider using jQuery locally. It could speed up page dramatically. However, if this doesn't help, use remote sources. But,
don't link jQuery directly from their side! Use jQuery CDN instead:
http://codeorigin.jquery.com/,
jQuery Download Page -- see "Using jQuery with a CDN" section.
An alternative, though requiring a lot of work, would be dropping jQuery in favor of ZeptoJS, which gives you nearly exactly the same syntax, as jQuery, and most of its core functionallity, with 1/4 (25%) of code size. And it loads helly fast!
Something was pointed out to me that I never heard of before and came as quite of surprise to me: the files to include when using jQuery Mobile and a custom theme.
As their site states, if you just want to use the bare-bones version of jQuery Mobile, all you need to include is jquerymobile.css, jquery.js, and jquerymobile.js. But what was pointed out to me is that if you want to use a custom theme, you do not have to include jquerymobile.css in your header. Just theme.css and mobilestructure.css.
Is this true or just some confusion on my part? It seems like a simple question but I couldn't find a definitive answer out there.
Yes this is true, I just looked at my code that works using jquerymobile and a theme I made using the theme roller and the only two css files I have are .
<link rel="stylesheet" href="/stylesheets/themes/cyan1.css" />
<link rel="stylesheet" href="/stylesheets/jquery.mobile.structure-1.3.1.min.css" />