New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<html>
<head>
<link rel="stylesheet" href="dropincontentbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dropincontentbox.js">

/***********************************************
* Drop In Content Box (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop in box to style it
showduration:10, //disappear after x seconds?
freq:'session'
})

var dropinbox2=new dropincontentbox({
source:'#reminder', //#id of DIV to show if defined inline
cssclass:'dropinbox dropinboxaltstyle drop-shadow lifted',
fx:'easeInExpo', //alternate drop animation keyword
pos:[-20, -20], //custom position of drop in box
deferred:1 //show box 1 sec after page has loaded
})

</script>
</head>

<body>

<div id="reminder">
This content of this drop in box is defined inline on the page, inside the DIV with id="reminder" This DIV is dropped down using the "easeInExpo" animation option. The box will not automatically disappear until the user explicitly clicks on the "close" button or by calling the user function dropinstance.hide().
</div>

<a href="javascript:dropinbox2.show()">Show Reminder box again</a> | <a href="javascript:dropinbox2.hide()">Hide Reminder Box</a>

</body>
</html>

Sweet Ads X