Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Close floating div and clear form

Posted on 2006-10-27
9
Medium Priority
?
423 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
[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
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

636 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