Help! Is this possible?

**parkes** · Nov 20th, 2001, 08:24 AM

Not sure how to explain this one, so here goes.

Got my HTML screen, no frames (don't want frames either).

I've got a simple menu bar along the top when I click on it I want it to change some text that appears in the middle of the screen. I tried using an Iframe which works fine in IE, but not NS6. So I'm trying to find another method.

I don't want to use a textbox or anything like that as they have borders, etc. Could this be done using something like div??? I'm not sure.

Is there a way to do this?

**veryjonny** · Nov 20th, 2001, 08:29 AM

why not just refresh the page???

**parkes** · Nov 20th, 2001, 08:30 AM

Thought about that, but there are quite a few graphics on the page and I'm trying to avoid refreshing

**CiberTHuG** · Nov 20th, 2001, 09:24 AM

This can very easily be done in two very distinct methods. Regretably they are a bit drawn out in detail, so give me a bit of time today, and when I get the chance, I will post some code so you can reverse engineer.

**parkes** · Nov 20th, 2001, 09:50 AM

Great thanks

**landon11** · Nov 20th, 2001, 12:04 PM

there's most likely a simpler way but maybe you try something like this:

Code:

<HTML>
<HEAD>
<script>
function btn_onclick(x){
	if(x=='btn1')
	  document.all['table2'].style.visibility = 'hidden';
	  document.all['table3'].style.visibility = 'hidden';
	  document.all['table1'].style.visibility = 'visible';
	if(x=='btn2')
	  document.all['table3'].style.visibility = 'visible';
	  document.all['table2'].style.visibility = 'hidden';
	  document.all['table1'].style.visibility = 'visible';

	  }
</script>
</HEAD>
<BODY>
  <input type=button value=button1 onclick="btn_onclick(this.name)" name=btn1>
  <input type=button value=button2 onclick="btn_onclick(this.name)" name=btn2>
<div id="table1" style="position: absolute; top: 100; visibility: hidden;">
  <table width="200">
    <tr>
	  <td width="200" height="50" bgcolor="silver">
	    Hello
      </td>
	</tr>
  </table>
</div>
  <div id="table2" style="position: absolute; top: 100;"> 
    <table width="200">
	  <tr>
	    <td width="200" height="50" bgcolor="silver">
          Push a button
		</td>
	  </tr>
    </table>
  </div>
<div id="table3" style="position: absolute; top: 100; visibility: hidden;">
  <table width="200">
    <tr>
	  <td width="200" height="50" bgcolor="silver">
	    Good Bye
      </td>
	</tr>
  </table>
</div>
</BODY>
</HTML>

**CiberTHuG** · Nov 20th, 2001, 12:36 PM

Okay, this is but one way. I will work on the other easy way and post it later.

In this method, I want to point out a few things to help in understanding what I've done.

There is a div surrounding a few others, the one of class "PanelSpace". That panel really isn't necessary, it is just how I place the other panels on the page. If each of them were told to be relative, they would remain relative to hidden siblings, too. By telling them to be absolute, they will all try and sit at the topest leftest position they can. Since I don't want them at the top of the page, I group them in a div to place them on the page. If you wanted to give your panels a static coordinate, that would work.

You don't have to span's, that is just what I do. You can give spans onmouseover events so they act like links.

Code:

<html>

  <head>

    <style type="text/css">
      .PanelSpace {
        position: relative;
      }
      .Panel {
        position: absolute;
      }
    </style>

    <script type="text/javascript">
      function showTextPanel(which) {
        var which = Number(which);

        /* if you generate this page with ASP or PHP, you can
         * set the number of "panels" you have, and associate
         * a trigger for each panel.  In this case, I'm not
         * associating anything with Panel0 just so the page
         * can load a blank panel.
         */
        for (var currPanel = 1; currPanel < 5; currPanel++){
          var Panel = document.getElementById("Panel" + currPanel);
          if (currPanel == which) {
            Panel.style.visibility = "visible";
          }
          else {
            Panel.style.visibility = "hidden";
          }
        }
      }
    </script>

  </head>

  <body onload="javascript:showTextPanel(0);">

    <p>You remind me of the babe...</p>

    <p>
      <span onclick="javascript:showTextPanel(1);">What babe?</span>&nbsp;&nbsp;
      <span onclick="javascript:showTextPanel(2);">What power?</span>&nbsp;&nbsp;
      <span onclick="javascript:showTextPanel(3);">Who do?</span>&nbsp;&nbsp;
      <span onclick="javascript:showTextPanel(4);">Do what?</span>
    </p>

    <div class="PanelSpace">
      <div class="Panel" id="Panel0"><p>&nbsp;</p></div>
      <div class="Panel" id="Panel1"><p>The babe of the power.</p></div>
      <div class="Panel" id="Panel2"><p>The power of voodoo.</p></div>
      <div class="Panel" id="Panel3"><p>You do.</p></div>
      <div class="Panel" id="Panel4"><p>Remind me of the babe.</p></div>
    </div>

  </body>

</html>

If you have any questions, just ask.

**CiberTHuG** · Nov 20th, 2001, 12:53 PM

Ooo, I found this in another thread. It isn't as fancy as the first example, but I don't feel like rewriting it.

Code:

<html>

  <head>

    <script type="text/javascript">

      function SetText(myText) {
        var TextBlockEl = document.getElementById("TextBlock");
        var NewText = document.createTextNode(myText);
        TextBlockEl.replaceChild(NewText, TextBlockEl.childNodes[0]);
      }

    </script>

  </head>

  <body>

    <p id="TextBlock">TSLIB</p>

    <p><a href="java script:SetText('Some test text.');">Some test text.</a></p>

  </body>

</html>

Here you notice I used an a tag instead of a span. I probably wouldn't do it that way again, but it works.

**veryjonny** · Nov 22nd, 2001, 08:07 AM

why not just cache the image of the page and refresh it?

Thread: Help! Is this possible?

Thread Tools

Display

Help! Is this possible?

hi

hi

Posting Permissions