I am completely new to jQuery. When working with jQuery, I disconnected the Internet to check if my webpage works fine without an Internet connection. It displayed some thing which is not required. When I saw the source code, it displayed:
<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
So I downloaded the code and kept it in my root folder. Still it's not working well. Can we work with jQuery while offline?
Here is my code:
<!doctype html>
<!-- [if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif] -->
<!-- [if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif] -->
<!-- [if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif] -->
<!-- [if (gt IE 9)|!(IE)]> <!-- > <html class="no-js" lang="en-US"> <!--<![endif] -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Home</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<script src="jquery.min.js"></script>
<!--[if lt IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
<script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.5.1" />
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser.
Upgrade your browser today
or <a href="http://www.google.com/chromeframe/?redirect=true">install
Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="links">
<li>Home</li>
<li class="dropdown">Patient
<ul>
<li>Create Patient</li>
<li>Edit Patient</li>
</ul>
</li>
<li class="dropdown">Appointments
<ul>
<li>Create Appointments</li>
<li>Edit Appointments</li>
</ul>
</li>
<li class="dropdown">Reports
<ul>
<li>Pre Operative</li>
<li>Intra Operative</li>
<li>PostOperative</li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
</body>
</html>
When I remove this line:
<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
It creates a problem.
I have downloaded jQuery and kept on the desktop. The HTML file is also on the desktop. Why is it not working?
Yes, it's possible. You've mentioned that you downloaded the file - that's a good first step, but you also have to change all the href and src references.
For example,
<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
should become
<link rel="stylesheet" href="base.css">
Also remember to get the offline version of the jQuery JS library, too:
Download jquery.js, put it in your root folder & reference it:
<script src="jquery-1.9.1.min.js"></script>
And if you want it in a subdirectory:
<script src="[subdirectory-name]/jquery-1.9.1.min.js"></script>
Remember that both files need to be offline and in your working local directory. This means that you cannot remove the stylesheet nor the jQuery JS library. Keep both of them, in the local formats I've mentioned above.
Also, putting the <script> tag in the <head> is bad practice; move it just before the </body> tag instead.
Your code should now look (in short, note that I haven't put much) like:
...
<html class="no-js" lang="en-US">
<head>
...
<link rel="stylesheet" href="base.css">
...
</head>
<body>
...
<script src="jquery.min.js"></script>
</body>
</html>
Again, make sure that base.css and jquery.min.js are the exact file names and are in the same folder as this .html file
It will not work if you don't have an Internet connection. To work locally you should copy jquery.js to your local directory and use a relative path.
<script src="/jquery/1.5/jquery.min.js"></script>
Download jQuery and link to it like so:
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.css">
To work offline with jQuery, just copy the jquery.js file and place it in your local directory. In the script tag, change the src attribute:
<script src="/path/jquery.min.js"></script>
The best solution will be to serve the files via localhost. This post explains this in detail.
http://www.wingoku.com/2016/02/accessing-javascriptjquery-script-files.html
Try Initializr.
It's an HTML5 templates generator to help you getting started with a new project. There is a script which loads the web jQuery file if there is an Internet connection. If there isn't any Internet connection, it takes the local one.
Related
After spending a while designing a website I've now decided I need to at least make it view-able in IE9 and below. I've followed examples from the below website:
https://github.com/aFarkas/html5shiv
but to no avail.
Here's how one of the sites pages looks in an up-to-date browser:
http://gyazo.com/10a74b651a216d76bb677d335fa1551d
And here's how it looks in IE9 and below:
http://gyazo.com/8541b263b9ed43e9d7dea9c33eafb22b
Strangely enough however, the homepage appears fine, it's just all of the others.
I implemented this code to the head of all of my html pages:
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js being in a folder called 'js' in my project directory.
And added this CSS code the my stylesheets:
/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
Even with this done, which I believe to be correct if I'm not being blind, IE9 and below don't display this site very well.
Any suggestions will be greatly welcomed.
Thank you.
I'm sure you already figured this out Charlie but in case you haven't I would try these things...
First, regarding the css:
/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
↑ This should be included before your other css. Generally, you shouldn't need to do this as HTML5shiv already adds these styles, but for some older browsers or ones that have javascript disabled you could add these styles. It is easier in my opinion to just include normalize.css in your <head> beforehand.
Also, make sure HTML5shiv is being added to the head (preferably at the end). If it's loaded in the footer after page load it could cause issues like the one you describe.
Your code should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title><meta name="description" content="">
<!-- CSS Reset -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet">
<!-- Your site CSS (Optional ) -->
<link rel="stylesheet" href="css/main.css">
<!-- HTML5 shim for support of HTML5 elements (added at end of head) -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
You content here ....
<!-- If you use javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
There are some known issues with html5shiv that can be found on the github page and if you still have issues you should report it here. Also, make sure you are using the latest version of the script.
I'm still having some problems getting my Twitter-Bootstrap page to display the desktop view correctly in IE8. I've been following a few threads here but the voted up advice is just not working for me.
Using the suggested meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Included local versions of bootstrap.css, html5shiv.js, respond.js, ie8-responsive-file-warning.js
Here is my head section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SunTrust Equity Line Options">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>SunTrust – Your Equity Line is Maturing. What are your options?</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="dis/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="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
And the end of it:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Try using local copy of bootstrap. This solved my problem with IE8.
Well I've asked several people and read a ton on this and still no answer on this. Seems like the only way to fix it is to call an IE8 only style sheet to get things to display correctly.
Event the getbootstrap.com examples don't work in IE8 they all stack the same way mobile first in IE8.
It's a shame really since I won't be able to use it for most projects.
Always make sure that you load the following scripts after loading jQuery.
Especially in WordPress and other frameworks some people tend to include jQuery just before the closing tag and therefore after the html5shiv.js and respond.js script, which causes issues in IE8
<!-- Include first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
i see you are using "dis/js/..." in one place and "dist/js/" in other places. Are you sure your paths are correct? I would double check the browser is actually loading the files you think its loading.
or it could be the duplication of conditional comments, try this for grins: (of course fix the paths in the below code too if "dis" or "dist" is incorrect)
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
<script src="dis/js/ie8-responsive-file-warning.js"></script>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
I'm also not familiar with ie8-responsive-file-warning.js, i would try removing that if all else fails to be sure its not conflicting with respond.js. For that matter remove html5shiv as well just to rule out all conflicts.
We discovered that having css links outside of the "head" section (essentially that for the bootstrap css) broke respond.js's ability to provide the necessary media query support as required. Ensure that all your css links live within your "head" section.
Whenever trying to open a page running a javascript code using FileReader and JSON upon page initialization, ie11 reports "FileReader is not defined", and later "JSON is not defined". The head of HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LogViewer</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="css/slick.grid.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
</head>
Everything works fine in FF and Chrome. Any ideas?
Add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> as the first tag of the header to be sure. IE loves to go to compatibility mode even if a HTML5 doctype is present under certain circumstances (especially on intranet files when the computer is in a domain).
You can use the developer tools (F12) to check what mode you are running in.
I'm using Bootstrap 3 framework for a new design. All works fine in Safari, Chrome and Firefox, but not in IE8. I've added respond.min.js and html5shiv.js in my functions.php file.
Those files get loaded as I can see in 'inspect-element -> resources" in Chrome.
Still, in IE8, the site is displayed as is is a mobile device, which isn't correct.
How to resolve this?
When Googling Bootstrap 3 IE 8 one of the top results is: http://www.telegraphicsinc.com/2013/10/using-bootstrap-3-with-internet-explorer-8-ie8/
Ultimately it says you need to add, "" which you can grab from here: https://code.google.com/p/css3-mediaqueries-js/
my head tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
If you want to try in local, try through localhost, or create a QA server and set the content and try.
We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header.
It will say access denied, it works only through server as IE has security restriction.
Bootstrap will work in IE 8, to do the same follow below steps:
Add below mentioned Scripts
Dont use CDN for the same its worth to add those scripts from local folder
<!-- language: lang-html -->
<!--[if lt IE 9]>
<script src="../../scripts/IE8/html5shiv.js"></script>
<script src="../../scripts/IE8/respond.min.js"></script>
<![endif]-->
<!-- end snippet -->
Download Respond.js And Html5Shiv.js
Note: Adding Sequence would be very important
Add your css first then add those js
Bootstrap.css
YourCustom.css
Respond.js
html5shiv.js
Bootstrap IE Support details : http://getbootstrap.com/getting-started/#support
I was using an older version of less (1.2.1) by accident and when I updated the .js to the most recent version (1.3.3) it seems that Espresso, my html/css editor, now takes 40% cpu and up to 90% when in development/watch mode. I've tried other versions and it seems like it happens with 1.3.1+. I've tried different variations of the watch mode and even disabling it completely and it's still using 40-50% cpu. I basically can't work with it now.
edit: It seems like it's mostly being caused by watch mode, which I highly depend on :(
This is what my site head looks like. Any suggestions would be appreciated as I do not understand js at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Article Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style/default.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/tablet.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/mobile.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/wide-mobile.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="js/less-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I think it is better to precompile first and then make the site read the already-compiled .css instead.
You can use Koala app for precompiling the less file or you can use grunt too, and get rid of the less.js.