Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

Hiding images or links when this is chosen

I would like to make a page whit three choices (buttons or whatever). Whatever choice is made the same page is going to be displayed. The page displayed can contain text, links and pictures. For one of the choices only the text are to be displayed, for the second choice links are also going to be displayed and for the third pictures too. I would like to use only HTML 3.2 and JavaScript 1.0 to do this (because this is not going to run on a PC and this is the only available).

Is it possible to do this?  

I know I could use different pages, but one of the points is to keep everything in one page and hide things when two of the alternatives is chosen.

I am wondering if there is some way to do it something like this:

Text1

If variable==choice1
      Show links //function or whatever

If variable==choice2
      Show links and picture

Text2

And so on

How about it? Is it possible?
0
Krafer
Asked:
Krafer
1 Solution
 
MasseyMCommented:
I am sorry to inform you that since you cannot use HTML4.0 (which includes Cascading Style Sheets) this is not possible... In HTML4.0 you ould hide the layers until the user licks a link, but that is not avaliable in 3.2.. Sorry

- Matt
0
 
jbirkCommented:
Yes, this is possible.  I'm not clear on how you would be setting your variable, but it would need to be set on a previous page, or while it is loading.  In order to set it from the same page after it's loaded, it would have to be refreshed with a change in the url (which would hold the value of the variable via something like this: "?value" where value is 1 or 2).
Well, anyway, your code would look something like this:

text goes here
<SCRIPT LANGUAGE="JavaScript">
<!--
var choice=location.search.substring(1,location.search.length);
if  (variable==1)
 {document.write('<A HREF="sdjkf">links</A>');
 }
else if  (variable==2)
 {document.write('<A HREF="sdjkf">links</A>');
  document.write('<IMG SRC="sdjkf">');
}
// -->
</SCRIPT>

If you could post some of your desired code, I could help to get it working with these document.writes, and also how you plan to set the variable, since it must be set before loading the page (document.write occurs during the loading of the document)

-Josh
 
0
 
KraferAuthor Commented:
I think jbirk is on the right track.
The way I think I can do it is as follows:
I am using several frames, in one of them I open the "choice" page whith three buttons (for now). When a button is pressed a function in the parent page is called and the variable passed [0,1,2].
This makes it possible to open a page using
framename.location.href="pagename.html?variable";
Which again should make it possible to use
<SCRIPT>
var choice="variable that are passed behind ?";
if (choice==1)
{ document.write.......}
if (choice==2)
...
</SCRIPT>

But how do I capture the variable passed behind the *.html? ?  
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hboysCommented:
You could use a short term Cookies to pass variables as such on loading of the page.

i.e. a certain named cookie = choice1 etc?

Maybe/maybe not?

H.
0
 
KraferAuthor Commented:
I have no Idea how to use coockies.
But is there no way to just "catch" the variable used behind the
? when calling the page?

0
 
KraferAuthor Commented:
I have no Idea how to use coockies.
But is there no way to just "catch" the variable used behind the
? when calling the page?

0
 
KraferAuthor Commented:
I have no Idea how to use coockies.
But is there no way to just "catch" the variable used behind the
? when calling the page?

0
 
KraferAuthor Commented:
I have no Idea how to use coockies.
But is there no way to just "catch" the variable used behind the
? when calling the page?

0
 
mitekCommented:
That should be one of ways to do that

var query_string = location.search

or

var query_string = winName.location.search

where winName is window name specified in TARGET attribute

0
 
jbirkCommented:
The line of code which I provided above is the one which will get the info passed in the name:
var choice=location.search.substring(1,location.search.length);

The location.search retrieves all of the data after the '?' including the question mark, so I use substring to remove the question mark and you are left with whatever data you sent it.

So that should work for your solution.

Another possibility WOULD be cookies, although I think that makes it a little more complex than necesary and ads the problem that it won't work for people who have turned off cookies.

Yet another possibility would be to store a variable in the top frameset, and access that variable when the dynamic page is loaded.  If my suggested method does not work, then I suggest going down this route. I can further help you to get either way configured.  Please first try my suggested method with the location.search though.
-Josh
0
 
KraferAuthor Commented:
I do not get the code to work. My small test consists of four pages.
Number 1 divides the screen into two frames and starts two html-pages in them. It also contains a javascript for passing the variable to the right frame when a choice is made.
The code:
<HTML>
<SCRIPT>
var valget;
function test(valget)
{
      if (valget==0)
      {
            start.location.href="test.html?0";
      }

      if (valget==1)
      {
            start.location.href="test.html?1";
      }

      if (valget==2)
      {
            start.location.href="test.html?2";
      }      
}
</SCRIPT>

<frameset cols="145,*" border=0>
          <frame name="choice" src="choice.html" marginwidth="10" marginheight="10" scrolling="Auto"                                     frameborder="no" noresize>
      <frame name="start" src="start.html" marginwidth="10" marginheight="10" scrolling="Auto"                         frameborder="no" noresize>
</frameset>
<BODY>
</BODY>
</HTML>

Number 2 is the one called start.html and is only used to have a file to open in the frame called start.

Number 3 is the file called choice.html, which is opened in the "choice" frame and contains a image with areas as buttons. The code is:
<HTML>
<BODY>
<MAP NAME="Kanaler">
<AREA SHAPE="RECT" COORDS="1,1,120,40" HREF="javascript:parent.test(0)">
<AREA SHAPE="RECT" COORDS="1,40,120,80" HREF="javascript:parent.test(1)">
<AREA SHAPE="RECT" COORDS="1,80,120,120" HREF="javascript:parent.test(2)">
</MAP>
<H2>Velg hvor avansert EPG din enhet takler:</H2>
<IMG SRC="EPGnivaa.gif" WIDTH=138 HEIGTH=131 USEMAP="#Kanaler">
</BODY>
</HTML>
 
The last file is the one to be opened after the choice and it contains the following code:
<HTML>
<BODY>
This text is for all the choices.<BR><BR>
<SCRIPT LANGUAGE="JavaScript">
<!--
var choice=location.search.substring(1,location.search.length);
if (choice==1)
{document.write("Choice 1 is chosen");}

if (choice==2)
{document.write("Choice 2 is chosen");}
//-->
</SCRIPT>
</BODY>
</HTML>


But this does not work. Can anybody see what I am doing wrong?
0
 
jbirkCommented:
It is interesting.  This works like a beauty in Netscape 4, and doesn';t even come close to working in IE 4....  Yet another reason why I'm a Netscape user.  I assume that you are using IE 4 since it didn't work for you.

Well, I guess the frame variable route will have to be used.
I'll work on that and get back to you.
-Josh
0
 
jbirkCommented:
OK, well, here is a solution that works on both 4.0 browsers:
The first page, (I called index.html):
<HTML>
<SCRIPT language="JavaScript">
var valget;
</SCRIPT>
<frameset cols="145,*" border=0>
  <frame name="choice" src="choice.html" marginwidth="10" marginheight="10" scrolling="Auto" frameborder="no" noresize>
  <frame name="start" src="start.html" marginwidth="10" marginheight="10" scrolling="Auto" frameborder="no" noresize>
</frameset>
<BODY>
</BODY>
</HTML>

The next page is choice.html:
<HTML>
<BODY>
<MAP NAME="Kanaler">
<AREA SHAPE="RECT" COORDS="1,1,120,40" HREF="test.html" target="start" onClick="parent.valget=0;">
<AREA SHAPE="RECT" COORDS="1,40,120,80" HREF="test.html" target="start" onClick="parent.valget=1;">
<AREA SHAPE="RECT" COORDS="1,80,120,120" HREF="test.html" target="start" onClick="parent.valget=2;">
</MAP>
<H2>Velg hvor avansert EPG din enhet takler:</H2>
<IMG SRC="EPGnivaa.gif" WIDTH="138" HEIGTH="131" USEMAP="#Kanaler">
</BODY>
</HTML>

The next page is test.html:
<HTML>
<BODY>
This text is for all the choices.<BR><BR>
<SCRIPT LANGUAGE="JavaScript">
<!--
var choice=parent.valget;

if (choice==1)
{document.write("Choice 1 is chosen");}

if (choice==2)
{document.write("Choice 2 is chosen");}
//-->
</SCRIPT>
</BODY>
</HTML>

This should work for you now ok.
-Josh
0
 
KraferAuthor Commented:
Yes now it works. I was using IE4.0 and I didn't think of test it with Netscape.

Well thank you for the help!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now