help with Sticky Note script v2.0
I fixed it! All I had to do was add
pos:['right', 'bottom'],
to the 1st sticky note.
Below is my original post.
1) Script Title:
Sticky Note script v2.0
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...stickynote.htm
3) Describe problem:
How do I make the 1st sticky note with the spaceship to appear on the BOTTOM LEFT HAND SIDE outside of the content DIV and how do I make
the 2nd sticky note to appear on the BOTTOM RIGHT HAND SIDE outside of the content DIV that way the 2 sticky notes will be displayed on top of my background.
Right now, it appears that the 1st sticky note is the only note that needs to be positioned.
The bottom right sticky note looks good.
Please test your code before replying
to this post to make sure that your code works.
Please open the attachments to get the java script files and text file.
Thanks so much for your help.
My website html and css code is as follows:
<style type="text/css">
#container{
border: 4px solid #FF3;
width: 965px;
margin-right: auto;
margin-left: auto;
}
body {
background-image: url(mybghere.com);
background-repeat: repeat;
background-color: #f7180c;
}
.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 src="java/stickynote.js">
/***********************************************
* Sticky Note Script (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 mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always',
})
var mysticky2=new stickynote({
content:{divid:'stickynote2', source:'stickydata.txt'},
pos:['right', 'bottom'],
showfrequency:'always' //<--no comma following last setting!
})
</script>
</head>
<body>
<div id="container">
This is my home page.<br>
<br>
How do I make the 1st sticky note with the spaceship to appear on the BOTTOM LEFT HAND SIDE outside of the content DIV<br>
and how do I make the 2nd sticky note to appear on the BOTTOM RIGHT HAND SIDE outside of the content DIV<br>
that way the 2 sticky notes will be displayed on top of my background.<br>
<br>
Right now, the 2 sticky notes are showing inside of the content DIV which is incorrect.<br>
Please test your code before replying to this post to make sure that your code works.<br>
Thanks so much for your help.
<div id="stickynote1" class="stickynote">
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />
<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">[Hide Box]</a>
This is my 1st sticky note that I want to display on the BOTTOM LEFT HAND SIDE outside of the content DIV.<br>
</div>
</div>
<div id="stickynote2" class="stickynote">
This is my 2nd sticky note that I want to display on the BOTTOM RIGHT HAND SIDE outside of the content DIV. <a href="#" onClick="mysticky2.showhidenote('hide');return false">[Hide Box]</a>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks