I have to demonstrate the issue I'm experiencing on my Android phone a simple example:
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.js"><\/script>')</script>
<script src="js/libs/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
This is a TEST
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Now when you load this in your android browser and tap somewhere on the page you will see the page highlight and a click sound.
How annoying is that, I definitely want to turn that off, but is that possible ?
Cheers
Luca
Put following in your head of HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I am developing a Spring Boot application and using Thymeleaf Templating. I am new to this and need a little guidance. I have a index.html file which is the main view which should be displayed. Inside the index.html file i have two fragments, a header and a footer which display as well. What i am having trouble with is inserting more fragments into the index.html file. I want to insert another fragment which displays a navigation top bar as well as a second fragment that displays a side navigation menu. I am looking to include the topnavbar right below the header fragment and the side nav menu on the left side of screen. How do i go about doing this? Thank you.
Index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"/>
<link rel="stylesheet" href="../static/css/main.css"
th:href="#{css/main.css}" media="screen"/>
<title>Spring Boot | Web Application</title>
</head>
<body>
<div class="container">
<div class="row" th:include="header :: banner"></div>
<div class="row">
<div class="col-sm-3"><hr /></div>
<div class="col-sm-9 text-center">col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-12"><hr /></div>
</div>
<div class="row" th:include="footer :: copy"></div>
</div>
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I trying to use retina.js v2.0 to swap images, but it's not working, I don't know why. I also check it in developer tools, but there's not any error. Can u help me, what could be the problem?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<img src="images/logo.png" data-rjs="2" alt="Logo">
<script type="text/javascript" src="retina.min.js"></script>
</body>
</html>
Have you figured this out? I am having the same issue. I found a resolution, by calling retinajs() directly after the script loads. But, reading the How It Works documentation does not say you need to do this.
Here is what I did:
<html lang="en">
<head>
</head>
<body>
<img src="/images/nav_logo.png" data-rjs="2">
<script type="text/javascript" src="/lib/retina/retina.min.js"></script>
<script>
retinajs();
</script>
</body>
Yes, this works but my question is whether it is "right"?
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>