Část první: (měla by se vkládat mezi <head> a </head>, mám to však vyzkoušeno i s vložením na samostatnou stránku)
<style type="text/css">
#dhtmlgoodies_leftPanel{ /* Styling the help panel */
background-color:#3c94c8; /* Blue background color */
color:#FFF; /* White text color */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif /* FONT */
/* You shouldn't change these 5 options unless you need to */
height:100%;
left:0px;
z-index:10;
position:absolute;
display:none;
}
#dhtmlgoodies_leftPanel #leftPanelContent{
padding:0px;
}
#dhtmlgoodies_leftPanel .closeLink{ /* Layout of close link */
padding-left:2px;
padding-right:2px;
background-color:#FFF;
position:absolute;
top:2px;
right:2px;
border:1px solid #000;
color:#000;
font-size:0.8em;
}
#dhtmlgoodies_leftPanel .closeLink:hover{ /* Close link text - mouseover effect*/
color:#FFF;
background-color:#000;
}
</style>
<script type="text/javascript">
/**TOTO MŮŽEŠ MĚNIT***/
var panelWidth = 150; // šířka panelu
var slideSpeed = 15; // rychlost panelu vyšší číslo – rychlejší panel
var slideTimer = 10; // zpoždění panelu - naopak
var slideActive = true; // aktivní panel? (true/false)
var initBodyMargin = 0; // odsazení panelu od kraje okna zleva, nebo shora
var pushMainContentOnSlide = false; // MÁ SE ODSUNOUT STRÁNKA?
var panelPosition = 0; // 0 = left , 1 = top
/* ODSUD DOLU V ČÁSTI 1 HODNOTY NEMĚNIT !!! */
var slideLeftPanelObj=false;
var slideInProgress = false;
var startScrollPos = false;
var panelVisible = false;
function initSlideLeftPanel(expandOnly)
{
if(slideInProgress)return;
if(!slideLeftPanelObj){
if(document.getElementById('dhtmlgoodies_leftPanel')){ // Object exists in HTML code?
slideLeftPanelObj = document.getElementById('dhtmlgoodies_leftPanel');
if(panelPosition == 1)slideLeftPanelObj.style.width = '100%';
}else{ // Object doesn't exist -> Create <div> dynamically
slideLeftPanelObj = document.createElement('DIV');
slideLeftPanelObj.id = 'dhtmlgoodies_leftPanel';
slideLeftPanelObj.style.display='none';
document.body.appendChild(slideLeftPanelObj);
}
if(panelPosition == 1){
slideLeftPanelObj.style.top = "-" + panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
slideLeftPanelObj.style.height = panelWidth + 'px';
}else{
slideLeftPanelObj.style.left = "-" + panelWidth + 'px';
slideLeftPanelObj.style.top = '0px';
slideLeftPanelObj.style.width = panelWidth + 'px';
}
if(!document.all || navigator.userAgent.indexOf('Opera')>=0)slideLeftPanelObj.style.position = 'fixed';;
}
if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
}
var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
}
var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
}
slideLeftPanelObj.style.display='block';
if(panelPosition==1)
startScrollPos = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
else
startScrollPos = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
if(leftPos<(0+startScrollPos)){
if(slideActive){
slideLeftPanel(slideSpeed);
}else{
document.body.style.marginLeft = panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
}
}else{
if(expandOnly)return;
if(slideActive){
slideLeftPanel(slideSpeed*-1);
}else{
if(panelPosition == 0){
if(pushMainContentOnSlide)document.body.style.marginLeft = initBodyMargin + 'px';
slideLeftPanelObj.style.left = (panelWidth*-1) + 'px';
}else{
if(pushMainContentOnSlide)document.body.style.marginTop = initBodyMargin + 'px';
slideLeftPanelObj.style.top = (panelWidth*-1) + 'px';
}
}
}
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0){
window.onscroll = repositionHelpDiv;
repositionHelpDiv();
}
window.onresize = resizeLeftPanel;
}
function resizeLeftPanel()
{
if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
}
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
}else if(document.body.clientWidth){
slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
}
}
}
function slideLeftPanel(slideSpeed){
slideInProgress =true;
var scrollValue = 0;
if(panelPosition==1)
var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
else
var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
leftPos+=slideSpeed;
okToSlide = true;
if(slideSpeed<0){
if(leftPos < ((panelWidth*-1) + startScrollPos)){
leftPos = (panelWidth*-1) + startScrollPos;
okToSlide=false;
}
}
if(slideSpeed>0){
if(leftPos > (0 + startScrollPos)){
leftPos = 0 + startScrollPos;
okToSlide = false;
}
}
if(panelPosition==0){
slideLeftPanelObj.style.left = leftPos + startScrollPos + 'px';
if(pushMainContentOnSlide)document.body.style.marginLeft = leftPos - startScrollPos + panelWidth + 'px';
}else{
slideLeftPanelObj.style.top = leftPos + 'px';
if(pushMainContentOnSlide)document.body.style.marginTop = leftPos - startScrollPos + panelWidth + 'px';
}
if(okToSlide)setTimeout('slideLeftPanel(' + slideSpeed + ')',slideTimer); else {
slideInProgress = false;
if(slideSpeed>0)panelVisible=true; else panelVisible = false;
}
}
function repositionHelpDiv()
{
if(panelPosition==0){
var maxValue = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
slideLeftPanelObj.style.top = maxValue;
}else{
var maxValue = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
slideLeftPanelObj.style.left = maxValue;
var maxTop = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(!slideInProgress)slideLeftPanelObj.style.top = (maxTop - (panelVisible?0:panelWidth)) + 'px';
}
}
function cancelEvent()
{
return false;
}
function keyboardShowLeftPanel()
{
initSlideLeftPanel();
return false;
}
function leftPanelKeyboardEvent(e)
{
if(document.all)return;
if(e.keyCode==112){
initSlideLeftPanel();
return false;
}
}
function setLeftPanelContent(text)
{
document.getElementById('leftPanelContent').innerHTML = text;
initSlideLeftPanel(true);
}
if(!document.all)document.documentElement.onkeypress = leftPanelKeyboardEvent;
document.documentElement.onhelp = keyboardShowLeftPanel;
</script>
|