Results 1 to 3 of 3

Thread: Sticky Note Script with Timer

  1. #1
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sticky Note Script with Timer

    1) Script Title: Sticky Note Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...stickynote.htm

    3) Describe problem:
    How can I make this script display the timer counting down? I'd like to place this in the lower left corner in this phrase
    " closing in xx seconds." All in bold. Is this possible?
    Thanks to the author.

    Don

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Check the source code

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <style type="text/css">
                
                #fadeinbox {
                    position: absolute;
                    width: 300px;
                    left: 0;
                    top: -400px;
                    border: 2px solid black;
                    background-color: lightyellow;
                    padding: 4px;
                    z-index: 100;
                    visibility: hidden;
                }
    			#msgbox{
    				width: 100%;
    				border: 1px solid gray;
    				background-color: #FFF7DF;
    				font-size: small;
    				float: left;
    			}
                
            </style>
            <script type="text/javascript">
                
                /***********************************************
                 * Sticky Note script-  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
                 ***********************************************/
                //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"
                
                var enablefade = "yes" //("yes" to enable fade in effect, "no" to disable)
                var autohidebox = ["no", 5] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
                var showonscroll = "yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
                var IEfadelength = 1 //fade in duration for IE, in seconds
                var Mozfadedegree = 0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
                ////////No need to edit beyond here///////////
                
                if (parseInt(displaymode) != NaN) 
                    var random_num = Math.floor(Math.random() * displaymode)
                
                function displayfadeinbox(){
                    var ie = document.all && !window.opera
                    var dom = document.getElementById
                    iebody = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body
                    objref = (dom) ? document.getElementById("fadeinbox") : document.all.fadeinbox
                    var scroll_top = (ie) ? iebody.scrollTop : window.pageYOffset
                    var docwidth = (ie) ? iebody.clientWidth : window.innerWidth
                    docheight = (ie) ? iebody.clientHeight : window.innerHeight
                    var objwidth = objref.offsetWidth
                    objheight = objref.offsetHeight
                    objref.style.left = docwidth / 2 - objwidth / 2 + "px"
                    objref.style.top = scroll_top + docheight / 2 - objheight / 2 + "px"
                    
                    if (showonscroll == "yes") 
                        showonscrollvar = setInterval("staticfadebox()", 50)
                    
                    if (enablefade == "yes" && objref.filters) {
                        objref.filters[0].duration = IEfadelength
                        objref.filters[0].Apply()
                        objref.filters[0].Play()
                    }
                    objref.style.visibility = "visible"
                    if (objref.style.MozOpacity) {
                        if (enablefade == "yes") 
                            mozfadevar = setInterval("mozfadefx()", 90)
                        else {
                            objref.style.MozOpacity = 1
                            controlledhidebox()
                        }
                    }
                    else 
                        controlledhidebox()
                }
                
                function mozfadefx(){
                    if (parseFloat(objref.style.MozOpacity) < 1) 
                        objref.style.MozOpacity = parseFloat(objref.style.MozOpacity) + Mozfadedegree
                    else {
                        clearInterval(mozfadevar)
                        controlledhidebox()
                    }
                }
                
                function staticfadebox(){
                    var ie = document.all && !window.opera
                    var scroll_top = (ie) ? iebody.scrollTop : window.pageYOffset
                    objref.style.top = scroll_top + docheight / 2 - objheight / 2 + "px"
                }
                
                function hidefadebox(){
                    objref.style.visibility = "hidden"
                    if (typeof showonscrollvar != "undefined") 
                        clearInterval(showonscrollvar)
                }
                
                function controlledhidebox(){
                    if (autohidebox[0] == "yes") {
                        var delayvar = (enablefade == "yes" && objref.filters) ? (autohidebox[1] + objref.filters[0].duration) * 1000 : autohidebox[1] * 1000
                        setTimeout("hidefadebox()", delayvar)
                    }
                }
                
                function initfunction(){
                    setTimeout("displayfadeinbox()", 100)
    				setTimeout(' recur()',100);
                }
                
                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("fadedin") == "" || displaymode == "always" || parseInt(displaymode) != NaN && random_num == 0) {
                    if (window.addEventListener) 
                        window.addEventListener("load", initfunction, false)
                    else 
                        if (window.attachEvent) 
                            window.attachEvent("onload", initfunction)
                        else 
                            if (document.getElementById) 
                                window.onload = initfunction
                    document.cookie = "fadedin=yes"
                }
                
                function recur(){
    				if(document.getElementById('msg').innerHTML == '1'){
    					hidefadebox();return false;
    				}else{
    					var tmp = document.getElementById('msg').innerHTML;
    					tmp = parseInt(tmp) - 1;
    					
    					document.getElementById('msg').innerHTML = tmp;
    					setTimeout('recur()',1000);
    				}
    			}
            </script>
        </head>
        <body>
            <DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
                INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.
                <br>
                Script  <a href="http://www.dynamicdrive.com">Dynamic Drive</a>
                <br>
    			<div id="msgbox">Dialog will be closed in <span id="msg">11</span> seconds</div>            
            </DIV>
        </body>
    </html>
    I've highlighted all the changes I've made which consists of the following:

    1. Introduced one ID CSS part.
    2. Added one JS function.
    3. Added on Div element in the sticky note content section
    4. Modified the initFunction a bit

    Let me know if you have any doubts regarding the made changes.

    Once you load the demo page it will hide the sticky note in 10 seconds, which can be changed for your requirement.

  3. #3
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    codeesploiter, Thanks!!
    I've been able to cut and paste your code in the proper areas and it works exactly how I need it to work.
    Where \ How do I change the length & Display of time?
    Thanks again.
    Don


    Quote Originally Posted by codeexploiter View Post

    Let me know if you have any doubts regarding the made changes.
    Once you load the demo page it will hide the sticky note in 10 seconds, which can be changed for your requirement.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •