1 Topic by sporkit (edited by ihavenoidea 2003-11-21 21:23)

  • From: chicago
  • Registered: 2003-11-04
  • Posts: 67

Topic: dropdowns a little funny looking

i found a little script that i managed to mod just a bit and got a cool dropdown effect for my site.  the only problem is that they dont seem to work as well when i stick them in the template for my boards.

i think its possibly that the script tags dont work in a .tpl file.  is there some type of obvios problem that im missing here?

you can peep what im talking about at http://www.fatalthugs.com/forum/index.php

thanks guys.  smile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html dir="{pun_content_direction}">
<head>

<script language="JavaScript1.2">

//Drop down menu link- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com
//Credit MUST stay intact for use

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan members</font></a><br>'
menu1[1]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan history</font></a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../fatal articles</font></a><br>'
menu2[1]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../gap attack</font></a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=test.htm>Menu link here</a><br>'
menu3[1]='<a href=test.htm>Menu link here</a><br>'
menu3[2]='<a href=test.htm>Menu link here</a><br>'


</script>



<meta http-equiv="Content-Type" content="text/html; charset={pun_char_encoding}">
{pun_head}
</head>
<body{pun_body}>
<script language="JavaScript1.2">
//reusable/////////////////////////////

//Drop down menu by http://www.dynamicdrive.com

var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18

hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}

if (ie4||ns6)
document.onclick=hidemenu

//reusable/////////////////////////////
</script>



<!--start my site-->

<br>

<center>

<!-- Main Table -->

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#808080" width="670"><tr><td colspan="2">

<!-- Header --> 

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#808080" width="100%">
  
    
            <tr> 
              <td height="90" bgcolor="#354463"><div align="center"><img src="/f8l_banner.gif" height="75" width="95%"></div></td>
            </tr>
                

</table>

</td></tr></table>

<!-- End Header -->              

</td></tr>

<tr><td>

<!-- Menu -->

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>

<table cellspacing="1" cellpadding="2" border="0" bgcolor="#354463" width="100%">
    <tr>
      <td bgcolor="#354463" class="small" width="150"> NAVIGATION >> </td>
    </tr>
</table>

</td></tr></table>

</td>

<td>

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="520"><tr><td>

<table cellspacing="1" cellpadding="2" border="0" bgcolor="#354463" width="520">
    <tr>              
        <td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/default3.php"><font color="#e9f2fc">/ROOT</font></a></td>
              <td width="70" bgcolor="#5F7797" class="small" align="left" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'">
              
              
             <!----------Menu 1 starts here---------->

<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')"><font color="#FFFFFF" face=Verdana>   /MEMBS</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
              
              
              </td>
              <td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/forum/index.php"><font color="#e9f2fc">/FORUM</font></a></td>
        <td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/clan_pics/index.php"><font color="#e9f2fc">/PICS</font></a></td>
        <td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/Links.php"><font color="#e9f2fc">/LINKS</font></a></td>
                <td width="60" bgcolor="#5F7797" class="small" align="left" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'">
                
                
                <!----------Menu 2 starts here---------->

<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')"><font color="#FFFFFF" face=Verdana>   /INFO</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->
                
                
                </td>
                        <td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/vids_game.php"><font color="#e9f2fc">/VIDS</font></a></td>
    </tr>
</table>

</td></tr></table>        
    

<!-- End Menu -->

</td></tr>

<tr><td colspan="2">

<!-- Main Field -->

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="0" cellspacing="10" width="100%" bgcolor="#dcdcdc">
                <tr>
                  <td valign="top"> 
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr><td width="100%" align="right">
    <p>
    <font size="2"><a href="/member_tools.php"><font color=707770>SITE TOOLS</font></a> // <a href="/forum/login.php?action=out"><font color=707770>LOGOUT</font></a></font>  
    </p>
    </td></tr>
                    </table>
                    
                    <table width=100% height=100%>
                    <tr>
                    <td align=left>
                    
                    


                    
                    
                    
                    
                    
                    
                    
<!--end my site-->


<table class="punmain" cellspacing="1" cellpadding="4">
    <tr class="punhead">
        <td class="punhead">
            <span class="punheadline">{pun_title}</span><br>
            {pun_desc}
        </td>
    </tr>
    <tr>
        <td class="puncon1">
            {pun_navlinks}<br><br>
            {pun_status}
        </td>
    </tr>
</table>

{pun_main}

<table class="punmain" cellspacing="1" cellpadding="4">
    <tr>
        <td class="puncon2">
            <table class="punplain" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="puntop">
                         
                    </td>
                    <td class="puntopright">
                        Powered by <a target="_blank" href="http://punbb.org/">PunBB</a><br>
                        Version: 1.0.1<br>
                        © Copyright 2002, 2003 Rickard Andersson
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>



<!--start my site-->

</td>
                    </tr>
                    </table>
                    
                    </td>
                </tr>
              </table>
</td></tr></table>

<!-- End Mainfield -->

</td></tr>
<tr><td colspan="2" width="100%">

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td  bgcolor="#354463" align="left" class="infohead" width="25%"><a href=bug_rpt.php><font color="FFFFFF">Report a bug / comment!</font></a></td>
<td  bgcolor="#354463" align="right" class="infohead" width="75%">© copyright 2003 coded by: <a href=http://www.sporkit.com><font color=707770>www.sporkit.com</font></a></td></tr></table></td>
</tr>
</table>
</td></tr></table>

</table>

<!-- End Main Table -->

</center>

<br>


<!--end my site-->




<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>

<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>

<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>
</body>
</html>
  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: dropdowns a little funny looking

Well, it seems to work for me. However, in the forums, the drop down links have a different background color than what you have on the other pages. Is that on purpose or was that the problem you were talking about?

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

3 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: dropdowns a little funny looking

Kennel wrote:

Well, it seems to work for me. However, in the forums, the drop down links have a different background color than what you have on the other pages. Is that on purpose or was that the problem you were talking about?

Interesting. I tried it in IE6, IE5, IE5.5, Firebird, NS4.8, Moz 1.4 and couldn't see any sign of a dropdown.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: dropdowns a little funny looking

Here's what it looks like to me in IE6:

http://w1.421.telia.com/~u42121130/dropdown.png

It screws up in Firebird though. The drop down layer appears in the top left corner of the page.

Why it doesn't work correctly when used in the forums is beyond me at this time. I haven't had the strength to read through your code above though. Perhaps I will be up to it tomorrow. Does the output look correct? I mean, is the output in the forums the same as the output on the other pages?

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: chicago
  • Registered: 2003-11-04
  • Posts: 67

Re: dropdowns a little funny looking

Kennel wrote:
Why it doesn't work correctly when used in the forums is beyond me at this time. I haven't had the strength to read through your code above though. Perhaps I will be up to it tomorrow. Does the output look correct? I mean, is the output in the forums the same as the output on the other pages?


the backround doesnt appear for the dropdowns on the forums but does on the other parts of my site.

heh yea tomorrow i think i show my code more specifcily.  must be something with the css i use or... something. tongue

6 Reply by sporkit (edited by ihavenoidea 2003-11-24 17:36)

  • From: chicago
  • Registered: 2003-11-04
  • Posts: 67

Re: dropdowns a little funny looking

i created dropdowns using a script i found with this link.

http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm

basicly it allows you to create text that has a dropdown associated with it.


this goes in the header

<script language="JavaScript1.2">

//Drop down menu link- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com
//Credit MUST stay intact for use

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan members</font></a><br>'
menu1[1]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan history</font></a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../fatal articles</font></a><br>'
menu2[1]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../gap attack</font></a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=test.htm>Menu link here</a><br>'
menu3[1]='<a href=test.htm>Menu link here</a><br>'
menu3[2]='<a href=test.htm>Menu link here</a><br>'


</script>

this goes just after the body tag

<script language="JavaScript1.2">
//reusable/////////////////////////////

//Drop down menu by http://www.dynamicdrive.com

var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18

hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}

if (ie4||ns6)
document.onclick=hidemenu

//reusable/////////////////////////////
</script>

i place this where i want and the text /MEMBS will have  a dropdown associated with it.

              
             <!----------Menu 1 starts here---------->

<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')"><font color="#FFFFFF" face=Verdana>   /MEMBS</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
              
              
                              
                
                <!----------Menu 2 starts here---------->

<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')"><font color="#FFFFFF" face=Verdana>   /INFO</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->

               
               
this goes at the bottom of the page and defines the colors of the dropdowns.            

<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>

<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>

<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>

it works on the other pages.  you can click /ROOT then membes and /INFO to take a look.  it just in the forum where the code is a problem.  www.fatalthugs.com

if there is any other information you need i would be glad to post.  so far im stumped as to why it would do this though.

  • From: chicago
  • Registered: 2003-11-04
  • Posts: 67

Re: dropdowns a little funny looking

well i had to do it the hard way but basicly i reconstructed my template from scratch and found that if i didnt have the # in front of the backround color then it would appear blank.

still dont know why the tables apear in strange places in netscape.  for now i guess im good though.