www.webdeveloper.com
Results 1 to 4 of 4

Thread: Combine Two Effects? Help

  1. #1
    Join Date
    Jul 2003
    Posts
    71

    Question Combine Two Effects? Help

    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

  2. #2
    Join Date
    Jul 2003
    Posts
    71
    does anyone know how to do this?

  3. #3
    Join Date
    Jul 2003
    Posts
    71
    heres the code for the fade effect menu:

    <HTML>
    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function locktrueie(myform){myform.ie.checked=true;}
    function lockfalsenet(myform){myform.nets.checked=true;}
    function goToURL() { window.location = ""; }

    function nochange(mycheckbox)
    {
    if (mycheckbox.checked == true){mycheckbox.checked = false;}else{mycheckbox.checked = true;}
    }

    // End -->
    </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">
    <!--
    BODY {
    scrollbar-3d-light-color:RED;
    scrollbar-arrow-color:RED;
    scrollbar-base-color:RED;
    scrollbar-dark-shadow-color:RED;
    scrollbar-face-color:BLACK;
    scrollbar-highlight-color:BLACK;
    scrollbar-shadow-color:RED}
    //-->
    </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>

  4. #4
    Join Date
    Jul 2003
    Posts
    71
    no help then?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles