window can not scroll down in IE( tested 9 and 11)

Locked
masilamani
Posts: 9
Joined: 29 Sep 2015, 12:42

06 Nov 2015, 11:06

Hi Team,

After we integrated Volt-Layout-2.0, the Whole web page can not scroll down in IE(tested IE 9 and 11). (both Chrome and Firefox are works)

Description:
Once drag scrollbar down or press [down] via keyboard, the web page will scroll down, but at the same time page scroll up to top immediate. seems the page is flicking.

Can help to advise? Template page as below. thanks.

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">	
	
   <f:view contentType="text/html;charset=utf-8">
		<f:event listener="#{}" type="preRenderView" />
		<h:head>
			<f:facet name="first">
				<!-- <meta http-equiv="X-UA-Compatible" content="IE=9" />  -->
				<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />-->
				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				<meta http-equiv="pragma" content="no-cache" />
				<meta http-equiv="cache-control" content="no-cache" />
				<meta http-equiv="expires" content="0" />
			</f:facet>
		
			<h:outputStylesheet library="primefaces" name="primefaces.css" />
			<h:outputStylesheet library="primefaces"
				name="fileupload/fileupload.css" />
			<h:outputScript library="primefaces" name="fileupload/fileupload.js" />
			<h:outputScript library="primefaces-extensions"
				name="primefaces-extensions.js" />
			<h:outputStylesheet library="css" name="custom-pf-dataTable.css" />
			<f:loadBundle basename="messages-itrust" var="msgItruest" />	
			<h:outputScript name="js/layout.js" library="volt-layout" />	
			
			 <ui:insert name="head" />    
		</h:head>
		
		
		
		
		
		<h:body style="overflow-y: auto" styleClass="GreenBody PopupMenu" onload="setContentDivHeight();initSession();">			
			
			<ui:include src="/xhtml/common/topbar.xhtml" />
											
			<div id="layout-portlets-cover">
            <div id="layout-portlets-cover-indent">
                <div id="layout-portlets-table">

                    <div id="layout-portlets-tablerow">

                        <div id="layout-portlets-tablecell-left">
                            <div id="layout-menu-cover">
                               <!--  <ui:include src="layoutmenu.xhtml" /> -->
                               <ui:include src="/xhtml/common/MenuList.xhtml" />
                            </div>
                        </div>
                        <div id="layout-portlets-tablecell-right">
                            <!-- <ui:insert name="content">
                                Template
                            </ui:insert> -->
                            <div style="margin-top: 0px;" id="contentDivId">
								<p:panel id="main" style="padding:0em">									
									<p:outputPanel>
										<h:form id="breadCrumbForm">
											<p:layout fullPage="false" widgetVar="myBreadCrumbWgt"
												style="height: 35px;">
												<p:layoutUnit position="center" style="height: 20px; width: auto;">
													<p:breadCrumb model="#{breadCrumbController.model}" />
												</p:layoutUnit>
											</p:layout>
										</h:form>
										<ui:include src="#{commonPageLayout.mainIncludePage}" />
									</p:outputPanel>
								</p:panel>
							</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
				
			<div class="Container100 TexAlCenter White Fs14 FontVoltLight Opac60">
	            <div class="EmptyBox30"></div>
	            	Last Update : <h:outputText value="#{}"></h:outputText> | © <h:outputText value="#{session.lastAccessedTime}">
			      	<f:convertDateTime pattern="yyyy" type="date" /></h:outputText> 
	            <div class="EmptyBox30"></div>
	        </div>
		
			<p:confirmDialog widgetVar="sessionTimeoutCfmDlg"
				header="Session Timeout Warning" width="500" severity="alert"
				id="sessionTimeoutDialog" message="">
				<div align="center">
					<f:facet name="message">
						<h:outputText id="sessionTimeoutCfmMsg"
							value="The current session is about to time out in 30 seconds. Do you want to extend the session?"
							escape="false" />
					</f:facet>
					<h:form id="sessionTimeoutCfmForm">
						<p:commandButton value="Yes"
							onclick="sessionTimeoutCfmDlg.hide();resetLeftTime();" />
						<p:commandButton value="No" oncomplete="gotoLoginForm();"
							actionListener="#{}" />
					</h:form>
				</div>
			</p:confirmDialog>
		
			<pe:blockUI widgetVar="blockUIWidget">
				<h:panelGrid columns="2">
					<h:outputText value="Please wait.." />
					<br />
					<p:graphicImage value="images/ajaxloadingbar.gif" />
				</h:panelGrid>
			</pe:blockUI>
		
			<script type="text/javascript"> 
		           $(window).resize(function(){
		               setContentDivHeight();
		           });
		           
		           function setContentDivHeight() {		             
		               var height = getContentHeight();
		               
		               $("#mylayoutWdgt").css("height", height).children().css({"min-height":height-4,"max-height":height-4}).children(".ui-layout-unit-content").css("height", height-4);	               
		                
		          	 $("#taxonomyLayoutUnit > .ui-layout-unit-content").css("height",height-32);
		           }			        
		           
		           function getContentHeight(){
		           	var topBarHeight = $("#layout-topbar").height();
		               return window.innerHeight - topBarHeight;
		           }
		          		        	
		           var isSessionTimerNeed = "#{}";
		           var sessionDuration = #{};
		
		           function initSession(){
		           	resetLeftTime();
		               if(isSessionTimerNeed == "Y"){
		                   setInterval(function(){
		                       sessionDuration = sessionDuration - 1;
		                       var msg = document.getElementById("sessionTimeoutCfmMsg");
		                       if(sessionDuration == 30){
		                           msg.innerHTML = "The current session is about to time out in "+ sessionDuration + " seconds. Do you want to extend the session?";
		                           sessionTimeoutCfmDlg.show();
		                       }else if(sessionDuration < 30 && sessionDuration > 0){
		                           msg.innerHTML = "The current session is about to time out in "+ sessionDuration + " seconds. Do you want to extend the session?";
		                       }else if(sessionDuration < 0){
		                           gotoLoginForm();
		                       }
		
		                   },1000);
		               }
		           }
		
		           function resetLeftTime(){
		               sessionDuration = #{login.getSessionTimeoutInDuration()};
		           }				
		       </script>
				<h:form>
					<p:remoteCommand name="persistRows"
						action="#{}" process="@this"
						global="true" />
					<p:remoteCommand name="ERSAuditEventProvider"
						action="#{}" process="@this"
						global="true" />
					<p:remoteCommand name="OnClickBreadCrumbForTaxoEvent"
						action="#{}" process="@this"
						global="true" />
					<p:remoteCommand name="onClickBreadCrumbForFolderEvent"
									 action="#{}" process="@this"
									 global="true" />

				</h:form>
				
				<h:outputStylesheet name="css/core-layout.css" library="volt-layout" />
		        <h:outputStylesheet name="css/animate.css" library="volt-layout" />
		        <h:outputStylesheet name="css/volt-font.css" library="volt-layout" />
		        <h:outputStylesheet name="css/font-awesome.css" library="volt-layout" />
		        <h:outputStylesheet name="css/volt-layout.css" library="volt-layout" />
			</h:body>
   </f:view>
</html>

masilamani
Posts: 9
Joined: 29 Sep 2015, 12:42

07 Nov 2015, 10:55

finally, we found out the root cause.
it is caused by java script conflict.

below code snippet was used for prevent browser back and forward events. but not sure why effected program in IE browser only.

Code: Select all

function changeHashOnLoad() {
				     window.location.href += '#';
				     setTimeout('changeHashAgain()', '50'); 
					}
					 
					function changeHashAgain() {
					  window.location.href += '1';
					}
					 
					var storedHash = window.location.hash;
					window.setInterval(function () {
					    if (window.location.hash != storedHash) {
					         window.location.hash = storedHash;
					    }
					}, 50);
					window.onload=changeHashOnLoad;

aragorn
Posts: 3777
Joined: 29 Jun 2013, 12:38

08 Nov 2015, 19:29

Thanks for the update. I tested this issue for a long time but I could not replicate it. Thanks again,Masilamani ;)
Maybe setTimeout issue for IE browsers.

Locked

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest