TinyPortal

Development => Block Codes => Topic started by: SOcRatEs on July 11, 2006, 09:10:37 PM

Title: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on July 11, 2006, 09:10:37 PM
Well I'm going to try and give back to the TP community.

(F1) side Navigation Menu Demo (http://www.my-yardsale.com/index.php)

Pressing (F1) on your keyboard will bring up a left side navigation menu.
(note: I have updated the links on demo site to sanitized generic)


Using DHTML goodies and some php tweaks from  MKJsWorld  (http://mkjsworld.com/smf/index.php?topic=195.0)

menu.php code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main Menu</title>
<style type="text/css">
/* START CSS only needed for this demo page */


#dhtmlgoodies_leftPanel ul{
padding-left:20px;
margin-left:0px;
}
#dhtmlgoodies_leftPanel div{
padding:0px;
}
#mainContent{
width:660px;
background-color:#FF0000;

padding-right:0px;
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:#F4F4F4; /* Blue background color */
color:#000000; /* White text color */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Which font to use */
border:1px solid #000;
/* 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 = 125; // 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 = false; // 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>

</head>

<body>
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
<a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close (F1)</a>

<!-- This is the menu links content -->
&nbsp;<div><br>

<b>

<a target="_top" href="index.php">Home</a></b><br>
<br>
<b>
Website</b><br>
<b>
<a target="_top" href="2.php">
.Contacts</a></b> <br>
<b>
<a target="_top" href="3.php">.About Us</a></b>
<br>
<a href="index.php"><b>.Home</b></a> <br>
<b>
<a target="_top" href="4.php">.Terms of Use</a></b><br>
<b>
<a target="_top" href="5.php">
.Prohibited Items</a></b>
<br>
<a target="_top" href="6.php">
.Afilliates</a></b><br>
<b>
<a target="_top" href="donate.php">.Donations</a><br>
<br>
Yard Sale Forum</b><br>
<a href="http://www.my-yardsale.com/smf/"><b>.Home</b></a> <br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=calendar">
.Calendar</a></b><br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=search">
.Forum Search</a></b>
<br>
<a href="http://www.my-yardsale.com/smf/index.php/index.php?action=profile"><b>.Profile</b></a> <br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=pm">
.Messages</a></b><br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=help">.Help</a></b>
<b><br>
Site Links</b><br>
<b><a target="_top" href="http://www.my-yardsale.com/resouces.html">.Helpful Resources</a></b> <br>

<!-- End content -->
</div>
</div>
</body>

</html>


Install:

1. D/L menu.php

2. Edit "menu.php" link content to your desired links and url's (commented <!-- This is the menu links content -->line 286)

3. Save & U/l to to root of smf forum(example http://www.yoursite.com/smf/)

4. Edit your themes "index.template.php" & insert this include:
include( 'menu.php' );

into each of your themes "index.template.php" (can be done in forum/admin/current theme layout for single theme sites)
right below the <body> tag.

Save or save U/L the modded "index.template.php" and you are good to go!

I hope you find this useful!
Don't hesitate to ask any questions!

code for inserting text link to operate (F1) from a link on your website:
<div class="right">
<a title="Navigation Panel (F1)" style="cursor:pointer" href="#" onclick="initSlideLeftPanel();return false"><span class="smalltext">Side Panel Navigation <br>Press (F1) on your keyboard or <br>Click here</span></font></h1></a>
</div>


Menu2.php includes link icons from     
YJ's Simple & Professional Menu with Icons.  (http://www.tinyportal.net/smf/index.php?topic=6385.0)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: RoarinRow on July 11, 2006, 10:15:45 PM
That's different  :up:
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on July 11, 2006, 10:49:26 PM
Updated demo site:
Theme colours and icons..................Thank you YJ!!!
Title: Re: F1 side menu navigation----my little gift to TP
Post by: IchBin on July 12, 2006, 04:31:25 AM
Looks good. Only thing I don't like is how it is squished to the left side of my browser window with IE and FF. It needs a little margin on the left side of the menu.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Xarcell on July 12, 2006, 07:35:37 PM
Loosk good, I had no problems.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: erikman on July 12, 2006, 08:32:57 PM
wow...
need to try...
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on July 12, 2006, 08:38:27 PM
Thank you!
I've made some fixes per IchBinâââ,¬Å¾Ã,¢ suggestion.

I'm attempting to integrate this "alt_menu" into the slide menu.

I would love the function of both menu's twisted together..

MKJ will be joining us soon too.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Crip on July 12, 2006, 08:47:47 PM
Thats very nice SOR --
thanks for sharing with us.

crip~ 8)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: IchBin on July 12, 2006, 09:10:21 PM
Indeed, that looks much better IMO.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on July 12, 2006, 09:13:11 PM
The transparencies on the icons from YJ looks weird but I can fix that.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: anunlike on July 12, 2006, 10:43:05 PM
Looks good.

But, it extends vertically down past my browser and I can't see / get to the other links.

Yesterday, when I looked, it didn't do that.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on July 12, 2006, 10:46:19 PM
I think I add too many
 in between links. I'm running 1200 x 1600 lcd res...oops! :uglystupid2:

Thanks for heads up!
Title: Re: F1 side menu navigation----my little gift to TP
Post by: MKJ on July 16, 2006, 07:50:09 PM
The side menu can be used anywhere on a site.  On mine I have added it throughout to keep it uniform.  It is very versatile and can accomodate most any type of menu.  I have added main forum jump links now.  Most of the site is using the menu by the include command to keep coding to a minimum.  I think my use of the cj tagboard is more interesting though (shoutbox).  I have housed it in an iframe.  By this method I can use links to target the iframe.  I have links to show the latest forum replies and it auto refreshes every 45 seconds so any reply can be seen without having to reload the whole forum.  I also have news and recently I have added a video server online indicator as I am streaming video from a home server to the forum. 

By the way I didn't write the side menu but found the code for it here (http://www.dhtmlgoodies.com/index.html?page=smallscripts).  It is the 'Show/Hide content with sliding effect' code.  They have some great scripts on this site: dhtmlgoodies.com (http://www.dhtmlgoodies.com/index.html)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 11:59:08 AM
i got this working fine, but its just white with hard to read text, how do i make it blackish grey to match my website? www.flash.mrcrash.net
Title: Re: F1 side menu navigation----my little gift to TP
Post by: akulion on August 29, 2006, 12:15:50 PM
very nice - i love it

this could very well be the solution to my frames issue :D
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 12:22:53 PM
I want the background on mine from white to #333333 which is http://noz.day-break.net/webcolor/select.cgi?333333 but whenever i change the colour in ALL of the code nothing ever happens
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 01:53:57 PM
Anybody able to quickly help me please? its kinda lame looking just white rofl rofl, Mrs G6, bloc? crip? anybody able to help me make the background the http://noz.day-break.net/webcolor/select.cgi?333333
Title: Re: F1 side menu navigation----my little gift to TP
Post by: G6Cad on August 29, 2006, 01:59:07 PM
This code here

#mainContent{
width:660px;
background-color:#FF0000;


change the background-color:#FF0000 to #333333
so it looks like this

#mainContent{
width:660px;
background-color:#333333;


Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 02:09:33 PM
thanks but that didn't work i tried it before here is my whole file, can you see something wrong?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main Menu</title>
   <style type="text/css">
   /* START CSS only needed for this demo page */


   #dhtmlgoodies_leftPanel ul{
      padding-left:20px;
      margin-left:0px;
   }
   #dhtmlgoodies_leftPanel div{
      padding:0px;
   }
   #mainContent{
      width:660px;
      background-color:#333333;
      
      padding-right:0px;
      border-left:1px solid #333;
      border-right:1px solid #333;
      border-bottom:1px solid #333;
      
   }

   /* END CSS ONLY NEEDED FOR THIS DEMO PAGE */
   
   #dhtmlgoodies_leftPanel{   /* Styling the help panel */
      
      background-color:#F4F4F4;   /* Blue background color */
      color:#000000;   /* White text color */
      font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;   /* Which font to use */
      border:1px solid #333;
      /* 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:333;
      position:absolute;
      top:2px;
      right:2px;
      border:1px solid #333;
      color:#333;
      font-size:0.8em;            
   }
   #dhtmlgoodies_leftPanel .closeLink:hover{   /* Close link text  - mouseover effect*/
      color:#FFF;
      background-color:#333;
   }   
   
   </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 = 125;   // 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 = false;   // 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>

</head>

<body>
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
   <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close (F1)</a>

   <!-- This is the menu links content edit to your needs -->
   &nbsp;<div>

   
         


<body bgcolor="#000000" text="#00FF00" link="#00FF00" vlink="#FFFFFF" alink="#00FF00">

<font color="#008000">

Sneaky-Shits </font> <font color="#008000">Website</font>




// Home

(http://flash.mrcrash.net/index.php)
        <a target="_top" href="http://flash.mrcrash.net/index.php?board=12.0">//
        Contact
        us

</a>
      

<font color="#008000">
        Sneaky-Shits Forum</font>




// Forum
(http://flash.mrcrash.net/index.php?action=forum)


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=calendar">
        // Calendar</a>



            <a target="_top" href="http://flash.mrcrash.net/index.php?action=search">
        // Forum Search</a>

         

// Profile (http://flash.mrcrash.net/index.php?action=profile)


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=pm">
        // Messages</a>



            <a target="_top" href="http://flash.mrcrash.net/index.php?action=help">
        // Help

</a>

<font color="#008000">Sneaky-Shits Affiliates</font>




<a target="_blank" href="http://www.mrcrash.net">// Mrcrash.NET</a>


            <a target="_blank" href="http://lastend.com/system/affin.asp?id=8857">//
            Lastend</a>

         

<a href="http://cripplefight.badcase.net/" target="_blank">// C</a><a href="index.php?action=profile">ripplefight</a>


            <a target="_blank" href="http://affiliates.emugp.com/in.php?id=joshsux">//
            EmuGP</a>
         
      
   <!-- End of link content -->
   </div>
</div>
</body>

</html>
Title: Re: F1 side menu navigation----my little gift to TP
Post by: akulion on August 29, 2006, 02:13:47 PM
well this may not solve it but then again it might

i noticed in many places u have put "background-color:333;"

use the complete hexcode 333333 it should have 6 digits
Title: Re: F1 side menu navigation----my little gift to TP
Post by: G6Cad on August 29, 2006, 02:15:23 PM
Just what i noticed to, try this code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main Menu</title>
   <style type="text/css">
   /* START CSS only needed for this demo page */


   #dhtmlgoodies_leftPanel ul{
      padding-left:20px;
      margin-left:0px;
   }
   #dhtmlgoodies_leftPanel div{
      padding:0px;
   }
   #mainContent{
      width:660px;
      background-color:#333333;

      padding-right:0px;
      border-left:1px solid #333333;
      border-right:1px solid #333333;
      border-bottom:1px solid #333333;

   }

   /* END CSS ONLY NEEDED FOR THIS DEMO PAGE */

   #dhtmlgoodies_leftPanel{   /* Styling the help panel */

      background-color:#333333;   /* Blue background color */
      color:#000000;   /* White text color */
      font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;   /* Which font to use */
      border:1px solid #333333;
      /* 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:333333;
      position:absolute;
      top:2px;
      right:2px;
      border:1px solid #333333;
      color:#333333;
      font-size:0.8em;
   }
   #dhtmlgoodies_leftPanel .closeLink:hover{   /* Close link text  - mouseover effect*/
      color:#FFFFFF;
      background-color:#333333;
   }

   </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 = 125;   // 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 = false;   // 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>

</head>

<body>
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
   <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close (F1)[/url]

   <!-- This is the menu links content edit to your needs -->
   &nbsp;<div>





<body bgcolor="#000000" text="#00FF00" link="#00FF00" vlink="#FFFFFF" alink="#00FF00">

<font color="#008000">

Sneaky-Shits </font> <font color="#008000">Website</font>




// Home


        <a target="_top" href="http://flash.mrcrash.net/index.php?board=12.0">//
        Contact
        us

[/url]


<font color="#008000">
        Sneaky-Shits Forum</font>



// Forum


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=calendar">
        // Calendar[/url]


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=search">
        // Forum Search[/url]


// Profile


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=pm">
        // Messages[/url]


            <a target="_top" href="http://flash.mrcrash.net/index.php?action=help">
        // Help

[/url]

<font color="#008000">Sneaky-Shits Affiliates</font>




<a target="_blank" href="http://www.mrcrash.net">// Mrcrash.NET[/url]


            <a target="_blank" href="http://lastend.com/system/affin.asp?id=8857">//
            Lastend[/url]


// C<a href="index.php?action=profile">ripplefight[/url]


            <a target="_blank" href="http://affiliates.emugp.com/in.php?id=joshsux">//
            EmuGP[/url]

   <!-- End of link content -->
   </div>
</div>
</body>

</html>
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 02:19:59 PM
when i changed the 333 it didnt even do anything anyway =/ and ok ill try that, but the site i went to said a code was 333 lol
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 02:21:50 PM
Mrs G6 that fixed the colour but completly mashed all the text up big time check it out at www.flash.mrcrash.net so what ever you did worked but what ever ya did to the text really buggered up lol
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 02:47:23 PM
ok ive kinda fixed it but my links right up the top are stuffed? can you help me out with it?

<br>

<b>
<br>
<font color="#008000">
        Sneaky-Shits Forum</font>
</b>
<br>
<b><br>
// <a href="http://flash.mrcrash.net/index.php?action=forum"> Forum</a></b> <br>
<b>
        // <a href="http://flash.mrcrash.net/index.php?action=calendar"> Calendar</a></b><br>
<b>
        // <a href="http://flash.mrcrash.net/index.php?action=search"> Forum Search</a></b>
<br>
<b>// <a href="http://flash.mrcrash.net/index.php?action=profile"> Profile</a></b> <br>
<b>
        // <a href="http://flash.mrcrash.net/index.php?action=pm"> Messages</a></b><br>
<b>
        // <a href="http://flash.mrcrash.net/index.php?action=help"> Help</a><br>
            <br>
<font color="#008000">Sneaky-Shits Affiliates</font><br>
</b>
<br>
<b>// <a href="http://www.mrcrash.net" target="_blank"> Mrcrash.NET</a></b><br>
<b>
            // <a href="http://lastend.com/system/affin.asp?id=8857" target="_blank">
            Lastend</a></b>
<br>
<b>// <a href="http://cripplefight.badcase.net/" target="_blank"> Cripplefight</a></b> <br>
<b>
            // <a href="http://affiliates.emugp.com/in.php?id=joshsux" target="_blank">
            EmuGP</a></b>

<p>

<font color="#008000">

Sneaky-Shits </font> <b><font color="#008000">Website</font><br>
// <a href="http://flash.mrcrash.net/index.php"> Home</a><br>
// <a href="http://flash.mrcrash.net/index.php?board=12.0">
        Contact
        us</a>


Oh... i might have removed the close code, BAHH SOME BODY PLEASE HELP.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: MKJ on August 29, 2006, 02:49:01 PM
Hi

Yuse getting your knickers in a twist with regard to colours me thinks  ;D.

There are 3 colour controls. 

1. #mainContent - refers to the whole div holding all the code and including the top part where the close link is.  Put this to #333333;  and not #333333333; as you have on your site!  Edit: Div for this isn't on your site?  So remove the line background-color:#333333333;.

2. #dhtmlgoodies_leftPanel - refers to the the code held in the dhtmlgoodies_leftPanel div.  Put this to #333333;.  The line controlling this is this one:

background-color:#F4F4F4;   /* Blue background color */

As you can see the colour is showing #F4F4F4 (light grey).  Alter the above line to  : background-color:#333333;   /* content background color */

3. #dhtmlgoodies_leftPanel .closeLink refers to the div controling the background colour for the small div at the top where it says Close.  You have another mistake here as you have it: background-color:333;. Alter it to background-color:#333333;. Edit: Put this colour to something like background-color:#9ACD32; otherwise it won't stand out.

I have stopped using the smf forum for now as my site is being altered a great deal so no side panel but it does look good though I must admit.  Also you need to put some sort of indication that there is a side menu there for sure.

Regards
MKJ

Edit:  Looking at the code on your site again the colour code for the background 1. #mainContent, doesn't seem to be doing anything bar for getting you confused.  You could remove it altogther I think.  Try it as it looks like the colour is being controlled by number 2 only: #dhtmlgoodies_leftPanel.  Remove the line: background-color:#333333333; from the #maincontent and just use no2 to control background colour.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 29, 2006, 03:07:51 PM
yeah i fixed all that thanks mate, its just the layout look now, its all scrunched up and that up the top.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: MKJ on August 29, 2006, 04:04:55 PM
Hi

Your code sure is messy  :o.  Anyways I have altered lots of it to put the colour controls etc back to the style css.  Try this.  Replace all the style css with this:

<style type="text/css">
   /* START CSS only needed for this demo page */


   #dhtmlgoodies_leftPanel ul{
      padding-left:20px;
      margin-left:0px;
   }
   #dhtmlgoodies_leftPanel div{
      padding:0px;
   }
   #mainContent{
      width:660px;
      padding-right:0px;
      border-left:1px solid #333333;
      border-right:1px solid #333333;
      border-bottom:1px solid #333333;

   }

   /* END CSS ONLY NEEDED FOR THIS DEMO PAGE */

   #dhtmlgoodies_leftPanel{   /* Styling the help panel */

      background-color:#333333;   /* Background color */
      color:#008000;   /* text color */
      font-weight: bold;
      font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;   /* Which font to use */
      border:1px solid #333333;
      /* 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:green;
      position:absolute;
      top:2px;
      right:2px;
      border:1px solid #333333;
      color:#000000;
      font-size:0.8em;
   }
   #dhtmlgoodies_leftPanel .closeLink:hover{   /* Close link text  - mouseover effect*/
      color:#000000;
      background-color:lightgreen;
   }

   </style>


Replace the top part of the left panel where it starts < --Code for left panel ---> to just above where it says <---Added Header---> with this:

<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">

   <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">
Close (F1)</a>
<div> 
    <!-- This is the menu links content edit to your needs -->
<br><br><br><br>Sneaky-ShitsWebsite
<br><br>

// <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;">
Home</a><br>

// <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;board=12.0">
Contact us</a><br><br>

Sneaky-Shits Forum<br><br>
// <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=forum">
Forum</a> <br>

        // <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=calendar">
Calendar</a><br>

        // <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=search">
Forum Search</a>
<br>
// <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=profile">
Profile</a> <br>

        // <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=pm">
Messages</a><br>

        // <a href="http://flash.mrcrash.net/index.php?PHPSESSID=91b6ad3eb2fe34396803c324e5945238&amp;action=help">
Help</a>

<br><br>
Sneaky-Shits Affiliates<br><br>

// <a href="http://www.mrcrash.net/" target="_blank"> Mrcrash.NET</a><br>

    // <a href="http://lastend.com/system/affin.asp?id=8857" target="_blank">
            Lastend</a><br>
           
// <a href="http://cripplefight.badcase.net/" target="_blank"> Cripplefight</a><br>

    // <a href="http://affiliates.emugp.com/in.php?id=joshsux" target="_blank">
EmuGP</a>

<!-- End of link content -->
</div>

</div>


That should get the code in a lot neater arrangement and put the colour controls back to the style.css and be easier for you to alter.  It looks pretty good with the above settings though to me.

Regards
MKJ
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on August 29, 2006, 11:30:46 PM
Wow! :o
I close my eyes for a day or two and looks what happens.... :coolsmiley:
MKJ thanks for jumping in to help!

Well I'm feeling a little better today, was sick for a couple of days, I'll try to help as well but looks like MKJ got it.

I'm still using the original demo on my site...my members love it.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 30, 2006, 10:33:18 AM
Thanks mate, i will do this in the next 30 minutes :) and yes thanks for the help all of ya
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 30, 2006, 10:45:36 AM
Woah it works heaps well, thank you heaps =)

I did a couple of changes to it too with the font and that, =)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 30, 2006, 11:30:40 AM
Quote from: SOcRatEs on August 29, 2006, 11:30:46 PM
Wow! :o
I close my eyes for a day or two and looks what happens.... :coolsmiley:
MKJ thanks for jumping in to help!

Well I'm feeling a little better today, was sick for a couple of days, I'll try to help as well but looks like MKJ got it.

I'm still using the original demo on my site...my members love it.

Get well soon! :)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: MKJ on August 30, 2006, 12:28:40 PM
QuoteWoah it works heaps well, thank you heaps =)

I did a couple of changes to it too with the font and that, =)

Looking good but you need to adjust spaces etc m8.  You are losing half of the menu on 800x600 and it only just fits when on 1024x768.  If I were you I would get the menu to look right in 800x600 and leave the settings alone then as it will be ok on higher as well.  You have far too large a space at the top and too much space between the links  :o.  Nice colour scheme though and looks quite posh.  Just get them spaces sorted now.

Regards
MKJ
Title: Re: F1 side menu navigation----my little gift to TP
Post by: yj98 on August 30, 2006, 02:50:48 PM
I dont think this thread isnt that for discuss ur stupid issues of CSS.

I want to see some discuz about Mr.SOcRatEs 's "F1 side menu navigation----my little gift to TP " .

Damn...  :tickedoff:
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on August 30, 2006, 10:30:00 PM
yj98...thank you for your vote of confidence..
Dhtml goodies & MKJ deserve all credit for this mod/Block code snippets.

I'm only the one who brought it here to share with the TP community.
CSS is an integral part of this coding, trust me to say I had alot of trouble with it myself.
MKJ introduced me to it and helped me to get it working on my site.

I'm currently attempting to mod it futher to use the various TP-templates css so it will match perfectly.
So far it's proving difficult..

Quote from: JoshsuxGet well soon! Smiley
I am, thank you!
Title: Re: F1 side menu navigation----my little gift to TP
Post by: Joshsux on August 31, 2006, 05:16:29 AM
Quote from: yj98 on August 30, 2006, 02:50:48 PM
I dont think this thread isnt that for discuss ur stupid issues of CSS.

I want to see some discuz about Mr.SOcRatEs 's "F1 side menu navigation----my little gift to TP " .

Damn...  :tickedoff:

If thats a attempt to dis me because i'm asking help well, i dont listen to people who can't speak mch egnlish.

And okay mate, yeah i run at a high resolution with a widescreen, i'll change it now for people on 800x what ever, thanks.

the main reason i done this was so people can get to the forums easier, all it cuts out is some meaningless links and the affilates, and i dont really want the menu to look crap just because of people on 800 x 600 or higher, i think i'll keep it the way it is, 800x600 can see the important links thats all that matters.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: IchBin on August 31, 2006, 06:47:22 AM
Quote from: yj98 on August 30, 2006, 02:50:48 PM
I dont think this thread isnt that for discuss ur stupid issues of CSS.

I want to see some discuz about Mr.SOcRatEs 's "F1 side menu navigation----my little gift to TP " .

Damn...  :tickedoff:
First of all, this wasn't a nice comment YJ. Please be aware that these kind of comments are not accepted in the TP community. Second, Joshsux her comment was not intended for you. Everyone just take a chill pill and enjoy the free stuff and great support you get here at TinyPortal.net :) Continue on!....
Title: Re: F1 side menu navigation----my little gift to TP
Post by: MKJ on August 31, 2006, 07:46:49 AM
QuoteSecond, Joshsux her comment was not intended for you.

As far as I can make out it was meant for me?  Sure makes helping out on this forum something to consider in the future.  I can do without the hassle.  Hope there are not many or any more of these considerate people who are members on this site.  Normally they are found on gamers forums where such comments are the norm.

Odd person  :o.

MKJ
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on August 31, 2006, 08:14:11 AM
Quote from: IchBinâââ,¬Å¾Ã,¢Everyone just take a chill pill and enjoy the free stuff and great support you get here at TinyPortal.net Smiley Continue on!....

Even though I'm relatively new TP, this is an isolated issue. Not the norm by any means.
We are people from every place on earth.

MKJ it doesn't matter who the intended target was, (though I thought it was me)
it still doesn't matter. I'm thinking it was a random thing, just some one having a moment.
I'm so glad you are here, putting this to use on my site was so much fun we even took a
little heat at your site,remember?
I wouldn't be able to render as fast a support for this F1 without you.

I plan to take IchBinâââ,¬Å¾Ã,¢'s advice above.....
Title: Re: F1 side menu navigation----my little gift to TP
Post by: G6Cad on August 31, 2006, 08:20:12 AM
And just a note, CSS DO have a major point in this discussion for how this code snippet works, and how to customize it. So itÂÃ,´s very relevant for some people and for some it's not.
I think that every aspect of a code should be discussed, any changes/upgrades should be written down in the thread to privide a better range for all to use it.
So IMHO CSS is a VERY valid thing discussed.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: akulion on October 01, 2006, 06:47:43 AM
thanks for the menu :up:

works just wonderfully

i made a button in case someone wants to use it instead of the text link

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fpath-to-peace.net%2Fforum%2Ff1menubut.png&hash=c6c397b701b882ba60347e3dc0f28f7da1fbb5fd)

feel free to use :)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on October 06, 2006, 09:08:33 PM
Quote from: akulion on October 01, 2006, 06:47:43 AM
thanks for the menu :up:

works just wonderfully

i made a button in case someone wants to use it instead of the text link

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fpath-to-peace.net%2Fforum%2Ff1menubut.png&hash=c6c397b701b882ba60347e3dc0f28f7da1fbb5fd)

feel free to use :)

Thank you very much!!!
Looks great on my site!!
Title: Re: F1 side menu navigation----my little gift to TP
Post by: akulion on October 06, 2006, 10:09:53 PM
ur welcome :up: its a great menu - now my site default
Title: Re: F1 side menu navigation----my little gift to TP
Post by: bluedevil on January 04, 2007, 01:33:01 AM
on the 1st page states to add this

include('menu.php');

under the <body> tag and it didn't work for me. I got errors.

This is how i did it. What i did wrong?
upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>
include( 'menu.php' );';
// TinyPortal start
  if($context['TPortal']['fixed_width']!=0)
echo '<table align="center" width="'.$context['TPortal']['fixed_width'].'" cellpadding="0" cellspacing="0" border="0"><tr><td>';
// TinyPortal end
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on January 04, 2007, 01:36:37 AM
include( 'menu.php' );{{>>';<<}}

remove this, it should work then
{{>>';<<}}

insert only this...
include( 'menu.php' );

I hope this helps....let us know if it doesn't.....
G'Luck
Title: Re: F1 side menu navigation----my little gift to TP
Post by: bluedevil on January 04, 2007, 01:38:15 AM
Thnx socrates.


and where this goes again?

div class="right">
<a title="Navigation Panel (F1)" style="cursor:pointer" href="#" onclick="initSlideLeftPanel();return false"><span class="smalltext">Side Panel Navigation <br>Press (F1) on your keyboard or <br>Click here</span></font></h1></a>
</div>
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on January 04, 2007, 01:43:38 AM
My bad!!! sorry
that is for an html block to put a link on your site so user can click the link or F1.
You can use this with the blue button above too!
Title: Re: F1 side menu navigation----my little gift to TP
Post by: bluedevil on January 04, 2007, 01:51:08 AM
ok did like you said but still errors.

</head>
<body>
include( 'menu.php' ) ;
// TinyPortal start
  if($context['TPortal']['fixed_width']!=0)



I must have a brain fart  :2funny:
Title: Re: F1 side menu navigation----my little gift to TP
Post by: bluedevil on January 04, 2007, 01:52:19 AM
I cannot find this at all hahahaha!!


{';}[/color]
Title: Re: F1 side menu navigation----my little gift to TP
Post by: SOcRatEs on January 04, 2007, 01:55:44 AM
Quote from: bluedevil on January 04, 2007, 01:52:19 AM
I cannot find this at all hahahaha!!


{';}[/color]

{{>>';<<}}

meant you had an extra ';
Title: Re: F1 side menu navigation----my little gift to TP
Post by: alhaudhie on June 19, 2007, 06:18:10 PM

include( 'menu.php' ) ;

where is the exactly part i must put this....
Title: Re: F1 side menu navigation----my little gift to TP
Post by: alhaudhie on June 19, 2007, 06:25:40 PM
Quote from: Gobo on October 01, 2006, 06:47:43 AM
thanks for the menu :up:

works just wonderfully

i made a button in case someone wants to use it instead of the text link

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fpath-to-peace.net%2Fforum%2Ff1menubut.png&hash=c6c397b701b882ba60347e3dc0f28f7da1fbb5fd)

feel free to use :)

what code must i use to setup F1
Title: Re: F1 side menu navigation----my little gift to TP
Post by: IchBin on June 19, 2007, 06:43:16 PM
You must follow the instructions in the first post mate.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: vanguard on June 19, 2007, 10:39:47 PM
This is cool,

Thanks to all responsible. I'll give it a try sometime soon.

:)
Title: Re: F1 side menu navigation----my little gift to TP
Post by: shaitan on June 24, 2008, 10:06:38 AM
Hello,

I have a problem with this menu and Opera 9.5.
F1 work but the "p" key bring up too the menu.

Can you help me?

I use original script whithout modification for try.

http://passionxbmc.org/forum/index.php

Sorry for my bad English.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: insanemustang on July 28, 2008, 05:00:55 PM
I have been using this for over a year.  And I just realized that the way the f1 key is programmed makes it impossible to type a P with a Mac.  The key number for f1 on a pc, is for the P on a mac. 

I have removed the F1 command all-together to attempt to accommodate those on a mac. 

The link for the demo doesn't work anymore, if you want to see one, check out my site http://www.bamanation.net and then click the menu link on the left side.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: shaitan on August 26, 2008, 11:29:51 AM
Hi insanemustant,

Thank for your answer,
I had the same Idee but I don't find lines who correspond  to the F1 key in the script.
Can you help me?

Thank in advance

An sorry, my English is very bad.
Title: Re: F1 side menu navigation----my little gift to TP
Post by: insanemustang on August 26, 2008, 01:03:09 PM
Sure.  I ended up taking the "press f1" command all-together.  Now you must click on the menu link.  I forget where it was in the menu.php though.

Search for "F1" in the menu.php

I will look around some more too when I get more time today.