I see now that the external file you want to load in a div has its own styles and scripts. For those cases, the solution I gave you is not adequate. You'd better simply put a regular (visible) iframe in section 3 (=where you want the external content; tell me if you want it in another section). This section would look like this now:
Code:
<div class="section black" id="section3">
<h2>Section 3</h2>
<ul class="nav">
<li><a href="#section1" >1</a></li>
<li><a href="#section2" >2</a></li>
<li>3</li>
</ul>
<p>
<iframe style="position:relative;width:1300px; height:850px" src="graphicDesign.htm" frameborder="0"></iframe>
</p>
</div>
Specifying the height and width of the iframe was a question of trial and error; the size depends on what is inside it. (There's a script on DynamicDrive that can do this automatically, but I don't want to complicate things now).
Taking all of this into account, you should replace the whole body section of your page with this:
Code:
<body>
<div class="section black" id="section1">
<h2>Section 1</h2>
<p>
MY Spectre around me night and day
Like a wild beast guards my way;
My Emanation far within
Weeps incessantly for my sin.
</p>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section white" id="section2">
<h2>Section 2</h2>
<p>
‘A fathomless and boundless deep,
There we wander, there we weep;
On the hungry craving wind
My Spectre follows thee behind.
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section black" id="section3">
<h2>Section 3</h2>
<ul class="nav">
<li><a href="#section1" >1</a></li>
<li><a href="#section2" >2</a></li>
<li>3</li>
</ul>
<p>
<iframe style="position:relative;width:1300px; height:850px" src="graphicDesign.htm" frameborder="0"></iframe>
</p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="horizontal_bestanden/graphicDesign_data/jquery.js"></script>
<script type="text/javascript" src="horizontal_bestanden/jquery.htm"></script>
<script type="text/javascript">
$(function()
{
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
Arie.
Please help me, How do you load an html page into a div?????
Reply With Quote
Bookmarks