SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Kalirion's Avatar
    Join Date
    Sep 2003
    Location
    Reston, VA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    same page links to a scrolling DIV (another IE MAC bug)

    Hi again everyone, I seem to be having yet another problem with the MAC IE. In this case, I am trying to to create inner-page links to different sections of a scrolling DIV. The idea is that these links serve as a sort of table of contents, and clicking on them would scroll the DIV to the desired location. I've tried both the <a href="#sectionName"> links and the .scrollIntoView() method. Both work on IE Windows (and Netscape MAC), but IE MAC is giving problems. In this case, clicking the links scrolls the entire page to where the desired section would have been if the DIV was large enough to contain all its data without scrolling.

    Here's an example of what I'm trying to do:
    Code:
    <html>
    <head>
    	<title>LinkTest</title>
    	<style>
    
    		.scrollableDiv {
    			overflow: scroll;
    			height: 200px;
    			width: 200px;
    			padding-right: 16px;
    			padding-bottom: 16px;
    		}
    
    	</style>
    </head>
    <body>
    	<div>
    		<a href="#PAR1">Paragraph 1</a>
    		<input type="button" value="Paragraph1" 
    			onclick="document.getElementById('p1').scrollIntoView()"/><BR>
    		<a href="#PAR2">Paragraph 2</a>
    		<input type="button" value="Paragraph2" 
    			onclick="document.getElementById('p2').scrollIntoView()"/><BR>
    		<a href="#PAR3">Paragraph 3</a>
    		<input type="button" value="Paragraph3" 
    			onclick="document.getElementById('p3').scrollIntoView()"/><BR>
    		<a href="#PAR4">Paragraph 4</a>
    		<input type="button" value="Paragraph4" 
    			onclick="document.getElementById('p4').scrollIntoView()"/><BR>
    		<a href="#PAR5">Paragraph 5</a>
    		<input type="button" value="Paragraph5" 
    			onclick="document.getElementById('p5').scrollIntoView()"/><BR>
    	</div>
    	<br>
    	<div name="paragraphs" class="scrollableDiv">
    		<a name="PAR1"/>
    		<P id="p1">Paragraph 1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1
    			 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1
    		</P>
    		<a name="PAR2"/>
    		<P id="p2">Paragraph 2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2
    			 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2
    		</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    		<a name="PAR3"/>
    		<P id="p3">Paragraph 3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3
    			 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3
    		</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    		<a name="PAR4"/>
    		<P id="p4">Paragraph 4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4
    			 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4
    		</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    		<a name="PAR5"/>
    		<P id="p5">Paragraph 5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5
    			 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5
    		</P>
    	</div>
    </body>
    It seems to me that this is related to the bug where a MAC IE makes a page large enough to contain all of a DIV's contents, even if the DIV's size is set to be far smaller, giving unnecessary scrollbars which scroll to empty views.

    Does anyone know if there's a way to do this that might work on MAC IE?

    Thanks in advance!
    Kalirion.
    Last edited by Kalirion; Sep 24, 2003 at 06:57.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kalirion,

    I've also seen a similar issue on Opera7, but I don't have any ideas for a solution. Perhaps someone else will.

    Good luck!

  3. #3
    SitePoint Member Kalirion's Avatar
    Join Date
    Sep 2003
    Location
    Reston, VA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I've figured out how to do use the offsetTop and posTop properties to get results sort of close to what I wanted. Unfortunately this method makes the scrollbars all but useless:

    Code:
    <html>
    <head>
    	<title>LinkTest</title>
    	<style>
    
    		.scrollableDiv {
    			overflow: auto;
    			height: 200px;
    			width: 200px;
    			padding-right: 16px;
    			padding-bottom: 16px;
    		}
    
    		div#innerpdiv {
    			position: absolute;
    		}
    
    		div#outerpdiv {
    			position: absolute;
    		}
    
    	</style>
    	<script type="text/javascript">
    
    		function myscroll(id) {
    			var paragraph = document.getElementById(id);
    			var division = document.getElementById('innerpdiv');
    			division.style.posTop = 0 - paragraph.offsetTop;
    		}
    
    	</script>
    </head>
    <body>
    	<div>
    		<input type="button" value="Paragraph1"
    			onclick="myscroll('p1')" /><BR>
    		<input type="button" value="Paragraph2"
    			onclick="myscroll('p2')" /><BR>
    		<input type="button" value="Paragraph3"
    			onclick="myscroll('p3')" /><BR>
    		<input type="button" value="Paragraph4"
    			onclick="myscroll('p4')" /><BR>
    		<input type="button" value="Paragraph5"
    			onclick="myscroll('p5')" />
    	</div>
    	<br>
    	<br>
    	<div id="outerpdiv" name="paragraphs" class="scrollableDiv">
    		<div id="innerpdiv">
    			<P id="p1">Paragraph 1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1
    				 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1
    			</P>
    			<P id="p2">Paragraph 2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2
    				 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2
    			</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    			<P id="p3">Paragraph 3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3
    				 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3
    			</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    			<P id="p4">Paragraph 4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4
    				 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4
    			</P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    			<P id="p5">Paragraph 5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5
    				 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5
    			</P>
    		</div>
    	</div>
    </body>
    The above code works on IE MAC, but for some reason not on Netscape it seems. And the last button gives unexpected results on IE WIN.

    If anyone could suggest a way to fix this so the scrollbars still work the way they should (which I'm guessing is impossible), I would be very grateful.

    Kalirion.


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
  •