PDA

View Full Version : Drop-in box modification...!



Webiter
12-31-2011, 12:51 PM
1) Script Title: Amazon style Drop-in content box-

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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 (http://www.postbox.webitry.net/subscribe.html) 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.:)

jscheuer1
12-31-2011, 04:29 PM
Here's one way, it submits the form after validation and the box drops down and the user closes the box:


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

vwphillips
12-31-2011, 04:32 PM
<!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>

Webiter
12-31-2011, 06:53 PM
Is the javascript validation process complicating the task! Or, put it another way would server side (only) validation simplify the task somewhat?

jscheuer1
12-31-2011, 07:23 PM
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/showpost.php?p=266981&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.

Webiter
01-01-2012, 07:53 PM
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 ;)