Avatar billede cyruse Nybegynder
06. januar 2006 - 09:09 Der er 9 kommentarer og
1 løsning

Popup boks

Ja det bliver nok lidt indviklet at forklare men jeg er ved at lave en form hvor man skriver forskellige ting ind. også har jeg lavet et spørgsmål ved siden af som så skal åbne en lille boks når man kører musen henover eller trykker. i den boks skal der så stå for eksempel at her skal du skrive navn... hvordan gør man det?
Avatar billede mm12010 Nybegynder
06. januar 2006 - 09:16 #1
den nemmeste måde ville være hvis man kunne nøjes med title, ex:
<input name="txt" type="text" value="" title="Her står en besked">

men den vises kun på onmouseover - ellers kunne du tage fat i overlib:
http://www.bosrup.com/web/overlib/
Avatar billede cyruse Nybegynder
06. januar 2006 - 09:52 #2
det var ikke lige sådan en... i ved når man opretter en mail for eksempel på www.jubii.dk så er der et ? tegn og hvis man går ud på det kan men se nogle eksempler og hjælp.
Avatar billede mm12010 Nybegynder
06. januar 2006 - 10:20 #3
det kun laves således - du skal selvfølgelig selv pynte help-div'en og måske justerer placeringen:

<script type="text/javascript">
function getPos(elm){
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy};
}
function showHelp(input,txt){
    var help=document.getElementById("help");
    pos=getPos(input);
    help.style.top=pos.y+5+"px";
    help.style.left=pos.x+input.offsetWidth+20+"px";
    help.innerHTML=txt;
    help.style.display="block";
}
function hideHelp(){
    document.getElementById("help").style.display="none";
}
</script>
...
<div id="help" style="position:absolute;display:none;border:1px solid black;">&nbsp;</div>
...
<form action="/" method="get">
  <input name="txt1" type="text" value="" onfocus="showHelp(this,'Her står en hjælpende tekst.');" onblur="hideHelp();"><br><br>
  <input name="txt2" type="text" value="" onfocus="showHelp(this,'Her står en anden hjælpende tekst.');" onblur="hideHelp();">
</form>
Avatar billede cyruse Nybegynder
06. januar 2006 - 11:40 #4
okay nu har jeg siddet lidt og leget og ved ikke helt hvor den skal ind henne

her er koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Datamek fejl service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script>
</head>
<style type="text/css">
   
body {
background-color: #FFFFFF;)
(MARGIN: 0px;
}
   
</style>

<body>
<table width="792" height="761" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="F5B800">
  <tr>
    <td width="792" height="761" valign="top">
      <table width="797" height="761" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
        <tr>
          <td height="31" valign="top"><img src="banner.jpg" width="797" height="89"></tr>
        <tr>
          <td height="31" valign="top" bgcolor="#FF9900">
              <div align="center">
              <a href="index.htm"><strong><font color="#000000">Forside</font></strong></a>
              <a href="fejlrapportering.htm"><strong><font color="#000000">fejlrapportering</font></strong></a>
              <a href="kontakt.htm"><font color="#000000"><strong>kontakt</strong></font></a></div>
        <tr>
          <td width="100%" height="641" valign="top" align="center">
         
<FORM ACTION="http://users.cybercity.dk/cgi-bin/FormMail.cgi" METHOD="GET">
<input type=hidden name="recipient" value="cyrusy@it.dk">
              <div align="left">
                <table width="73%" height="307" border="0" cellpadding="5" cellspacing="0" align="center" bgcolor="#FF9900">
                  <tr>
                    <td width="25%" height="34">Hvilket lokale:<font color="#FF0000">
                      *</font></td>
                    <td width="42%"><select name="Lokale">
                        <option>V&aelig;lg lokale</option>
                        <option>C324</option>
                        <option>C203</option>
                        <option>C202</option>
                      </select></td>
                    <td width="29%"><font color="#FF0000" size="+1"><strong>?</strong></font></tr>
                  <tr>
                    <td height="34">Hvillet PC nummer:<font color="#FF0000"> *</font></td>
                    <td><select name="PC nummer">
                        <option>V&aelig;lg PC nummer</option>
                        <option>PC01</option>
                        <option>PC02</option>
                        <option>PC03</option>
                        <option>PC04</option>
                        <option>PC05</option>
                        <option>PC06</option>
                        <option>PC07</option>
                        <option>PC08</option>
                        <option>PC09</option>
                        <option>PC10</option>
                        <option>PC11</option>
                        <option>PC12</option>
                      </select></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="32">Navn:</td>
                    <td><font color="#FF0000">
                      <input type="text" name="Navn">
                      </font></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="32"><font color="#000000">Klasse:</font></td>
                    <td><input name="Klasse" type="text" value=""></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="29">L&aelig;rer:</td>
                    <td><input name="l&aelig;rer" type="checkbox" id="l&aelig;rer" value="checkbox"></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="112">Fejl beskrivelse: <font color="#FF0000">*</font></td>
                    <td><font color="#FF0000">
                      <textarea name = "Fejl beskrivelse" cols = "30" rows = "5"></textarea>
                      </font></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td><input type="reset" name="Reset2" value="Reset"> <input name="Tak for hj&aelig;lpen" type="submit" id="Tak for hj&aelig;lpen2" onClick="MM_validateForm('Fejl beskrivelse','','R');return document.MM_returnValue" value="Send"></td>
                    <td>&nbsp;</td>
                    <td><font color="#FF0000" size="+1">&nbsp;</font></td>
                  </tr>
                </table>
                <p>&nbsp;</p>
              </div>
            </form>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
Avatar billede mm12010 Nybegynder
06. januar 2006 - 12:10 #5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Datamek fejl service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

function getPos(elm){
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy};
}
function showHelp(input,txt){
    var help=document.getElementById("help");
    pos=getPos(input);
    help.style.top=pos.y+5+"px";
    help.style.left=pos.x+input.offsetWidth+20+"px";
    help.innerHTML=txt;
    help.style.display="block";
}
function hideHelp(){
    document.getElementById("help").style.display="none";
}
//-->
</script>
</head>
<style type="text/css">
   
body {
background-color: #FFFFFF;)
(MARGIN: 0px;
}
   
</style>

<body>
<div id="help" style="position:absolute;display:none;border:1px solid black;">&nbsp;</div>
<table width="792" height="761" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="F5B800">
  <tr>
    <td width="792" height="761" valign="top">
      <table width="797" height="761" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
        <tr>
          <td height="31" valign="top"><img src="banner.jpg" width="797" height="89"></tr>
        <tr>
          <td height="31" valign="top" bgcolor="#FF9900">
              <div align="center">
              <a href="index.htm"><strong><font color="#000000">Forside</font></strong></a>
              <a href="fejlrapportering.htm"><strong><font color="#000000">fejlrapportering</font></strong></a>
              <a href="kontakt.htm"><font color="#000000"><strong>kontakt</strong></font></a></div>
        <tr>
          <td width="100%" height="641" valign="top" align="center">
         
<FORM ACTION="http://users.cybercity.dk/cgi-bin/FormMail.cgi" METHOD="GET">
<input type=hidden name="recipient" value="cyrusy@it.dk">
              <div align="left">
                <table width="73%" height="307" border="0" cellpadding="5" cellspacing="0" align="center" bgcolor="#FF9900">
                  <tr>
                    <td width="25%" height="34">Hvilket lokale:<font color="#FF0000">
                      *</font></td>
                    <td width="42%"><select name="Lokale" onmouseover="showHelp(this,'Her står en hjælpende tekst.');" onmouseout="hideHelp();">
                        <option>V&aelig;lg lokale</option>
                        <option>C324</option>
                        <option>C203</option>
                        <option>C202</option>
                      </select></td>
                    <td width="29%"><font color="#FF0000" size="+1"><strong>?</strong></font></tr>
                  <tr>
                    <td height="34">Hvillet PC nummer:<font color="#FF0000"> *</font></td>
                    <td><select name="PC nummer" onmouseover="showHelp(this,'Her står en hjælpende tekst.');" onmouseout="hideHelp();">
                        <option>V&aelig;lg PC nummer</option>
                        <option>PC01</option>
                        <option>PC02</option>
                        <option>PC03</option>
                        <option>PC04</option>
                        <option>PC05</option>
                        <option>PC06</option>
                        <option>PC07</option>
                        <option>PC08</option>
                        <option>PC09</option>
                        <option>PC10</option>
                        <option>PC11</option>
                        <option>PC12</option>
                      </select></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="32">Navn:</td>
                    <td><font color="#FF0000">
                      <input type="text" name="Navn" onfocus="showHelp(this,'Her står en hjælpende tekst.');" onblur="hideHelp();">
                      </font></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="32"><font color="#000000">Klasse:</font></td>
                    <td><input name="Klasse" type="text" value="" onfocus="showHelp(this,'Her står en hjælpende tekst.');" onblur="hideHelp();"></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="29">L&aelig;rer:</td>
                    <td><input name="l&aelig;rer" type="checkbox" id="l&aelig;rer" value="checkbox" onmouseover="showHelp(this,'Her står en hjælpende tekst.');" onmouseout="hideHelp();"></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td height="112">Fejl beskrivelse: <font color="#FF0000">*</font></td>
                    <td><font color="#FF0000">
                      <textarea name = "Fejl beskrivelse" cols = "30" rows = "5" onfocus="showHelp(this,'Her står en hjælpende tekst.');" onblur="hideHelp();"></textarea>
                      </font></td>
                    <td><font color="#FF0000" size="+1"><strong>?</strong></font></td>
                  </tr>
                  <tr>
                    <td><input type="reset" name="Reset2" value="Reset"> <input name="Tak for hj&aelig;lpen" type="submit" id="Tak for hj&aelig;lpen2" onClick="MM_validateForm('Fejl beskrivelse','','R');return document.MM_returnValue" value="Send"></td>
                    <td>&nbsp;</td>
                    <td><font color="#FF0000" size="+1">&nbsp;</font></td>
                  </tr>
                </table>
                <p>&nbsp;</p>
              </div>
            </form>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
Avatar billede cyruse Nybegynder
09. januar 2006 - 09:43 #6
kan man få den til at blive inde i rammen? sådan så det står under hinanden istedet for at det fylder en halv side?. altså at det ikke går helt ud til højre...
Avatar billede mm12010 Nybegynder
09. januar 2006 - 09:49 #7
i denne funktion kan du selv placere boksen i forhold til form-felterne:

function showHelp(input,txt){
    var help=document.getElementById("help");
    pos=getPos(input);
    help.style.top=pos.y+5+"px";//Her kan du ændre tallet
    help.style.left=pos.x+input.offsetWidth+20+"px";//Her kan du ændre tallet
    help.innerHTML=txt;
    help.style.display="block";
}
Avatar billede cyruse Nybegynder
09. januar 2006 - 09:53 #8
Jeg har leget lidt med de 2 tal altså tallene 5 og 20... men kan ikke rigtig få det til at passe
Avatar billede cyruse Nybegynder
09. januar 2006 - 10:49 #9
har fundet ud af det.... takker for hjælpen... vil du have dine point?
Avatar billede mm12010 Nybegynder
09. januar 2006 - 10:56 #10
selv tak :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester