PDA

View Full Version : Resolved Sticky Note - Only on request



Luys
05-31-2012, 09:03 AM
1) Script Title: Sticky Note script v2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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

vwphillips
05-31-2012, 10:17 AM
<!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>

Luys
05-31-2012, 01:00 PM
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