I am using bootstrap in my asp.net form application. I have all the required files in the project:
bootstrap.min.js
jquery-2.0.3.min.js
bootstrap.min.css
When I add a content page in the root directory , the site work perfectly; all the bootstrap features work correctly. But the problem is, when I place content in another folder (eg. webapp/content/default.aspx), the site does not work in IE. On other browsers it displays the content but the features of bootstrap don't work at all.
My scripts:
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
JQuery 2.0.x is not compatable with some of the older browsers.
Use the latest 1.9.x
See http://www.sitepoint.com/jquery-2-support-ie6-ie7-ie8/
**Try using the files:**
ie8-responsive-file-warning.js,
html5shiv.js and
respond.min.js.
Make the Downloads and place the files in js folder.
**Use the paths**
"#Url.Content("~/patch/file.js")"
****Example****
<head>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="#Url.Content("~/js/ie8-responsive-file-warning.js")"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="#Url.Content("~/js/html5shiv.js")"></script>
<script src="#Url.Content("~/js/respond.min.js")"></script>
<![endif]-->
<script src="#Url.Content("~/js/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/js/bootstrap.min.js")"></script>
</head>
You need a /
as in
<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
To be more complete
starting with a slash makes it relative to the root website directory
Two periods ../ would make it go up one directory (so ../../ makes it go up two directories ...)
~/ takes you to the root of your project directory.
otherwise it is relative to the directory the current file is in. (so js/jquery-2.0.3.min.js is looking for the file in a js subfolder of your current dir.)
Related
I am designing a site on local host using php,bootstrap , html , jquery everything was working fine until i added bootstrap less its still working but now if i refresh the page or go another page its like a flash before the page loads like it shows a blank screen and then loads the content, before i added less everything was cool it loaded just like any other site now its like a delay , anything that can help me with this issue?
when i use regular twitter bootstrap the page loads fine its just with bootstrap less
<!-- Bootstrap -->
<link rel="stylesheet" href="css/style_template.css?v=2" type='text/css'>
<link href="../bootstrap/less/bootstrap.less" rel="stylesheet/less">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://js.pusher.com/3.0/pusher.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/less.min.js"></script>
<script src="js/custom.js" type="text/javascript">
</script>
PROBLEM:
The JQuery File Upload plugin works fine when I open its basic-plus.html file in the browser, but it links to a few .css and .js files on the internet in the href and src attributes of its style and script tags.
After I downloaded those files from the internet and linked to their local versions in basic-plus.html, I get
File Upload Failed
when I try to upload a file.
The question is why and how do I fix this?
EXPLANATION:
I am trying to use the JQuery-File-Upload plugin. I followed their setup guide and it worked. That is I downloaded the .zip repository from their Github and extracted it in my LAMPP's htdocs folder. Then I opened basic-plus.html in browser and it worked perfectly fine.
The thing is that the basic-plus.html has the following statements:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
That is, this .html page is including .css and .js files from the internet.
My requirement is to make a webpage (which contains a PHP file uploader) which works offline.
So I opened in the browser the links given in the values of href and src attributes of the <link> and <script> elements above, and I downloaded those .css and .js files into my project folder, and changed the paths in the values of href and src attributes to local paths where I placed the files:
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
...
<script src="js/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="js/bootstrap.min.js"></script>
Now when I open basic-plus.html in the browser, I get File Upload Failed when I try to upload a file.
Why is this happening? How can I fix it?
My toggle javascript buttons worked initially - however I have now found that my toggle button including navbar collapsing toggle and accordion panels.
I have included my header and footer. From what I have researched I cant see why it has stopped working.
Any help would be appreciated.
Header:
WEBSITE TITLE
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Footer:
<footer>
<div class="container">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I guess you just copied what was said on the bootstrap side for example:
<script src="../../dist/js/bootstrap.min.js"></script>
If you have the js bootstrap file in one of your folders in the root, you might want to make sure it is the path is right. For example if your html file is in the same directory as your bootstrap.min.js it should be
<script src="bootstrap.min.js"></script>.
The quick fix you just did which is simply changing it to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Might solve the problem now but it will render your local bootstrap file useless which you can make useful by using a bootstrap cdn fallback.
Which is basically loading your local bootstap files if you fail to load remote bootstrap files. This is how to make a bootstrap cdn callback
If you are using bootstap 3.x then you need at least jquery 1.9.1 version library.First download the jquery library and bootstrap js and include in your application and then register both in your application page.First register the jquery library and then bootsrap js as mentioned below.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
So, i did faced this problem and there are 2 main steps in this,
Number1: You need to include 3 files or links, 1 for Bootstrap CSS, 1 for bootstrap js and 1 for jquery.
You can include like this:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Number 2: Now make sure that when you include these files, you include them in this order, First CSS, then JQUERY, then JS.
This is because css is loaded first, then jquery and jquery is needed to be loaded before JS, this is because the JS used in bootstrap is written in Jquery so we need to load Jquery before JS.
And you will be good to go. Thanks
I changed the javascript tag displayed in my footer example from:
<script src="../../dist/js/bootstrap.min.js"></script>
to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
This has resolved the problem.
if you check the console of the page, it should show a notice that jquery is not seen by javascript. so, you can solve this by downloading the jquery source code from the jquery site and then you can add the following line of code before the end of your footer:
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
In order to keep my sites as fast as possible, I prefer loading .js scripts at the end of the document, just before the closing body tag, reserving css for the HEAD section. However, I've found that the html shiv code below apparently only works when instantiated in the HEAD section.
<!--[if lt IE 9]>
<script type="text/javascript"
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
Anyone know of a workaround?
Google code is NOT a CDN. Don't link files in trunk.
Look at the response headers :
Cache expires after 3 minutes... it's the exact opposite of what we want from a CDN.
Please stop doing that.
Note
As João Cunha commented, you can find real CDN links on cdnjs.com: html5shiv. (respond.js can be found there as well)
Sample:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
The way the HTML5 shiv works requires you to put it in the <head> element. In fact, it says so in the project page:
To use this script, it must be included before the <body> element (i.e. in the <head>) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script.
This is so IE can recognize the HTML5 elements before it starts constructing the document body.
There is no workaround for this.
The lesson here is not to obsess over putting all your scripts at the end of the page. A CDN is pretty darn quick at serving stuff, so you shouldn't need to move this particular script.1
1 But as others have mentioned, since Google Code isn't actually a CDN, you should pick another source.
I've got a strange problem. I'm coding a website and inlcuding jQuery and some plugins, that are stored in 'js' folder. When I try to open it through a browser jQuery, plugins and all my custom scripts aren't working. Maybe it's somehing with my code, but don't think so. Of course when I inlude jQuery externally (Google API's) it works, but got some plugins and scripts which aren't hosted elsewhere. Here's my 'head' tag.
<title>TOMTRANS - International Transport</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- S3Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/s3slider.css" media="screen" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!-- jQuery Effects -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- S3Slider -->
<script type="text/javascript" src="js/s3Slider.js"></script>
<!-- S3Slider Init -->
<script type="text/javascript">
$(function() {
$('#s3slider').s3Slider({
timeOut : 3000,
});
});
</script>
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
By locally do you mean a local web server (i.e. http://localhost:12345/) or the file system (i.e. file:///C:/Users/John/Desktop/hello.htm)? If it's the latter, then it's probably the security settings. Some browsers block scripts from the file system by default.
Try to do
"./js/..."
I think it will work as with external jquery.
Thanks
Ok I have solved my problem. It's my IDE fault - Aptana Studio 3. This bug occured because I didn't upload hidden .project file, while I copied it through default file browser (Ubuntu's Nautilus). When I used built-in AS3 ftp manager it also copied .project file, and now it works.
I know this thread is old, but I have't found the answer to this very annoying problem so I am adding my solution.
If your physical folder path includes an underscore, it will fail.
So, if you dropped your website to lets say C:\MyRoot\MyFolder_2\WebSite1\ then it won't work. however, if you remove the underscore and it becomes C:\MyRoot\MyFolder2\WebSite1\ it will suddenly work and jQuery will suddenly be loaded.