Results 1 to 3 of 3

Thread: Sticky Note - Only on request

  1. #1
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default Sticky Note - Only on request

    1) Script Title: Sticky Note script v2.0

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

    3) Describe problem:

    I would like to use all the features of this script in some cases "without" any pop-up window whenever the page loads. That is, only with severals links like

    Show | Hide sticky note 1 etc...

    What should I put in showfrequency: 'always', obviously NNOOOO

    I try '0' and 'none' but I think perhaps this is "contra natura" of this script.

    Any idea?

    Thanks in advance for your help!

    Luys
    Last edited by Luys; 06-01-2012 at 10:31 AM. Reason: Solve some nonsenses...

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    .stickynote{
    position:absolute;
    visibility:hidden;
    width: 300px;
    border: 2px solid black;
    background-color: lightyellow;
    padding: 4px;
    box-shadow: 3px 3px 8px #818181;
    -webkit-box-shadow: 3px 3px 8px #818181;
    -moz-box-shadow: 3px 3px 8px #818181;
    }
    
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    
    <script >
    
    /* Sticky Note Script v2.0
    * Created: Feb 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    
    jQuery.noConflict()
    
    function stickynote(setting){
    	var thisobj=this
    	this.cssfixedsupport=!document.all || document.all && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //check for CSS fixed support
    	this.reposevtstring='resize.' + setting.content.divid + (!this.cssfixedsupport? ' scroll.' + setting.content.divid : '')
    	this.s=jQuery.extend({content:{divid:null, source:'inline'}, pos:['center', 'center'], hidebox:0, showfrequency:'always', fixed:true, fade:true}, setting)
    	jQuery(function($){ //on document.ready
    		if (setting.content.source=="inline")
    			thisobj.init($, setting)
    		else
    			thisobj.loaddata($, setting)
    	})
    }
    
    stickynote.prototype={
    
    	positionnote:function($, x, y){
    		var $note=this.$note
    		var windowmeasure={w:$(window).width(), h:$(window).height(), left:$(document).scrollLeft(), top:$(document).scrollTop()} //get various window measurements
    		var notedimensions={w:$note.outerWidth(), h:$note.outerHeight()}
    		var xpos=(x=="center")? windowmeasure.w/2-notedimensions.w/2 : (x=="left")? 10 : (x=="right")? windowmeasure.w-notedimensions.w-25 : parseInt(x)
    		var ypos=(y=="center")? windowmeasure.h/2-notedimensions.h/2 : (y=="top")? 10 : (y=="bottom")? windowmeasure.h-notedimensions.h-25 : parseInt(y)
    		xpos=(this.cssfixedsupport && this.s.fixed)? xpos : xpos+windowmeasure.left
    		ypos=(this.cssfixedsupport && this.s.fixed)? ypos : ypos+windowmeasure.top
    		$note.css({left:xpos, top:ypos})
    	},
    
    	showhidenote:function(action, callback){
    		var $=jQuery
    		var thisobj=this
    		if (action=="show"){
    			this.$note.css('zIndex', stickynote.startingzindex++)
    			this.positionnote($, this.s.pos[0], this.s.pos[1])
    			if (this.s.fixed){
    				$(window).bind(this.reposevtstring, function(){thisobj.positionnote(jQuery, thisobj.s.pos[0], thisobj.s.pos[1])})
    			}
    			this.$note.fadeIn(this.s.fade? 500 : 0, function(){
    				thisobj.positionnote($, thisobj.s.pos[0], thisobj.s.pos[1])
    				if (typeof callback=="function")
    					callback()
    				if (document.all && this.style && this.style.removeAttribute)
    					this.style.removeAttribute('filter') //fix IE clearType problem
    			})
    		}
    		else if (action=="hide"){
    			this.$note.hide()
    			if (this.s.fixed){
    				$(window).unbind(this.reposevtstring)
    			}
    		}
    	},
    
    	loaddata:function($, setting){
    		var thisobj=this
    		var url=setting.content.source
    		var ajaxfriendlyurl=url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
    		$.ajax({
    			url: ajaxfriendlyurl, //path to external content
    			async: true,
    			error:function(ajaxrequest, e){
    				alert('Error fetching Ajax content.\nError Status: '+e.status+'\nServer Response: '+ajaxrequest.responseText)
    			},
    			success:function(content){
    				$(document.body).append(content)
    				thisobj.init($, setting)
    			}
    		})
    	},
    
    	init:function($, setting){
    		var thisobj=this
    		this.$note=$('#'+setting.content.divid)
    		if (this.s.fixed && this.cssfixedsupport){
    			this.$note.css({position:'fixed'})
    		}
    		this.$note.css({visibility:'visible', display:'none'})
    		var showfrequency=this.s.showfrequency
    		var randomnumber=Math.floor(Math.random()*showfrequency)
    		if ((showfrequency=="session" && !stickynote.routines.getCookie(this.s.divid+"_persist")) || showfrequency=="always" || (!isNaN(randomnumber) && randomnumber==0)){
    			if (showfrequency=="session")
    				stickynote.routines.setCookie(this.s.divid+"_persist", 1)
    			this.showhidenote("show", this.s.hidebox>0? function(){setTimeout(function(){thisobj.showhidenote("hide")}, thisobj.s.hidebox*1000)} : null)
    		}
    	}
    }
    
    stickynote.startingzindex=100
    
    stickynote.routines={
    
    	getCookie:function(Name){
    		var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
    		return (document.cookie.match(re))? document.cookie.match(re)[0].split("=")[1] : null //return cookie value if found or null
    	},
    
    	setCookie:function(name, value, days){
    		var expirestr=''
    		if (typeof days!="undefined") //if set persistent cookie
    			expirestr="; expires="+expireDate.setDate(new Date().getDate()+days).toGMTString()
    		document.cookie = name+"="+value+"; path=/"+expirestr
    	}
    }
    </script>
    
    <script>
    
    var mysticky=new stickynote({
    	content:{divid:'stickynote1', source:'inline'},
    	showfrequency:'never',
    	hidebox:0
    })
    
    
    </script></head>
    
    <body>
    <a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a> <a href="#" onClick="mysticky.showhidenote('show');return false">Show Box</a>
    <div id="stickynote1" class="stickynote">
    <img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />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.
    
    <div align="right">
    <a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
    </div>
    
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Luys (05-31-2012)

  4. #3
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default

    Thank you so much vwphillips for your quick answer!
    Till now I was trying your StickyNote code in combination with another one, but there is an incompatibility issue (or perhaps I have no the necessary skill to build the page correctly). Your approach is too much complicated to me!

    "Moltes grącies". Best regards from Catalonia.

    Luys

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
  •