Blog
About
- About me
- Layers
- This site
- Credits
- Faq
- Link this Site!
Tutorials
- Beauty Tips
- Cute Pop-Up
- CSS
- Favicon
- Get crafty
- Lucky Stars
- kao-ani
- make a quiz
- Papercrafts
- Pixeling
- Pixel-a-smiley
- Protection
- Tagboard
- Webdesign Tips
For You
- Avatars
- Emoticons
- Games
- Fonts | pixel
- Fonts | cute
- Letterpaper
- Plugboard
- Screenpals
- Wallpaper
- WinampSkin
PixelGoods
- Rules/Password
- Adoptions
- adopt a poo
- calendars
- clocks
- cursors
- emoticons
- icons
- kao-ani
- minicliques
- pillpals
Network
Contact
- E-mail
- Guestbook
Radio

Tutorials

TITLE

You can put your text, images or any HTML code you want here.

How to make a cute pop-up window?

Don't like those big pop-up windows? This is a small version that will appear when your page opens, so it's nice to write your annoucements/news in.

Put this code in the head of your html document where you want your pop-up window to appear:

<style type="text/css"> #fadeinbox{ position:absolute; width: 150px; border: 1px solid black; background-color: #CEF3FF; padding: 8px; visibility:hidden; font-family : Tahoma, Verdana; font-size : 11px; font-weight : normal; color : #666666; } a:link, a:visited { color : #0099CC; text-decoration : none; } </style> <script type="text/javascript"> /*********************************************** * Sticky Note script- Dynamic Drive DHTML code library (www.dynamicdrive.com) * Go to http://www.dynamicdrive.com/ for full source code ***********************************************/ var displaymode="always" //(always or oncepersession) var enablefade="no" //("yes" to enable fade in effect, "no" to disable) var autohidebox=["yes", 10] //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) ////////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) objref.style.visibility="visible" if (objref.style.MozOpacity){ mozfadevar=setInterval("mozfadefx()", 90) } else 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) } 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) } </script>

Click and save this image (close.gif) in the same directory as your html document. Of course you can also make you own image and call it close.gif.
Place this code right after the body tag (<body>)

<DIV id="fadeinbox"><br /> <div align="right">TITLE <a href="#" onClick="hidefadebox();return false"><img src="close.gif" width="11" height="11" border="0"></a><br /> </div><br><br /> <div align="justify">You can put your text, images or any HTML code you want here.</div><br><br /> </DIV>

Now all you have to do is to change the colours to your likings by adjusting the stylesheet part in the head and... don't forget to write your own text (^__^)
By changing the number of this line in the head: var autohidebox=["yes", 10] You'll determinate how many seconds it will take for the window to disappear automatically.

My Cam

- Tip of the month: Smilescan - Bibi's Funny House - Brunas - Bubblessoc - Candied - Hungry for pixels - Nitrome - Pure Essence - Tado - More cute links...

Pictures