Full version: jsB@nk » Browser » Popup on mouseOut
URL: https://www.javascriptbank.com/popup-on-mouseout-index.html
If this JavaScript is implemented into your web pages, then everytime visitors move mouse out the body of web pages, it will show a divison to show your major info.
Full version: jsB@nk » Browser » Popup on mouseOut
URL: https://www.javascriptbank.com/popup-on-mouseout-index.html
<script language="javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*///Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence featurefunction animatedcollapse(divId, animatetime, persistexpand, initstate){this.divId=divIdthis.divObj=document.getElementById(divId)this.divObj.style.overflow="hidden"this.timelength=animatetimethis.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie valuethis.contentheight=parseInt(this.divObj.style.height)var thisobj=thisif (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.loadanimatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height}else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.height=0 //just collapse content if CSS "height" attribute availableif (persistexpand)animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")}animatedcollapse.prototype._getheight=function(persistexpand){this.contentheight=this.divObj.offsetHeightif (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.height=0 //collapse contentthis.divObj.style.visibility="visible"}else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work withthis.divObj.style.height=this.contentheight+"px"}animatedcollapse.prototype._slideengine=function(direction){var elapsed=new Date().getTime()-this.startTime //get time animation has runvar thisobj=thisif (elapsed<this.timelength){ //if time run is less than specified lengthvar distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)this.divObj.style.height=distancepercent * this.contentheight +"px"this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)}else{ //if animation finishedthis.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or notthis.runtimer=null}}animatedcollapse.prototype.slidedown=function(){if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped runningif (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==0){ //if content is collapsedthis.startTime=new Date().getTime() //Set animation start timethis._slideengine("down")}}}animatedcollapse.prototype.slideup=function(){if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped runningif (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expandedthis.startTime=new Date().getTime()this._slideengine("up")}}}animatedcollapse.prototype.slideit=function(){if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==0)this.slidedown()else if (parseInt(this.divObj.style.height)==this.contentheight)this.slideup()}// -------------------------------------------------------------------// A few utility functions below:// -------------------------------------------------------------------animatedcollapse.curveincrement=function(percent){return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input}animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)var tasktype=(window.addEventListener)? tasktype : "on"+tasktypeif (target.addEventListener)target.addEventListener(tasktype, functionref, false)else if (target.attachEvent)target.attachEvent(tasktype, functionref)}animatedcollapse.getCookie=function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn ""}animatedcollapse.setCookie=function(name, value, days){if (typeof days!="undefined"){ //if set persistent cookievar expireDate = new Date()var expstring=expireDate.setDate(expireDate.getDate()+days)document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()}else //else if this is a session only cookiedocument.cookie = name+"="+value}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><p><b>Example 1:</b></p><a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a><div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;"><!--Your DIV content as follows --><h3>Content inside DIV!</h3><h4>Note: CSS height attribute defined</h4></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse1=new animatedcollapse("dog", 1000, false)</script><p><b>Example 2:</b></p><a href="javascript:collapse2.slideit()">Show/ Hide DIV</a><div id="cat" style="width: 300px; background-color: #99E0FB;"><!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV --><div style="padding: 0 5px"><h3>Content inside DIV!</h3><h3>Content inside DIV!</h3><h4>Note: No CSS height attribute defined. Persistence enabled.</h4></div></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse2=new animatedcollapse("cat", 800, true)</script><p><b>Example 3:</b></p><a href="javascript:collapse3.slidedown()">Slide Down</a> || <a href="javascript:collapse3.slideup()">Slide Up</a><div id="fish" style="width: 300px; height: 150px; background-color: #99E0FB;"><!--Your DIV content as follows --><h3>Content inside DIV!</h3><h4>Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.</h4></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse3=new animatedcollapse("fish", 1000, false, "block")</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->