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

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

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

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

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

Code Select

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

MKJ · August 29, 2006, 02:49:01 PM

Hi

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

.

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.

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

MKJ · August 29, 2006, 04:04:55 PM

Hi

Your code sure is messy

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

Code Select

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

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

SOcRatEs · August 29, 2006, 11:30:46 PM

Wow!

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.

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

Joshsux · 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, =)

Recent

User

Stats

Members

Stats

Users Online

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

G6Cad

Joshsux

Joshsux

Joshsux

MKJ

Joshsux

MKJ

SOcRatEs

Joshsux

Joshsux