SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  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.


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
  •