Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Please help me, How do you load an html page into a div?????

    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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Sorry, I am using the tutorial:

    http://tympanus.net/codrops/2010/06/...g-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!!!

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

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

  5. The Following User Says Thank You to molendijk For This Useful Post:

    shellymabelly83 (07-13-2011)

  6. #5
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    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

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    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.

  8. #7
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

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

  9. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    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.
    Last edited by molendijk; 07-14-2011 at 11:19 AM.

  10. #9
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    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

  11. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    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.

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
  •