Sie sind auf Seite 1von 7

<html>

<head> <title> â </title>


<link rel="stylesheet" type="text/css" href="dddropdownpanel.css" />
<script type="text/javascript" src="dddropdownpanel.js">
/***********************************************
* DD Drop Down Panel- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com
)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s m
ore
***********************************************/
</script>
<script>
function ddpanel(setting)
{setting.dir="up" //initial state of panel (up="contracted")
if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down
"){
setting.dir="down"}
if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
document.write('<style type="text/css">\n')
document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.init
ial) + 'px; overflow:hidden}\n')
document.write('</style>\n')}
setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
this.setting=setting
if (setting.pointerimage.enabled){ //preload images
var img1=new Image(), img2=new Image()
img1.src=setting.pointerimage.src[0]
img2.src=setting.pointerimage.src[1]}
var thispanel=this
if (window.addEventListener) //if non IE browsers, initialize panel window.onloa
d
ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
else //else if IE, add 100 millisec after window.onload before initializing
ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(s
etting)}, 100)}, "load")
ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")}
ddpanel.events_array=[] //object array to contain events created by script
ddpanel.addEvent=function(target, functionref, tasktype)
{var evtmodel=target.addEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
var i=this.events_array.push({ //store event info in ddpanel.events_array[] and
return current event's index within array
target: target,
tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
listener: evtmodel=="ie"? function(){return functionref.call(target, window.even
t)} : functionref
})-1
target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener,
evtmodel=="w3c"? false : null)}
ddpanel.removeEvent=function(target, functionref, tasktype)
{var evtmodel=target.removeEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)}
ddpanel.getCookie=function(Name)
{var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name
/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null}
ddpanel.setCookie=function(name, value){document.cookie = name+"=" + value + ";p
ath=/"}
ddpanel.addpointer=function(target, className, imagesrc)
{var pointer=document.createElement("img")
pointer.src=imagesrc
pointer.className=className
pointer.style.borderWidth=0
target.appendChild(pointer)
return pointer}
ddpanel.prototype={
togglepanel:function(dir){ //public function that toggles the panel's state. Opt
ional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
var pcontent=setting.pcontent, dir=setting.dir
pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.statecon
fig.initial
pcontent.style.height=pcontent._currentheight+"px"
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"}
ddpanel.setCookie(setting.ids[0], setting.dir)},
togglepanelplus:function(dir){ //public function that toggles the panel's state
w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
if (setting.pointerimage.enabled)
setting.arrow.style.visibility="hidden"
clearTimeout(setting.revealtimer)
this.revealcontent()},
revealcontent:function()
{var setting=this.setting
var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actu
alheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=set
ting.dir
if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
pcontent.style.height=newH+"px"
pcontent._currentheight=newH}
else{if (setting.pointerimage.enabled)
{setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"}
return}
var thispanel=this
setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)},
initpanel:function()
{var setting=this.setting
var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
pcontent.style.overflow="scroll"
pcontent._actualheight=pcontent.scrollHeight
setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
pcontent.style.overflow="hidden"
pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.
stateconfig.initial
var thispanel=this
ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab
is clicked on
if (setting.animate.enabled)
thispanel.togglepanelplus()
else
thispanel.togglepanel()
if (e.preventDefault) e.preventDefault()
return false}, "click")
if (setting.pointerimage.enabled)
{var pointer1=new Image(), pointer2=new Image()
pointer1.src=setting.pointerimage.src[0]
pointer2.src=setting.pointerimage.src[1]
setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointeri
mage", setting.pointerimage.src[setting.dir=="down"? 1:0])}
if (setting.closepanelonclick.enabled){ //assign click behavior when panel conte
nt is clicked on (links within panel or elements with class "closepanel"
ddpanel.addEvent(pcontent, function(e)
{var target=e.srcElement || e.target
if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName=="A" ||
(target.parentNode && target.parentNode.tagName=="A"))
{thispanel.togglepanel("up")}
}, "click")}},
uninit:function()
{var setting=this.setting
if (setting.stateconfig.persiststate){
ddpanel.setCookie(setting.ids[0], setting.dir)}
for (prop in setting){setting[prop]=null}}
} //end of ddpanel object
//initialize instance of DD Drop Down Panel:
var defaultpanel=new ddpanel({
ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, cont
ent DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal a
mount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int bet
ween 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["http://i178.photobucket.com/albums/w274/sh
iroshinwa/arrow-down.gif", "http://i178.photobucket.com/albums/w274/shiroshinwa/
arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with C
SS class="closepanel" within container is clicked on?
})
</script>
<style>
#navbar-iframe{display:none;}
::selection{color:white; background:#BDBDBD;}
a{font-weight:none; text-decoration:none; color:#424242;}
a:hover{font-weight:none; text-decoration:none; color:#848484;}
a.escape{font-weight:none;text-decoration:none; display:block; color:#1C1C1C; ba
ckground-color:#FCFCFC; border-right:1px solid #e4e4e4; border-bottom:1px solid
#e4e4e4; padding:2;}
a.escape:hover{font-weight:none; text-decoration:none; color:#848484; background
-color:white; border-top:1px solid #e4e4e4; border-left:1px solid #e5e5e5; borde
r-right:none; border-bottom:none;}
a.prof{font-weight:none; text-decoration:none; font-family:courier new; color:#B
DBDBD;}
a.prof:hover{font-weight:none; text-decoration:none; color:#585858;}
body{background:url(http://i178.photobucket.com/albums/w274/shiroshinwa/00009k2x
.png) fixed repeat;
font-family:arial; font-size:8pt; color:black;}
table{font-family:arial; font-size:8pt; color:black;}
#blogt1{font-family:georgia; font-size:15pt; color:#821122; text-transform:lower
case; border-bottom:2px dashed #2e2e2e; line-height:80%; letter-spacing:-2pt;}
#blogt2{font-family:georgia; font-size:15pt; color:#C59A6F; text-transform:lower
case; border-bottom:2px dashed #2e2e2e; line-height:80%; letter-spacing:-2pt;}
#sideblogt{font-family:georgia; font-size:15pt; color:#821122; text-transform:lo
wercase; border-bottom:2px dashed #f2f2f2; line-height:80%; letter-spacing:-2pt;
}
#date{font-family:georgia; font-size:15pt; color:#C59A6F; text-transform:lowerca
se; border-bottom:2px dashed #f2f2f2; line-height:80%; letter-spacing:-2pt;}
#head{font-family:georgia; font-size:10pt; color:#585858; text-transform:lowerca
se; border-bottom:2px dashed #f2f2f2; line-height:80%; letter-spacing:6pt;}
#panel{color:white;}
#time{font-family:georgia; font-size:9pt; color:#f2f2f2; text-transform:lowercas
e;
background-image:url(http://i178.photobucket.com/albums/w274/shiroshinwa/00009k2
x.png); text-align:center; letter-spacing:-1pt;}
#time:hover{color:#CDA884;}
#myname{font-family:arial; font-size:20pt; color:#585858; letter-spacing:-2pt; l
ine-height:80%;}
#creds{background:black; color:#e4e4e4; width:730px; text-align:left; padding:5;
}
#header{font-family:georgia; font-size:20pt; letter-spacing:3pt; text-align:righ
t; width:730px;}
#header2{font-family:georgia; font-size:12pt; letter-spacing:4pt; text-align:rig
ht; width:730px; background:black; color:white; padding-right:10;}
blockquote{padding:10px; background-image:url(http://i178.photobucket.com/albums
/w274/shiroshinwa/00009k2x.png); background-repeat:repeat; border-left:10px soli
d #585858;}
blockquote:hover{border-left:10px solid #C59A6F;}
.ddpanel .ddpanelcontent{color:white;
font-size:9pt;
background:url(http://i178.photobucket.com/albums/w274/shiroshinwa/pattern3-1.gi
f) fixed repeat;
background-position:center;}
.ddpanel .ddpaneltab{margin-right:20px; font:10pt normal arial;}
.ddpanel .ddpaneltab a{float:right; background:black; -webkit-border-bottom-righ
t-radius:5; -webkit-border-bottom-left-radius:5; -moz-border-radius:0 0 5 5;}
.ddpanel .ddpaneltab a span{float:left; display:block; background:transparent; p
adding:1 12 4 13; cursor:help;}
.ddpanel .ddpaneltab a span img.pointerimage{margin-top:2px; margin-left:5px;}
.ddpanel .ddpaneltab a:hover{padding-top:8;}
.ddpanel .ddpaneltab a:active, .ddpanel .ddpaneltab a:focus{outline:0;}
.ddpanel .ddpaneltab a:hover span{background-color:;}
</style>
</head>
<body>
<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<p style="padding:10;">
<table width="730" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="530" valign="top" style="border-right:1px solid #1C1C1C; padding-righ
t:5;">
<div id="blogt1">Profile</div><br>
<div id="panel">
<img src="http://i45.tinypic.com/2pzd2e8.jpg" align="left" style="padding-right:
5px;">
<span id="myname">YOURNAME</span><br>
My name's Harry Potter and I attended Hogwarts when I was young.<br>
I love riding on brooms and going <i>swish</i>! in the midair.
Life has always been a huge roller coaster ride for me and now I'm really gettin
g tired of it.
I just wanna put everything down and let go.
<br>
<div align="right">
<a class="prof" href="mailto:YOUEMAILHERE"title="Email">one</a>
<a class="prof" href="http://YOURFACEBOOKLINK"title="Facebook">two</a>
<a class="prof" href="http://YOURBLOGSKINLINK"title="Blogskins">three</a>
<br></div>
</div></td>
<td width="210" valign="top" style="border-left:1px solid #1C1C1C; padding-left:
5;">
<div id="blogt2">Music</div><br>
<div id="panel">
<center>
Your music code here! =)
<center>
</div>
</td>
</tr>
</table>
</p>
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span></span></a>
</div>
</div>
<div align="center">
<div id="header">This innocence is brilliant</div>
<div id="header2">please don't go away</div>
</div>
<table width="750" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="550" valign="top" style="background:white; padding:10;">
<Blogger>
<div id="date"><BlogDateHeader><$BlogDateHeaderDate$>
</BlogDateHeader></div>
<div id="head"><$BlogItemTitle$></div><br>
<$BlogItemBody$>
<div id="time"><$BlogItemDateTime$></div>
<br>
</Blogger>
</td>
<td width="200" valign="top" style="background:white; padding:10;">
<div id="sideblogt">Tagbox</div><br>
Your tagbox code here =)
For perfection, width should be about 190px or so.
<br>
<br>
<div id="sideblogt">Affiliates</div><br>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<br>
</td>
</tr>
</table>
<div align="center">
<div id="creds">
Layout by <a href="http://www.blogskins.com/me/16thday">16thday</a><br>
Resources <a href="http://www.dynamicdrive.com/"title="DDPanel">One</a>
<a href="http://fivepointsapart.blogspot.com"title="Backgrounds">Two</a>
<a href="http://html-color-codes.info/"title="Colors">Three</a><br>
</div>
<br><br>
</body>
</html>

Das könnte Ihnen auch gefallen