Jdi na obsah Jdi na menu
 

Vzkazník | Aktualitky (RSS) | Ke stažení | Návštěvnost | Výměna ikonek | Přidat článek |

Help Panel F1

22. 5. 2010

Help Panel F1

Toto je Help Panel. Na Vaši stránce vyjede po stisknutí klávesy F1.

 

Použijeme  tento kód:

 

Čá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>

 

Část druhá:

<!—Začátek kódu pro samotný panel -->

<div id="dhtmlgoodies_leftPanel">

            <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Zavři panel zde, nebo F1</a>

            <div id="leftPanelContent">

            <!—Tady začíná VOLITELNÝ obsah panelu -->

            <img src="images/bg.gif"> // - možno přidávat i obrázky

            <div>                               // tady začíná obsah, který se dá nahradit

                        <p>To accomplish this, do this:</p>

                        <ul>

                                   <li>Click on key A</li>

                                   <li>Open the bla bla window</li>

                                   <li>Enter your name in the first text box</li>

                                   <li>Save your changes</li>

                        </ul>

            </div>

            <!—Konec obsahu panelu -->

            </div>

</div>

<!—Konec kódu pro panel -->

Tento návod pochází z dnes již nefunkčního webu LamaLamám.cz .

 
 

© Panickov.tk 2006 - 2012 | Běží na systému eStránky.cz | Tisk | Nahoru ↑