I have this site that needs to be working in all versions of Internet Explorer from 7 onwards. The issue is when i emulated the site on ie 11 and noticed that it works fine on version 10 and 9 but it gives me an issue on ie 8 and below. I have included respond.js, html5shiv.js and css3-mediaqueries_src.js. But it still doesn't work. I will include my head content for your verification.
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
<![endif]-->
<!--[if gt IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media="all" href="simple.css" />
<link rel="stylesheet" media="screen and (min-width:801px)" href="complex.css" title="complex layout" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Dancing+Script:700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/css3-mediaqueries_src.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/css3-mediaqueries_src.js"></script>
<![endif]-->
<style>
.readonly{
width: 50px;
text-align: center;
background-color: #eee;
border: 1px solid #A9A9A9;
}
</style>
</head>
Related
on Chrome and Opera, the website works perfectly. When I open it in Firefox and IE it is not loading the .js files. My php code looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title id="titlebank">WEBSITE</title>
<link rel="SHORTCUT ICON" href="images/icon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="js/progressbar.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/kickstart.js"></script>
<script type="text/javascript" src="chat/chat.js"></script>
<link rel="stylesheet" href="chat/chat.css" type="text/css" />
<script type="text/javascript">
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
Original in .html file:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<title></title>
<link href="/leaflet-0.5.1/0.7.3/leaflet.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/L.Control.Zoomslider.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/css/l.geosearch.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/dist/leaflet.draw.css" rel="stylesheet"></link>
<!--
[if lte IE 8]>
<link rel="stylesheet…
-->
</head>
and in FF:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<title></title>
<link href="/leaflet-0.5.1/0.7.3/leaflet.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/L.Control.Zoomslider.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/src/css/l.geosearch.css" rel="stylesheet"></link>
<link href="/leaflet-0.5.1/dist/leaflet.draw.css" rel="stylesheet"></link>
<!--
[if lte IE 8]>
<link rel="stylesheet…
-->
<style>
#hook_Block_StickyBannerContainer > div > div > *:…
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://api.adsaway.ru/csp/js/okads.js?270994265"></script>
</head>
Other browsers not added this, only FF?
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Problem in extension "Firefox Service Platform", and after disabled working(no added scripts and styles on head). But this extension is invisible: start FF on "save mode"(with SHIFT key) and disable this extension.
I am just importing the below javascript file and css but when i run this page the ajax-loader just keeps on spinning.
Note: there is no body or content in the file at all other than what is mentioned below.
Any idea why the ajax-loader.gif spins ?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
.However when i try the below links it works fine without the loader spinning.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
why two jquery mobiles just add one:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script> //<---either this
<script src="js/jquery.mobile-1.4.2.min.js"></script>//<--or this
you have to pick only one of it, so update to this:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
and you have loaded all the non-minified and minified css files too.
I have downloaded and customized a scroll bar (with text), but I can't integrate it with my website.
Basically this is the code for the scroll bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery custom scrollbar demo</title>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</head>
And I need to put in a page with this code
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/sprites.js"></script>
<script type="text/javascript" src="js/googleMap.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
It gives an error:
$("#content_1").mCustomScrollbar is not a function
You need to add the "jquery.mCustomScrollbar.js" to the page.
And the "jquery.mCustomScrollbar.css" to get the same styles.
Now add at the first line:
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
You must add the jquery custom scrollbar, before you run the "$("#content_1").mCustomScrollbar()" function, and after the jquery library.
<script src="jquery.mCustomScrollbar.js"></script>