从左侧弹出的help Panel
head:
<style type="text/css">
/**//* START CSS only needed for this demo page */
body
{ /**//* Styling the body element */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
height:100%;
font-size:0.9em;
line-height:130%;
background-color:#E2EBED;
}
a{
color:#D60808;
text-decoration:none;
}
a:hover{
text-decoration:underlin;
}
#dhtmlgoodies_leftPanel ul{
padding-left:20px;
margin-left:0px;
}
#dhtmlgoodies_leftPanel div{
padding:3px;
}
#mainContent{
width:660px;
margin-left:150px;
background-color:#FFF;
padding-right:5px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
}
/**//* END CSS ONLY NEEDED FOR THIS DEMO PAGE */
#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; /**//* Which font to use */
/**//* 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">
/**//************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
Version 1.2: Updated, November 12th. 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var panelWidth = 150; // Width of help panel
var slideSpeed = 15; // Higher = quicker slide
var slideTimer = 10; // Lower = quicker slide
var slideActive = true; // Slide active ?
var initBodyMargin = 0; // Left or top margin of your <body> tag (left if panel is at the left, top if panel is on the top)
var pushMainContentOnSlide = true; // Push your main content to the right when sliding
var panelPosition = 0; // 0 = left , 1 = top
/**//* Don't change these values */
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>
body:
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
<a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close</a>
<div id="leftPanelContent">
<!-- This is the content -->
<img src="images/bg.gif">
<div>
<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>
<!-- End content -->
</div>
</div>
<!-- End code for the left panel -->
<div id="mainContent">
<h2><a href="#" onclick="initSlideLeftPanel();return false">Show help panel(F1)</a></h2>
<p> Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et alteaëra per purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua palloribus omnia pingunt. </p>
<p><div style="float:right;padding:5px;padding-right:0px;width:200px;border:1px dotted #317082;background-color:#E2EBED">
Click on the Show help panel or the F1 key to try this</div>
E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis aërater init oculos prior et possedit apertos, insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras discutit umbrasaëris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat aër<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis aër crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p>
<p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque. </P> <p><div style="float:right;padding:5px;padding-right:0px;width:200px;border:1px dotted #317082;background-color:#E2EBED">
Click on the Show help panel or the F1 key to try this</div>
E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis aërater init oculos prior et possedit apertos, insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras discutit umbrasaëris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat aër<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis aër crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p>
<p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque. </P>
<h2><a href="#" onclick="initSlideLeftPanel();return false">Show help panel</a></h2>
</div>
<style type="text/css"> /**//* START CSS only needed for this demo page */ body{ /**//* Styling the body element */ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin:0px; padding:0px; height:100%; font-size:0.9em; line-height:130%; background-color:#E2EBED; } a{ color:#D60808; text-decoration:none; } a:hover{ text-decoration:underlin; } #dhtmlgoodies_leftPanel ul{ padding-left:20px; margin-left:0px; } #dhtmlgoodies_leftPanel div{ padding:3px; } #mainContent{ width:660px; margin-left:150px; background-color:#FFF; padding-right:5px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; } /**//* END CSS ONLY NEEDED FOR THIS DEMO PAGE */ #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; /**//* Which font to use */ /**//* 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"> /**//************************************************************************************************************ (C) www.dhtmlgoodies.com, October 2005 Version 1.2: Updated, November 12th. 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var panelWidth = 150; // Width of help panel var slideSpeed = 15; // Higher = quicker slide var slideTimer = 10; // Lower = quicker slide var slideActive = true; // Slide active ? var initBodyMargin = 0; // Left or top margin of your <body> tag (left if panel is at the left, top if panel is on the top) var pushMainContentOnSlide = true; // Push your main content to the right when sliding var panelPosition = 0; // 0 = left , 1 = top /**//* Don't change these values */ 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>body:
<!-- Code for the left panel --><div id="dhtmlgoodies_leftPanel"> <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close</a> <div id="leftPanelContent"> <!-- This is the content --> <img src="images/bg.gif"> <div> <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> <!-- End content --> </div></div><!-- End code for the left panel --><div id="mainContent"><h2><a href="#" onclick="initSlideLeftPanel();return false">Show help panel(F1)</a></h2><p> Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et alteaëra per purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua palloribus omnia pingunt. </p> <p><div style="float:right;padding:5px;padding-right:0px;width:200px;border:1px dotted #317082;background-color:#E2EBED"> Click on the Show help panel or the F1 key to try this</div> E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis aërater init oculos prior et possedit apertos, insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras discutit umbrasaëris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat aër<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis aër crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p> <p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque. </P> <p><div style="float:right;padding:5px;padding-right:0px;width:200px;border:1px dotted #317082;background-color:#E2EBED"> Click on the Show help panel or the F1 key to try this</div> E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis aërater init oculos prior et possedit apertos, insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras discutit umbrasaëris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat aër<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis aër crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p> <p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque. </P><h2><a href="#" onclick="initSlideLeftPanel();return false">Show help panel</a></h2> </div>
