On PrimeFaces showcase page there is a simple title bar which fits in the actual theme. I mean the "Welcome to PrimeFaces showcase" text on this page: http://www.primefaces.org/showcase/ui/home.jsf
This is not a button nor any kind of responsive control, just a themed textbox or title bar.
I've searched a lot but I was not able to find a simple <p: > component which can generate this kind of result.
Can anybody help me, how to make such an element in PrimeFaces?
Here you can find the xhtml code for the welcome page - home.xhtml(home.jsf) : http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/home.xhtml?r=5567
As you can see there, the 'title bar' is just a simple <h1> tag with some css:
<h1 class="title ui-widget-header ui-corner-all">Welcome to PrimeFaces ShowCase</h1>
There you can find the entire primefaces website/project, and the CSS files as well, but it's better to implement your CSS...
You can use <p:toolbar> tag for it.
Though its main usage lies in grouping together several content, But it does give the effect of a Title Bar you are looking for.
<p:toolbar>
<p:toolbarGroup align="left">
<p:outputLabel value="Welcome!!" />
</p:toolbarGroup>
</p:toolbar>
You can surround the <p:outputLabel> tag with other tags like <h1>, <p> with CSS to give more effect.
Related
I would like to remove the automatic text that appears when the cursor hovers over the jumplink. The text is usually the name of the post title that its directing to. However I would like to remove it. I've tried removing certain parts of the following code for the jumplink but to no avail. The coding is as follows:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Any help will be appreciated. The URL to the blog is as follows: http://www.blankesque.com
The browser will show what is inside your title attribute automatically.
There is a good reason for that.
Sometimes you have an image on you web site and for any reason will not display or your site is loading to slowly.
In place of your image you than can see the value of the title attribute (or the alt attribute in very old browsers), so the user will not see a complete empty space
So if you can miss the title attribute just deleted or set his value to ="".
There are also other solutions for this, but seen you don't know much about attributes, seems to me not appropriate.
Remove the expr:title='data:post.title' part from the <a> tag in the code.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
I know you haven't got javascript tagged but I tried css and couldn't get a solution and the only way I found was JS, I'll keep trying though
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++){links[i].title="";}
this won't show the title<br><br>
This won't show the title
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I have a s:checkbox inside a html div. When the code is run, the checkbox is outside (both) the div and the divs seem to be empty and nonexistant. Why is this occuring and how can I fix it? When I place random text inside either div, the div contains it. I set the background color to red so I can detect the div.
<div id="outer">
<div id="inner">
<s:checkbox name="chBx" id"chBx" fieldValue="false" value="true" label="Check
This" />
</div>
</div>
Like described in this answer (that you should consider upvoting too), Struts2 generates (or not) a certain kind of HTML when rendering Struts Tags, basing on the Theme you have chosen.
The default one is xhtml, that will generate a lot of stuff for you. It may be handy, but also annoying, according to how you work. Personally I prefer to generate the HTML by myself, and then I use the theme that won't generate almost any HTML: the simple Theme.
Note that when working on big projects or with multiple projects with the same, particular needs, you can also write your own custom theme (for example for generating security tokens automatically).
You can use a theme globally (in struts.xml)
<constant name="struts.ui.theme" value="simple" />
or locally to a single tag / form:
<s:checkbox name="chBx" id"chBx" fieldValue="false"
theme="simple"
value="true" label="Check This" />
In this case, you may need to write the <label> object by yourself.
I've implemented a p:commandButton to update the contents of a table when it is clicked. I think this is working (although It isn't properly tested) but the more immediate issue is as follows.
Bug
Before the request, the title bar looks like this:
And after I hit the refresh button on the right, the page re-renders as follows:
Attempts to solve
The following is the current code for my p:commandButton:
<p>
<p:commandButton oncomplete="eventFeedsDialog.show()" update=":eventFeedsForm" id="feedsRefresh" icon="ui-icon-refresh" title="Refresh page" style="height:40px; width:40px; float:right;">
<f:setPropertyActionListener value="#{true}" target="#{searchBean.refresh}"/>
</p:commandButton>
</p>
The eventFeedsDialog is the p:dialog element that this button is wrapped in, which is further wrapped in a h:form element. Here is the declaration of the eventFeedsDialog element:
<p:dialog id="eventFeedsDialog" header="Feeds" widgetVar="eventFeedsDialog" resizable="false" width="1000"
styleClass="dialog">
I've tried changing the oncomplete attribute to point at the h:form instead of the dialog, but it appears not to have worked. I thought up a hack, whereby I append a mountain of spaces in the header attribute, but that is horrendously ugly.
I've not found anything on google like this, so I was wondering if you guys have any ideas?
I would like to create a custom look for a tooltip.
<h:outputText value="blarg" title="tooltip">
Plese do not tell me to use rich:tooltip as I have tried and they have a bug where it extends past a data table. So I was wondering if it is possible to actually style the jsf's outputText tooltip.
If you know how to, please give me pointers.
Thank you. Have a good day.
You cannot style a tooltip using plain vanilla HTML/CSS. You really need JavaScript for this as well which walks through the HTML DOM tree and "converts" every title attribute into some hidden fancy looking <div> which gets shown during onmouseover.
Since RichFaces already ships with jQuery, it should be possible to grab a jQuery plugin for that. For example, the qTip plugin.
Please do not tell me to use <rich:tooltip> as I have tried and they have a bug where it extends past a data table.
It should technically be a matter of finetuning the CSS associated with the <rich:tooltip>.
You can do this.
Use <p:tooltip/> of Primefaces.
View:
<h:panelGrid columns="2" cellpadding="10">
<h:outputLink styleClass="outputText" id="fades" value="#">
<h:outputText value="Your text"/>
</h:outputLink>
<p:tooltip id="toolTipFades" for="fades" value="The text for tooltip"/>
</h:panelGrid>
Css:
.outputText{
cursor: default!important;
text-decoration: none!important;
}
With this code you simulate a <h:outputText /> with a tooltip and works ;D