i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.
I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
and here is the style.css:
#media only screen and (max-width: 38.75em) {
body {
background: green;
}
}
Regards
https://github.com/scottjehl/Respond#cdnx-domain-setup
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to #doctyper for the contributions in the cross-domain proxy!
You need to include <script src="./js/respond.min.js"></script> above the </head> tag.
If you don't want to add any code related with respond.js, load bootstrap.min.css through CDN except for IE 8. For IE 8, use local static file.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="{CDN Address}" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="{CDN Address}" />
<!--<![endif]-->
Tested on IE 8 ~ 11 and other webkit browsers.
Related
<html lang="en">
<head>
<title>Corey Maller</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
I want to make some small changes to my css file but the website is not responding to them. Is there any kind of caching html code I could add to the header?
I'm new to Spring Boot and my problem is that I have Spring Boot project and I am intending to view my HTML pages with Thymeleaf but Spring can't resolve my JavaScript and CSS files.
Full picture of my IDE:
Those are my Thymeleaf configurations
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true
This is my HTML page head:
<!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>
<title>404 Page</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<meta name="viewport" content="width=device-width"/>
<!-- Css Files Start -->
<link href="/src/main/resources/static/css/style.css" rel="stylesheet" type="text/css" media="screen"/><!-- All css -->
<link href="/src/main/resources/static/css/bs.css" rel="stylesheet" type="text/css" media="screen"/><!-- Bootstrap Css -->
<link rel="stylesheet" type="text/css" href="/src/main/resources/static/css/main-slider.css" media="screen"/><!-- Main Slider Css -->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="/static/css/customIE.css" media="screen"/><![endif]-->
<link href="/src/main/resources/static/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome Css -->
<link href="/src/main/resources/static/css/font-awesome-ie7.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome iE7 Css -->
<noscript>
<link rel="stylesheet" type="text/css" href="/static/css/noJS.css"/>
</noscript>
<!-- Css Files End -->
</head>
You should use relative path to your JavaScript and CSS files:
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="screen"/>
or you can use th:href Thymeleaf's tag as well:
<link th:href="#{css/style.css}" href="../../static/css/style.css"
rel="stylesheet" type="text/css" media="screen"/>
I have found that Spring automatically searches for: /resources/.
So what I did was removed all the pre-directories by using find all.
So, in my case what used to be for example: /static/css/style.css & /templates/index.html
became: /css/style.css & /index.html
Now the question remains how does Spring boot know what folder to look in without you defining it: Spring looks at the extension. When spring boot sees .html, it looks for it in a folder called /templates.
I am working on a Spring MVC application that use FreeMarker for my views.
I am absolutly new in FreeMarker and I have the following problem: in my projct I have 3 files that have to be assemblet togheter into a single page.
So I have:
1) header.ftl representing the header of all my pages, somthing like:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js is-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registrazione - MY WEBSITE</title>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="resources/css/webfont.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="resources/plugins/bs-select/bootstrap-select.min.css">
<link rel="stylesheet" href="resources/plugins/bs-dialog/bootstrap-dialog.min.css">
<link rel="stylesheet" href="resources/css/style.css" />
</head>
<body id="main">
<!-- versione per popup. non prendere in considerazione -->
<!--
<div class="container page-header">
<h1>MY WEBSITE</h1>
</div>
2) footer.ftl representing the footer of all my pages:
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bs-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/bs-select/i18n/defaults-it_IT.min.js"></script>
<script src="assets/plugins/bs-dialog/bootstrap-dialog.min.js"></script>
<script src="assets/plugins/jq-form-validation/jquery.validation.js"></script>
<script src="assets/js/functions.lib.js"></script>
<script src="assets/js/form-validation.js"></script>
</body>
</html>
3) Then I have my specific page (named myPage.ftl that represent only the content, something like this:
<h1>This is the content</h1>
<p>Some inforamation</p>
The header.ftl and the footer.ftl are into this directory **\WEB-INF\freemarker\layout** of my project.
So my problem is: how can I import the header.ftl content above the content of the myPage.ftl and the footer.ftl under the content of myPage.ftl page?
I did this using user-defined macros for page layouts, e.g. let's call your layout standardPage.ftl:
<#macro standardPage title="">
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
</head>
<body>
<#include "/include/header.ftl">
<#nested/>
<#include "/include/footer.ftl">
</body>
</html>
</#macro>
Then you can call this macro in each of your pages, e.g. homePage.ftl:
<#include "/pages/standardPage.ftl" />
<#standardPage title="Home">
<h1>Home Page</h1>
<p>This bit replaces the nested tag in the layout</p>
</#standardPage>
I am trying to use jQuery Mobile with the Phonegap Windows Phone template.
The problem I am having is that the list item icons will not display.
My code is below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="jquery.mobile-1.0b2.css" />
<link rel="stylesheet" href="site.css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Map</li>
<li>Map page</li>
</ul>
</div>
</div>
<!-- Home Page End -->
</body>
</html>
If I browse the files in Chrome or Firefox the icons are visible. It only fails in Windows Phone emulator.
Has anyone found a solution?
Just found the answer here:
jquery mobile on Windows phone 7 images not loading
Doh!
Just need to set the build action of the icons to Content
I have based my project on the current scaffolding from Yesod 0.10. I've gone into scary territory. While my code works just fine in both Firefox and Chrome, my workplace requires that it also works in IE. Well, it doesn't. It just gives me a "Webpage cannot be displayed" error. I'm using default layout, yet it still complains. Below find the source that Yesod generates.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Socko homepage</title>
<meta name="description" content>
<meta name="author" content>
<meta name="viewport" content="width=device width,initial-scale=1">
<link rel="stylesheet" href="http://10.5.125.201:3000/static/tmp/zfWtkHUp.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/,'js');
</script>
</head>
<body>
<div id="container">
<header></header>
<div id="main" role="main"><h1> </h1>
<p>
You must login to schedule a test.
</p>
<footer>Barracuda Networks All Rights Reserved</footer>
<script src="http://10.5.125.201:3000/static/js/modernizr.js?-nhfNco9"></script>
<script>yepnope({load:["http://10.5.125.201:3000/static/tmp/1B2M2Y8A.js"]})</script>
</div>
<footer></footer>
</div>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE
6. chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js">
</script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})
</script><![endif]--></body></html>