I tried to replace favicon.ico in /web-app/images/ folder but it doesn't work : my site still has the usual Grails favicon. What do I need to do more?
try to change views\layout\main.gsp
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<div class="logo"><img src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}" alt="Grails" /></div>
<g:layoutBody />
</body>
</html>
and comment
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
or clean your browser's cache. ;-)
With the grails assets plugin you must use:
<head>
...
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
Put favicon.ico file to PROJECT/grails-app/assets/ folder,
add to UrlMappints
class UrlMappings {
static mappings = {
......
"/favicon.ico" (uri: "/assets/favicon.ico")
}
}
Place your icon file in this path:
grails-app\assets\images\favicon.ico
Then add this to the head element of your html:
<link rel="shortcut icon" href="/assets/favicon.ico">
Related
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
I've a very simple hybrid mobile application developed with Cordova and appFramework.
index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See https://issues.apache.org
/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/af/main.css" />
<link rel="stylesheet" type="text/css" href="css/af/appframework.css" />
<link rel="stylesheet" type="text/css" href="css/af/lists.css" />
<link rel="stylesheet" type="text/css" href="css/af/forms.css" />
<link rel="stylesheet" type="text/css" href="css/af/buttons.css" />
<link rel="stylesheet" type="text/css" href="css/af/badges.css" />
<link rel="stylesheet" type="text/css" href="css/af/grid.css" />
<link rel="stylesheet" type="text/css" href="css/af/android.css" />
<link rel="stylesheet" type="text/css" href="css/af/win8.css" />
<link rel="stylesheet" type="text/css" href="css/af/bb.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios7.css" />
<link rel="stylesheet" type="text/css" href="css/af/tizen.css" />
<title>Cordova Application</title>
<script type="text/javascript" charset="utf-8"
src="js/vendor/appframework.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.scroller.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.css3animate.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/appframework.ui.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/fade.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/flip.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/pop.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slide.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideDown.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideUp.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.slidemenu.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div data-title="Home" class="panel"
id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div data-title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul>
<li><a class="icon home mini"
href="#main">Home Link</a></li>
<li><a class="icon mini"
href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This shows up correctly and even the navigation is wired up when opened in Safari or Chrome desktop browsers.
But if I run it in either iOS or Android emulators, I see the alert 'Document Ready' and after that blank page. Home panel is not displayed.
Here is what I do to run the emulators.
cordova emulate ios
cordova emulate android
Even if I open the index.html files directly from the platform builds they show up correctly on the desktop browser.
I'm pretty new to all this so I may be missing steps here. Any help would be appreciated.
You dont need all the fragmented appframework js and css files, you can just include 2 css and 1 js file, here is updated code, it works as cordova app on android, I built Cordova app with Intel XDK.
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div title="Home" class="panel" id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul class="list">
<li><a class="icon home mini" href="#main">Home Link</a></li>
<li><a class="icon mini" href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I have assumed that if I have the basic setup of...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>
then, later in the code if I include, say, a header with a button that uses a 'plus' data-icon...
<div data-role="header" data-position="inline">
<h1>Shopping List</h1>
additem
</div>
then the buttons would show up with the 'plus' data-icon. The buttons show up, but without the data-icon. What am I missing in my setup?
The link should have data-role="button" shouldn't it?
i also faced this prob, but then i tried to add this code into the head. the icon now can be displayed.
<link rel="stylesheet" type="text/css" media="screen"
href="${pageContext.request.contextPath}/theme/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
add
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
Hi making my first page using Struts2.
This is the easy code :
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/interfaccia.css" />
<link rel="stylesheet" type="text/css" href="css/links.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/profile.css" />
<link rel="stylesheet" type="text/css" href="css/affitta.css" />
<title>
Struts2 - The Sinfonet Portal
</title>
</head>
<body>
<s:div cssStyle="contenitore">
<s:div cssStyle="header">
<s:div cssStyle="header1">
<img src="img/logosw.png" alt="Logo Sinfonet" />
</s:div>
<s:div cssStyle="header2">
<img src="img/band1.jpg" alt="Flag 1" class="photoband" />
<img src="img/band2.jpg" alt="Flag 2" class="photoband" />
<img src="img/band3.jpg" alt="Flag 3" class="photoband" />
</s:div>
</s:div>
<s:div cssStyle="center">
<s:div cssStyle="menu">
<s:div cssStyle="menu_table">
<s:label cssStyle="menu_title" value="Login" />
<s:label cssStyle="menu_span" value="Username" />
<s:textfield />
<s:label cssStyle="menu_span" value="Password" />
<s:textfield />
</s:div>
</s:div>
</s:div>
</s:div>
</body>
</html>
I don't know why it doesnt get the right CSS style (in fact the page looks strange).
What am I wrong?
Have you checked that all of your CSS files are served properly (i.e., they aren't resulting in 404 errors)?
You could try out your page with <div instead of <s:div and see what you get.
I was having a same problem, after parsing through struts css seem to vanish.
Solution: Just add folder name before style in href.
e.g:
Before:
href="style.css"
After:
href="foldername/style.css"
Seems to be nothing Struts2-specific. As Steven answered, check that you get the css-files served if you enter the URL they should be at directly. If not, it may be that you'll have to take a look in your WebContent/WEB-INF/web.xml file if you're directing the requests wrong.
Try something like this
<link href="<s:url value="css/interfaccia.css"/>" rel="stylesheet" type="text/css"/>
You Have to mention the whole path in every page
like..
<link rel="stylesheet" type="text/css" href="<s:url value="/css/style.css" />" />
for images
<img id="logo" src="<s:url value="/images/logo.png" />" />