Proper method to simulate pdf + prevent page jump via iframe anchor?

HTML & CSS
1

Note: I apologize if I posted this in the wrong forum.

I have a two part question which goes hand in hand… In my search I couldn’t find a proper solution, so posting both my issues in case someone can direct me to a more efficient route.

Basically I am simulating Adobe PDF reader functionality where the thumbnails of the pages are on the left and the content is on the right. This is for a mock website running on a local computer.

Clicking the thumbnail on the left, takes you to the proper (image)page on the right. I will be using normal images and thumbnails to try to make it look like a pdf reader although its not reading an actual .pdf file.

I currently achieved this by placing two divs next to eachother, gave them a specific height and set “overflow-y:scroll”.

Here is the html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Articles</title>
<link href="styles/temp.css" rel="styleSheet"  type="text/css" media="screen" />
</head>

<body style="margin:0; background-color:#000;">

<div id="iframe_articles-popup">
    <div class="header">
        <p>State Reform</p>
    </div>
    <div style="clear:both;"></div>
    <div class="content">
        <div class="left_column">
            <a href="#page1">1 <img src="images/article_thumbnail-sample.jpg" /></a>
            <a href="#page2">2 <img src="images/article_thumbnail-sample.jpg" /></a>
            <a href="#page3">3 <img src="images/article_thumbnail-sample.jpg" /></a>
            <a href="#page4">4 <img src="images/article_thumbnail-sample.jpg" /></a>
            <a href="#page5">5 <img src="images/article_thumbnail-sample.jpg" /></a>
            <a href="#page6">6 <img src="images/article_thumbnail-sample.jpg" /></a>
        </div>
        
        <div class="right_column">
            <a name="page1"><img src="images/article_image-sample.gif" /></a>
            <a name="page2"><img src="images/article_image-sample.gif" /></a>
            <a name="page3"><img src="images/article_image-sample.gif" /></a>
            <a name="page4"><img src="images/article_image-sample.gif" /></a>
            <a name="page5"><img src="images/article_image-sample.gif" /></a>
            <a name="page6"><img src="images/article_image-sample.gif" /></a>
        </div>
        
    </div>
    <div style="clear:both;"></div>
    <div class="footer">
        <p class="note">Terms of use &copy; 2010 All rights reserved.</p>
    </div>
</div><!-- end iframe_news-popup -->

</body>
</html>

Here is the CSS


/* -- Main Article Links: Pop-up Window */
#iframe_articles-popup{
    color:#999;
    font-size:12px;
}

#iframe_articles-popup .header{
    width:750px;
    margin-bottom:2px;
}

#iframe_articles-popup .content{
    width:1040px;
    height:auto;
}

#iframe_articles-popup .left_column{
    width: 210px;
    height:760px;
    overflow-y:scroll;
    overflow-x:hidden;
    border:1px solid #ABABAB;
    float:left;
}


#iframe_articles-popup .left_column a{
    height:143px;
    width:160px;
    margin: 10px auto;
    color:#fff;
    display:block;
    text-decoration:none;
    
}


#iframe_articles-popup .right_column{
    width: 700px;
    height:760px;
    overflow-y:scroll;
    border:1px solid #ABABAB;
    float:left;
    margin-left:20px;
}

#iframe_articles-popup .left_column img{
    border:1px solid #ccc;
    margin-left:10px;
    vertical-align:middle;
}

#iframe_articles-popup .right_column img{
    height:749x;
    width:579x;
    margin: 15px auto;
    border:1px solid #ccc;
    display:block;
}

#iframe_articles-popup .footer{
    width:750px;
    margin-top:2px;
}

So basically my questions are:

  1. Is there a more efficient or effective route to go to simulate this?

  2. At the moment the above page opens via an iframe+fancybox(http://fancybox.net/) on another page.

However when I click on an anchor link in the iframe, it causes the parent browser window to scroll as well making the entire thing useless because the window keeps jumping everything time you click on an anchor link.

Also in general, if any of my code is crappy please let me know! :slight_smile: