Solved

Hiding images or links when this is chosen

Posted on 1998-08-14
14
216 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
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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 150 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now