Combine Two Effects? Help

**HackerX** · 07-09-2003 09:39 AM

Ok this is want I want to do. I have 2 different menus and I would like to add an effect to one of them.

The first menu which is the menu I want to use has a cool fading effect, that is here:

http://www14.brinkster.com/rekcah/fade.html

The second menu has the effect that I want to add to the first one it is a drop down menu:

http://www14.brinkster.com/rekcah/dropdown.html

I am not sure how to do this. Im not going to post the code because is long so just use view - source.

Please help me out, thanx

**HackerX** · 07-09-2003 12:13 PM

does anyone know how to do this?

**HackerX** · 07-09-2003 03:59 PM

heres the code for the fade effect menu:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</script>
</HEAD>
<BODY>

<style>
. tds
{
background-Color:BLACK;
width:100;
height:20;
text-align:center;
border:1px RED;
font-size:14;
filter:alpha(opacity=45);
-moz-opacity:45%;
cursor:crosshair;
}
</style>

<script language="javascript">
nOpac = 50
nPlus = 2
nMin = 1
speed = 30
timer = null;
timer2 = null;

var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);

function fadeImg2(teller)
{
apl[teller][1] = "Up";
changes();
}

function fadeImgend2(teller)
{
apl[teller][1] = "Down";
setTimeout("changes()",50);
}

function changes()
{
next_loop = true;
for (i=0;i<apl.length;i++)
{
obj = link_table.rows[i].cells[0];
opacity = apl[i][0]
if (apl[i][1] == "Up")
{
opacity += nPlus;
apl[i][0] = opacity;
if (apl[i][0] > 105)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;
}
else
{
if (apl[i][1] == "Down")
{
opacity -= nMin;
apl[i][0] = opacity;
if (apl[i][0] < 45)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;
}
}
if(ie5){
obj.style.filter="alpha(opacity="+opacity+")";
}
if(ns6){
obj.style.MozOpacity = opacity + '%';
}
}
if (next_loop == false)
{
timer = setTimeout("changes()",speed);
}
else
{
clearTimeout(timer);
}
}

//for each link option you need to make a new Array;
var apl = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");
apl[6] = new Array(45,"");
apl[7] = new Array(45,"");
//expl: apl[8] = new Array(45,"");
</script>

<body bgcolor="BLACK">
<BR>
<BR>
<BR>
<table style="border:1px RED; width:130;height:180" cellspacing=0 cellpadding=0>
<tr><td align=center bgcolor=BLACK>
<font size="7" face="bradley hand itc" color=RED><u>B4B</u></font><br>
</td></tr>
<tr><td align=center border=2>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" onClick="window.open('http://www.b4b.jimxorb.com/forum/index.php');" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">B4B Forum</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" onClick="top.frames['main'].location.href='http://www.the.iwarp.com/downloads.html';" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">Downloads</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" onClick="top.frames['main'].location.href='http://robotarena.tk/';" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">Links</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" onClick="top.frames['main'].location.href='http://www.the.iwarp.com/site.html';" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">About Us</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" onClick="top.frames['main'].location.href='http://www.the.iwarp.com/iamgehost.html';" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">Image Hosts</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" onClick="top.frames['main'].location.href='';" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;"></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(6)" onmouseout="fadeImgend2(6)" onClick="window.open('http://invisionfree.com/forums/Bots4Battle/');" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">B5B Forum</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(7)" onmouseout="fadeImgend2(7)" onClick="window.open('http://teamicer.to-j.com/Forums/');" style="font-family:bradley hand itc; border:1px solid RED; background-color:BLACK; width:100%; text-align:center; color:RED;">Old Forum</td>
</tr>
</table>
</td></tr></table>

and heres it for the dropdown menu:

<html>
<head>

<STYLE TYPE="text/css">

</style>

<style type="text/css">
a {
text-decoration: none;
}

.mar {
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
color: 5F7F6E;
font: bolder;
}

.title {
position: absolute;
width: 120px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}

.submenu {
position: absolute;
left: 0px;
width: 120px;
border: 1px solid none;
background-color: none;
layer-background-color: none;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;
color: 0F2D19;
font: bolder;
}
</style>

<script language="Javascript">
var nom = 4;
var ttls = new Array();
var subs = new Array();
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}

lastn = (nom + 1);
lastmove = 0;

function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}

function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}

else {
submenu.visibility = visible;
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}

lastn = n;
lastmove = move;
}

// -->
</script>
</HEAD>

<BODY onLoad="window.status="#" bgcolor="BLACK" TEXT="RED" LINK="RED" VLINK="RED" ALINK="RED">

<div class="title" id="title1" style="top: 120px">
<a href="#" onclick="javascript: toggle(1,50); return false">TEST</a>
<div class="submenu" id="submenu1" style="top: 25px">
<a href="#" target="mainFrame">TEST</a><br>
</div>
</div>

<div class="title" id="title2" style="top: 140px">
<a href="#" onclick="javascript: toggle(2,50); return false">TEST</a>
<div class="submenu" id="submenu2" style="top: 25px">
<a href="#" target="mainFrame">TEST</a><br>
<a href="#" target="mainFrame"></a><br>
<a href="#" target="mainFrame"></a><br>
<a href="#" target="mainFrame"></a><br>
</div>
</div>

<div class="title" id="title3" style="top: 160px">
<a href="#" onclick="javascript: toggle(3,50); return false">TEST</a>
<div class="submenu" id="submenu3" style="top: 25px">
<a href="#" target="mainFrame">TEST</a><br>
<a href="#" target="mainFrame"></a><br>
</div>
</div>

<div class="title" id="title4" style="top: 180px">
<a href="#" onclick="javascript: toggle(4,50); return false">TEST</a>
<div class="submenu" id="submenu4" style="top: 25px">
<a href="#" target="mainFrame">TEST</a><br>
<a href="#" target="mainFrame"></a><br>
<a href="#" target="mainFrame"></a><br>
<a href="#" target=_blank></a><br>
<a href="#" target=_blank></a><br>

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

**HackerX** · 07-11-2003 09:06 AM

no help then?

Thread: Combine Two Effects? Help

Thread Tools

Display

Combine Two Effects? Help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions