นิยาย Free' ID Dream {closed}'' > ลำดับตอนที่ #16 : ID Dream ' Splashes. : Dek-D.com

ลำดับตอนที่ #16 : ID Dream ' Splashes.

อัปเดตล่าสุด 26 ก.ย. 54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9

//Version 1.9: June 7th, 2010':
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
//**2) Optimized script performance by caching header and content container references

var ddaccordion={
ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)

headergroup: {}, //object to store corresponding header group based on headerclass value
contentgroup: {}, //object to store corresponding content group based on headerclass value

preloadimages:function($images){
$images.each(function(){
var preloadimage=new Image()
preloadimage.src=this.src
})
},

expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
this.toggleone(headerclass, selected, "expand")
},

collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
this.toggleone(headerclass, selected, "collapse")
},

expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
var $headers=this.headergroup[headerclass]
this.contentgroup[headerclass].filter(':hidden').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},

collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
var $headers=this.headergroup[headerclass]
this.contentgroup[headerclass].filter(':visible').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},

toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
var $targetHeader=this.headergroup[headerclass].eq(selected)
var $subcontent=this.contentgroup[headerclass].eq(selected)
if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
$targetHeader.trigger("evt_accordion")
},

ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
var ajaxinfo=$targetHeader.data('ajaxinfo')

function handlecontent(content){ //nested function
   if (content){ //if ajax content has loaded
    ajaxinfo.cacheddata=content //remember ajax content
    ajaxinfo.status="cached" //set ajax status to cached
    if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
     $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
     ajaxinfo.status="complete" //set ajax status to complete
     callback() //execute callback function- expand this sub content
    }
   }
   if (ajaxinfo.status!="complete"){
    setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
   }
} //end nested function

if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
   $targetContent.html(this.ajaxloadingmsg)
   $targetContent.slideDown(config.animatespeed)
   ajaxinfo.status="loading" //set ajax status to "loading"
   $.ajax({
    url: ajaxinfo.url, //path to external menu file
    error:function(ajaxrequest){
     handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
    },
    success:function(content){
     content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
     handlecontent(content)
    }
   })
}
else if (ajaxinfo.status=="loading")
   handlecontent(ajaxinfo.cacheddata)
},

expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
var ajaxinfo=$targetHeader.data('ajaxinfo')
if (ajaxinfo){ //if this content should be fetched via Ajax
   if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
    this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
   else if (ajaxinfo.status=="cached"){
    $targetContent.html(ajaxinfo.cacheddata)
    ajaxinfo.cacheddata=null
    ajaxinfo.status="complete"
   }
}
this.transformHeader($targetHeader, config, "expand")
$targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
   config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
   if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
    var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
    if (targetLink) //if this header is a link
     setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
   }
})
},

collapseit:function($targetHeader, $targetContent, config, isuseractivated){
this.transformHeader($targetHeader, config, "collapse")
$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
},

transformHeader:function($targetHeader, config, state){
$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
Class((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
   $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
   $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
}
else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
   $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
else if (config.htmlsetting.location=="suffix")
   $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
},

urlparamselect:function(headerclass){
var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
if (result!=null)
result=RegExp.$1.split(',')
return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
},

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
},

setCookie:function(name, value){
document.cookie = name + "=" + value + "; path=/"
},

init:function(config){

//generate CSS to hide contents
//CSS class to hide ajax link

jQuery(document).ready(function($){
ddaccordion.urlparamselect(config.headerclass)
var persistedheaders=ddaccordion.getCookie(config.headerclass)
ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
var $headers=ddaccordion.headergroup[config.headerclass]
var $subcontents=ddaccordion.contentgroup[config.headerclass]
config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
config.revealtype=config.revealtype || "click"
config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
if (config.revealtype=="clickgo"){
   config.postreveal="gotourl" //remember added action
   config.revealtype="click" //overwrite revealtype to "click" keyword
}
if (typeof config.togglehtml=="undefined")
   config.htmlsetting={location: "none"}
else
   config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
   expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
   expandedindices=[]
if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
   expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
   expandedindices=[0]
$headers.each(function(index){ //loop through all headers
   var $header=$(this)
   if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
    $('<span class="accordprefix"></span>').prependTo(this)
    $('<span class="accordsuffix"></span>').appendTo(this)
   }
   $header.attr('headerindex', index+'h') //store position of this header relative to its peers
   $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
   var $subcontent=$subcontents.eq(index)
   var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
   if ($hiddenajaxlink.length==1){
    $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
   }
   var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
   if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
    ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
    lastexpanded={$header:$header, $content:$subcontent}
   } //end check
   else{
    $subcontent.hide()
    config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
    ddaccordion.transformHeader($header, config, "collapse")
   }
})
$headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
    var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
    if ($subcontent.css('display')=="none"){
     ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
     if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
      ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
     }
     lastexpanded={$header:$(this), $content:$subcontent}
    }
    else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
     ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
    }
   })
$headers.bind(config.revealtype, function(){
   if (config.revealtype=="mouseenter"){
    clearTimeout(config.revealdelay)
    var headerindex=parseInt($(this).attr("headerindex"))
    config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
   }
   else{
    $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
    return false //cancel default click behavior
   }
})
$headers.bind("mouseleave", function(){
   clearTimeout(config.revealdelay)
})
config.oninit($headers.get(), expandedindices)
$(window).bind('unload', function(){ //clean up and persist on page unload
   $headers.unbind()
   var expandedindices=[]
   $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
    expandedindices.push($(this).attr('contentindex'))
   })
   if (config.persiststate==true && $headers.length>0){ //persist state?
    expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
    ddaccordion.setCookie(config.headerclass, expandedindices)
   }
})
})
}
}

//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))

ddaccordion.init({
headerclass: "toggle1", //Shared CSS class name of headers group
contentclass: "toggle2", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

.toggle1 {
border-bottom: 3px black solid;
width:220px;
position:relative;
top:150px;
left:150px;
text-transform:uppercase;
color:white;
font:11px Arial;
text-align:center;
letter-spacing:5px;
}

.toggle2 {
width:220px;
position:relative;
top:150px;
left:150px;
color:white;
font:10px Arial;
padding:4px;
}

::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color: #333333;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}

::-webkit-scrollbar {
width:8;
height:10px;
top:0px;
background:black;
margin-right:5px;
}

#navbar-iframe {
display:none;
}

::-moz-selection {
color:white;
}

::selection {
color:white;
}

::-webkit-selection {
color:white;
}

body {
background:url(http://vwbora25.files.wordpress.com/2009/11/buds2crop.jpg) black no-repeat;
font: 9px Arial;
color:#ff9900;
cursor:crosshair;
}

a {
text-decoration:none;
text-transform:lowercase;
font:10px Arial;
color:white;
letter-spacing:2px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
}

a:hover {
color:#ff9900;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
}

blockquote {
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
color:white;
font:10px Arial;
padding:3px;
background:#ff9900;
text-align:right;
}

blockquote:first-letter {
font:30px Script MT Bold;
color:silver;
}

h4 {
margin-top:-10px;
text-align:right;
text-transform:none;
color:white;
font:12px Arial;
letter-spacing:0px;
padding:3px;
text-transform:uppercase;
}

h3 {
color:#ffcc33;
font: 9px Arial;
text-transform:uppercase;
text-align:right;
letter-spacing:2px;
margin-top:-20px;
padding:2px;
background:#f8f8f8;
}

h2 {
margin-top: -3px;
color:gray;
font:10px Arial;
}

p {
margin-top: 0px;
color:white;
font:10px Arial;
}

h1 {
padding:3px;
color:white;
font:12px Arial;
text-shadow:0px 0px 1px white;
letter-spacing:2px;
padding:1px;
background:silver;
border-bottom:3px solid gray;
text-transform:uppercase;
text-align:center;
}

.sidenavis {
background:white;
opacity:0.8;
text-align:left;
position:absolute;
top:130px;
left:390px;
width:500px;
padding:7px;
overflow: auto;
height:400px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}

.image {
bottom:150px;
left:665px;
position:fixed;
}

</style>

</head>

<body>

<div class="sidenavis">
<Blogger>
<h1><$BlogItemTitle$></h1><br>
<h3><$BlogItemDateTime$> @ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></h3>
<br><h2><$BlogItemBody$></h2><br>
<br><br>
<right><BlogItemCommentsEnabled>
<div style="background:#ff9900;text-align:right;"><a href="<$BlogItemCommentCreate$>" style="color:white;">Say something?
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></div>
</Blogger><br><br>

</div>

<div class="toggle1" style="margin-top:-10px;padding:5px;background:#333333;">Profile</div>
<div class="toggle2" style="margin-top:0px;padding:5px;background:#666666;">
<br>
<h4 style="background:#ff9900">Profile?</h4>
<p>
<img src="http://data.whicdn.com/images/15104510/3410591_lStj0zbS_c_large.jpg" width="50" style="margin:5px;padding:3px; border: #999999 solid 1px;float:left;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non congue est. Nullam volutpat libero et nibh scelerisque vel vestibulum libero varius.
Sed blandit molestie viverra.
Vivamus est arcu, pulvinar in aliquam a, vehicula in massa. Phasellus eu urna a magna ultricies mattis. Nullam consectetur lectus vel quam vulputate varius. Cras rhoncus porta massa sit amet congue.</p>
<br><br><b>as bold</b> / <i>as italic</i> / <u>as underline</u> / <s>as strikethrough</s> / <big>as BIG</big> / <small>as small</small> / <a>as link</a><br>
</div>

</div>
</div>

<br>

<div class="toggle1" style="margin-top:-10px;padding:5px;background:#333333">Links</div>
<div class="toggle2" style="margin-top:0px;padding:5px;background:#666666;">
<br>
<h4 style="background:#ff9900">My friends</h4>
<p>
This is the list of my favourite blogs / friends / etc. <br><br>
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /
<a href="http://">Da Best</a> /

</p>
</div>
</div>

<br>

<div class="toggle1" style="margin-top:-10px;padding:5px;background:#333333;">Tagboard</div>
<div class="toggle2" style="margin-top:0px;padding:5px;background:#666666;">
<br>
<h4 style="background:#ff9900">Tagboard</h4>
<p>Tagboard here. No more than 220px of width and 300px of height. :P</p>
</div>
</div>

<br>

<div class="toggle1" style="margin-top:-10px;padding:5px;background:#333333;">Credits</div>
<div class="toggle2" style="margin-top:0px;padding:5px;background:#666666;">
<br>
<h4 style="background:#ff9900">Thanks!</h4>
<p>Layout by: <a href="http://www.blogskins.com/me/nemo1">Jos</a><br>
Images: <a href="http://weheartit.com/entry/15104510">&hearts;</a> <a href="http://vwbora25.files.wordpress.com/2009/11/buds2crop.jpg">&hearts;</a><br>
Best viewed: <a href="http://google.com/chrome">GC</a><br></p>
<br>
<center><select style="border: 0px none; padding: 5px; background:#333333;font-family: Arial;font-size: 10px;color: white; width:220px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="<$BlogArchiveURL$>">rewind me</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</div>
</div>

<br>

</body>
</html>

Qreaz. 10

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #16 : ID Dream ' Splashes.

'equation ?

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #16 : ID Dream ' Splashes.

'equation ?

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น