SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ALL!

    I have the below code from The Dynamic Duo web site. It works great! It loads an external page in both IE and NN. Also verifies the load is complete. HOWEVER...I would like the code to load 2 (or more) pages into 2 (or more) DIVs. How do I change the code?

    ANY IDEAS? Thanks for the help!
    Marc
    =======================================

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">

    <TITLE>The Dynamic Duo - External Source Files Demo [IFrame Buffer - LoadSource Function]</TITLE>

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false

    function loadSource(id,nestref,url)
    {
    if (ns4)
    {
    var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
    lyr.load(url,lyr.clip.width)
    }
    else if (ie4)
    {
    parent.bufferFrame.document.location = url
    }
    }
    function loadSourceFinish(id)
    {
    if (ie4) document.all[id].innerHTML = parent.bufferFrame.document.body.innerHTML
    }
    //-->
    </SCRIPT>

    <STYLE TEXT="text/css">
    <!--
    #contents {position:absolute; left:0; top:100; width:150; height:350; clip:rect(0,150,350,0); background-color:yellow; layer-background-color:yellow;}
    #contents2 {position:absolute; left:150; top:100; width:470; height:350; clip:rect(0,470,350,0); background-color:#ff6699; layer-background-color:#ff2233;}
    -->
    </STYLE>
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">
    <!-- must have bufferFrame in the body somewhere -->
    <IFRAME STYLE="display:none" NAME="bufferFrame"></IFRAME>

    <A HREF="javascript:loadSource('contents',null,'text-buffer.html')">load source</A><br>
    <A HREF="javascript:loadSource('contents',null,'text-buffer2.html')">load source2</A><br><!--MS added-->
    <A HREF="javascript:loadSource('contents',null,'text-buffer3.html')">load source3</A><br><!--MS added-->

    <SPAN ID="contents"></SPAN>
    <SPAN ID="contents2"></SPAN><!--MS added-->

    </BODY>
    </HTML>

    ==========code of page to load==========================
    ==========save the file as text-buffer.html
    ==========save the file as text-buffer2.html
    ==========save the file as text-buffer3.html

    <html>

    <head>

    <title>Contents Page</title>

    </head>

    <body onLoad="parent.loadSourceFinish('contents')">

    This is my Test Page1. This is my Test Page1. This is my Test Page1.

    This is my Test Page1. This is my Test Page1. This is my Test Page1.

    </body>

    </html>

    ==============================================
    Thank you for your time!
    Marc

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Marc,

    I'm not sure if I understand the problem. From a quick glance, the code is set up to accept any filename and insert it into a div -- you simply have to define the divs and the function's parameters.

    Or, are you asking how to load doc1 + doc2 into div1?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>Or, are you asking how to load doc1 + doc2 into div1?
    CLOSE!

    What I am trying to do is to allow any of the links on the page to process 1,2,3 etc pages to load into the corresponding DIVs 1,2,3 etc.

    The current code will take the clicking of a link and process 1 page and load into 1 Div.

    Please see: http://www.dansteinman.com/dynduo/en/source.html for the details of the whole thing.

    Any Ideas?
    Thank you for your time!
    Marc

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This is going to be somewhat hasty (the Bills just tied it up and the Jets are scheduled to begin

    The only thing I can think of offhand is to load each file and append them to the div. Sort of:

    function loadSource(id,nestref,url)
    {
    if (ns4)
    var lyr += (nestref)....blahblah...
    else
    parent.bufferFrame.document.location += url
    }

    I'll try to think of something else during the commercials

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what you mean...my steelers lost to a last min FG

    What about passing the URLs to an array and cycling through it. ie, click link--> http://www.a.com, http://www.b.com... Then the array opens each file. I am a newbie to JS so I have no idea how to do it. Food for thought.
    Thank you for your time!
    Marc

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Marc,

    I've been caught up in a few things (in addition to crying because of the Jets

    A few questions:
    1) Do you want the text to appear as one document? In other words, can a 'Load Next' button do?

    2) Do the documents have to be html documents? Can they be written as document.write()s and included as a js file?

    3) Are these local pages? Or, are you importing pages from another site?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Do you want the text to appear as one document? In other words, can a 'Load Next' button do?
    No...the intent is to load 2 or more at the same time into adjacent DIV/SPANs.

    2) Do the documents have to be html documents? Can they be written as document.write()s and included as a js file?
    No...they can be html or text. There will be text and gifs/jpgs. It needs to work in IE 4+ and NN 4+.

    3) Are these local pages? Or, are you importing pages from another site?
    NO...I am using pages ONLY from my web or sub webs.

    The links would change both the content AND PICs. So clicking on link1 would have content 1a and pic 1b, while link2 would have 2a and 2b.

    Thank you for your time!
    Marc

  8. #8
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Marc,

    Ok. I'm still a little confused as to why you are trying to load the data as pages, especially since you say that you want: "content 1a and pic 1b, while link2 would have 2a and 2b".

    The easiest solution would be to create the pages you want by combining the data (text & images) and then loading one source (eg: page1.html = content1a + pic1b)

    Another possibility is to put everything into arrays either within the page's header or an included js file and then use the links to swap DIV content & visibilities (see the "dHTML: an Introduction" script/tutorial at my site)

    The process could look something like:


    function loadDiv(content1, divID)
    {
    var content = (content1) ? myContent[0] : myContent[1];
    var picSrc = (content1) ? myPics[0] : myPics[1];

    if (ns4)
    {
    document.layers[divID].document.open();
    document.layers[divID].document.write(content);
    document.layers[divID].document.images['pic1'].src=picSrc;
    document.layers[divID].document.close();
    document.layers[divID].visibility = 'show';
    }
    else
    {
    document.all[divID].innerHTML = content;
    document.all[divID].images['pic1'].src = picSrc;
    document.all[divID].style.visibility = 'visible';
    }
    }
    //-->
    </SCRIPT>

    <STYLE TEXT="text/css">
    ....blah blah....
    </STYLE>
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">
    <DIV id='Div1' style='position:absolute; visibility:hidden;..blahblah....>
    Some text as a placement holder, mainly for netscape<img src="pic1.gif">
    </DIV>
    <a href="javascript:loadDiv(0,'Div1')">Link1</a>
    <a href="javascript:loadDiv(1,'Div1')">Link2</a>

    If the above doesn't solve your problem, I'm going to need a url to see what it is you are attempting.

    Vinny


    Where the World Once Stood
    the blades of grass
    cut me still

  9. #9
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good Morning! I am sorry I did not get back to you but the election thing here in Palm Beach County is just too good to ignore!

    Anyway, go to these to see examples and test pages:
    http://www.mydevelopmentonline.com/myegretlanding/
    http://www.mydevelopmentonline.com/m...ing/iframe.htm
    http://www.mydevelopmentonline.com/m...iframe_bak.htm
    http://www.mydevelopmentonline.com/m...frame_bak2.htm

    The top, bottom and left remain constant. The page is in 3 columns. Left column is 150px the middle is 470px and the right is 150px.

    The middle area, located in the 470 column and the right 150 (between the top and bottom) column, contain content that must change depending on the link clicked. Normally I would use FP2K but not this time. Instead of having 50 or more pages, I wanted to only alter the content. That is possible and doable. The problem is the code only changes 1 DIV/SPAN.

    The right column is an advertising area that is directly related to the content in the middle. So if a restaurant page is shown then the right should show restaurant ads.
    Thank you for your time!
    Marc


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
  •