I have following implementation of tooltip in my xhtml
<p:column id="application-column--state" width="8%" style="min-width:auto"
headerText="#{msg['page.employee-applications.table.col.state']}">
<ui:repeat value="#{applicationEntry.statesList}" var="stateEntry">
<h:outputText id="confiurationDocumentForProgramTooltip" escape="false"
styleClass="#{stateEntry.styleClass} -margin-right-5 -inline-flex"/>
<p:tooltip id="confiurationDocumentForProgramTooltipText" escape="false"
for="confiurationDocumentForProgramTooltip" showDelay="0"
value="#{msg[stateEntry.key]}" trackMouse="false"/>
</ui:repeat>
</p:column>
And i have problem with hiding this tooltip on mobile devices during scrolling.
This situation can be observed on tooltip showcase https://www.primefaces.org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml?jfwid=984b1 on mobile view in developers tools on Chrome.
I tried to avoid this situation with js:
$(document).ready(function (){
hideTooltipAfterScroll()
});
function hideTooltipAfterScroll() {
$("#scrollbar_container").add(window).scroll(function () {
$( ".ui-tooltip:visible" ).css({
"z-index" : "",
"display" : "none"
});
})
}
now tooltip is gone after 'touch' scroll, but I cannot reopen closed tooltip.
Do You have any ideas how to achieve closing on scrolling with posibility to reopen closed tooltip?
I would not try to hack the tooltips to be hidden, instead use their JavaScript widget to hide them.
You can hide each tooltip widget on the page like:
PrimeFaces.getWidgetsByType(PrimeFaces.widget.Tooltip).forEach(
function(tooltip){
tooltip.hide();
}
);
See the widget documentation: https://primefaces.github.io/primefaces/jsdocs/classes/src_PrimeFaces.PrimeFaces.widget.Tooltip-1.html
Related
I am using primefaces documentViewer which is based on mozilla PDF.js: 2.11.338
https://www.primefaces.org/showcase-ext/views/documentViewer.jsf
and I want to customize the viewer to control which buttons to appear in the toolbar like rotate & print & download only.
I couldn't find any guides about that in primefaces website.
There is no JS Widget for Document Viewer however this can be accomplished easily with a JS function like this.
Note: Some buttons like presentationMode are special and need to be hidden a little differently.
pdfHideButtons : function() {
var pdfViewer = $("#YourDivId");
if (pdfViewer) {
$(pdfViewer.contents().find("#openFile")).hide();
$(pdfViewer.contents().find("#viewBookmark")).hide();
}
}
Then on your page add this code to basically hide the buttons after the page loads.
<script>
$(document).ready(function() {
setTimeout(function(){ pdfHideButtons(); }, 1000);
});
</script>
I use Primefaces 6.2 <p:layout> to display a FIX header (that is always displayed on top of page).
But the header sometimes is to high and I need reduce it DYNAMICALLY.
I decide to replace Header panel with a toggleable panel like this
<p:layout id="PageLayout" fullPage="true">
<p:layoutUnit position="north">
<p:panel id="TitlePanel" toggleable="true" header="Title">
<p:ajax event="toggle" update=":PageLayout"/>
</panel>
... others panels with context, status, date, time, etc ...
</p:layoutUnit>
<p:layoutUnit id="ContentBloc" position="center">
... web page with specific data
</p:layoutUnit>
</p:layout>
This work well except that the position of the ContentBloc is never updated.
When I click on toggle Button, the content of header's panel is hidden but the vertical position of the ContentBloc is never changed !
I used update attribute in <p:ajax> element but this has no effect.
Question: How can I do to UPDATE ContentBloc position ?
Remark: On Chrome, if after having clicked on Toggle button, I load Developer Console, the display is immediately correct !
Remark: if in maximize my Chrome Windows the display is also correct !
After searching a lot, I have found the following tricky solution
<div id="PageHeader" style="position:absolute; left:0; top:0; width:100%;">
<p:panel id="TitlePanel" toggleable="true">
<p:ajax event="toggle" oncomplete="toggleTitlePanel()"/>
<f:facet name="header">
<p:outputLabel value="#{pageTitle}" escape="false" style="font-size:200%;"/>
</f:facet>
... others panels with context, status, date, time, etc ...
</p:panel>
</div>
<div id="ContentPanel" style="position:fixed;
left:0;
overflow-x:auto;
overflow-y:auto;
">
... web page with specific data
</div>
For this code to work, I have
added "toggle" event to position ContentPanel.
added some JQuery event when page is loaded
The javascript code linked to toggle event is the following
function fixHeaderHeight()
{
var iHeight = document.getElementById("PageHeader").offsetHeight;
document.getElementById("ContentPanel").style.top = iHeight + "px";
}
function toggleTitlePanel()
{
setTimeout(function(){ fixHeaderHeight(); }, 500);
}
The fixHeaderHeight() function CANNOT be called direclty because size parameter has not been changed when toggleTitlePanel() is called. So active function is call indirectly using setTimeout() function.
To position correctly ContentPanel the first time it is displayed and when screen size is changed, mimized, maximized, I have already added some javascript code.
<script>
function setContentTopPosition(div)
{
var iHeight = document.getElementById("PageHeader").style.height;
div.style.top = iHeight;
}
function onLoadPage()
{
fixHeaderHeight();
}
function onResizeWindow()
{
fixHeaderHeight();
}
</script>
The JQuery events are initialized just before </body> element in .ready() function.
<script type="text/javascript">
jQuery(document).ready(function()
{
onLoadPage();
jQuery("#PageHeader").resize(function()
{
onResizeWindow();
});
});
jQuery(window).resize(function()
{
onResizeWindow();
});
</script>
Now, Header and Content panels are correctly displayed
when I display this page for the first time
when I change windows size
when I click on MINUS button to collapse Header panel
List item when I click pn PLUS button to expand Header panel
I hope only that this solution will be helpfull for others.
I have a tooltip on an HTML page implemented using AngularJS uib-tooltip-html:
<div>
<i uib-tooltip-html="myTooltip='my tooltip HTML'"
class="fa fa-exclamation-triangle"></i>
</div>
It shows well on desktop browsers when I hover the icon with the mouse and disappears when the mouse is out of the icon area.
When I activate the tooltip on iPad, it doesn't disappear if I tap in other screen areas.
How to dismiss the uib-tooltip-html tooltip on iPad?
I faced a similar issue and found a solution. Hope this helps some one else looking for an answer. Add the following code to your website:
$('[data-toggle="popover"]').popover(); // close on body click
// iOS doesnt recognise 'body' click so using :not
$(':not(#anything)').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
All credits to stelco at this URL
I want to display a dialog which has a gmap as element, it works fine when I set height and width, but what I need is show it as maximized full screen map. The Dialog is shown in fullscreen, but map is empty, only when I back to default size it is shown.
My code is
<p:commandLink id="id" value="Modal" onclick="PF('dlg').show(); PF('dlg').toggleMaximize();"/>
<p:dialog appendTo="#(body)" id="dlg" widgetVar="dlg" maximizable="true" width="1920" height="1080">
<p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%;">
</p:gmap>
</p:dialog>
How can I solve my problem?
You can add following JavaScript on your page
<script>
function resizeElement(elementId,width,height){
console.log("Resizing element " + elementId + " W/H="+ width + "/" + height);
var element = document.getElementById(elementId);
element.style.width=width+"px";
element.style.height=height+"px"
}
function resizePfGmapInsideWrapperElement(wrapperElementId){
var wrapperElement=document.getElementById(wrapperElementId);
var width=wrapperElement.clientWidth-40;
var height=wrapperElement.clientHeight-60;
resizeElement("gmap",width,height);
}
function resizePfGmapInsideDialog(){
resizePfGmapInsideWrapperElement("dlg");
}
</script>
and then add resizePfGmapInsideDialog() into p:commandLink onclick
<p:commandLink id="id"
value="Modal"
onclick="PF('dlg').show(); PF('dlg').toggleMaximize(); resizePfGmapInsideDialog();"/>
Actually whenever you call PF('dlg').toggleMaximize(); also call resizePfGmapInsideDialog() right after and p:gmap will automatically resize inside dialog's content area.
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/