I need to automatically click the Login link after the JSF page below is loaded. Please help!
this form will display a login link and open a new a new window once the login link is clicked .
it would also be okay if i can directly submit the form without showing Login link.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<title>MY System ®</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="My System" />
<link rel="stylesheet" type="text/css"
href="${facesContext.externalContext.requestContextPath}/style/source.css"></link>
<script type="text/javascript"
src="${facesContext.externalContext.requestContextPath}/js/Utility.js"></script>
</head>
<body>
<ui:include src="common/header.xhtml" />
<div class="table"
style="position: absolute; top: 160px; width: 960px; text-align: center; float: center; margin-left: auto;">
<form id="initForm">
<span class="warning"> Welcome to MY System, please <a
href=""
onclick="newSourceWindow('${facesContext.externalContext.requestContextPath}/home.jsf');"
style="color: blue; text-decoration: underline; cursor: pointer;">Login</a>
to start. </span>
</form>
<rich:spacer height="40" />
<ui:include src="common/footer.xhtml" />
</div>
</body>
</html>
Give Id to your span.
Access it through Javascript and you can do anything with it, in your case trigger click.
<span id="welcomeLink">
...
</span>
Since your span is in normal form no need to use form id while assessing.
If your span is in h:form then you have to attach the form id like this formId:spanId.
so the Javascript code would be:
var spanEle = document.getElementById('welcomeLink');
spanEle.click()
Related
I need to use the same code for my mobile site as my desktop site (below). How can I enlarge my mobile site's text size so it looks the same as my desktop site?
This is my header info and title:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
This is my Cascading Style Sheet data:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
</head>
This is my cream background colour:
<body style="background-color: rgb(255, 239, 227);">
This is the content of my site, where I would insert text between the <p> and </p> tags:
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
Insert the following code before the </head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This makes the text size appear the same size as your desktop site.
I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?
Higuys,
as per the polymer documentation on paper dialog i did this
<paper-card elevation=3 align="center" id="question-ask-card">
<h1 id="got-a-question">
Got a question ?
</h1>
<paper-button data-dialog="Qdialog" id="askit" raised ><p id="ask-it">Write on Blackboard</p></paper-button>
</paper-card>
and the dialog is
<paper-dialog id="Qdialog">
<h1>sdjafadsfasdfjhg</h1>
<p>
aouaouwghsefjgzskdcghizbskk
</p>
</paper-dialog>
So how to link that dialog on click of that button,please help me!!!!!!!!
Thanks in advance.
Assuming your code is just sitting in the main document, this can be as easy as adding onclick="Qdialog.open()" to your button.
<!doctype html>
<head>
<meta name="description" content="Polymer Example">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-elements/paper-elements.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<paper-card elevation=3 align="center" id="question-ask-card">
<h1 id="got-a-question">Got a question ?</h1>
<paper-button data-dialog="Qdialog" id="askit" raised onclick="Qdialog.open()"><p id="ask-it">Write on Blackboard</p></paper-button>
</paper-card>
<paper-dialog id="Qdialog">
<h1>sdjafadsfasdfjhg</h1>
<p>
aouaouwghsefjgzskdcghizbskk
</p>
</paper-dialog>
</body>
I'm using the following code:
<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>
It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)
The standard method in css is to use margin: 0 auto, so:
<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
<img ... >
<img ... >
</div>
Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.
-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div><!-- end div main -->
</body>
</html>
CSS:
#main{
margin: 0 auto;
width:1080px;
height:288px;
}
I am making a simple JSF application which is uses templating It's very basic stuff but taking a lot of time to find the fix.
Issue is, I am having index.jsp which just forwards the request to startPage.xhtml. startPage.xhtml uses main.xhtml for templating. Till here everything is ok. But there is a anchor link of startPage.xhtml which leads the control to expression/expression.html. When I click on that link browser is not rendering my header and footer (part of main.xhtml template). IE consider expression/expression.xhtml a file and open it with open/save dialogue.
Index.jsp
<html>
<body>
<jsp:forward page="startPage.jsf" />
</body>
</html>
main.xhtml
<!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"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>X</title>
<link
href="css/styles.css"
rel="stylesheet" type="text/css" />
<style>
.rich-table-headercell {
text-align: left;
}
.rich-table-cell {
vertical-align: top;
}
</style>
</head>
<body
style="bgcolor: #FFFFFF; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 20;">
<!-- Start Header -->
<h:form id="mainForm">
<ui:include src="../includes/header.xhtml"/>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap="nowrap">
<table style="background-repeat: no-repeat; background-color: #E9ECEF; " width="100%" height="20px">
<tr>
<td nowrap="nowrap"><img
src="images/spacer.gif"
width="18" height="1" border="0" alt="" />
</td>
<td class="globalNavGrey" align="right" nowrap="nowrap">
<h:outputText value="Help" /> <rich:spacer width="10" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
<!-- main content area -->
<table align="left">
<tr>
<td><img
src="images/spacer.gif"
width="5" height="1" border="0" alt="" />
</td>
<td style="vertical-align: top;">
<!-- Body starts -->
<ui:insert name="body">
</ui:insert>
<!-- Body ends -->
</td>
</tr>
</table>
</body>
</html>
startPage.xhtml
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd"
template="/includes/main.xhtml">
<style>
.cellBackground {
background-color:yellow;
}
</style>
<ui:param name="subTitle" value="Understanding Disease Informatics System" />
<ui:define name="body">
<div
style="margin-left: 30px; top: 120px; width: 800px; margin-bottom: 50px;"
class="mainscreen">
<br/> <b><font size="+1" color="003366">
X </font> </b><br/> <br/> This page is the entry point for X
developers development is organized into these subsystems:
<p></p>
<center>
<table border="1" cellpadding="15" cellspacing="25">
<tr>
<td class="cellBackground" title="Enabled" >
Expression Subsystem
</td>
<td title="Disable" style="font-size:20px;" >Pathways</td>
</tr>
</table>
</center>
<hr></hr>
<font size="+1">
Contacts
<hr></hr>
</font>
</div>
</ui:define>
</ui:composition>
expression.xhtml
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"
xmlns:rich="http://richfaces.org/rich"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd">
<ui:composition template="main.xhtml">
<ui:param name="subTitle" value="Expression Data" />
<ui:define name="body">
Expression page!
</ui:define>
</ui:composition>
</html>
Any suggestions?
NOTE: As all the links on page are static so I am not using any managed bean.
<jsp:forward page="startPage.jsf" />
Your index.jsp suggests that the FacesServlet is in web.xml mapped on an <url-pattern> of *.jsf.
However,
Expression Subsystem
your startPage.xhtml has a link to expression.xhtml instead of expression.jsf. IE is retrieving the raw and unparsed JSF source code instead of its generated HTML. Whenever IE retrieves an application/xhtml+xml file, it doesn't know what to do with it, so it asks to download it.
You need to fix the link to match the <url-pattern> of the FacesServlet in web.xml.
Expression Subsystem
(note that I also simplified the context path retrieval)
Alternatively, you can also just change the <url-pattern> of the FacesServlet to *.xhtml. This way you can get rid of the ugly index.jsp altogether and set your <welcome-file> to startPage.xhtml and use URLs/links ending in .xhtml all the time.