Solved

Close floating div and clear form

Posted on 2006-10-27
9
407 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

730 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