I have a header
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html class="ie ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 10]>
<html class="ie ie10" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8) & !(IE 9) & !(IE 10)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
In my virtual box I have a version of IE10 running.
.ie10 body {
background:blue;
}
The problem is I have to stick the document into ie9 to get it to pick up the styles. Why is this not working the way I think it should.
As of IE10, conditional comments are no longer supported.
You'll need to think of a different way to accomplish the result you're after.
Hope this helps...
-- Lance
Related
My topbar in foundation 6 is somehow not working (Not somehow, the foundation.topbar.js isn't there). So, please help me get it added.
I'm new to foundation — like a total noob. I'm 13. So, please consider that. :)
And here's the WHOLE code:
<!doctype html>
<html class="no-js" 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.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><i>Title</i></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>HEADER</h1>
</div>
</div>
</div>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is what happens:
This is my JS folder:
just you're coding in Foundation 5.x style. Look at this : http://foundation.zurb.com/sites/docs/top-bar.html
thank you. and also download and import the .js folder from the foundation on git.
the the topbar will "work".
It looks like you're just running this as a static page (html)
Yet in the path for your javascript includes you're including
<? bloginfo('template_url'); ?>
Which looks to be a php function
Might I suggest you run the likes of WAMPserver ( given you're running windows it's a simple way of getting Apache Mysql and PHP up and running on your local machine.
Additional note: As was said however it looks like you're including foundation 5.x code
"<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"
I am having an issue with IE 9 and Foundation 5 offcanvas. The offcanvas sidebar just shows no matter what and overlays the main content. So basically there is no way to slide the sidebar in and out. Anyone else having this issue? it only seems to happen in IE 9. IE 10-11 is fine, FF and Chrome too.
Issue can be replicated by visiting the docs page using IE8 or simulator
Zurb-foundation Off Canvas
Add a IE9 conditional at the top of your .html
<!--[if IE 9 ]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
Incase you'r wondering this is the conditionals I'm using (slightly modified boilerplate, for better IE support)
<!--[if IE ]><![endif]-->
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I can't get facelets file to load into a template.
I have a content facelet called frontpage.xhtml that is set as the welcome page in web.xml. This loads the template. The template then is to include a number of other files. When they wouldn't load I pared it down to one (header.xhtml) to try to troubleshoot. It wouldn't even load when I put the header xhtml file in the same directory as the template and frontpage file.
When the app is run the frontpage.xhtml is run inside the template. I can see this because I can see the effects of the css loaded in the template. And I can see the "Hello World" in the title bar and "Hello World!" displayed in the page. But the header is not loaded at the top.
I tried removing all div and class info from the template body as well. There are none in the facelets. It didn't help.
Can someone provide some insight here? Maybe I'm off base, but I thought I could define the template this way so that I could call different facelets that load into the template's content area.
This app does run correctly without the templating. i.e. when everything is lumped into one page, which I am trying get away from for modularity.
Directory Structure (starting at the root for web pages)
/frontpage.xhtml
/soulard_base_template.xhtml
/sections/base/header.xhtml
web.xml (what I think are the relevant sections)
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<!--<welcome-file>faces/welcome.xhtml</welcome-file>-->
<welcome-file>faces/frontpage.xhtml</welcome-file>
</welcome-file-list>
frontpage.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="soulard_base_template.xhtml">
<ui:define name="windowTitle">
Hello World
</ui:define>
<ui:define name="content">
<h2>Hello World!</h2>
</ui:define>
</ui:composition>
</body>
</html>
soulard_base_template.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:insert name="header">
<ui:include src="sections/base/header.xhtml"/>
</ui:insert>
</div><!-- End of Banner -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
</div><!-- End of Container -->
</h:body>
</html>
header.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<ui:define name="header">
<h2>Header</h2>
<h:graphicImage url="/images/header.png"
width="950"
height="175"/>
</ui:define>
</ui:composition>
</body>
</html>
The problem is the additional "define" entry in header.xhtml <ui:define name="header">. You use ui:define usually to replace some content from a template, but note the outer <ui:composition> does not have a reference to a template. So, if there is no template, facelets doesn't know where to apply it, and finally the inner content is never used.
OK, it figures. After hours of screwing around and frustration I ask the question on stackoverflow. Then I walk away for a few hours. Go to the gym, relax, come back and figure it out in 10 minutes.
Unlike the text book (Core JSF 2.0) I removed a bunch of inserts and defines and it worked.
e.g. the header.xhtml looks like this now:
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<h2>Header</h2>
<h:graphicImage url="/images/williamrosmusdotcomHeader.png"
width="950"
height="175"/>
</ui:composition>
</body>
</html>
and the template looks like this:
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:include src="sections/base/header.xhtml"/>
</div><!-- End of Banner -->
<div class="span-24" title="Menu">
<ui:include src="sections/base/menu.xhtml"/>
</div><!-- End of Menu -->
<div class="span-4" title="Left Column">
<ui:include src="sections/base/leftsidebar.xhtml"/>
</div><!-- End of Left Column -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
<div class="span-4 last" title="Right Column">
<ui:include src="sections/base/rightsidebar.xhtml"/>
</div><!-- End of Right Column -->
<div title="Footer" class ="span-24">
<ui:include src="sections/base/footer.xhtml"/>
</div><!-- End of Footer -->
</div><!-- End of Container -->
</h:body>
</html>
So now the question is, what is the point of the "insert" and "define" since all they seemed to do is to make things not work. That is for another day.
I'm using RichFaces 4.1 and I found out for my template as shown below:
<!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" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="body">Default content</ui:insert>
</h:body>
</html>
It always add extra head info for me:
<link type="text/css" rel="stylesheet" href="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/DEFAULT/skinning.css" /><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/packed/packed.js"></script>
If I take out this portion from template, those extra info will be disappear:
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
With that extra info, the page renders better however if this page navigate to next page base on value return from form action (as defined in faces-config.xml), the component (e.g. a4j:commandButton ) will not work, need click twice to function.
Is that a bug? If you go to richfaces showcase and open the source, the meta info for head are diff. Any ideal why I get those extra meta info that seem buggy...
---- Some extra info ---
Hi Brendan
Thanks for the suggestion but not help...
[Template]
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<ui:insert name="head"></ui:insert>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<title><ui:insert name="title">CEA</ui:insert></title>
</h:head>
<h:body>
<div id="page">
<div id="header">
<div class="right-controls">
<ul class="top-links layout">
<li>Project Site
</li>
</ul>
</div>
</div>
<div id="page-content">
<ui:include src="/templates/includes/navigation.xhtml" />
<ui:insert name="body">
Body content missed
</ui:insert>
<div class="clear"></div>
</div>
<div id="footer">
<ui:insert name="footer"></ui:insert>
</div>
</div>
</h:body>
</f:view>
</html>
[p.xhtml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/templates/template.xhtml">
<h:outputStylesheet>
.red {
color: red;
}
.green {
color: green;
}
</h:outputStylesheet>
<ui:define name="body">
<h:form>
<a4j:commandButton value="Store changes"
action="#{profileCreation.goNext}" />
</h:form>
</ui:define>
</ui:composition>
profileCreation.goNext only do one thing, return the success value:
public String goNext() {
return IdmConst.IDM_CREATE_PROFILES_SUCCESS;
}
[faces-config.xml]
<navigation-rule>
<display-name>p.jsf</display-name>
<from-view-id>/public/idm/p.xhtml</from-view-id>
<navigation-case>
<from-outcome>IDM_CREATE_PROFILES_SUCCESS</from-outcome>
<to-view-id>/jsf/idm/resetpwd.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
[resetpwd.xhtm]
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<style type="text/css">
.leftColumn {
width: 40%;
vertical-align: top;
text-align: left;
padding: 15px;
background: #00FFFF;
}
.rightColumn {
width: 60%;
vertical-align: top;
text-align: left;
padding: 15px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</ui:define>
<ui:define name="title">Change / Rest Password</ui:define>
<ui:define name="body">
<h:form id="resetPwdForm">
<rich:graphValidator value="#{passwordValidationBean}" id="gv">
<rich:panel header="Change password" style="width:500px">
<rich:messages for="gv"/>
<rich:messages globalOnly="true"/>
<h:panelGrid columns="3">
<h:outputText value="Enter new password:" />
<h:inputSecret value="#{passwordValidationBean.password}" id="pass" />
<rich:message for="pass" />
<h:outputText value="Confirm the new password:" />
<h:inputSecret value="#{passwordValidationBean.confirm}" id="conf" />
<rich:message for="conf" />
</h:panelGrid>
<a4j:commandButton value="Store changes"
action="#{passwordValidationBean.storeNewPassword}" />
</rich:panel>
</rich:graphValidator>
</h:form>
</ui:define>
</ui:composition>
</html>
[passwordValidationBean]
I use the sample from richfaces showcase (http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=graphValidator&skin=blueSky)
As you can see as defined in faces-config, after user click the button on p.xhtml it will go to resetpwd.xhtml, if I have .. defined in template, then the button on resetpwd.xhtml will not work properly, I need click twice then will process the request. Well, if I directly go to resetpwd.xhtml wthout go throgh p.xhtml, everything is working fine.
So I suspect the problem cause by the .. defined in template., with this xml element, page source willd isplay extra header info:
Must be some bug in richfaces state management or the extra meta info included in head. As mention if I directly go to resetpwd.xhtml, everything work fine (i.e. button on that page no need click twice to respond). If navigate from p.xhtml to resetpwd.xhtml will work fine if take out the ... from tempalte file, but if I do so then the page will not render with skin.
I created template (template.xhtml) which resides in root context of application.
I wanted to apply it to page (newTemplateClient.xhtml) which resides in the folder 'public'.
So newTemplateClient.xhtml looks like this:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
template="./../template.xhtml">
.
.
.
I have links to this page in index.xhtml:
<h:link outcome="/public/newTemplateClient" value="Login"/>
<h:commandLink action="/public/newTemplateClient?faces-redirect=true" value="Login"/>
<h:commandLink action="/public/newTemplateClient" value="Login"/>
And only last works. When I use first two page displays but template isn't applied.
So it works only when page is redirected, not forwarded. Why?
Thanks in advance
Okay it seems that template is applied but css files aren't. I'm using NetBeans wizards to create templates and templates clients. The css files are located /resources/css/ directory.
They are referenced from template.xhtml:
`
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">template</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
`
How can I reference that css files other way?
Folder structure:
Root
public
newClientTemplate.xhtml
template.xhtml
index.xhtml
Okay problem solved.
Solution was to use:
<h:outputStylesheet name"css/default.css"/>
<h:outputStylesheet name"css/cssLayout.css"/>
Instead:
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />