DHTML Floating collectors

Ritchie06 Peon

Messages:: 7

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

I am interested in using one of the new dhtml pop up windows that is used for opt in collections. I do not want to subscribe to a service provider like aweber or similar for this service. Is there any way I can code up my own fly in dhtml email collection box?

Cheeers,

Ritchie.

Ritchie06, Jun 1, 2006 IP

brian394 Well-Known Member

Messages:: 226

Likes Received:: 15

Best Answers:: 0

Trophy Points:: 108

#2

Since no one has responded yet I thought I would take a crack at this one. If I am understanding you correctly, I believe this is what you are looking for. It's basically just a simple page with a simple amount of content. When the page is loaded a few seconds later a css div flys into view (what you call a dhtml pop up window) with a box for a person's e-mail address. There's also a small close button you can use to close the window (actually make it invisible again). I also give you the option of what side of the screen you want the box to appear from and the speed at which it should appear. I spent a number of hours on it so I hope you find it useful. Just copy and paste the whole thing into your favorite text editor and fool around with it for a little bit to get a feel for how it works. The only thing you really need to change is content inside of the div (pop up) with whatever HTML/styles you may want (maybe a graphic or two) and also fill in the action="" property of the form.


<html>
<head>
<style type="text/css">
div#email_box {
 padding: 20px;
 border: 1px solid black;
 background-color: #FFFFE1;
 text-align: center;
 position: absolute;
 left: 30%;
 top: 20px;
 visibility: hidden;
}
div#email_box a#close {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 8pt;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 position: absolute;
 top: 5px;
 right: 5px;
}
label#email_label { margin-right: 5px; margin-top: 15px; }
input#email_textbox { margin-right: 5px; margin-top: 15px; }
input#subscribe_button { margin-top: 15px; }
</style>
<script type="text/javascript">
 // configure your options here
 var fly_in_from = 0; // what direction should the e-mail box fly in from (0=top, 1=bottom, 2=left, 3=right)
 var box_width = 410; // width of the box in pixels
 var box_height = 80; // height of the box in pixels

 // if flying in from the right or left...
 var start_y = '50px'; // what y-coordinate should the e-mail box start at (percentage or px value)
 var stop_x = '30%'; // what x-coordinate should the e-mail box stop at (percentage or px value)

 // if flying in from the top or bottom...
 var start_x = '30%'; // what x-coordinate should the e-mail box start at (percentage or px value)
 var stop_y = '10%'; // what y-coordinate should the e-mail box stop at (percentage or px value)

 var delay = 0; // number of seconds to wait (after the page has loaded) before showing the e-mail box
 var speed = 100; // speed of the window (when flying in), in pixels per second
 var pixel_interval = 4; // how many pixels are incremented in each iteration

 // you shouldn't need to change anything below this point
 window.onload = display_box;
 var email_box_obj, email_box_close_obj, start_pos = 0, stop_pos = 0, direction = 0, side = 0, interval_id = 0, mouse_is_down = false, original_x = 0, original_y = 0, down_x = 0, down_y = 0;
 function display_box() {
  email_box_obj = new getObj('email_box');
  email_box_close_obj = new getObj('close');
  if (document.captureEvents && Event.MOUSEDOWN && Event.MOUSEMOVE && Event.MOUSEUP) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); }
  email_box_obj.obj.onmouseover = email_box_obj.style.cursor = 'move';
  email_box_obj.obj.onmousedown = email_box_onmousedown;
  document.onmousemove = document_onmousemove;
  document.onmouseup = document_onmouseup;
  email_box_obj.style.width = box_width + 'px';
  email_box_obj.style.height = box_height + 'px';
  window.setTimeout('display_box2()', delay*1000);
 }

 function display_box2() {
  var start_x_pixels = get_px_amount(start_x, 'width');
  var start_y_pixels = get_px_amount(start_y, 'height');
  var stop_x_pixels = get_px_amount(stop_x, 'width');
  var stop_y_pixels = get_px_amount(stop_y, 'height');
  var computed_width, computed_height;
  if (window.getComputedStyle) {
   computed_width = parseInt(window.getComputedStyle(email_box_obj.obj, '').getPropertyValue('width'));
   computed_height = parseInt(window.getComputedStyle(email_box_obj.obj, '').getPropertyValue('height'));
  }
  else if (document.defaultView && document.defaultView.getComputedStyle) {
   computed_width = parseInt(document.defaultView.getComputedStyle(email_box_obj.obj, '').getPropertyValue('width'));
   computed_height = parseInt(document.defaultView.getComputedStyle(email_box_obj.obj, '').getPropertyValue('height'));
  }
  else {
   computed_width = box_width;
   computed_height = box_height;
  }
  switch (fly_in_from) {
   case 2: // left
    start_pos = 0 - computed_width;
    stop_pos = stop_x_pixels;
    direction = 1;
    side = 2;
    email_box_obj.style.top = start_y_pixels + 'px';
    email_box_obj.style.left = start_pos + 'px';
    break;
   case 3: // right
    start_pos = document.body.clientWidth;
    stop_pos = stop_x_pixels;
    direction = 1;
    side = 3;
    email_box_obj.style.top = start_y_pixels + 'px';
    email_box_obj.style.left = start_pos + 'px';
    break;
   case 1: // bottom
    start_pos = document.body.clientHeight;
    stop_pos = stop_y_pixels;
    direction = 0;
    side = 1;
    email_box_obj.style.left = start_x_pixels + 'px';
    email_box_obj.style.top = start_pos + 'px';
    break;
   default: // top
    start_pos = 0 - computed_height;
    stop_pos = stop_y_pixels;
    direction = 0;
    side = 0;
    email_box_obj.style.left = start_x_pixels + 'px';
    email_box_obj.style.top = start_pos + 'px';
  }
  email_box_obj.style.visibility = 'visible';
  interval_id = window.setInterval('moveBox()', 1000/speed);
 }

 function moveBox() {
  // side is top or left
  if ((side == 2) || (side == 0)) { start_pos += pixel_interval; if (start_pos > stop_pos) { window.clearInterval(interval_id); } }
  // side is bottom or right
  else { start_pos -= pixel_interval; if (start_pos < stop_pos) { window.clearInterval(interval_id); } }
  if (direction == 1) { // move horizontal
   email_box_obj.style.left = start_pos + 'px';
  }
  else { // move vertical
   email_box_obj.style.top = start_pos + 'px';
  }
 }

 function closeBox() {
  email_box_obj.style.visibility = 'hidden';
 }

 function email_box_onmousedown(e) { e = (!e) ? window.event : e; mouse_is_down = true; original_x = parseInt(email_box_obj.style.left); original_y = parseInt(email_box_obj.style.top); down_x = e.clientX; down_y = e.clientY; }
 function document_onmouseup(e) { mouse_is_down = false; }

 function document_onmousemove(e) {
  if (mouse_is_down) {
   e = (!e) ? window.event : e;
   email_box_obj.style.left = (original_x - down_x) + e.clientX + 'px';
   email_box_obj.style.top = (original_y - down_y) + e.clientY + 'px';
  }
 }

 function get_px_amount(str, width) {
  var s = str.toString();
  var use_as_percentage = true;
  var nums = '0123456789';
  var i = 0, new_str = '', wh = window.screen.availHeight;
  if (width == 'width') { wh = window.screen.availWidth; }
  if (s.indexOf('%') < 0) { use_as_percentage = false; }
  for (i=0;i<s.length;i++) {
   if (nums.indexOf(s.substring(i,i+1)) >= 0) {
    new_str += s.substring(i,i+1);
   }
  }
  if (new_str == '') { return 0; }
  else {
   if (use_as_percentage) { if (new_str.valueOf() > 100) { new_str = 100; } return parseInt((new_str.valueOf() / 100) * wh); }
   else { return parseInt(new_str.valueOf()); }
  }
 }

 // DHTML micro API from http://www.quirksmode.org/js/dhtmloptions.html
 function getObj(name) {
  if (document.getElementById) { // For Level 1 DOM (Netscape 6, Explorer 5)
   this.obj = document.getElementById(name);
   this.style = document.getElementById(name).style;
  }
  else if (document.all) { // For IE4 DOM
   this.obj = document.all[name];
   this.style = document.all[name].style;
  }
  else if (document.layers) { // For NS4 DOM
   this.obj = getObjNN4(document,name);
   this.style = this.obj;
  }
 }

 function getObjNN4(obj,name) {
  var x = obj.layers;
  var foundLayer;
  for (var i=0;i<x.length;i++) {
   if (x[i].id == name)
    foundLayer = x[i];
   else if (x[i].layers.length)
    var tmp = getObjNN4(x[i],name);
   if (tmp) foundLayer = tmp;
  }
  return foundLayer;
 }
</script>
</head>
<body>
<form action="">

Example body content.

<div id="email_box">
 <a href="javascript:closeBox()" id="close">[X] Close</a>
 <label for="email_textbox" id="email_label">Enter your e-mail here:</label>
 <input type="text" size="20" name="email" id="email_textbox">
 <input type="submit" id="subscribe_button" value="Add Me">
</div>

</form>
</body>
</html>

Code (markup):

brian394, Jun 2, 2006 IP

brian394 Well-Known Member

Messages:: 226

Likes Received:: 15

Best Answers:: 0

Trophy Points:: 108

#3

Whoops...I seem to have forgotten the DOCTYPE. :rolleyes:

Here is the XHTML valid version of the above...

Demo: http://home.earthlink.net/~duhomax/dhtml_pop_up.html


<!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">
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>Opt-In E-Mail Box Test</title>
 <style type="text/css">
  form { margin: 0px; }
  p { margin-top: 0px; }
  div#email_box {
   border: 1px solid black;
   background-color: #FFFFE1;
   text-align: center;
   position: absolute;
   left: 30%;
   top: 20px;
   visibility: hidden;
  }
  div#email_box a#close {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 8pt;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   position: absolute;
   top: 5px;
   right: 5px;
  }
  label#email_label { margin-right: 5px; margin-top: 35px; }
  input#email_textbox { margin-right: 5px; margin-top: 35px; }
  input#subscribe_button { margin-top: 35px; }
 </style>
 <script type="text/javascript">
 <!--
  // configure your options here
  var delay = 0; // number of seconds to wait (after the page has loaded) before showing the e-mail box
  var fly_in_from = 0; // what direction should the e-mail box fly in from (0=top, 1=bottom, 2=left, 3=right)
  var box_width = 440; // width of the box in pixels
  var box_height = 80; // height of the box in pixels

  // if flying in from the right or left...
  var start_y = '50px'; // what y-coordinate should the e-mail box start at (percentage or px value)
  var stop_x = '30%'; // what x-coordinate should the e-mail box stop at (percentage or px value)

  // if flying in from the top or bottom...
  var start_x = '30%'; // what x-coordinate should the e-mail box start at (percentage or px value)
  var stop_y = '10%'; // what y-coordinate should the e-mail box stop at (percentage or px value)

  var speed = 100; // speed of the window (when flying in), in pixels per second
  var pixel_interval = 4; // how many pixels are incremented in each iteration

  // you shouldn't need to change anything below this point
  window.onload = display_box;
  var email_box_obj, email_box_close_obj, start_pos = 0, stop_pos = 0, direction = 0, side = 0, interval_id = 0, mouse_is_down = false, original_x = 0, original_y = 0, down_x = 0, down_y = 0;
  function display_box() {
   email_box_obj = new getObj('email_box');
   email_box_close_obj = new getObj('close');
   if (document.captureEvents && Event.MOUSEDOWN && Event.MOUSEMOVE && Event.MOUSEUP) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); }
   email_box_obj.obj.onmouseover = email_box_obj.style.cursor = 'move';
   email_box_obj.obj.onmousedown = email_box_onmousedown;
   document.onmousemove = document_onmousemove;
   document.onmouseup = document_onmouseup;
   email_box_obj.style.width = box_width + 'px';
   email_box_obj.style.height = box_height + 'px';
   window.setTimeout('display_box2()', delay*1000);
  }

  function display_box2() {
   var start_x_pixels = get_px_amount(start_x, 'width');
   var start_y_pixels = get_px_amount(start_y, 'height');
   var stop_x_pixels = get_px_amount(stop_x, 'width');
   var stop_y_pixels = get_px_amount(stop_y, 'height');
   var computed_width, computed_height;
   if (window.getComputedStyle) {
    computed_width = parseInt(window.getComputedStyle(email_box_obj.obj, '').getPropertyValue('width'));
    computed_height = parseInt(window.getComputedStyle(email_box_obj.obj, '').getPropertyValue('height'));
   }
   else if (document.defaultView && document.defaultView.getComputedStyle) {
    computed_width = parseInt(document.defaultView.getComputedStyle(email_box_obj.obj, '').getPropertyValue('width'));
    computed_height = parseInt(document.defaultView.getComputedStyle(email_box_obj.obj, '').getPropertyValue('height'));
   }
   else {
    computed_width = box_width;
    computed_height = box_height;
   }
   switch (fly_in_from) {
    case 2: // left
     start_pos = 0 - computed_width;
     stop_pos = stop_x_pixels;
     direction = 1;
     side = 2;
     email_box_obj.style.top = start_y_pixels + 'px';
     email_box_obj.style.left = start_pos + 'px';
     break;
    case 3: // right
     start_pos = document.body.clientWidth;
     stop_pos = stop_x_pixels;
     direction = 1;
     side = 3;
     email_box_obj.style.top = start_y_pixels + 'px';
     email_box_obj.style.left = start_pos + 'px';
     break;
    case 1: // bottom
     start_pos = document.body.clientHeight;
     stop_pos = stop_y_pixels;
     direction = 0;
     side = 1;
     email_box_obj.style.left = start_x_pixels + 'px';
     email_box_obj.style.top = start_pos + 'px';
     break;
    default: // top
     start_pos = 0 - computed_height;
     stop_pos = stop_y_pixels;
     direction = 0;
     side = 0;
     email_box_obj.style.left = start_x_pixels + 'px';
     email_box_obj.style.top = start_pos + 'px';
   }
   email_box_obj.style.visibility = 'visible';
   interval_id = window.setInterval('moveBox()', 1000/speed);
  }

  function moveBox() {
   // side is top or left
   if ((side == 2) || (side == 0)) { start_pos += pixel_interval; if (start_pos > stop_pos) { window.clearInterval(interval_id); } }
   // side is bottom or right
   else { start_pos -= pixel_interval; if (start_pos < stop_pos) { window.clearInterval(interval_id); } }
   if (direction == 1) { // move horizontal
    email_box_obj.style.left = start_pos + 'px';
   }
   else { // move vertical
    email_box_obj.style.top = start_pos + 'px';
   }
  }

  function closeBox() {
   email_box_obj.style.visibility = 'hidden';
  }

  function email_box_onmousedown(e) { e = (!e) ? window.event : e; mouse_is_down = true; original_x = parseInt(email_box_obj.style.left); original_y = parseInt(email_box_obj.style.top); down_x = e.clientX; down_y = e.clientY; }
  function document_onmouseup(e) { mouse_is_down = false; }

  function document_onmousemove(e) {
   if (mouse_is_down) {
    e = (!e) ? window.event : e;
    email_box_obj.style.left = (original_x - down_x) + e.clientX + 'px';
    email_box_obj.style.top = (original_y - down_y) + e.clientY + 'px';
   }
  }

  function get_px_amount(str, width) {
   var s = str.toString();
   var use_as_percentage = true;
   var nums = '0123456789';
   var i = 0, new_str = '', wh = window.screen.availHeight;
   if (width == 'width') { wh = window.screen.availWidth; }
   if (s.indexOf('%') < 0) { use_as_percentage = false; }
   for (i=0;i<s.length;i++) {
    if (nums.indexOf(s.substring(i,i+1)) >= 0) {
     new_str += s.substring(i,i+1);
    }
   }
   if (new_str == '') { return 0; }
   else {
    if (use_as_percentage) { if (new_str.valueOf() > 100) { new_str = 100; } return parseInt((new_str.valueOf() / 100) * wh); }
    else { return parseInt(new_str.valueOf()); }
   }
  }

  // DHTML micro API from http://www.quirksmode.org/js/dhtmloptions.html
  function getObj(name) {
   if (document.getElementById) { // For Level 1 DOM (Netscape 6, Explorer 5)
    this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
   }
   else if (document.all) { // For IE4 DOM
    this.obj = document.all[name];
    this.style = document.all[name].style;
   }
   else if (document.layers) { // For NS4 DOM
    this.obj = getObjNN4(document,name);
    this.style = this.obj;
   }
  }

  function getObjNN4(obj,name) {
   var x = obj.layers;
   var foundLayer;
   for (var i=0;i<x.length;i++) {
    if (x[i].id == name)
     foundLayer = x[i];
    else if (x[i].layers.length)
     var tmp = getObjNN4(x[i],name);
    if (tmp) foundLayer = tmp;
   }
   return foundLayer;
  }
  //-->
 </script>
</head>
<body>
<form action="">

<p>Example body content.</p>

<div id="email_box">
 <a href="javascript:closeBox()" id="close">[X] Close</a>
 <label for="email_textbox" id="email_label">Enter your e-mail here:</label>
 <input type="text" size="20" name="email" id="email_textbox" />
 <input type="submit" id="subscribe_button" value="Add Me" />
</div>

</form>
</body>
</html>

Code (markup):

brian394, Jun 3, 2006 IP

picasa Banned

Messages:: 56

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#4

Thank you ! It's useful

picasa, Jun 4, 2006 IP

Ritchie06 Peon

Messages:: 7

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#5

Cheers for that.

Ritchie06, Jun 12, 2006 IP

karanits2003 Peon

Messages:: 1

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

hey this is very good.. but if i want that the box shld scroll down with the page and shld dissapear after a certain no. of seconds than wat additions i hve to do. thx

karanits2003, Jul 27, 2006 IP

zdestiny Peon

Messages:: 138

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#7

Is there any way to just display the box, without it having to fly in from a side?

zdestiny, Jul 31, 2006 IP

Log in or Sign up

DHTML Floating collectors

Ritchie06 Peon

brian394 Well-Known Member

brian394 Well-Known Member

picasa Banned

Ritchie06 Peon

karanits2003 Peon

zdestiny Peon

Useful Searches