I have now managed to create an upload in jsf that allows the user to upload a txt file, I can also display what has been uploaded, what I need to know now is how can I print this text to a printer when a user presses a command button
Thanks
I have added create a new css file called print.css,
#media print {
#header, #footer, #menu, #title, #h1, #2, #main, #logo, #logo_text, #logo_colour, #site_content, #content{
display: none;
}
}
As these are the things I wish removed
My css for the whole document is:
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
I have added:
<h:outputStylesheet type="text/css" name="print.css" media="print" />
above my button :
<button onclick="window.print()">Print</button>
but when I press this button I can still see all the css
You can at most show up the browser's print dialog by JS window.print().
<button onclick="window.print()">Print</button>
This will still require confirmation of the enduser. It's for websites (fortunately) simply not possible to unaskingly print something. That would otherwise produce a lot of paper waste and annoyed clients.
You might perhaps want to supply a print media CSS along so that only the desired content is been printed and that the remnant is been hidden by display:none. You can find some hints in this related question: Conditionally render JSF components for printing.
Related
I am aiming to build a google chrome extension that displays a different link to a different website every time it is used.
That is, I have a list of websites and I want to iterate through the list such that each time I click the extension the next link is shown.
Currently my popup.html file looks like this
<!DOCTYPE html>
<html>
<head>
<title>My First Chrome Extension</title>
<style>
#popup{
width:300px;
height:200px;
text-align:center;
line-height:200px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="popup">
next link
</div>
</body>
</html>
(the popup.js file is empty). When I click my extension icon, it will display a link to "some_url.com" which opens in a new tab (great). What I am looking for is to be able to then display "another link" when I click the extension icon again ("another link" being the next from some predefined list).
I would be very grateful for help/resources to be able to add this behaviour to the extension. I am new to chrome extensions (and javascript) and don't know where to go next.
You can create a anchor tag with some id on popup.html page
<a id="show-links" target="_blank"></a>
Then in your popup.js file, add a hfref attribute to this element using javascript
var a = document.getElementById('show-links');
//create an array with all links
links_array = ["some_link.com", "some_link1.com", "some_link2.com"];
//assign links to a from array at random
a.href = links_array[Math.floor(Math.random() * links_array.length)];
I am using ace:daaTable and other ice component on the same xhtml page .
when I click oמ ice:commandButton the page style is changing.
I tried to define "rime" style on the web.xml but it doesn't help.
when I defined "none" style
param-name :org.icefaces.ace.theme
param-value:none
the clicking on the ice:commandButton save the page style, but I am failing to change the table style to "styleClass="oddRow, evenRow" (that was the style I used on ice:dataTable in my previos IceFaces 1.8 project with"xp" style. )
can someone please explain how to define this styleClass on the table,without changing the page style on each click.
and give me an example that show how to use styleClass on the ace:component
thanks
Tami
To include rime.css you can include below line in you head section.
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
If you want to specify your own styleclass you can use like this.
<ace:dataTable style="width:200px; height:200px; cellspacing: 1px;
cellpadding:1px;" ></ace:dataTable>
If you want to use styleclass attribute then you specify external css and include the name.
I am working on validation of a user registration form. What JSF tags can I use to add special characters and background color to that registration form?
Try this it forms unique tags for you in input field:
http://xoxco.com/clickable/jquery-tags-input
http://plugins.jquery.com/plugin-tags/tags
I'm not sure what you mean with "special characters", but I assume that you mean "special fonts" or something. In general, to style a webpage you should use CSS. You can set the font type by font-family property and you can set the background color by background-color property.
First create a style.css file with the following content:
.yourFormClass {
font-family: arial;
background-color: pink;
}
Then put it in public web content (there where your JSF pages also are) and then declare it in the <head> (or <h:head> if you're using JSF 2.x):
<link rel="stylesheet" href="style.css" />
Then you can use the styleClass attribute of any containing JSF component to let JSF generate it as class attribute in the final HTML element.
<h:form styleClass="yourFormClass">
(open page in browser, rightclick and "View Source" to see it)
To learn more about CSS (which is a completely separate subject from JSF), check the CSS tutorial. Keep in mind that JSF is basically just a HTML code generator.
Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>
I am trying to create a modal window with hidden content using thickbox
It opens the window fine , not sure whys its not showing the content inside the id="hiddencontent".
i am following as suggested in the examples for inline http://jquery.com/demo/thickbox/#
-thanks
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
Show Content
<div id="hiddenContent" style="display: none">inline content comes here</div>
</body>
</html>
It seems you don't have css file, you can copy thickbox css on http://jquery.com/demo/thickbox/#sectiona-3 to your page (or save as style.css file).
-- edit --
Yeh, sorry, didn't notice that css is already loaded :(
By the way, just found the solution, try to add p tag inside your hiddenContent div:
<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>
Hope helps ;)
This is a bug in thickbox. Here is how you can fix it:
Inside thickbox.js
on or about line 221 you should see this line of code:
$("#TB_ajaxContent").append($('#'+params['inlineId']).children());
change it to this:
$("#TB_ajaxContent").html($('#'+params['inlineId']).html())
and then, on or about line 223 you will see this line:
$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
disable the line by adding two slashes before it like this:
//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
Explanation:
When thickbox copies the content from the hidden div into the thickbox container, it does so by copying all .children() elements. If you have only text inside your hidden div there ARE NO CHILDREN because text is not itself a child element. This is why wrapping your content in a <p> tag will work because now there is a child (the <p> tag).
So if you want to have text only in your hidden div using .html() instead will grab everything in your hidden div. The second line being disabled prevents thickbox from trying to copy the content back to the hidden div when the thickbox closes, which would cause any content within child tags to be duplicated in the hidden div.
There is no need to edit the .js file, the solution is quite simple.
Maybe a bit later :) but I overcomed the issue only changing the ? char in #TB_inline? by &
The issue is on the internal parseQuery tickbox function, that parses match pairs but it blows when the query have a double ? like in the case.
UPDATE: In some cases the <p> fix is also needed ;)
Hope it helps.
The function tb_position() needs to be updated.
this condition
if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
is the reason for error.
jQuery does not support jQuery.browser anymore. For detecting IE6 in this case change the above condition to this
if ( !(/\bMSIE 6/.test(navigator.userAgent)))