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>
Related
I just wrote a simple signup page, and validated it with pure javascript and jquery. I also used font-awesome icons to show status of the input value. It worked fine with all the user agents(I tested it with a chrome extension). but after putting the files to a server it is not working with any of the user agents.
issues :
Some user agents not showing font awesome icons, but the scripts are working.
In some user agents the icons as well as the scripts both are not working.
I don't no where the issue is.
<head>
<title>TicketIsle Login</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="js/get_post.js"></script>
</head>
the above is how I put the scripts and style files.
if your page is in secure (https) some browsers dont allow you explicitly to download scripts or styles from non-secure (http) pages.
This syntax should be used to avoid this protocol issue:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is protocol agnostic i.e. it will work with both http and https.
I will suggest you to us downloaded file rather using CDN.
You should put all the script tag bottom of your page and put all CSS file on top of page in head tag.
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome CSS -->
<link href="fonts/font-awesome.css" rel="stylesheet">
</head>
<main>
<body>
</body>
</main>
<!-- ------------------------------------- -->
<!-- Javascript Includes -->
<!-- ----------------------`enter code here`--------------- -->
<script type="text/javascript" src="jquery.js"></script>
</html>
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>
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.)
I realize this question has been asked multiple times before, but unfortunately, I am unable to find a solution from the existing questions & answers. I have created an html file which I think will have bootstrap functionality by linking to the CDN. It has a link to the JQuery CDN as well.
Well ... I just noticed that the Bootstrap styles are not loading at all. I am not sure why.
Nonetheless, I am assuming that fix will be relatively minor, but I have been struggling for much longer than that to figure out why the Popover is not working.
Please, if you are answering, make sure you are referencing the Bootstrap 3 rules.
note: the structure of the below code was taken straight from the Bootstrap website.
Without further ado !
Here's the code.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="btn-group-vertical">
1
2
3
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
$('.btn').popover();
</script>
</body>
</html>
You need to add http: to this link -
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
So this is the answer:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
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.