Solved

Close floating div and clear form

Posted on 2006-10-27
9
398 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
 

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

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

744 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

14 Experts available now in Live!

Get 1:1 Help Now