Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    713
    Thanks
    6
    Thanked 2 Times in 2 Posts

    willing to pay some money to get this done

    i want to build a form which consist of a text area( TEXTAREA A)
    when i enter some text into the textfield , i can press a hotkey on the keyboard maybe "q" or "p" something, then a a layer or a window will pop up, which consist another form with two textfield, i can enter some numbers into these two text field, then press submit, the numbers entered will auto attach to the back of the text in my TEXTAREA A, can it be done in javascript? if you can help me, will be very appreciated, if you want some service charge, you can also pm me your price.. thanks..
    flying dagger

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Universal PopUp II</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <meta http-equiv="imagetoolbar" content="no">
    
    
    <style type="text/css">
    <!--
    
    .TxtArea { font-size:12px;background-color:#f8cd76; }
    .Title1  { font-size:24px; }
    .Title2  { font-size:18px; }
    }
    
    -->
    </style>
    <style type="text/css">
    <!--
    .class1 {
     width:200px;border:solid black 1px;background-color:#FFFFCC;
    }
    
    .class2 {
     width:200px;border:solid black 1px;background-color:#FFCC66;
    }
    
    .zxcclass {
     width:200px;border:solid black 1px;background-color:#FFCC66;
    }
    
    .class3 {
     width:350px;
    }
    
    .class4 {
     width:400px;
     text-align:center;
     background-color:white;
    }
    
    .Mask{
     background-image: url(http://www.vicsjavascripts.org.uk/StdImages/Mask.gif);
    }
    
    .Mask2{
     background-color:#FFCC66;
    }
    
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    // Universal PopUp II (28-August-2006)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk
    
    // The 'Universal PopUp' may display an element defined in the HTML code.
    // A 'Mask' containing an image which, may be a transparent .png,
    // is positioned under the 'Universal PopUp' to obscure the page thus highlighting the 'Universal PopUp'.
    // The 'Universal PopUp' would normally be centered in the window
    // but may be positioned relative to the element calling the 'Universal PopUp'.
    // The 'Mask' and 'Universal PopUp' may be hidden by clicking the 'Mask'
    // or by an event call to function 'zxcUPUHide'.
    // Optional code allows the 'Universal PopUp' to be 'drag and dropped'
    // by an onmousedown event call to function 'zxcUPUDrag' and ReSized by dragging the edges.
    
    // ***** Application Notes.
    //
    
    // The 'Universal PopUp' will be referred to as 'UPU'.
    
    
    // ***** The HTML Code.
    //
    // The elements to be displayed in the 'U PopUp' are defined in the HTML Code
    // and must be nested in a <DIV> which must be assigned a unique ID name.
    // e.g.
    //  <div id="Content">
    //
    //   <form>
    //    Form 1<br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //   </form>
    //
    //   <form>
    //    Form 2<br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //    <input ><br>
    //   </form>
    //
    //   <div style="position:relative;height:50px;width:100%;background-color:red;" >
    //    This could contain standard title, close, drag and drop etc.
    //   </div>
    //
    //  </div>
    //
    // In the example each of the three child elements( 1 to 3)
    // are removed from the <DIV> during initialisation and may be used as the 'U PopUp' content.
    
    
    // ***** The Mask.
    //
    // The 'Mask' utilizes the 'Content' <DIV> with the style modified to meet the 'Mask' requirements.
    // The 'Mask' must have a background image, this must be defined in a CSS Class Rule.
    // e.g.
    //  .Mask{ background-image: url(Mask.png); }
    //
    //  * html .Mask{
    //   background-color: #333;
    // 	 back\ground-color: transparent;
    // 	 background-image: url(Blank.gif);
    // 	 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Mask.png", sizingMethod="scale");
    //	}
    //
    //
    
    
    // ***** The Appearance of the 'U PopUp'.
    //
    // The appearance is dependent on the content but may be modified by CSS Class Rules
    // e.g.
    //  .class1 { width:200px;border:solid black 1px;background-color:#FFFFCC; }
    //  .class2 { width:200px;border:solid black 1px;background-color:#FFCC66; }
    //
    
    
    // ***** Initialising the Script.
    //
    // The script would normally be initialised from a <BODY> or window onload event
    // e.g.
    //  <body onload="zxcUPUInit('Content','class1','Mask',10,40);">
    //   where:
    //    parameter 0 =  the unique ID name of the 'Content' <DIV>.                                              (string)
    //    parameter 1 =  the default class rule to be used for the 'U PopUp'.                                    (string)
    //    parameter 2 =  the class rule to be used for the 'Mask'.                                               (string)
    //    parameter 3 =  the z-index of 'Mask' and 'U PopUp' which must be above other page elements.            (digits, defaults to 10)
    //    parameter 4 =  (Part 2 Code Required) to apply an opacity to the 'Mask'.                               (digits, 1 to 100)
    //    parameter 5 =  (Part 2 Code Required) an image to use for the 'ReSize' of the 'Universal PopUp' edges. (string)
    //
    
    
    // ***** Activating the U PopUp.
    //
    // The 'U PopUp' would normally be activated by an OnClick event call to function 'zxcUPUShow'
    // e.g.
    // <span onclick="zxcUPUShow(1);" >LINK 1</span> |
    // <span onclick="zxcUPUShow(2,'class2',3);" >LINK 2</span> |
    // <input type="button" name="" value="Test" onclick="zxcUPUShow(2,'class2',3,null,['',50,-20]);"  >
    //   where:
    //    parameter 0 =  the number of the 'Content' element.                                            (digit)
    //    parameter 1 =  (optional) the class rule name defining the appearance of the 'U PopUp'.        (string or null to use the default)
    //    parameter 2 =  (optional) an additional cloned 'Content' element to add to the 'U PopUp'.      (digit or null if not required)
    //    parameter 3 =  (optional) the class rule name defining the appearance of the 'Mask'.           (string or null to use the default)
    //    parameter 4 =  (optional, Part 2 Code Required) an array defining options
    //                     field 0 =  strings defining options.
    //                                '',        - use defaults
    //                                'NoReSize' - No Edge Resize
    //                                'NoMask'   - No Mask
    //                                'NoHide'   - Clicking the Mask will not  Hide the Mask
    //                                or combinations of e.g. 'NoReSizeNoMask'
    //                    fields 1 and 2 must be completed to position of the 'U PopUp' offset from the activating element
    //                     field 1 =  the horizontal(X) offset. (digits)
    //                     field 2 =  the vertical(Y) offset.   (digits)
    //
    // Parameters may be omitted from the right.
    //
    
    
    // **** Hiding the 'Mask' and 'Universal PopUp'.
    //
    // The 'Mask' and 'Universal PopUp' may be hidden by clicking the 'Mask'
    // or by an event call to function 'zxcUPUHide'.
    // e.g.
    //  <div style="position:relative;height:50px;width:100%;background-color:red;" >
    //   This could contain standard title, close, drag and drop etc.
    //   <div style="position:relative;height:20px;width:50px;background-color:silver;" onmouseup="zxcUPUHide()" >Hide</div>
    //   </div>
    //
    //
    
    
    // **** 'Drag and Drop' of the 'Universal PopUp'.
    //
    // Functional Code Part 2 allows the 'Universal PopUp' to be  to be 'drag and dropped'
    // by an onmousedown event call to function 'zxcUPUDrag'.
    // e.g.
    //  <div style="position:relative;height:50px;width:100%;background-color:red;" >
    //   This could contain standard title, close, drag and drop etc.
    //   <div style="position:relative;height:20px;width:50px;background-color:white;" onmousedown="zxcUPUDrag()" >Drag</div>
    //   </div>
    //
    
    
    // **** 'ReSize' of the 'Universal PopUp'.
    //
    // Where the Part 2 Code is available and an image file name specified
    // as parameter 5 of the initialising call to 'zxcUPUInit',
    // the 'Universal PopUp' may be ReSized by dragging the edges.
    // The image would normally be a transparent .gif.
    //
    
    
    // **** General.
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters may be changed to characters of choice using global find and replace
    //
    // The Functional Code Part 1(about 3.75K) and Part 2(about 4.25K) are best as External JavaScripts.
    // The Functional Code Part 2 is optional and may be reduced by including only the required identified functions.
    //
    // Tested with IE6 and Mozilla FireFox
    
    
    
    
    // **** Functional Code Part 1 - No Need to Change
    
    
    var zxcUPU=[];
    
    function zxcUPUInit(zxcid,zxccls,zxcmask,zxczindex,zxcopc,zxcimg){
     zxczindex=zxczindex||10;
     var zxcbdy=document.getElementsByTagName('BODY')[0];
     var zxcp=document.getElementById(zxcid);
     var zxcchlds=zxcp.childNodes;
     zxcUPU[0]=zxcStyle('DIV',{position:'absolute',overflow:'hidden',zIndex:(zxczindex+1)+'',visibility:'hidden'});
     zxcUPU[0].className=zxccls;
     zxcUPU[1]=null; zxcUPU[2]=zxccls; zxcUPU[3]=zxcp; zxcUPU[4]=null; zxcUPU[5]=zxcmask;  zxcUPU[6]=true;
     zxcbdy.appendChild(zxcUPU[0]);
     for (var zxc0=0;zxc0<zxcchlds.length;zxc0++){ if (zxcchlds[zxc0].nodeType==1){ zxcUPU.push(zxcchlds[zxc0]); } }
     for (var zxc1=7;zxc1<zxcUPU.length;zxc1++){ zxcp.removeChild(zxcUPU[zxc1]); }
     zxcp.parentNode.removeChild(zxcp);
     zxcbdy.appendChild(zxcp);
     zxcp.onmouseup=function(){ if (zxcUPU[6]){ zxcUPUHide(); } }
     if (window['zxcOpacity']&&zxcopc){ zxcOpacity(zxcp,zxcopc); }
     if (window['zxcAddEdge']&&zxcimg){ zxcAddEdge(zxcimg); }
     zxcp.className=zxcmask;
     zxcStyle(zxcp,{position:'absolute',visibility:'visible',display:'none',zIndex:(zxczindex)+'',left:'0px',top:'0px'});
    }
    
    function zxcUPUShow(zxcelenu,zxccls,zxcadd,zxcmskcls,zxcopt){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     if (!zxcUPU[0]){ return; }
     if (!zxcUPU[zxcelenu+6]){ return; }
     zxcUPU[1]=zxcUPU[zxcelenu+6];
     zxcUPU[0].appendChild(zxcUPU[1]);
     zxcUPU[0].className=zxccls||zxcUPU[2];
     zxcUPU[3].className=zxcmskcls||zxcUPU[5];
     if (zxcadd){ zxcUPU[4]=zxcUPU[zxcadd+6].cloneNode(true); zxcUPU[0].appendChild(zxcUPU[4]); }
     zxcStyle(zxcUPU[3],{display:'',width:(zxcBdyWH()[0])+'px',height:(Math.max(zxcBdyWH()[1],zxcWWHS()[1])-5)+'px'});
     zxcStyle(zxcUPU[0],{visibility:'visible',left:(zxcWWHS()[2]+(zxcWWHS()[0]-zxcUPU[0].offsetWidth)/2)+'px',top:(zxcWWHS()[3]+(zxcWWHS()[1]-zxcUPU[0].offsetHeight)/2)+'px'});
     if (window['zxcPosEdge']){ zxcPosEdge('visible'); }
     if (zxcopt&&window['zxcOptions']){ zxcOptions(zxcobj,zxcopt);  }
    }
    
    function zxcUPUHide(){
     if (zxcUPU[1]){ zxcUPU[0].removeChild(zxcUPU[1]); zxcUPU[1]=null; }
     if (zxcUPU[4]){ zxcUPU[0].removeChild(zxcUPU[4]); zxcUPU[4]=null; }
     zxcStyle(zxcUPU[0],{visibility:'hidden',width:null,height:null});
     if (window['zxcPosEdge']){ zxcPosEdge('hidden'); }
     zxcUPU[3].style.display='none';
     zxcUPU[6]=true;
    }
    
    function zxcStyle(zxcele,zxcstyle){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     return zxcele;
    }
    
    function zxcWWHS(){
     if (window.innerHeight){ return [window.innerWidth,window.innerHeight,window.pageXOffset,window.pageYOffset]; }
     if (document.documentElement.clientHeight){ return [document.documentElement.clientWidth,document.documentElement.clientHeight,document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcBdyWH(){
     if (document.body.scrollHeight > document.body.offsetHeight){ return [document.body.scrollWidth,document.body.scrollHeight]; }
     return [document.body.offsetWidth,document.body.offsetHeight];
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    //-->
    </script>
    
    <script type="text/javascript">
    <!--
    // Universal PopUp II Part 2 (28-August-2006)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk
    
    // Functions for
    //
    // 1) 'Mask' Opacity.
    //
    // 2) Options.
    //     No Edge Resize.
    //     No Mask.
    //     Clicking the Mask will not  Hide the Mask.
    //     Position the 'U PopUp' offset from the activating element.
    //
    // 3) The 'Universal PopUp' to be  to be 'drag and dropped' by an onmousedown event call to function 'zxcUPUDrag',
    //
    // 4) The 'Universal PopUp' resize by dragging the edges.
    //
    
    
    // **** Functional Code Part 2 - No Need to Change
    
    
    // Required for Opacity
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    // Required for Options
    function zxcOptions(zxcobj,zxcopt){
     zxcopt[0]=zxcopt[0].toUpperCase();
     if (zxcopt[1]&&zxcopt[2]){ zxcStyle(zxcUPU[0],{left:(zxcPos(zxcobj)[0]+zxcopt[1])+'px',top:(zxcPos(zxcobj)[1]+zxcopt[2])}); }
     if (zxcopt[0].match('RESIZE')&&window['zxcPosEdge']){ zxcPosEdge('hidden'); }
     if (zxcopt[0].match('MASK')){ zxcUPU[3].style.display='none'; }
     if (zxcopt[0].match('HIDE')){ zxcUPU[6]=false; }
    }
    
    // Required for Drag
    function zxcUPUDrag(){
     if (zxcObj){ return; }
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     zxcSel();
     zxcObj=[zxcUPU[0],zxcMse(zxcevt)[0]-zxcUPU[0].offsetLeft,zxcMse(zxcevt)[1]-zxcUPU[0].offsetTop];
    }
    
    // Required for ReSize
    function zxcAddEdge(zxcimg){
     var zxcdata=[['100%','n-resize'],['100%','s-resize'],['4px','w-resize'],['4px','e-resize']];
     for (var zxc0=0;zxc0<4;zxc0++){
      zxcdata[zxc0][2]=zxcStyle('IMG',{position:'absolute',zIndex:'10',left:'0px',top:'0px',width:zxcdata[zxc0][0],height:'4px',cursor:zxcdata[zxc0][1]});
      zxcdata[zxc0][2].src=zxcimg;
      zxcdata[zxc0][2].nu=zxc0;
      zxcUPU[0].appendChild(zxcdata[zxc0][2]);
      zxcAddEvt(zxcdata[zxc0][2],'zxcMveEdge','mousedown');
     }
    }
    
    // Required for ReSize
    function zxcPosEdge(zxcvis){
     if (!zxcUPU[0]){ return; }
     var zxcimgs=zxcUPU[0].getElementsByTagName('IMG');
     zxcimgs[1].style.top=(zxcUPU[0].offsetHeight-4)+'px';
     zxcStyle(zxcimgs[2],{left:(zxcUPU[0].offsetWidth-4)+'px',height:(zxcUPU[0].offsetHeight)+'px'});
     zxcimgs[3].style.height=(zxcUPU[0].offsetHeight)+'px';
     if (zxcvis){ for (var zxc0=0;zxc0<4;zxc0++){ zxcimgs[zxc0].style.visibility=zxcvis; } }
    }
    
    // Required for ReSize
    function zxcMveEdge(zxcevt){
     if (zxcRSz){ return; }
     zxcSel();
     var zxcobj=zxcUPU[0];
     if (this.nu<2||this.nu=='D'){ zxcRSz=[this.nu,zxcobj.offsetHeight,zxcMse(zxcevt)[1]]; }
     if (this.nu>1||this.nu=='R'){ zxcRSz=[this.nu,zxcobj.offsetWidth,zxcMse(zxcevt)[0]]; }
    }
    
    // Required for ReSize
    function zxcReSize(zxcmse){
     var zxcobj=zxcUPU[0];
     if (zxcRSz[0]==0){ zxcStyle(zxcobj,{height:(Math.max(zxcRSz[1]+zxcRSz[2]-zxcmse[1],100))+'px',top:(zxcmse[1]-2)+'px'}); }
     if (zxcRSz[0]==1){ zxcobj.style.height=(Math.max(zxcRSz[1]+zxcmse[1]-zxcRSz[2],100))+'px'; }
     if (zxcRSz[0]==2){ zxcobj.style.width=(Math.max(zxcRSz[1]+zxcmse[0]-zxcRSz[2],100))+'px'; }
     if (zxcRSz[0]==3){ zxcStyle(zxcobj,{width:(Math.max(zxcRSz[1]+zxcRSz[2]-zxcmse[0],100))+'px',left:(zxcmse[0]-2)+'px'}); }
     zxcPosEdge();
    }
    
    // Required for Drag & ReSize
    var zxcObj,zxcRSz;
    var zxcEvt=0;
    
    // Required for Drag & ReSize
    function zxcDragDo(zxcevt){
     if (zxcRSz){ zxcReSize(zxcMse(zxcevt)); }
     if (!zxcObj){ return; }
     zxcObj[0].style.left=(zxcMse(zxcevt)[0]-zxcObj[1])+'px';
     zxcObj[0].style.top=(zxcMse(zxcevt)[1]-zxcObj[2])+'px';
    }
    
    // Required for Drag & ReSize
    function zxcMse(zxcevt){
     if (document.all){ return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]]; }
     else { return[zxcevt.pageX,zxcMseY=zxcevt.pageY]; }
    }
    
    // Required for Drag & ReSize
    function zxcDocS(){
     if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
     else { return [document.body.scrollLeft,document.body.scrollTop]; }
    }
    
    // Required for Drag & ReSize
    function zxcMseUp(){ zxcObj=null; zxcRSz=null; document.onselectstart=null; }
    
    // Required for Drag & ReSize
    function zxcSel(){ document.onselectstart=function(event){window.event.returnValue=false; } }
    
    // Required for Drag & ReSize
    function zxcEventAdd(zxco,zxct,zxcf){
     if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco['on'+zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    // Required for Drag & ReSize
    function zxcAddEvt(zxcobj,zxcfun,zxcevt){
     if (zxcobj[zxcevt+'add']){ return; }
     zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcobj[zxcevt+'add']=true;
     zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    // Required for Drag & ReSize
    zxcAddEvt(document,'zxcDragDo','mousemove');
    // Required for Drag & ReSize
    zxcAddEvt(document,'zxcMseUp','mouseup');
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Enter(frm){
     var obj=document.getElementById('fred');
     var eles=frm.elements;
     obj.value+=eles[0].value+eles[1].value;
    }
    
    function Key(e){
      if (zxcUPU[0].style.visibility=='visible'){ return; }
      if (!document.all){  KeyCode=e.which;  }
      else { KeyCode=event.keyCode;  }
      if (KeyCode==81){
       zxcUPUShow(1,'class4',2);
      }
    }
    
    
    document.onkeyup=function(event){ Key(event); }
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <iframe id="zxcTitleIF" src="../Title0.htm"  scrolling="no" frameborder="0" style="display:none;overflow:hidden;width:100%;" ></iframe>
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50"></textarea>
    <br>
    
    <input class="TxtArea" type="button" name="" value="Test 5" onclick="zxcUPUShow(1,'class4',2);"  > | or character 'q'
    
    <br>
    
    
    
    <div id="Content" style="position:absolute;overflow:hidden;width:100px;height:100px;visibility:hidden;" >
    <form>
    Form 2<br>
    <input ><br>
    <input ><br>
    <input type="button" name="" value="Enter" onclick="zxcUPUHide();Enter(this.form);">
    </form>
    
    <div style="position:relative;overflow:hidden;height:60px;width:100%;background-color:#FFFFCC;text-align:center;font-size:12px;" >
    complete the inputs and enter.
    <div style="position:absolute;left:45px;top:35px;height:15px;width:50px;background-color:#FFCC66;border:solid black 1px;cursor:move;" onmousedown="zxcUPUDrag()" >Drag</div>
    <div style="position:absolute;left:105px;top:35px;height:15px;width:50px;background-color:silver;border:solid black 1px;" onmouseup="zxcUPUHide()" >Hide</div>
    </div>
    </div>
    
    <div style="height:900px;" ></div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    713
    Thanks
    6
    Thanked 2 Times in 2 Posts
    thanks, but after press "q" , q will be entered...
    flying dagger

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    please clarrify

    are you saying that you type q in the text area,and only in the textarea, you want the popup and no q in the textarea?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Enter(frm){
     var obj=document.getElementById('fred');
     var eles=frm.elements;
     obj.value+=eles[0].value+eles[1].value;
    }
    var Lst='';
    function Key(e){
     var obj=document.getElementById('fred');
     if (zxcUPU[0].style.visibility=='visible'){ return; }
      if (!document.all){  KeyCode=e.which;  }
      else { KeyCode=event.keyCode;  }
      if (KeyCode==81){
       obj.value=Lst;
       zxcUPUShow(1,'class4',2);
      }
      Lst=obj.value;
    }
    
    
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50" onkeyup=" Key(event);"></textarea>
    <br>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Enter(frm){
     var obj=document.getElementById('fred');
     var eles=frm.elements;
     obj.value+=eles[0].value+eles[1].value;
    }
    var Lst='';
    function Key(e){
     var obj=document.getElementById('fred');
     if (zxcUPU[0].style.visibility=='visible'){ return; }
      if (!document.all){  KeyCode=e.which;  }
      else { KeyCode=event.keyCode;  }
      if (KeyCode==81){
       obj.value=Lst;
       zxcUPUShow(1,'class4',2);
      }
      Lst=obj.value;
    }
    
    
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50" onkeyup=" Key(event);"></textarea>
    <br>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Posts
    713
    Thanks
    6
    Thanked 2 Times in 2 Posts
    if i want to change the short cut key, which part should i change
    flying dagger

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Enter(frm){
     var obj=document.getElementById('fred');
     var eles=frm.elements;
     obj.value+=eles[0].value+eles[1].value;
    }
    var Lst='';
    function Key(e){
     var obj=document.getElementById('fred');
     if (zxcUPU[0].style.visibility=='visible'){ return; }
     if (!document.all){  KeyCode=e.which;  }
     else { KeyCode=event.keyCode;  }
    // the alert will show key code
     alert(String.fromCharCode(KeyCode)+' = '+KeyCode);
     if (KeyCode==81){
      obj.value=Lst;
      zxcUPUShow(1,'class4',2);
     }
     Lst=obj.value;
    }
    // a link with key codes
    // http://www.zyra.org.uk/kcodes.htm
    
    //-->
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    from pm
    if i have several textarea in one page, each textarea i want to have same pop up then fill in function what shall i do? if i want the two values i entered in new form to be in the format of |value1|value2 when attached to old form, what to do?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    .............
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var zxcTAObj='';
    
    function Enter(frm){
     var eles=frm.elements;
     zxcTAObj.value+='|'+eles[0].value+'|'+eles[1].value;
     eles[0].value='';
     eles[1].value='';
    }
    
    function Key(e){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     if (!zxcobj.last){ zxcobj.last=''; }
     zxcTAObj=zxcobj;
     if (zxcUPU[0].style.visibility=='visible'){ return; }
     if (!document.all){  KeyCode=e.which;  }
     else { KeyCode=event.keyCode;  }
     if (KeyCode==81){
      zxcobj.value=zxcobj.last;
      zxcUPUShow(1,'class4',2);
     }
     zxcobj.last=zxcobj.value;
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50" onkeyup=" Key(event);"></textarea>
    <div style="height:80px;" ></div>
    <textarea rows="20" cols="50" onkeyup=" Key(event);"></textarea>
    <br>
    <br>
    
    
    
    <div id="Content" style="position:absolute;overflow:hidden;width:100px;height:100px;visibility:hidden;" >
    <form>
    Form 2<br>
    <input ><br>
    <input ><br>
    <input type="button" name="" value="Enter" onclick="zxcUPUHide();Enter(this.form);">
    </form>
    
    <div style="position:relative;overflow:hidden;height:60px;width:100%;background-color:#FFFFCC;text-align:center;font-size:12px;" >
    complete the inputs and enter.
    <div style="position:absolute;left:45px;top:35px;height:15px;width:50px;background-color:#FFCC66;border:solid black 1px;cursor:move;" onmousedown="zxcUPUDrag()" >Drag</div>
    <div style="position:absolute;left:105px;top:35px;height:15px;width:50px;background-color:silver;border:solid black 1px;" onmouseup="zxcUPUHide()" >Hide</div>
    </div>
    </div>
    
    <div style="height:900px;" ></div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    .................
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var zxcTAObj;
    
    function Enter(frm){
     var eles=frm.elements;
     zxcTAObj.value=zxcTAObj.value.substring(0,zxcTAObj.value.length-1);
     zxcTAObj.value+='|'+eles[0].value+'|'+eles[1].value;
     eles[0].value='';
     eles[1].value='';
    }
    
    function Key(e){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     if (!zxcobj.last){ zxcobj.last=''; }
     zxcTAObj=zxcobj;
     var zxckc;
     if (zxcUPU[0].style.visibility=='visible'){ return; }
     if (!document.all){  zxcck=e.which;  }
     else { zxcck=event.keyCode;  }
     var zxcchar=String.fromCharCode(zxcck);
     if (zxcchar=='q'){
      zxcUPUShow(1,'class4',2);
     }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    if (!document.all){ document.captureEvents(Event.KEYDOWN); }
    
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50" onkeypress="Key(event);" ></textarea>
    <div style="height:80px;" ></div>
    <textarea rows="20" cols="50" onkeyup=" Key(event);"></textarea>
    <br>
    <br>
    
    
    
    <div id="Content" style="position:absolute;overflow:hidden;width:100px;height:100px;visibility:hidden;" >
    <form>
    Form 2<br>
    <input ><br>
    <input ><br>
    <input type="button" name="" value="Enter" onclick="zxcUPUHide();Enter(this.form);">
    </form>
    
    <div style="position:relative;overflow:hidden;height:60px;width:100%;background-color:#FFFFCC;text-align:center;font-size:12px;" >
    complete the inputs and enter.
    <div style="position:absolute;left:45px;top:35px;height:15px;width:50px;background-color:#FFCC66;border:solid black 1px;cursor:move;" onmousedown="zxcUPUDrag()" >Drag</div>
    <div style="position:absolute;left:105px;top:35px;height:15px;width:50px;background-color:silver;border:solid black 1px;" onmouseup="zxcUPUHide()" >Hide</div>
    </div>
    </div>
    
    <div style="height:900px;" ></div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Regular Coder
    Join Date
    Sep 2004
    Posts
    713
    Thanks
    6
    Thanked 2 Times in 2 Posts
    thanks for help, there is a problem the second form cannot use the key..
    flying dagger

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    change the call in the second area to

    onkeypress="Key(event);"
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    Regular Coder
    Join Date
    Sep 2004
    Posts
    713
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thanks, but the q is still in the field instead of disappear and is it possible to have the cursor in the new form when press "q"?
    flying dagger

  • #15
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    the q was removed when enter pressed

    but
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var zxcTAObj;
    
    function Enter(frm){
     var eles=frm.elements;
     zxcTAObj.value+='|'+eles[0].value+'|'+eles[1].value;
     eles[0].value='';
     eles[1].value='';
     zxcTAObj.focus();
     zxcTAObj=null;
    }
    
    function Key(e){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     if (!zxcobj.last){ zxcobj.last=''; }
     zxcTAObj=zxcobj;
     var zxckc;
     if (zxcUPU[0].style.visibility=='visible'){ return; }
     if (!document.all){  zxcck=e.which;  }
     else { zxcck=event.keyCode;  }
     var zxcchar=String.fromCharCode(zxcck);
     if (zxcchar=='q'){
      zxcUPUShow(1,'class4',2);
      document.getElementById('First').focus();
      return false;
     }
     return true;
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    if (!document.all){ document.captureEvents(Event.KEYDOWN); }
    
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    
    function InitScripts(){
     zxcUPUInit('Content','class1','Mask',10,50,'http://www.vicsjavascripts.org.uk/StdImages/Mask.gif');
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body bgColor="#f8cd76" onload="InitScripts()"  >
    <center>
    <div style="height:80px;" ></div>
    <textarea id="fred" rows="20" cols="50" onkeypress="return Key(event);"  ></textarea>
    <div style="height:80px;" ></div>
    <textarea rows="20" cols="50" onkeypress="return Key(event);" ></textarea>
    <br>
    <br>
    
    
    
    <div id="Content" style="position:absolute;overflow:hidden;width:100px;height:100px;visibility:hidden;" >
    <form>
    Form 2<br>
    <input id="First" ><br>
    <input ><br>
    <input type="button" name="" value="Enter" onclick="zxcUPUHide();Enter(this.form);">
    </form>
    
    <div style="position:relative;overflow:hidden;height:60px;width:100%;background-color:#FFFFCC;text-align:center;font-size:12px;" >
    complete the inputs and enter.
    <div style="position:absolute;left:45px;top:35px;height:15px;width:50px;background-color:#FFCC66;border:solid black 1px;cursor:move;" onmousedown="zxcUPUDrag()" >Drag</div>
    <div style="position:absolute;left:105px;top:35px;height:15px;width:50px;background-color:silver;border:solid black 1px;" onmouseup="zxcUPUHide()" >Hide</div>
    </div>
    </div>
    
    <div style="height:900px;" ></div>
    </body>
    
    </html>
    Last edited by vwphillips; 09-08-2006 at 02:08 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •