Results 1 to 9 of 9

Thread: Problem with scrolling in IE8

  1. #1
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with scrolling in IE8

    Hello,

    I just installed an dhtml slide panel and I encounter a problem in IE8 (In FireFox is working FINE):

    When I use the slide panel (Not before), I keep scrolling down. No end. You can scroll the whole day.

    How can I fix that in IE please?

    Many thanks in advance,
    Cruxy

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks john for your reaction.

    Here you are:

    http://zaidan.nl/slide_panel.php

    Just try to scroll down.

    Many thanks in advance,
    Cruxy

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'll have a real look at it in action at some point. But the first thing I would try is changing:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John.

    I did, but without any progress.

    Any Idea?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Like I say, I'll have a real look at it later. The DOCTYPE thing was worth a try. Make sure you are not viewing a cached version of the page. Probably though there is some incompatibility with IE in general. The page wouldn't load in IE 7. I'll have my IE 8 machine ready for testing sites later today (it was in the car, needs to warm up first before I boot it). I'll have a look then or tomorrow.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. Have a nice day.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There are at least three things going on with that page that might be an issue here. Although the page looks good, nice design elements, it's code is pretty sloppy. There are script errors and missing scripts. The HTML markup doesn't follow standards.

    But I know you probably just want this fixed. Fortunately in a way, the script you are using for this is out dated. It is forcing IE 7 (which started displaying the page BTW with the change in DOCTYPE) and 8 to use methods designed for IE 6 which couldn't do fixed positioning. By changing that we would most likely solve the problem in IE 7 and 8. You will still have the problem in IE 6 though. It probably has something to do with the layout of the page. For IE 7 and 8 (and all others that previously worked) though, this version of the script (slide_left.js) should do well:

    Code:
    	/************************************************************************************************************
    	(C) www.dhtmlgoodies.com, October 2005
    	
    	Version 1.2: Updated, November 12th. 2005
    	
    	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    	
    	Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	www.dhtmlgoodies.com
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/		
    	var panelWidth = 280;	// Width of help panel	
    	var slideSpeed = 15;		// Higher = quicker slide
    	var slideTimer = 20;	// Lower = quicker slide
    	var slideActive = true;	// Slide active ?
    	var initBodyMargin = 0;	// Left or top margin of your <body> tag (left if panel is at the left, top if panel is on the top)
    	var pushMainContentOnSlide = true;	// Push your main content to the right when sliding
    	var panelPosition = 0; 	// 0 = left , 1 = top
    	
    	/*	Don't change these values */
    	var slideLeftPanelObj=false;
    	var slideInProgress = false;	
    	var startScrollPos = false;
    	var panelVisible = false;
    	function initSlideLeftPanel(expandOnly)
    	{
    		if(slideInProgress)return;
    		if(!slideLeftPanelObj){
    			if(document.getElementById('dhtmlgoodies_leftPanel')){	// Object exists in HTML code?
    				slideLeftPanelObj = document.getElementById('dhtmlgoodies_leftPanel');
    				if(panelPosition == 1)slideLeftPanelObj.style.width = '100%';
    			}else{	// Object doesn't exist -> Create <div> dynamically
    				slideLeftPanelObj = document.createElement('DIV');
    				slideLeftPanelObj.id = 'dhtmlgoodies_leftPanel';
    				slideLeftPanelObj.style.display='none';
    				document.body.appendChild(slideLeftPanelObj);
    			}
    			
    			if(panelPosition == 1){
    				slideLeftPanelObj.style.top = "-" + panelWidth + 'px';
    				slideLeftPanelObj.style.left = '0px';	
    				slideLeftPanelObj.style.height = panelWidth + 'px';			
    			}else{
    				slideLeftPanelObj.style.left = "-" + panelWidth + 'px';
    				slideLeftPanelObj.style.top = '0px';
    				slideLeftPanelObj.style.width = panelWidth + 'px';
    			}
    
    
    			if(!document.all || navigator.userAgent.indexOf('Opera')>=0)slideLeftPanelObj.style.position = 'fixed';
    			/*@cc_on @*/
    			/*@if(@_jscript_version >= 5)
    			else if(navigator.userAgent.match(/MSIE (\d)/)[1] > 6) slideLeftPanelObj.style.position = 'fixed';
    			@end @*/
    		}	
    		
    		if(panelPosition == 0){
    			if(document.documentElement.clientHeight){
    				slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
    			}else if(document.body.clientHeight){
    				slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
    			}
    			var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
    		}else{
    			if(document.documentElement.clientWidth){
    				slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
    			}else if(document.body.clientHeight){
    				slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
    			}
    			var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
    		}
    		
    		
    		if (leftPos < 0) {
    			setCookie("portola_leftpos", 1, 100);
    		} else {
    			setCookie("portola_leftpos", 0, 100);
    		}
    		
    		slideLeftPanelObj.style.display='block';
    
    		if(panelPosition==1)
    			startScrollPos = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    		else
    			startScrollPos = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    			
    		if(leftPos<(0+startScrollPos)){
    			if(slideActive){
    				slideLeftPanel(slideSpeed);	
    			
    			}else{
    				document.body.style.marginLeft = panelWidth + 'px';
    				slideLeftPanelObj.style.left = '0px';
    			}
    		}else{
    			if(expandOnly)return;
    			if(slideActive){		
    				slideLeftPanel(slideSpeed*-1);
    			}else{
    				if(panelPosition == 0){
    					if(pushMainContentOnSlide)document.body.style.marginLeft =  initBodyMargin + 'px';
    					slideLeftPanelObj.style.left = (panelWidth*-1) + 'px';	
    				}else{
    					if(pushMainContentOnSlide)document.body.style.marginTop =  initBodyMargin + 'px';
    					slideLeftPanelObj.style.top = (panelWidth*-1) + 'px';						
    				}			
    			}
    		}	
    		
    		/*@cc_on @*/
    		/*@if(@_jscript_version >= 5)
    		if(navigator.userAgent.match(/MSIE (\d)/)[1] < 7){
    			window.onscroll = repositionHelpDiv;
    		
    			repositionHelpDiv();
    		}
    		@end @*/
    		window.onresize = resizeLeftPanel;
    		
    	}
    	
    	function resizeLeftPanel()
    	{
    		if(panelPosition == 0){
    			if(document.documentElement.clientHeight){
    				slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
    			}else if(document.body.clientHeight){
    				slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
    			}		
    		}else{
    			if(document.documentElement.clientWidth){
    				slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
    			}else if(document.body.clientWidth){
    				slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
    			}	
    		}
    	}
    	
    	function slideLeftPanel(slideSpeed){
    		slideInProgress =true;
    		var scrollValue = 0;
    		if(panelPosition==1)
    			var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
    		else
    			var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
    			
    		leftPos+=slideSpeed;
    		okToSlide = true;
    		if(slideSpeed<0){
    			if(leftPos < ((panelWidth*-1) + startScrollPos)){
    				leftPos = (panelWidth*-1) + startScrollPos;	
    				okToSlide=false;
    			}
    		}
    		if(slideSpeed>0){
    			if(leftPos > (0 + startScrollPos)){
    				leftPos = 0 + startScrollPos;
    				okToSlide = false;
    			}			
    		}
    		
    		
    		if(panelPosition==0){
    			slideLeftPanelObj.style.left = leftPos + startScrollPos + 'px';
    			if(pushMainContentOnSlide)document.body.style.marginLeft = leftPos - startScrollPos + panelWidth + 'px';
    		}else{
    			slideLeftPanelObj.style.top = leftPos + 'px';
    			if(pushMainContentOnSlide)document.body.style.marginTop = leftPos - startScrollPos + panelWidth + 'px';			
    			
    		}
    		if(okToSlide)setTimeout('slideLeftPanel(' + slideSpeed + ')',slideTimer); else {
    			slideInProgress = false;
    			if(slideSpeed>0)panelVisible=true; else panelVisible = false;
    		}
    	}
    	
    	
    	function repositionHelpDiv()
    	{
    		if(panelPosition==0){
    			var maxValue = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    			slideLeftPanelObj.style.top = maxValue;
    		}else{
    			var maxValue = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    			slideLeftPanelObj.style.left = maxValue;	
    			var maxTop = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    			if(!slideInProgress)slideLeftPanelObj.style.top = (maxTop - (panelVisible?0:panelWidth)) + 'px'; 		
    		}
    	}
    	
    	function cancelEvent()
    	{
    		return false;
    	}
    	function keyboardShowLeftPanel()
    	{
    			initSlideLeftPanel();
    			return false;	
    	
    	}
    	
    	function leftPanelKeyboardEvent(e)
    	{
    		if(document.all)return;	
    		
    		if(e.keyCode==63236){
    			initSlideLeftPanel();
    			return false;
    		}
    		if(navigator.userAgent.indexOf('Safari')>=0)return;
    		if(e.keyCode==112){
    			initSlideLeftPanel();
    			return false;
    		}		
    	}
    	
    	function setLeftPanelContent(text)
    	{
    		document.getElementById('leftPanelContent').innerHTML = text;
    		initSlideLeftPanel(true);
    		
    	}
    	if(!document.all)document.documentElement.onkeypress = leftPanelKeyboardEvent;
    	document.documentElement.onhelp  = keyboardShowLeftPanel;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect John. I have a lot of respect for your knowledge.
    Have a nice day,
    Cruxy

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •