?
Solved

Hiding images or links when this is chosen

Posted on 1998-08-14
14
Medium Priority
?
229 Views
Last Modified: 2010-04-09
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
Comment
Question by:Krafer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 10

Expert Comment

by:MasseyM
ID: 1845343
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1845344
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
 

Author Comment

by:Krafer
ID: 1845345
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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
LVL 2

Expert Comment

by:hboys
ID: 1845346
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
 

Author Comment

by:Krafer
ID: 1845347
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
 

Author Comment

by:Krafer
ID: 1845348
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
 

Author Comment

by:Krafer
ID: 1845349
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
 

Author Comment

by:Krafer
ID: 1845350
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
 
LVL 4

Expert Comment

by:mitek
ID: 1845351
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
 
LVL 8

Accepted Solution

by:
jbirk earned 600 total points
ID: 1845352
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
 

Author Comment

by:Krafer
ID: 1845353
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1845354
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1845355
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
 

Author Comment

by:Krafer
ID: 1845356
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question