Solved

Close floating div and clear form

Posted on 2006-10-27
9
405 Views
Last Modified: 2008-01-09
Hello,

this used to work before... but now it gives a JS error.

Surf over to:
http://matematik.sofiadistans.nu/tests/mallovn_js.htm

below there are 3 buttons... basically after you enter values into the form & click on RATTA it shows you the correct answer and what you entered... and an X on top to close the box...

If you click on hint, it just shows you the hint and the X to close the box...

For some reason the X to close the boxes are not working :(


Also when you click on RENSA it should clear the form and also close the HINT box or the RATTA box... but thats not happening either..

I think its a small error as it used to work before..

Thanks!
0
Comment
Question by:gmail_man
  • 5
  • 4
9 Comments
 
LVL 16

Expert Comment

by:alain34
ID: 17819123
I have change the javascript in 2 places:

When calling hideMe and a line in HideMe.

Complete javascript is below:

<script type="text/javascript">
          <!--
               var qHint=new Array();
               var qSol=new Array();

               qHint[0]="Hint for Q1";
               qHint[1]="Hint for Q2";
               qHint[2]="Hint for Q3";
               qHint[3]="Hint for Q4";
               
               qSol[0]="<strong>Uppgift 1.</strong> <br> Facit: 16";
               qSol[1]="<strong>Uppgift 2.</strong> <br> Facit: 9";
               qSol[2]="<strong>Uppgift 3.</strong> <br> Facit: 4";
               qSol[3]="<strong>Uppgift 4.</strong> <br> Facit: 8";
             
               function showHint(st,en,ele){
var str="<table width=\"100%\" border=\"0\">  <tr><td bordercolor=\"#000000\" bgcolor=\"#000000\"><table width=\"100%\"  border=\"0\" bgcolor=\"#FFFFFF\">      <tr>        <td>";

                    var hintFor=ele.split("-");
                    var head=(hintFor[2]=='h'?'Hint ':'Lösningar ');
                    var arr=(hintFor[2]=='h'?'qHint':'qSol');
str+="<strong>"+head +"för del "+hintFor[1].toUpperCase()+"</strong>&nbsp;&nbsp;&nbsp;<a href='#' id='hintsLink' onclick='hideMe(\""+hintFor[0]+"-"+hintFor[1]+"\"); return false'>[X]</a><br><br>";
                    for(i=st;i<=(en);i++){
                         str+=eval(arr)[i];
                         str+="<br>"
                         if(arr=='qSol') {
                              str+="Svar:<font color=red> ";
                              str+=document.getElementById("txt"+i).value==""?"Ej svarat!":document.getElementById("txt"+i).value;
                              str+="</font><br>";
                         }
                    }
                    //==''
                    str += '</td>      </tr>    </table></td>  </tr></table>';

                    document.getElementById(hintFor[0]+"-"+hintFor[1]).innerHTML=str;
                              
               }

               function hideMe(obj){

                    if (obj) document.getElementById(obj).innerHTML="&nbsp;";

               }
          //-->
 </script>
0
 

Author Comment

by:gmail_man
ID: 17819273
Hi,

Thanks for replying.

The X is working on the windows... but now when I click on RENSA I still get the JS error..

Only the form is getting cleared.. the floating DIV remains...

0
 
LVL 16

Expert Comment

by:alain34
ID: 17819330
You should change
<input type="reset" value="Rensa" class="skicka_knapp" onClick="hideMe(document.getElementById('hintsLink'))"/>
by
<input type="reset" value="Rensa" class="skicka_knapp" onClick="hideMe('q-a')"/>
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 

Author Comment

by:gmail_man
ID: 17819377
Hey,
Thanks for replying.

The problem is this page will have many such "solutions" and if I use the hideMe('q-a') wont it close all the floating divs?
0
 
LVL 16

Expert Comment

by:alain34
ID: 17819411
It may.
The only things that I don't understand is why you haven't hardcoded the id of the div because regardless of the id of the div, you can only see one div at a time.

I will suggest that you rewrite you app to have single div that show and hide.
If they were to be used at different position, you should force the position to a relative position identified by a library like this one: http://www.javascripttoolbox.com/lib/objectposition/examples.php

By operating this way, it will be easier to code, to maintain and understand.
0
 

Author Comment

by:gmail_man
ID: 17819498
To tell you the truth, I didnt write this to begin with...I am not very good with JS, I'll check what you wrote and get back to you.

Thanks
0
 

Author Comment

by:gmail_man
ID: 17819523
Nope,. still does not work, it clears the form.... but it does not clear the floating divs
0
 
LVL 16

Accepted Solution

by:
alain34 earned 125 total points
ID: 17819556
It does it for me. I post the complete code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Matematik på modersmålet, flexibelt lärande</title>
<link href="screen.css" rel="stylesheet" type="text/css" media="all">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<script type="text/javascript">
          <!--
               var qHint=new Array();
               var qSol=new Array();

               qHint[0]="Hint for Q1";
               qHint[1]="Hint for Q2";
               qHint[2]="Hint for Q3";
               qHint[3]="Hint for Q4";
               
               qSol[0]="<strong>Uppgift 1.</strong> <br> Facit: 16";
               qSol[1]="<strong>Uppgift 2.</strong> <br> Facit: 9";
               qSol[2]="<strong>Uppgift 3.</strong> <br> Facit: 4";
               qSol[3]="<strong>Uppgift 4.</strong> <br> Facit: 8";
             
               function showHint(st,en,ele){
var str="<table width=\"100%\" border=\"0\">  <tr><td bordercolor=\"#000000\" bgcolor=\"#000000\"><table width=\"100%\"  border=\"0\" bgcolor=\"#FFFFFF\">      <tr>        <td>";

                    var hintFor=ele.split("-");
                    var head=(hintFor[2]=='h'?'Hint ':'Lösningar ');
                    var arr=(hintFor[2]=='h'?'qHint':'qSol');
str+="<strong>"+head +"för del "+hintFor[1].toUpperCase()+"</strong>&nbsp;&nbsp;&nbsp;<a href='#' id='hintsLink' onclick='hideMe(\""+hintFor[0]+"-"+hintFor[1]+"\"); return false'>[X]</a><br><br>";
                    for(i=st;i<=(en);i++){
                         str+=eval(arr)[i];
                         str+="<br>"
                         if(arr=='qSol') {
                              str+="Svar:<font color=red> ";
                              str+=document.getElementById("txt"+i).value==""?"Ej svarat!":document.getElementById("txt"+i).value;
                              str+="</font><br>";
                         }
                    }
                    //==''
                    str += '</td>      </tr>    </table></td>  </tr></table>';

                    document.getElementById(hintFor[0]+"-"+hintFor[1]).innerHTML=str;
                              
               }

               function hideMe(obj){

                    if (obj) document.getElementById(obj).innerHTML="&nbsp;";

               }
          //-->
 </script>

<style type="text/css">
<!--
.style4 {      font-size: 14px;
      font-weight: bold;
}
.style5 {
      font-size: small;
}
.style7 {
      font-size: small;
      font-weight: bold;
}
</style>

</head>

<body>
<table width="540" border="0" cellspacing="0" cellpadding="0">
  <tr align="left">
    <td align="center" valign="middle"><img src="bilder/middle_ovn.gif" width="520" height="20" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><table width="100%" border="0" cellspacing="3" cellpadding="3">
      <tr>
        <td colspan="2" align="left" valign="top"><span class="style4">1.2 &Ouml;vningar</span></td>
        </tr>
      <tr>
        <td colspan="2" align="left" valign="top"><span class="style7">A. Hur m&aring;nga lika stora delar &auml;r
          dessa figurer indelade i? </span></td>
        </tr>
      <tr>
        <td width="60%" align="left" valign="top">
            <form name="one">
          <table width="100%" border="0" cellspacing="3" cellpadding="3">
            <tr>
              <td align="center" valign="middle"><span class="style7">1.</span></td>
              <td align="left" valign="middle"><img src="bilder/1_2_1_brak_ovn.gif" width="100" height="100" /></td>
              <td align="center" valign="middle"><span class="style7">2.</span></td>
              <td align="left" valign="middle"><img src="bilder/1_2_2_brak_ovn.gif" width="100" height="100" /></td>
            </tr>
            <tr>
              <td align="center" valign="middle"><p>&nbsp;</p>
                  <p>&nbsp;</p></td>
              <td align="left" valign="top"><label>
              <input name="txt_one" type="text" class="bakgrund" id="txt0" size="2" maxlength="5">
              </label></td>
              <td align="left" valign="top">&nbsp;</td>
              <td align="left" valign="top"><label>
              <input name="txt_two" type="text" class="bakgrund" id="txt1" size="2" maxlength="5">
              </label></td>
            </tr>
            <tr>
              <td align="center" valign="middle"><span class="style7">3.</span></td>
              <td align="left" valign="middle"><img src="bilder/1_2_3_brak_ovn.gif" width="100" height="100" /></td>
              <td align="center" valign="middle"><span class="style7">4.</span></td>
              <td align="left" valign="middle"><img src="bilder/1_2_4_brak_ovn.gif" width="100" height="100" /></td>
            </tr>
            <tr>
              <td align="center" valign="middle"><p>&nbsp;</p>
                  <p>&nbsp;</p></td>
              <td align="left" valign="top"><label>
               <input name="txt_tree" type="text" class="bakgrund" id="txt2" size="2" maxlength="5">
              </label></td>
              <td align="left" valign="top">&nbsp;</td>
              <td align="left" valign="top"><label>
               <input name="txt_four" type="text" class="bakgrund" id="txt3" size="2" maxlength="5">
              </label></td>
            </tr>
            <tr>
              <td align="left" valign="top">&nbsp;</td>
              <td colspan="3" align="left" valign="top"><label>
                <input type="button" class="skicka_knapp" value="Rätta" onClick="showHint(0,3,'q-a-s');return false;" />
                        &nbsp;&nbsp;
                        <input type="button" value="Get Hint" class="skicka_knapp" onClick="showHint(0,3,'q-a-h'); return false;" />
                &nbsp;&nbsp;
<input type="reset" value="Rensa" class="skicka_knapp" onClick="hideMe('q-a')"/>

                        </label></td>
            </tr>
          </table>
            </form>        </td>
        <td width="40%" align="left" valign="top" id="q-a" class="style5">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="middle"><img src="bilder/middle_ovn.gif" width="520" height="20" /></td>
  </tr>
  <tr>
    <td align="left" valign="top">&nbsp;</td>
  </tr>
  <tr align="left">
    <td align="center" valign="middle"><img src="bilder/middle_ovn.gif" width="520" height="20" /></td>
  </tr>
</table>
</body>
</html>
0
 

Author Comment

by:gmail_man
ID: 17819612
Hmmm I think I see the problem, works in IE but not in FF... well, thats not your fault, will award you the points for your help.

Thanks!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
asp.net mvc5 6 20
alert(innerHTML); 8 32
Diminish Pop-up  in 3 seconds 7 44
Why is initMap returning "not a function" error. 3 19
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

790 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