Results 1 to 6 of 6

Thread: Drop-in box modification...!

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default Drop-in box modification...!

    1) Script Title: Amazon style Drop-in content box-

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...amazondrop.htm

    3) Describe problem:

    This script has a number of display modes. The 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...

    At this test position I have a Subscribe input field.

    Can the above Drop-in content box script be configured to drop-in when onclick a validated email has been submitted ?

    Thanks in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's one way, it submits the form after validation and the box drops down and the user closes the box:

    Code:
    <html><head>
    <title>Subscribe Page Snippet</title>
    <script type="text/javascript">
    function validateForm()
    {
    var x=document.forms["myForm"]["Email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Please enter a valid E-mail address");
      return false;
      }
      document.forms["myForm"].onsubmit = function(){return true;};
      initboxv2();
      return false;
    }
    </script>
    <style type="text/css">
    
    #dropinboxv2cover{
    width: 250px; /*change width to desired */
    height: 220px; /*change height to desired. REMOVE if you wish box to be content's natural height */
    position:absolute; /*Don't change below 4 rules*/
    z-index: 100;
    overflow:hidden;
    visibility: hidden;
    }
    
    #dropinboxv2{
    width: 230px; /*change width to above width-20. */
    height: 240px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
    border: 2px solid green; /*Customize box appearance*/
    background-color: lightyellow;
    padding: 4px;
    position:absolute; /*Don't change below 3 rules */
    left: 0;
    top: 0;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Amazon style Drop-in content box-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    * Go to http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var dropboxleft=200 //set left position of box (in px)
    var dropboxtop=100 //set top position of box (in px)
    var dropspeed=10 //set speed of drop animation (larger=faster)
    
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    
    var displaymode="ondemand"
    
    ///Don't edit beyond here///////////
    
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    var ie=document.all
    var dom=document.getElementById
    
    function initboxv2(){
    if (!dom&&!ie)
    return
    crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
    crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossbox.height=crossbox.offsetHeight
    crossboxcover.style.height=parseInt(crossbox.height)+"px"
    crossbox.style.top=crossbox.height*(-1)+"px"
    crossboxcover.style.left=dropboxleft+"px"
    crossboxcover.style.top=dropboxtop+"px"
    crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropinv2()",50)
    }
    
    function dropinv2(){
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossbox.style.top)<0){
    crossboxcover.style.top=scroll_top+dropboxtop+"px"
    crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
    }
    else{
    clearInterval(dropstart)
    crossbox.style.top=0
    }
    }
    
    function dismissboxv2(){
    if (window.dropstart) clearInterval(dropstart)
    crossboxcover.style.visibility="hidden"
    }
    
    function truebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
    if (window.addEventListener)
    window.addEventListener("load", initboxv2, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initboxv2)
    else if (document.getElementById || document.all)
    window.onload=initboxv2
    if (displaymode=="oncepersession")
    document.cookie="droppedinv2=yes"
    }
    
    </script>
    
    </head>
    <body>
    <br />
    <h3>Submit a Email address to a List</h3>
    <table border="2" bordercolor="blue" cellspacing="10"><tr><td> 
    <b>Submit Email address to get updates:</b>
    <br />
    <br />
    <form name="myForm" action="writesubscription.php" onsubmit="return validateForm();" method="post">
    <input type="hidden" name="List" value="Email.lst" />
    Email: <input type="text" name="Email" size="25" ><br /><br />
    <input type="submit" value="Submit E-mail to List">
    </form>
    </td></tr></table>
    <br />
    <br /><a href="index.php">Go to Home Page</a>.<br>
    <br />
    <a href="http://www.unsubscribeaddress.com" style="font-size:11px; color:#4fb5e9;">Unsubscribe from E-mail list</a>.
    
    <div id="dropinboxv2cover">
    <div id="dropinboxv2">
    <br />
    Thanks for submitting your E-mail address.<br /><br />
    Queried at DynamicDrive.com...<br />Can the operation and control of the DD Drop-in Box be modified to present the above type message with onclick.... of the "Submit E-mail to List" button?
    <p align="right"><a href="#" onClick="document.forms.myForm.submit(); return false">Close Box</a></p>
    
    </div>
    </div>
     
    </body></html>
    If you want the form to submit in the background (user never gets to see writesubscription.php), then you would need AJAX.

    And regardless of AJAX or not AJAX you should still have writesubscription.php be presentable because it will be seen by non-javascript users. And you should validate the email address on the server side as well because non-javascript users will not be subject to the javascript validation.
    Last edited by jscheuer1; 12-31-2011 at 04:34 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Webiter (01-01-2012)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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>
    <script type="text/javascript">
    /*<![CDATA[*/
    function validate(form_id,email) {
    
       var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
       var address = document.forms[form_id].elements[email].value;
       if(reg.test(address) == false) {
    
          alert('Invalid Email Address');
          return false;
       }
     initboxv2();
    }
    /*]]>*/
    </script>
    <style type="text/css">
    
    #dropinboxv2cover{
    width: 320px; /*change width to desired */
    height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
    position:absolute; /*Don't change below 4 rules*/
    z-index: 100;
    overflow:hidden;
    visibility: hidden;
    }
    
    #dropinboxv2{
    width: 300px; /*change width to above width-20. */
    height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
    border: 2px solid black; /*Customize box appearance*/
    background-color: lightyellow;
    padding: 4px;
    position:absolute; /*Don't change below 3 rules */
    left: 0;
    top: 0;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Amazon style Drop-in content box-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    * Go to http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var dropboxleft=200 //set left position of box (in px)
    var dropboxtop=100 //set top position of box (in px)
    var dropspeed=15 //set speed of drop animation (larger=faster)
    
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    
    var displaymode="always"
    
    ///Don't edit beyond here///////////
    
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    var ie=document.all
    var dom=document.getElementById
    
    function initboxv2(){
    if (!dom&&!ie)
    return
    crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
    crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossbox.height=crossbox.offsetHeight
    crossboxcover.style.height=parseInt(crossbox.height)+"px"
    crossbox.style.top=crossbox.height*(-1)+"px"
    crossboxcover.style.left=dropboxleft+"px"
    crossboxcover.style.top=dropboxtop+"px"
    crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropinv2()",50)
    }
    
    function dropinv2(){
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossbox.style.top)<0){
    crossboxcover.style.top=scroll_top+dropboxtop+"px"
    crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
    }
    else{
    clearInterval(dropstart)
    crossbox.style.top=0
    }
    }
    
    function dismissboxv2(){
    if (window.dropstart) clearInterval(dropstart)
    crossboxcover.style.visibility="hidden"
    }
    
    function truebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    </script>
    
    </head>
    
    <body>
    <div id="dropinboxv2cover">
    <div id="dropinboxv2">
    
    INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br>
    <p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>
    
    </div>
    </div>
    <form id="form_id" method="post" action="action.php" onsubmit="javascript:return validate('form_id','email');">
    
       <input type="text" id="email" name="email" />
    
       <input type="button" value="Test" onmouseup="return validate('form_id','email');"/>
    </form>
    
    </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/

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

    Webiter (01-01-2012)

  6. #4
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Is the javascript validation process complicating the task! Or, put it another way would server side (only) validation simplify the task somewhat?

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No, well not much, and no, not really. Server side validation is required in case a non-javascript user or someone who intentionally disables javascript submits the form.

    In case you missed it, my working solution is here:

    http://www.dynamicdrive.com/forums/s...81&postcount=2

    If the form passes validation, it submits the form after the box is dismissed. If AJAX were included, the user wouldn't have to go to the submit page (writesubscription.php).

    If the form doesn't pass validation, you get the alert and the form doesn't submit.

    But that's all with javascript. Without javascript, the user goes straight to writesubscription.php without validation. Even without the drop in box it would work like that.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Webiter (01-01-2012)

  9. #6
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks John,

    Part A I have read your comment a number of times and was wondering could you say a bit more about AJAX in this situation so that I might investigate a bit more. Maybe what are the questions to enable and is it worth the effort!

    Part B Maybe I am still off the rails with this query! Could the (writesubscription.php) be presented within the Drop in box! The (writesubscription.php) could be made to include the short Thank You for the visitor?

    Part C.... Happy New Year all at DD
    Last edited by Webiter; 01-02-2012 at 01:49 PM. Reason: Expanded by Adding Parts A, B & C to the Query.

Tags for this Thread

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
  •