Results 1 to 8 of 8

Thread: Serious Neophyte Needs Help (I think it's JS related)

  1. #1
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Serious Neophyte Needs Help (I think it's JS related)

    Hi everyone my name is Rhonda and I manage the website for my church. I really don't know html - just simple coding - and know even less about js or css. I was asked if I could create a form that would help folks build an affirmative prayer. It was fine until I came to the submit button. There is a form already in existence that I used to build my form and you can see it here: http://founderslosangeles.org/need-p...uild-a-prayer/ You can enter some characters into the fields and then see how it displays them back to you. I need mine to do that. So I am not sure if the info that I need is html or js. I appreciate any help I can get since I am basically creating this for my church (or trying to) for free.

    Here is the JavaScript file Attachment 5260

    Below is the html code - sorry wasn't sure how to get the code box to display

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Grants Pass Center for Spiritual Living</title>
    
    <link rel="stylesheet" href="styles/page.css">
    
    <script src="scripts/verify.js"></script>
    
    
    <script language="javascript"> 
     
      function toggleDiv(divid){
     
        if(document.getElementById(divid).style.display == 'none'){
     
          document.getElementById(divid).style.display = 'block';
     
        }else{
     
          document.getElementById(divid).style.display = 'none';
     
        }
     
      }
     
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <a id="logo" href="index.html">
     <img src="images/csl_logo_gp_4c.gif" alt="Grants Pass Center for Spiritual Living" title="Grants Pass Center for Spiritual Living">
    </a>
    
    <ul id="menu"> 
     <li>About Us &#x25bc;
      <ul>
       <li><a href="what.html">What we believe</a></li>
       <li><a href="history.html">History of Science of Mind</a></li>
       <li><a href="treatment.html">What is affirmative prayer?</a></li>
       <li><a href="prac.html">What is a Practitioner?</a></li>
      </ul></li>
     <li>Happenings&nbsp;&#x25bc;
      <ul>
       <li><a href="schedule.html">Services</a></li>
       <li><a href="classes.html">Classes</a></li>
       <li><a href="events.html">Events</a></li>
      </ul></li>
     <li>Resources &#x25bc; 
      <ul>
       <li><a href="talks.html">Past Talks</a></li>
       <li><a href="prayerreq.html">Online Prayer Request</a></li>
       <li><a href="newsletter.html">Newsletters</a></li>
       <li><a href="links.html">Additional Links</a></li>
      </ul></li>
     <li><a href="http://www.grantspasscsl.org/blog/" class="navText">Minister's Blog</a></li>
     <li><a href="volunteer.html" class="navText">Volunteer Opportunities</a></li>
     <li><a href="contact.html" class="navText">Contact Us</a></li> 
    </ul>
    
    <!-- End Navigation Bar	| Begin Content -->	
    
    
    <!-- Begin Main Content Image -->
        <td width="857" valign="top"><!-- InstanceBeginEditable name="Image" -->
                  <p><img src="images/prayerreq.jpg" alt="Grants Pass Center for Spiritual Living" width="377" height="113" /></p>
        <!-- InstanceEndEditable -->
    
    <!-- End Main Content Image | Begin Content -->
    
    <h1>Build a Prayer</h1>
    <h2>A Spiritual Mind Treatment is affirmative prayer.</h2>
    
    <p>What is affirmative prayer? It is a prayer that declares a spiritual Truth. For example, when Jesus the Christ spoke the Word, his healing statement was declared with great power and conviction. He didn't say, "Oh please, God, let Lazarus be healed." He said, "Lazarus, come forth!" (John 11:43) A Spiritual Mind Treatment, or affirmative prayer, is "a recognition of Spirit's Omniscience, Omnipotence, and Omnipresence, and a realization of humanity's unity with Spirit..." (Ernest Holmes, Science of Mind textbook, pg. 149)</p>
    
    
    <!----- Begin BAT Form ---->
    	<div class="entry-content">
    		<div id="innerpage">
    
    <form>
    <form " method=" "post">
    <fieldset>
    
    <ul><h3>Step 1: Recognition</h3>
    <p>We begin every Spiritual Mind Treatment with Recognition that there is One Life, and that Life is God. You may call God by any other name that makes It clear and personal to you, such as: Spirit, Universe, Allah, Buddha, Infinite Mind, the One, the Force, Light, or any other term that feels real to you. Begin with a statement recognizing God, such as: "I know there is an Infinite Spirit that I call the Universe." or "I recognize the One as the power, the presence, and the love of All That Is." </p>
    
    <strong>Create your own Recognition statement here:</strong><br />
    <textarea rows="8" name="Recognition" cols="80"></textarea><br />
    
    <h3>Step 2: Unification</h3>
    <p>In the Unification step of Spiritual Mind Treatment, we affirm that the same Spirit that God is, we are. We are OF God - Divine emanations. Since God is all there is,there can be nothing outside of God, and no one separate from God. And so we realize and declare our Oneness as spiritual beings. After you do the above Recognition step, make some simple declaration of your unity with the Allness of God, such as: "I know that I am One with that Infinite Mind." Or "I recognize my unity with All That Is."</p>
    
    <strong>Create your own Unification statement here:</strong><br />
    <textarea rows="8" name="Unification" cols="80"></textarea><br />
    
    <h3>Step 3: Realization</h3>
    <p>In Step 3 of your Spiritual Mind Treatment, you want to Realize the qualities or attributes of God which you want to embrace within yourself - to call forth in your own consciousness. These are the Divine qualities inherent within you which want to become more conscious OF. And so you might want to say something like, "I know that the Divine qualities of peace, power, plenty, and wisdom are already within me. I embrace them now." Or, "All that God is, I AM. I step forth into my true Divinity, saying yes to my own prosperity, guidance, order, harmony, and love".</p>
     
    <strong>Create your own Realization statement here:</strong><br />
    <textarea rows="8" name="Realization" cols="80"></textarea><br />
    
    <h3>Step 4: Thanksgiving</h3>
    <p>Step 4 of your Spiritual Mind Treatment is Thanksgiving. An attitude of gratitude is essential to establishing a new intention in our lives. In giving thanks, we are declaring that it is already done. We are grateful for it. It is so. In your Thanksgiving step, you may want to say something like "I am so grateful for the revelation of this spiritual Truth in my life." Or, "It is with great gratitude that I accept this transformation of consciousness for myself."</p>
     
    <strong>Create your own Thanksgiving statement here:</strong><br />
    <textarea rows="8" name="Thanksgiving" cols="80"></textarea><br />
    
    <h3>Step 5: Release</h3>
    <p>In Step 5, the Release step of your Spiritual Mind Treatment, you let go and let God. You are turning your affirmative declaration of Truth entirely over to Infinite Love, Spirit, the Allness that is God. It is a very important step, because as long as you hold on to it, nothing can take place. You may want to simply say, "I release. I let go. I let the Spirit do Its perfect work." Or, "I trust the Universe to provide for me. It is done. It is so." Or, "And so it is! Amen."</p>
     
    <strong>Create your own Release statement here:</strong><br />
    <textarea rows="8" name="Release" cols="80"></textarea><br />
    Wonderful! Now you have created your own 5-Step Spiritual Mind Treatment.
    &nbsp;
    &nbsp;
    <p>To take a look at your affirmative prayer, click on the button below.</p>
    &nbsp;
    
    
    <form action="">
    <input type="button" value="Look At My Treatment">
    
    	
    		</ul>
    		</fieldset>
    		</form> 
    
    <!----- End BAT Form ---->
    
    <!-- End Content  | Begin Footer -->
    
    <div id="content-footer">
    
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
     <input type="hidden" name="cmd" value="_s-xclick">
     <input type="hidden" name="hosted_button_id" value="UHMPXEMCNEPD4">
     <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" alt="PayPal - The safer, easier way to pay online!">
    </form>
    
    <ul>
     <li><a href="what.html">About Us</a>|</li>
     <li><a href="schedule.html"> What's Happening</a>|</li> 
     <li><a href="links.html">More Resources</a>|</li> 
     <li><a href="http://www.grantspasscsl.org/blog/">Minister's Blog</a>|</li> 
     <li><a href="bookstore.html">Bookstore</a>|</li> 
     <li><a href="contact.html">Contact Us</a></li>
    </ul> 
    
    <p>
    <a href="http://maps.google.com/maps/place?q=466+sw+i,+grants+pass,+or&amp;hl=en&amp;ftid=0x54c57a3eabdef79d:0x8f1da84b3bfb529" target="_blank"> 466 Southwest I Street, Grants Pass, Oregon, 97526 </a>
    </p><p>
    &copy; 2011 Grants Pass Center for Spiritual Living 
    </p><p>
    Questions about this site? <a href="mailto:webmaster@grantspasscsl.org">webmaster@grantspasscsl.org</a> | Design by 
    <a href="http://abundancemarketinganddesign.com/" target="_blank">AbundanceMarketing &amp; Design</a>
    </p>
    </div><!-- end #content-footer -->
    
    <div id="right-column">
    <h2>Join our email list:</h2>
    
    <form method="post" action="https://app.icontact.com/icp/signup.php" id="icpsignup3509" accept-charset="UTF-8">
     <input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html">
     <input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
     <input type="hidden" name="listid" value="33761">
     <input type="hidden" name="specialid:33761" value="IMR5">    
     <input type="hidden" name="clientid" value="996889">
     <input type="hidden" name="formid" value="3509">
     <input type="hidden" name="reallistid" value="1">
     <input type="hidden" name="doubleopt" value="0">        
     
     <label>* Email</label> 
     <input type="text" name="fields_email">
     
     <label>* First Name</label>
     <input type="text" name="fields_fname">
     
     <label>Last Name</label> 
     <input type="text" name="fields_lname">
    
    <div id="required">* = Required Field</div>
    
     <input type="submit" name="Submit" value="Submit">
     
    </form>
    
    
    </div><!-- end #right-column -->
    
    </div><!-- end #container -->
    
    
    </body>
    </html>
    Last edited by james438; 10-19-2013 at 06:27 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    you will need to know a little HTML and CSS

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #prayer {
      position:fixed;z-Index:101;left:-3000px;top:-3000px;width:400px;background-Color:#FFFFCC;padding: 5px;padding-Bottom: 25px;border:solid red 1px;
    }
    
    .title {
      text-Align:center;font-Size:20px;margin-Bottom:10px;
    }
    
    .line {
      text-Align:left;font-Size:14px;
    }
    
    
    .mask {
      z-Index:10;left:0px;top:0px;background-Color:#FFCC66;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <form name="myform" >
    <fieldset>
    
    <h3>Step 1: Recognition</h3>
    
    <strong>Create your own Recognition statement here:</strong><br />
    <textarea rows="8" name="Recognition" cols="80">We begin every Spiritual</textarea><br />
    
    <h3>Step 2: Unification</h3>
    
    <strong>Create your own Unification statement here:</strong><br />
    <textarea rows="8" name="Unification" cols="80">Create your own Unification</textarea><br />
    
    <h3>Step 3: Realization</h3>
    
    <strong>Create your own Realization statement here:</strong><br />
    <textarea rows="8" name="Realization" cols="80">Create your own Realization</textarea><br />
    
    <h3>Step 4: Thanksgiving</h3>
    
    <strong>Create your own Thanksgiving statement here:</strong><br />
    <textarea rows="8" name="Thanksgiving" cols="80">Create your own Thanksgiving sta</textarea><br />
    
    <h3>Step 5: Release</h3>
    
    <strong>Create your own Release statement here:</strong><br />
    <textarea rows="8" name="Release" cols="80">Create your own Release statement here</textarea><br />
    Wonderful! Now you have created your own 5-Step Spiritual Mind Treatment.
    &nbsp;
    &nbsp;
    <p>To take a look at your affirmative prayer, click on the button below.</p>
    &nbsp;
    
    
    <input type="button" value="Look At My Treatment" onmouseup="zxcPopUp.Show('prayer');">
    
    
    		</fieldset>
    		</form>
    
    
    <div id="prayer" >
     <div class="title" >My Prayer</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // PopUp (19-October-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcPopUp={
    
     Show:function(id){
       var o=this['zxc'+id];
       if (o){
       clearTimeout(o.to);
       var s=o.s[0],w=s.offsetWidth,h=s.offsetHeight,m=o.m==8?Math.floor(Math.random()*7):o.m;
       if (this.o&&this.o!=o){
        this.o.s[0].style.top='-3000px';
       }
       o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
       s.style.left=((o.mk.offsetLeft-s.offsetWidth)/2)+'px';
       s.style.top=((o.mk.offsetTop-s.offsetHeight)/2)+'px';
       if (!o.ud){
        o.ud=true;
        this.msk(o);
        while (o.m==8&&m==o.lm){
         m=Math.floor(Math.random()*7);
        }
        this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
        o.lm=m;
       }
       this.o=o;
       typeof(o.OnChange)=='function'?o.OnChange(o.ud):null;
      }
      return false;
     },
    
     Hide:function(id,ms){
      var oop=this,o=this['zxc'+id];
      o?o.to=setTimeout(function(){ o.ud=false; typeof(o.OnChange)=='function'?o.OnChange(o.ud):null; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },ms||500):null;
     },
    
     init:function(o){
      var id=o.PopUpID,m=o.Mode,mc=o.MaskClass,ms=o.Animate,h=o.HideDelay,t=o.EventType,p=document.getElementById(id);
      if (p&&!this['zxc'+id]){
       var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',msk=document.createElement('DIV'),mk=msk.cloneNode(false);
       document.body.appendChild(p);
       o.m='CHVRLDUF?'.indexOf(m);
       o.id=id;
       o.s=[p];
       o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
       o.h=isFinite(h*1)&&h>20?h*1:null;
       o.t=t;
       o.ud=false;
       msk.style.position='fixed';
       p.style.left=msk.style.left='0px';
       p.style.top=msk.style.top='-3000px';
       msk.style.width='100%';
       msk.style.height='0px';
       msk.className=mc;
       o.msk=msk;
       mc?document.body.appendChild(o.msk):null;
       this['zxc'+id]=o;
       this.addevt(p,'mouseup','Hide',id,100);
       this.addevt(msk,'mouseup','Hide',id,100);
       this.addevt(window,'resize','msk',o);
       mk.style.position='fixed';
       mk.style.bottom=mk.style.right='0px';
       mk.style.width=mk.style.height='0px';
       document.body.appendChild(mk);
       o.mk=mk;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     msk:function(o){
      o.msk.style.top=(o.ud?0:-3000)+'px';
      o.msk.style.height=(o.ud?o.mk.offsetTop:0)+'px';
     },
    
     animate:function(o,a,f,t,l,srt,mS,ud){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=[],z0=0;
      for (;z0<l;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
      }
      l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
      }
      else {
       l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
       o.ud&&o.h?this.Hide(o.id,o.h):null;
       if (ud===false){
        oop.msk(o);
        a[0].style.top='-3000px';
       }
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     clip:function(o,t){
      o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcPopUp.init({
      PopUpID:'prayer',      // the unique ID name of the pop up DIV.               (string)
      Mode:'C',              //(optional) the display mode(see Note 1).             (string, default = 'F' = fade)
      Animate:1000,          //(optional) the animation duration in milli seconds.  (number, default = 1000)
      HideDelay:5000,        //(optional) the hide delay in milli seconds.          (number, default = 1000)
      MaskClass:'mask',      //(optional) the class name of the 'mask'(see Note 2). (string, default = no mask)
      OnChange:function(ud){ //(optional) a function to call on show/hide.          (function, default = no function)
       var clds=document.getElementById('prayer').childNodes,ary=[],as=document.forms['myform'].getElementsByTagName('TEXTAREA'),z0=0,z1=0;
       for (var z0=0;z0<clds.length;z0++){
        if ((' '+clds[z0].className+' ').match(' line ')){
         ary.push(clds[z0]);
        }
       }
       for (;z1<as.length;z1++){
        if (ary[z1]){
         ary[z1].innerHTML=as[z1].value;
        }
       }
      }
    });
    /*
    
    
      ** Note 1.
        The display modes are:
        'C' = center clip,
        'H' = horizontal clip,
        'V' = vertical clip,
        'R' = right clip,
        'L' = left clip,
        'D' = down clip,
        'U' = up clip,
        'F' = fade,
        '?' = Random Clip
    
      ** Note 2.
       Where the MaskClass is specified a 'mask' will cover the window.
       The mask class CSS rule must specify a z-Index so the mask is over all page elements other than the pop up.
       The script will assign a CSS position of fixed to the mask and control the size and positioning.
       Clicking the mask will hide tht pop up.
    
    */
    
    
    /*]]>*/
    </script>
    
    </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. The Following User Says Thank You to vwphillips For This Useful Post:

    gpcsl (10-19-2013)

  4. #3
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks Vic, that is terrific! I like how it dims the background. It only stays visible for a minute or so before it fades away. Is there a way to make it stay and allow it to be printed? Or can it open in a new browser window or replace/take the place of the form in the existing window?

    Thanks - you rock!!!!

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #prayer {
      position:fixed;z-Index:101;left:-3000px;top:-3000px;width:400px;background-Color:#FFFFCC;padding: 5px;padding-Bottom: 25px;border:solid red 1px;
    }
    
    .title {
      text-Align:center;font-Size:20px;margin-Bottom:10px;
    }
    
    .line {
      text-Align:left;font-Size:14px;
    }
    
    
    .mask {
      z-Index:10;left:0px;top:0px;background-Color:#FFCC66;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="content" >
    <form name="myform" >
    <fieldset>
    
    <h3>Step 1: Recognition</h3>
    
    <strong>Create your own Recognition statement here:</strong><br />
    <textarea rows="8" name="Recognition" cols="80">We begin every Spiritual</textarea><br />
    
    <h3>Step 2: Unification</h3>
    
    <strong>Create your own Unification statement here:</strong><br />
    <textarea rows="8" name="Unification" cols="80">Create your own Unification</textarea><br />
    
    <h3>Step 3: Realization</h3>
    
    <strong>Create your own Realization statement here:</strong><br />
    <textarea rows="8" name="Realization" cols="80">Create your own Realization</textarea><br />
    
    <h3>Step 4: Thanksgiving</h3>
    
    <strong>Create your own Thanksgiving statement here:</strong><br />
    <textarea rows="8" name="Thanksgiving" cols="80">Create your own Thanksgiving sta</textarea><br />
    
    <h3>Step 5: Release</h3>
    
    <strong>Create your own Release statement here:</strong><br />
    <textarea rows="8" name="Release" cols="80">Create your own Release statement here</textarea><br />
    Wonderful! Now you have created your own 5-Step Spiritual Mind Treatment.
    &nbsp;
    &nbsp;
    <p>To take a look at your affirmative prayer, click on the button below.</p>
    &nbsp;
    
    
    <input type="button" value="Look At My Treatment" onmouseup="zxcPopUp.Show('prayer');">
    
    
    		</fieldset>
    		</form>
    </div>
    
    <div id="prayer" >
     <div class="title" >My Prayer</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <input type="button" name="" value="Hide" onmouseup="zxcPopUp.Hide('prayer');"/>
     <input type="button" name="" value="Print" onmouseup="Print();"/>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Print(){
     var c=document.getElementById('content');
     c.style.display='none';
     window.print();
     c.style.display='block';
    }
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    // PopUp (19-October-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcPopUp={
    
     Show:function(id){
       var o=this['zxc'+id];
       if (o){
       clearTimeout(o.to);
       var s=o.s[0],w=s.offsetWidth,h=s.offsetHeight,m=o.m==8?Math.floor(Math.random()*7):o.m;
       if (this.o&&this.o!=o){
        this.o.s[0].style.top='-3000px';
       }
       o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
       s.style.left=((o.mk.offsetLeft-s.offsetWidth)/2)+'px';
       s.style.top=((o.mk.offsetTop-s.offsetHeight)/2)+'px';
       if (!o.ud){
        o.ud=true;
        this.msk(o);
        while (o.m==8&&m==o.lm){
         m=Math.floor(Math.random()*7);
        }
        this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
        o.lm=m;
       }
       this.o=o;
       typeof(o.OnChange)=='function'?o.OnChange(o.ud):null;
      }
      return false;
     },
    
     Hide:function(id,ms,h){
      var oop=this,o=this['zxc'+id];
      h!==false&&o?o.to=setTimeout(function(){ o.ud=false; typeof(o.OnChange)=='function'?o.OnChange(o.ud):null; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },ms||500):null;
     },
    
     init:function(o){
      var id=o.PopUpID,m=o.Mode,mc=o.MaskClass,ms=o.Animate,h=o.HideDelay,t=o.EventType,p=document.getElementById(id);
      if (p&&!this['zxc'+id]){
       var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',msk=document.createElement('DIV'),mk=msk.cloneNode(false);
       document.body.appendChild(p);
       o.m='CHVRLDUF?'.indexOf(m);
       o.id=id;
       o.s=[p];
       o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
       o.h=isFinite(h*1)&&h>20?h*1:null;
       o.t=t;
       o.ud=false;
       msk.style.position='fixed';
       p.style.left=msk.style.left='0px';
       p.style.top=msk.style.top='-3000px';
       msk.style.width='100%';
       msk.style.height='0px';
       msk.className=mc;
       o.msk=msk;
       mc?document.body.appendChild(o.msk):null;
       this['zxc'+id]=o;
       this.addevt(msk,'mouseup','Hide',id,100);
       this.addevt(window,'resize','msk',o);
       mk.style.position='fixed';
       mk.style.bottom=mk.style.right='0px';
       mk.style.width=mk.style.height='0px';
       document.body.appendChild(mk);
       o.mk=mk;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     msk:function(o){
      o.msk.style.top=(o.ud?0:-3000)+'px';
      o.msk.style.height=(o.ud?o.mk.offsetTop:0)+'px';
     },
    
     animate:function(o,a,f,t,l,srt,mS,ud){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=[],z0=0;
      for (;z0<l;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
      }
      l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
      }
      else {
       l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
       o.ud&&o.h?this.Hide(o.id,o.h):null;
       if (ud===false){
        oop.msk(o);
        a[0].style.top='-3000px';
       }
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     clip:function(o,t){
      o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcPopUp.init({
      PopUpID:'prayer',      // the unique ID name of the pop up DIV.               (string)
      Mode:'C',              //(optional) the display mode(see Note 1).             (string, default = 'F' = fade)
      Animate:1000,          //(optional) the animation duration in milli seconds.  (number, default = 1000)
    //  HideDelay:5000,        //(optional) the hide delay in milli seconds.          (number, default = hide on clicking the mask)
      MaskClass:'mask',      //(optional) the class name of the 'mask'(see Note 2). (string, default = no mask)
      OnChange:function(ud){ //(optional) a function to call on show/hide.          (function, default = no function)
       var clds=document.getElementById('prayer').childNodes,ary=[],as=document.forms['myform'].getElementsByTagName('TEXTAREA'),z0=0,z1=0;
       for (var z0=0;z0<clds.length;z0++){
        if ((' '+clds[z0].className+' ').match(' line ')){
         ary.push(clds[z0]);
        }
       }
       for (;z1<as.length;z1++){
        if (ary[z1]){
         ary[z1].innerHTML=as[z1].value;
        }
       }
      }
    });
    /*
    
    
      ** Note 1.
        The display modes are:
        'C' = center clip,
        'H' = horizontal clip,
        'V' = vertical clip,
        'R' = right clip,
        'L' = left clip,
        'D' = down clip,
        'U' = up clip,
        'F' = fade,
        '?' = Random Clip
    
      ** Note 2.
       Where the MaskClass is specified a 'mask' will cover the window.
       The mask class CSS rule must specify a z-Index so the mask is over all page elements other than the pop up.
       The script will assign a CSS position of fixed to the mask and control the size and positioning.
       Clicking the mask will hide tht pop up.
    
    */
    
    
    /*]]>*/
    </script>
    
    </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/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    gpcsl (10-20-2013)

  7. #5
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much - that works great! I appreciate your generosity and kindness so much

  8. #6
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Uh oh - overlay box too small?

    Hi again Vic,

    I am sorry to bother you but I got some feedback from a user and I'm afraid to mess with your code. It appears that the overlay box showing the completed prayer doesn't adjust itself when there is more text than what will fit. Is this something that I can easily fix? I hope I didn't screw up the code when I copied and pasted it. I was going to attached a word doc with a screen shot showing how it looks, but this system won't let me. I also noticed that the red outline is missing from the bottom. Crap, did I do that?

    Is it possible for you to tell what needs to be changed or what I may have messed up? I tried to paste the code from my site but every time I try to paste any of it I get an error that I have too many characters. I also get errors trying to upload files. Any suggestions?

    Thanks again!!!
    Rhonda

  9. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #prayer {
      position:fixed;z-Index:101;left:-3000px;top:-3000px;width:400px;background-Color:#FFFFCC;padding: 5px;padding-Bottom: 25px;border:solid red 1px;
    }
    
    .title {
      text-Align:center;font-Size:20px;margin-Bottom:10px;
    }
    
    .line {
      text-Align:left;font-Size:14px;margin-Top:10px
    }
    
    
    .mask {
      z-Index:10;left:0px;top:0px;background-Color:#FFCC66;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="content" >
    <form name="myform" >
    <fieldset>
    
    <h3>Step 1: Recognition</h3>
    
    <strong>Create your own Recognition statement here:</strong><br />
    <textarea rows="8" name="Recognition" cols="80">
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual
    We begin every Spiritual 2
    </textarea><br />
    
    <h3>Step 2: Unification</h3>
    
    <strong>Create your own Unification statement here:</strong><br />
    <textarea rows="8" name="Unification" cols="80">Create your own Unification</textarea><br />
    
    <h3>Step 3: Realization</h3>
    
    <strong>Create your own Realization statement here:</strong><br />
    <textarea rows="8" name="Realization" cols="80">
    Create your own Realization
    Create your own RealizationCreate your own RealizationCreate your own RealizationCreate your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    Create your own Realization
    </textarea><br />
    
    <h3>Step 4: Thanksgiving</h3>
    
    <strong>Create your own Thanksgiving statement here:</strong><br />
    <textarea rows="8" name="Thanksgiving" cols="80">Create your own Thanksgiving sta</textarea><br />
    
    <h3>Step 5: Release</h3>
    
    <strong>Create your own Release statement here:</strong><br />
    <textarea rows="8" name="Release" cols="80">Create your own Release statement here</textarea><br />
    Wonderful! Now you have created your own 5-Step Spiritual Mind Treatment.
    &nbsp;
    &nbsp;
    <p>To take a look at your affirmative prayer, click on the button below.</p>
    &nbsp;
    
    
    <input type="button" value="Look At My Treatment" onmouseup="zxcPopUp.Show('prayer');">
    
    
    		</fieldset>
    		</form>
    </div>
    
    <div id="prayer" >
     <div class="title" >My Prayer</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <div class="line" >line</div>
     <input type="button" name="" value="Hide" onmouseup="zxcPopUp.Hide('prayer');"/>
     <input type="button" name="" value="Print" onmouseup="Print();"/>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Print(){
     var c=document.getElementById('content');
     c.style.display='none';
     window.print();
     c.style.display='block';
    }
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    // PopUp (19-October-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcPopUp={
    
     Show:function(id){
       var o=this['zxc'+id];
       if (o){
       typeof(o.OnChange)=='function'?o.OnChange(o.ud):null;
       clearTimeout(o.to);
       var s=o.s[0],w=s.offsetWidth,h=s.offsetHeight,m=o.m==8?Math.floor(Math.random()*7):o.m;
       if (this.o&&this.o!=o){
        this.o.s[0].style.top='-3000px';
       }
       o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
       s.style.left=((o.mk.offsetLeft-s.offsetWidth)/2)+'px';
       s.style.top=((o.mk.offsetTop-s.offsetHeight)/2)+'px';
       if (!o.ud){
        o.ud=true;
        this.msk(o);
        while (o.m==8&&m==o.lm){
         m=Math.floor(Math.random()*7);
        }
        this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
        o.lm=m;
       }
       this.o=o;
      }
      return false;
     },
    
     Hide:function(id,ms,h){
      var oop=this,o=this['zxc'+id];
      h!==false&&o?o.to=setTimeout(function(){ o.ud=false; typeof(o.OnChange)=='function'?o.OnChange(o.ud):null; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },ms||500):null;
     },
    
     init:function(o){
      var id=o.PopUpID,m=o.Mode,mc=o.MaskClass,ms=o.Animate,h=o.HideDelay,t=o.EventType,p=document.getElementById(id);
      if (p&&!this['zxc'+id]){
       var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',msk=document.createElement('DIV'),mk=msk.cloneNode(false);
       document.body.appendChild(p);
       o.m='CHVRLDUF?'.indexOf(m);
       o.id=id;
       o.s=[p];
       o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
       o.h=isFinite(h*1)&&h>20?h*1:null;
       o.t=t;
       o.ud=false;
       msk.style.position='fixed';
       p.style.left=msk.style.left='0px';
       p.style.top=msk.style.top='-3000px';
       msk.style.width='100%';
       msk.style.height='0px';
       msk.className=mc;
       o.msk=msk;
       mc?document.body.appendChild(o.msk):null;
       this['zxc'+id]=o;
       this.addevt(msk,'mouseup','Hide',id,100);
       this.addevt(window,'resize','msk',o);
       mk.style.position='fixed';
       mk.style.bottom=mk.style.right='0px';
       mk.style.width=mk.style.height='0px';
       document.body.appendChild(mk);
       o.mk=mk;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     msk:function(o){
      o.msk.style.top=(o.ud?0:-3000)+'px';
      o.msk.style.height=(o.ud?o.mk.offsetTop:0)+'px';
     },
    
     animate:function(o,a,f,t,l,srt,mS,ud){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=[],z0=0;
      for (;z0<l;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
      }
      l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
      }
      else {
       l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
       o.ud&&o.h?this.Hide(o.id,o.h):null;
       if (ud===false){
        oop.msk(o);
        a[0].style.top='-3000px';
       }
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     clip:function(o,t){
      o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcPopUp.init({
      PopUpID:'prayer',      // the unique ID name of the pop up DIV.               (string)
      Mode:'C',              //(optional) the display mode(see Note 1).             (string, default = 'F' = fade)
      Animate:1000,          //(optional) the animation duration in milli seconds.  (number, default = 1000)
    //  HideDelay:5000,        //(optional) the hide delay in milli seconds.          (number, default = hide on clicking the mask)
      MaskClass:'mask',      //(optional) the class name of the 'mask'(see Note 2). (string, default = no mask)
      OnChange:function(ud){ //(optional) a function to call on show/hide.          (function, default = no function)
       var clds=document.getElementById('prayer').childNodes,ary=[],as=document.forms['myform'].getElementsByTagName('TEXTAREA'),z0=0,z1=0;
       for (var z0=0;z0<clds.length;z0++){
        if ((' '+clds[z0].className+' ').match(' line ')){
         ary.push(clds[z0]);
        }
       }
       for (;z1<as.length;z1++){
        if (ary[z1]){
         ary[z1].innerHTML=as[z1].value;
        }
       }
      }
    });
    /*
    
    
      ** Note 1.
        The display modes are:
        'C' = center clip,
        'H' = horizontal clip,
        'V' = vertical clip,
        'R' = right clip,
        'L' = left clip,
        'D' = down clip,
        'U' = up clip,
        'F' = fade,
        '?' = Random Clip
    
      ** Note 2.
       Where the MaskClass is specified a 'mask' will cover the window.
       The mask class CSS rule must specify a z-Index so the mask is over all page elements other than the pop up.
       The script will assign a CSS position of fixed to the mask and control the size and positioning.
       Clicking the mask will hide tht pop up.
    
    */
    
    
    /*]]>*/
    </script>
    
    </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/

  10. #8
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you again. You have been so helpful with this and have done so much more than I ever expected - and I am very grateful. The footer is moved up and over to the left of the form, but I'm not too concerned with that. The form works and works very well - and the congregation just loves it. Thank you

Similar Threads

  1. Information related to CDN
    By cryoffalcon in forum MySQL and other databases
    Replies: 2
    Last Post: 09-23-2012, 05:41 AM
  2. Looking for a way to... (PHP and MySQL Related)
    By RROD in forum Looking for such a script or service
    Replies: 2
    Last Post: 05-19-2011, 08:50 PM
  3. javascript related?
    By student101 in forum JavaScript
    Replies: 3
    Last Post: 11-07-2009, 02:50 PM
  4. Border Related...
    By pcbrainbuster in forum JavaScript
    Replies: 6
    Last Post: 04-16-2007, 08:55 PM
  5. Question from neophyte
    By Diversions in forum PHP
    Replies: 4
    Last Post: 09-24-2005, 01:05 PM

Bookmarks

Posting Permissions

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