Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Load another site page into a DIV

  1. #11
    Join Date
    Dec 2012
    Location
    UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    Sorry about it being held back for moderating, it must have been caught by the anti-spam filter.
    No worries

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by Teapott View Post
    And thank you molendijk but I probably should have mentioned I wanted to avoid iframes A lecturer of ours heavily encouraged us to avoid them these days.
    Your lecturer is right to the degree that iframes may be harmful in certain cases. But that's true for almost everything.
    Iframes are harmful if there's a risk that they may destroy the history queue. But that's not the case here.
    Iframes are valid elements in html5, and YouTube uses them in their new embeds.
    So don't be afraid of iframes if you know what you're doing.
    But I agree you shouldn't use them if you aren't aware of certain consequences pertaining to using them.
    Arie.

  3. #13
    Join Date
    Dec 2012
    Location
    UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the advice I've tried a solution using "$("#content").load(href);" which grabs the href from the menu anchors and puts them in my content DIV - however, I'm losing this on refresh. Is there anyway to grab/detect which href is currently within a DIV and code this to persist after refreshing?

    At the minute I can get:
    window.onbeforeunload = function() {
    return "Are you sure you wish to leave the page?";
    }

    To appear, so I'm just wondering if there's some sort of "#content.getHrefContents" equivalent that I could use when leaving the page, and hopefully put back into #content through some sort of "whenReloading" method? Again I haven't done a lot of web programming so apologies for the stupid method name guessing. Also is this the best way to do this? :/ Or should I give up and try the http://www.dynamicdrive.com/dynamici...axtabscontent/ method that Bernie posted that allows persisting?

  4. #14
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    It may be better to end up going with my suggestion, however with that method, you could try and retain the current tab using cookies and then if the cookie is set open the tab which the cookie refers to.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #15
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Quote Originally Posted by Teapott View Post
    Is there perhaps a way to change <?php include('contentIWant.html');?> so it would update in place of the DIV?
    Yes, with the help of a query string and GET for example;

    In your main page (let's say that its called "main.php"), setup your content links like this;
    Code:
    <a href="main.php?c=home">Home</a><br/>
    <a href="main.php?c=about">About</a><br/>
    <a href="main.php?c=contact">Contact</a>
    and then also in your main page, put this where you want the div content to appear;
    Code:
    <?php 
    
    if (empty($_GET))
    	{
    	include('home.html'); // default to showing home content if nothing selected
    	}
    	else
    	{
    	include($_GET['c'].'.html'); // get page name from 'c' and insert corresponding html content file
    	}
    ?>
    Now for your content, just create a "home.html" page, a "contact.html" page and an "about.html" page with ONLY the HTML for the changing page content inside (no DOCTYPE , <head> or <body> tags, etc - just the fragment of HTML that shows inside the content div).
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  6. The Following User Says Thank You to Beverleyh For This Useful Post:

    molendijk (12-09-2012)

  7. #16
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Thanks, Beverleyh, that gave me an idea on how to do it on the client side (using javascript) and WITHOUT IFRAMES.

    index.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <title>jQuery Test Demo Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
    if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
    if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html'){setTimeout("$('#test').load(document.URL.substring(document.URL.indexOf('?')+1,document.URL.length))",150)}
    });
    </script>
    </head>
    <body style="font-family: verdana; font-size: 12px">
    INDEX.HTML<br>
    <div id="test" style="position: absolute; left:10%; top:10%; right: 20%; bottom: 10%;background: white; border: 10px solid #dedede"></div>
    <div style="position: absolute; top: 0px; right: 0px; padding-top: 20px; width:200px; bottom:0px; background: #dedede; font-family: verdana; font-size:12px">
    <div style="position: relative; text-align: center">
    LOGO<br><br><br><br>
    <a href="index.html?home.html">HOME</a><br><br>
    <a href="index.html?about.html">ABOUT</a>
    </div>
    </div>
    </body>
    </html>
    ---
    about.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <title>ABOUT</title>
    <script src="orph.js"></script>
    </head>
    <body>
    <div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
    THIS IS ABOUT.HTML
    <hr>
    CONTENT
    </div>
    </body>
    </html>
    ---
    home.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <title>HOME</title>
    <script src="orph.js"></script>
    </head>
    <body>
    <div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
    THIS IS HOME.HTML
    <hr>
    CONTENT
    </div>
    </body>
    </html>
    ---
    orph.js (dont't allow pages to show as 'orphans' (without the menu)).
    Code:
    function orph(){//dont't allow pages to show as 'orphans' (without the menu).
    if (parent.location == self.location) 
    parent.location.href="index.html?" + document.URL 
    }
    
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", orph, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", orph );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                orph();
            };
        }
        else
            window.onload = orph;
    }
    ---
    Arie.
    Last edited by molendijk; 12-09-2012 at 02:58 PM.

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

    Beverleyh (12-09-2012)

  9. #17
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Hee, hee - don't you just love the way ideas bounce around

    That's a really useful script Arie - perfect for non-PHP website projects! Thanks for sharing!

    Arie's script demo for reference: http://fofwebdesign.co.uk/template/_...mes/index.html
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  10. #18
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Hi Arie,can you email me regarding your script mentioned above.I want to understand they way it works and why/how.

    I have a website that uses frames and would like to see how your script could possibly improve my site.

    My site is

    http://www.web-user.info/index.html

    Thats if you have a few minutes and are inclined to do so
    Thanks,

    Bud

  11. #19
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Arie's been developing this and similar methods for a while. There are a few threads in the "submit a script" section, and I believe he has some blog posts on it too. I think that would help.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  12. #20
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

Similar Threads

  1. Javascript - Load new images on each page load/refresh
    By spook_man in forum Looking for such a script or service
    Replies: 8
    Last Post: 12-11-2013, 12:31 AM
  2. DHTML Window widget - Load after page load?
    By davidjohny in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-21-2008, 08:36 AM
  3. Script has no name - sequential image load on page load
    By vkbarefoot in forum Looking for such a script or service
    Replies: 10
    Last Post: 07-24-2007, 04:28 PM
  4. How To Load Another Web Site into a DIV??
    By jlfximedia in forum JavaScript
    Replies: 1
    Last Post: 04-04-2006, 05:53 PM
  5. How To Load Another Web Site into a DIV??
    By jlfximedia in forum CSS
    Replies: 0
    Last Post: 04-03-2006, 03:16 PM

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
  •