Adding a drop in message to any MemberGate page

Here's how to add a 'Amazon' style drop in message to your web pages. Includes everything you need.

As this page loaded, you probably saw a drop in box slide down from the top of the page - blocking your view until you clicked on the close window command.

These drop in boxes are used by more and more sites - and whether you love them or hate them, they do provide the web master a way to offer important information to web visitors.

If you want to add a drop down box to your web pages, here's how:

Adding a Drop Down Box:

1. Step 1. Copy the following code and place it on your web page after the body command but before the code shown in step 2.
   
   <script language="JavaScript1.2"> // Drop-in content box- By Dynamic Drive // For full source code and more DHTML scripts, visit <A HREF="http://www.dynamicdrive.com" target="_blank" rel="noopener">http://www.dynamicdrive.com</A > // This credit MUST stay intact for use var ie=document.all var dom=document.getElementById var ns4=document.layers var calunits=document.layers? "" : "px" var bouncelimit=32 //(must be divisible by 8) var direction="up" function initbox(){ if (!dom&&!ie&&!ns4) return crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin scroll_top=(ie)? truebody().scrollTop : window.pageYOffset crossobj.top=scroll_top-250+calunits crossobj.visibility=(dom||ie)? "visible" : "show" dropstart=setInterval("dropin()",50) } function dropin(){ scroll_top=(ie)? truebody().scrollTop : window.pageYOffset if (parseInt(crossobj.top)<100+scroll_top) crossobj.top=parseInt(crossobj.top)+40+calunits else{ clearInterval(dropstart) bouncestart=setInterval("bouncein()",50) } } function bouncein(){ crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits if (bouncelimit<0) bouncelimit+=8 bouncelimit=bouncelimit*-1 if (bouncelimit==0){ clearInterval(bouncestart) } } function dismissbox(){ if (window.bouncestart) clearInterval(bouncestart) crossobj.visibility="hidden" } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } window.onload=initbox </script>
   
   
2. Step 2. Copy the following code, modify it to include the message you wish to present, and paste in on your web page below the the script copied in Step 1.
   
   <div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:200px;height:200px;background-color:#F5F5F5"> <!-- change below to include your html --> <table border="1" width="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="7"> <tr> <td width="100%" bgcolor="#ffffcc"><font face="Arial" size="4"><b>This is a drop in box</a></b></font> <p><font face=arial>Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it. Script compatible in IE4+, NS4, and NS6+.</p> <div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div> </td> </tr> </table> <!-- do not change below --> </div>
   
   

That's all there is to it - but be sure to turn off the WYSIWYG editor before you start pasting in the above code.

Modifying the Drop Down Message

The drop down message window can display any html element - including text, images, and links. To include these elements, enter the html in the position indicated in the code from the Step 2 window, above.

Special Considerations

In MemberGate, when you add a javascript to a page, all content after the javascript needs to have any required html formatting commands.

In most cases, this just means adding a

whereever you would normally expect a line break or paragraph.

As always, test before uploading to your web site.