Displaying different information without reloading the page 2

[btween]

I have a table with four links on top of it. What I would like to do is have different data load inside the table (whether in an iframe or as an include file I don't know how this is possible) whenever each of the links is clicked, but without reloading the page. I could have the data stored in 4 different html pages that could load within the table, but I don't know how to do this.

Please help

 

[theniteowl]

Store the data in div or span tags inside the table and set the display property on each div you do not want to display to none. Give each span or div a distinct ID tag.
With your links call a function and pass it the value of which div you want to display.
The function should keep track of which div is currently displayed so that it knows which one to change the display property to none on and then set the new one to block.


At my age I still learn something new every day, but I forget two others.

 

[cLFlaVA]

on top of what theniteowl said - if you have any sort of extensive data that you'll be hiding/showing based on anchor clicks, i recommend storing them in separate pages and then either utilizing frames (gasp!) or traditional page loading methods.

in other words, if you are trying to incorporate 4 100-k pages into one page, then that's really 400k that you're loading, even if you're only displaying 100k at a time.

is there any particular reason you don't want to reload the page?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

Thanks for the tip.

I've set up the divs. if you could help me out with the function that would be great. I'm not sure how to write it.

here's the code for the table:

        <table width="349" border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td width="146" scope="col"><a href="ur1"><img src="images/nasa.jpg" width="146" height="21" border="0" /></a></td>
            <td width="57" scope="col"><a href="url2"><img src="images/videos.jpg" width="57" height="21" border="0" /></a></td>
            <td width="92" scope="col"><a href="url3"><img src="images/works.jpg" width="92" height="21" border="0" /></a></td>
            <td width="49" scope="col"><a href="url4"><img src="images/testimonials.jpg" width="88" height="21" border="0" /></a></td>
          </tr>
          <tr>
            <td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#0000FF">
              <tr>
                <td bgcolor="#FFFFFF" scope="col">
				  <div id="1" style="visibility:hidden">
                  <p>div 1 </p>
                  </div>
				  <div id="2" style="visibility:hidden">
                  <p>div 2 </p>
                  </div>
				  <div id="3" style="visibility:hidden">
                  <p>div 3 </p>
                  </div>
				  <div id="4" style="visibility:hidden">
                  <p>div 4 </p>
                  </div>
                </td>
              </tr>
            </table></td>
          </tr>
        </table>

cflava, the information in the box will be minimal so I don't need to worry about overloading the page.

 

[cLFlaVA]

my suggestions:

1) give the specific TD an ID:

<td bgcolor="#FFFFFF" [red]id="myCell"[/red] scope="col">

2) use [tt]display: none[/tt] instead of [tt]visibility: hidden[/tt], because the visibility style still allows the elements to take up space while they're invisible

3) create a function to loop through the divs within that specific cell and hide all of them except for the one you want to show. something like:

function blah(openID) {
    var d = document.getElementsById('myCell').getElementsByTagName("div");
    for ( var i = 0; i < d.length; i++ ) {
        d[i].style.display = (d[i].id == openID) ? '' : 'none';
    }
}

4) call the function like this:

<a href="blah(2); return false;">Show 2nd div</a>

hope this helps.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

#4 should be:

<a href="blah([red]'[/red]2[red]'[/red]); return false;">Show 2nd div</a>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

I think I'm almost there. For some reason when I click the buttons, it tries to load the following url:

http://www.urlurl.com/blah('1');return false;

instead of invoking the script.

I declared the script like this:

<script type="text/javascript">

function blah(openID) {
    var d = document.getElementsById('myCell').getElementsByTagName("div");
    for ( var i = 0; i < d.length; i++ ) {
        d[i].style.display = (d[i].id == openID) ? '' : 'none';
    }
}

</script>

The script is at the very top of the page. It does not have to be in the head of the document does it?

 

[cLFlaVA]

it should be in the head.

let's see your anchor link, i'm sure it's incorrect.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

This is the whole table code:

<table width="349" border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td width="146" scope="col"><a href="blah('1');return false;"><img src="images/nasa.jpg" width="146" height="21" border="0" /></a></td>
            <td width="57" scope="col"><a href="blah('2'); return false;">show</a></td>
            <td width="92" scope="col"><a href="blah('3'); return false;"><img src="images/works.jpg" width="92" height="21" border="0" /></a></td>
            <td width="49" scope="col"><a href="blah('4'); return false;"><img src="images/testimonials.jpg" width="88" height="21" border="0" /></a></td>
          </tr>
          <tr>
            <td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#0000FF">
              <tr>
                <td bgcolor="#FFFFFF" id="myCell" scope="col">
				  <div id="1" style="visibility:none">
                  <p>div 1 </p>
                  </div>
				  <div id="2" style="visibility:none">
                  <p>div 2 </p>
                  </div>
				  <div id="3" style="visibility:none">
                  <p>div 3 </p>
                  </div>
				  <div id="4" style="visibility:none">
                  <p>div 4 </p>
                  </div>
                </td>
              </tr>
            </table></td>
          </tr>
        </table>

the thing about this document is that it is a php file that is included in another file and it has no head.

 

[cLFlaVA]

haha. my bad.

replace with this:

<a href="#" onclick="blah('4'); return false;">

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

Now I'm getting a Javascript error: Object does not support property or method.

 

[cLFlaVA]

change [tt]getElement[red]s[/red]ById('myCell')[/tt] to [tt]getElementById('myCell')[/tt].



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

YES THAT DID IT. THANKS SO MUCH.

 

[btween]

one last thing. when the page loads initially all 4 divs are showing on top of one another. Is there a way to make just the first one show?

 

[cLFlaVA]

see #2 in my second post.
incorporate that with your divs, which you originally had styled with visibility: none.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[btween]

I am using visibility:none

I think by default they load even with visibility:none

I did body onload="blah('1');return false;"> but this is awkward because, all 4 divs load and then they disappear. Is there a way to make them not load at all or rather just make the first one load?

 

[btween]

never mind, I had visibility:none, instead of display:none,

thanks,

again