F1 side menu navigation----my little gift to TP

anunlike · 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.

SOcRatEs · 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!

Thanks for heads up!

MKJ · 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. It is the 'Show/Hide content with sliding effect' code. They have some great scripts on this site: dhtmlgoodies.com

Joshsux · 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

akulion · August 29, 2006, 12:15:50 PM

very nice - i love it

this could very well be the solution to my frames issue

Joshsux · 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

Joshsux · 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

G6Cad · August 29, 2006, 01:59:07 PM

This code here

Code Select

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

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

Code Select

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

Joshsux · 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>

<div id="dhtmlgoodies_leftPanel">
   <a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close (F1)</a>

   
    <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

</a>


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

// 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

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

   
   </div>
</div>
</body>

</html>

akulion · 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

Recent

User

Stats

Members

Stats

Users Online

F1 side menu navigation----my little gift to TP

anunlike

SOcRatEs

MKJ

Joshsux

akulion

Joshsux

Joshsux

G6Cad

Joshsux

akulion

This website is proudly hosted on Crocweb Cloud Website Hosting.