PDA

View Full Version : Please help me, How do you load an html page into a div?????



shellymabelly83
07-13-2011, 05:15 AM
I cannot seem to get this to work correctly? I am trying to load an html page into a div to make my horizontal scrolling plug in work but I cannot get it to work???? HELP! I am doing this all wrong I think.

Ok so here's how I have done this so far:

<div class="section black" id="section1">
<ul class="nav">
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
<li>3</li>
</ul>
</div>

The 2 links are what I want to have the html pages loaded into but this is the code I am starting with from the tutorial. How do I change this to make the page load into the div????

Also do i have to change the script at all to make this work?

Beverleyh
07-13-2011, 09:01 AM
Please provide;

A link to your page
A link to the tutorial you refer to

So far, we dont really know what you're talking about.

shellymabelly83
07-13-2011, 06:45 PM
Sorry, I am using the tutorial:

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

This tutorial uses divs for the horizontal scrolling but the site I am integrating this into is seperate pages. So what I dont know how to do is to load the different pages into the divs so that the horizontal scroller will work for my site. Any help would be fantastic! Thanks!!!

molendijk
07-13-2011, 09:50 PM
One way of loading an external file named external.html (for instance) in a div having id="some_div" (for instance) is the following.
In the body:

<iframe name="external_content" src="external.html" style="position:absolute; left:-10000px"></iframe>

<div id="some_div">external content will be loaded here</div><br>

<a href="javascript: void(0)" onclick="document.getElementById('some_div').innerHTML=frames['external_content'].document.documentElement.innerHTML">load into some_div</a>
Arie Molendijk.

shellymabelly83
07-13-2011, 11:19 PM
Thanks for responding!

I tried to do the iframe the way you posted but for some reason I must have done something wrong because the content doesnt load, I just get the words "load content into div here"

I have made a test page so maybe you can look at that and tell me what I have done wrong????
(Also all of the files I want to load into the divs are on my server)


The number 3 in the navigation is the link to the div I want the content to load into. (section3) When you click on the #3 in the nav it wont link it so you probally have to scroll to the page, its the last section and you will see the words ""load content into div here"

http://www.mishedesign.com/horizontal.html

molendijk
07-13-2011, 11:55 PM
You made a number of mistakes.
1. There should only be one occurrence of <iframe name="external_content" src="graphicDesign.html" style="position:absolute; left:-10000px"></iframe>, preferably just after the opening body tag.
2. Get rid of <div id="section2">external content will be loaded here</div> (which you have twice!!), since you already have <div class="section white" id="section2">etc.
3. Get rid of <a href="javascript: void(0)" onclick="document.getElementById('section2') .innerHTML=frames['external_content'].document.documentElement.innerHTML">load into some_div</a> (which you have twice!!) and replace <li><a href="#section3">3</a></li> with:
<li><a href="#section3" onclick="document.getElementById('section2') .innerHTML=frames['external_content'].document.documentElement.innerHTML">3</a></li>
===
Arie.

shellymabelly83
07-14-2011, 03:20 AM
I really appreciate all your help!
I am new to all this so I am learning. But I am not sure what I have done wrong now, because the page comes up now but in the div #section1. I need it to be in div #section2, so I am sure I probably got something mixed up. Also now the horizontal scrolling does not work? I am confused....:confused:

molendijk
07-14-2011, 11:12 AM
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:

<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:

<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.

shellymabelly83
07-15-2011, 04:07 AM
Thank you so much I have one of the sections working now! One of my sections however is not loading (section #2) and I have gone over it a million times and cannot figure out why.....? Also on the iframe that I did get working (section#3) the javascript gallery is not working? Please help.....

I have loaded the site to my server (keep in mind its not finished yet) so if you can see what I have done wrong that would be great!

www.mishedesign.com

molendijk
07-15-2011, 01:10 PM
I'll be off for a couple of days, so I cannot examine the problem in detail now. What I can already tell you, though, is that you should put the iframes just before the closing body tag of each section-div (not outside the divs!), that you should NOT give the iframes a left position and that you should give the iframes a high z-index (for instance: 100) in order for the javascript to work.
===
Arie.

shellymabelly83
07-18-2011, 03:41 PM
I really appreciate all your help, I have really learned a lot about iframes and such! I have 2 other questions if you can help me..... First, I have everything loading correctly into the iframe but for some reason my links dont work?

I have parts of the webpage loaded onto my server temp, but the links dont work on my graphic design page. I dont know why? (www.mishedesign.com click graphic design link or you can go directly to the page but sinece its loaded into iframes from the index page I am not sure which pages code has the problem? www.mishedesign.com/12.html)

molendijk
07-18-2011, 07:07 PM
See what happens after correcting the following mistakes:
1.
You should not have something like

<iframe style="position:absolute; width:1270px; height:772px; top: -1px; left: 1px; z-index: 100;" src="aboutMe.html" frameborder="0" z-index="100"></iframe>
but:

<iframe style="position:absolute; width:1270px; height:772px; top: -1px; left: 1px; z-index: 100;" src="aboutMe.html" frameborder="0" ></iframe>
This is true for all your iframes, in which you should also eliminate the specifications for the left position (I guess).

2.
You have three times id="home1", which is not possible, since an ID is something that uniquely applies to one element. So you must have more than one ID.
===
Arie.