<rich:calendar> conflict with jQuery
Hi,
We are using following Technologies
- JSF 1.1 (tomahawk-1.1.7 and richfaces-3.1.6) with Facelets
- YUI Layout Design
- JQuery Splitters (Horizontal and Vertical)
I am using jQuery splitter for dividing the page into two rows. Also, I am using the resize method for window when the splitter is moved up or down to update their respective contents. When the content of any portion increases in length then the scroll bar appears in the respective portion. In this case, when the scrollbar is displayed and I use the <rich:calendar> and scroll that page then <rich:calendar> starts behaving abnormally. Its year editing buttons, month scrolling buttons dont respond, and sometimes its popup also doesnt respond.
Here is the jQuery splitter code:
<!-- start body -->
<div id="body">
<!-- start top -->
<div id="topDivStyle" class="yui-g">
<!-- column1 -->
<div id="flexible-col1" class="yui-u first">
<ui:include src="leftPage.xhtml"/>
</div>
<!-- column2 -->
<div id="flexible-col2" class="yui-u">
<ui:include src="rightPage.xhtml"/>
</div>
</div>
<!-- end top -->
<-- horizontal splitter for column divisions -->
<rich:jQuery selector="#body" name="hsplit" query="splitter({type: 'h', minA: 100, maxA: 500})" timing="onload"/>
<-- resize method binding for columns -->
<rich:jQuery selector="window" name="windowResize" query="bind('resize', function(){jQuery('#bd').trigger('resize');}).trigger('resize')" timing="onload"/>
<!-- start bottom -->
<div id="bottomDivStyle" class="yui-g" >
<ui:include src="bottomPage.xhtml"/>
</div>
<!-- end bottom -->
<-- resize method binding for rows -->
<rich:jQuery selector="window" name="windowResize" query="bind('resize', function(){jQuery('#topDivStyle').trigger('resize');}).trigger('resize')" timing="onload"/>
<-- vertical splitter for row divisions -->
<rich:jQuery selector="#topDivStyle" name="mysplit" query="splitter({type: 'v',initA: true, minA: 300,maxA: 800})" timing="onload"/>
</div>
<!-- end body -->Here is the code for <rich:calendar>:
<t:panelGrid columns="2" cellpadding="0" cellspacing="0">
<t:column>
<t:outputText value="${msg.birthdate}:"/>
</t:column>
<t:column>
<rich:calendar value="#{clientBean.currentClientVO.birthDate}" horizontalOffset="2" popup="false" datePattern="dd-MM-yyyy"
showApplyButton="false" inputSize="20" style="width:200px;" direction="bottom-right"/>
</t:column>
</t:panelGrid>
Can anybody help on this?
Thanks in advance
Tayyabah
Software Engineer
End 2 End Solution Providers
