#1
  1. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0

    fade-in, fade-out script for dhtml menu


    ive included both my html page and my .js file so you cann take a closer look at what were dealing with here.

    basically, my page contains a large logo at the top, a nav bar which includes my dhtml menu:
    the menu is simple, just a basic onmouseover, this things display becomes "block" and onmouseout, the same things display becomes "none" etcetc

    now, what i need, is something so that when the display of my element becomes "block", the menu increments its filter(alpha filter) from 0 to 100, and then, when its display becomes none again, the reverse. now, i was hoping too that the fade script and the display script could be combined so instead of just making it so the menus sub-items are always there, just not opaque enough to see, i want it so that it has no display at all and also its opacity=0. it may seem a bit demanding but, you should be able to work off of what i provide for you.

    also, if you cant combine the 2 scripts together, then i need it so that when you call the function, it is called like so:

    onmouseover="fadein('blah')"
    whereas blah is the id of the element i want to fade in.
    the same goes with the fade out script.

    thank you for your consideration!
    the .js file will be provided in the next post.
    for now, heres the html page:
    Attached Files
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0

    .js file


    .js file:

    PHP Code:
    function subopen(elmnt)
    {
    document.all(elmnt).style.display="block"
    }
    function 
    subclose(elmnt)
    {
    document.all(elmnt).style.display="none";
    }
    var 
    i=0
    var j=52
    var speed=0.0001
    var leftMar "";
    var 
    leftMsg "";
    var 
    rightMsg "";
    var 
    sepl "::";
    var 
    sepr "::";
    var 
    msg1 "[[[[[[[[[[[[ [[[[[[[[[[[[ [[[[[[[[[[[[ [[[[[[[[[[[[ ";
    var 
    msg2 "Terminal Web-Design";
    var 
    msg3 " ]]]]]]]]]]]] ]]]]]]]]]]]] ]]]]]]]]]]]] ]]]]]]]]]]]]";
    function 
    writeMsg()
    {
    window.status leftMar leftMsg + (msg1.substring(i,msg1.length) + msg1.substring(0,i)) + sepl msg2 sepr + (msg3.substring(j,msg3.length) + msg3.substring(0,j)) + rightMsg
    if(i<msg1.length && j<=msg3.length)
    {
    i++
    j--
    speed/100
    }
    else
    {
    i=0;
    j=52;
    speed/100
    }
    setTimeout("writeMsg()",speed/100)

    and finally, my css:

    PHP Code:
    body
    {
    background#ffffff;
    color#000000;
    font-familyarial;
    font-size8pt;
    cursor: default;
    scrollbar-arrow-color#dfff0f;
    scrollbar-track-color#000000;
    scrollbar-face-color#000000;
    overflowhidden;
    }
    .
    arr
    {
    positionabsolute
    right3px
    z-index100;
    }
    .
    menu
    {
    backgroundtransparent;
    border-width0px;
    positionrelative;
    top0px;
    left0px;
    z-index100;
    }
    .
    submenu
    {
    background#ffffff;
    displaynone
    positionabsolute
    left152;
    z-index100;
    }
    .
    submenu2
    {
    background#ffffff;
    displaynone
    positionabsolute
    left108;
    z-index100;
    }
    .2
    {
    background#111111;
    color#ffffff;
    font-familyarial;
    font-size7pt;
    cursor: default;
    }
    .01
    {
    border-width1px;
    border-stylesolid;
    border-color#000000;
    background#ffffff;
    color#000000;
    font-size7pt;
    font-familyverdana;
    widthauto;
    z-index100;
    }
    .02
    {
    border-width1px;
    border-stylesolid;
    border-color#000000;
    background#000000;
    color#dfff0f;
    font-size7pt;
    font-familyverdana;
    widthauto;
    z-index100;
    }
    .03
    {
    border-width1px;
    border-stylesolid;
    border-color#000000;
    background#000000;
    color#dfff0f;
    font-size7pt;
    font-familyverdana;
    widthauto;
    }
    h1
    {
    filterglow(color=#000000,strength=10);
    width100%;
    color#ffffff;
    font-family7 daysomni girlstopOCRBsystem;
    }
    h1.b
    {
    filterglow(color=#dfff0f,strength=67);
    width100%;
    color#ffffff;
    font-family7 daysomni girlstopOCRBsystem;
    positionabsolute;
    z-index: -1000;
    }
    a.1:link
    {
    color#000000;
    font-size7pt;
    font-familyverdana;
    text-decorationunderline;
    }
    a.1:visited
    {
    color#000000;
    font-size7pt;
    font-familyverdana;
    text-decorationunderline;
    }
    a.1:hover
    {
    color#a0a0a0;
    font-size7pt;
    font-familyverdana;
    text-decorationunderline;
    }
    #main
    {
    color#000000;
    font-size7pt;
    font-familyverdana;
    positionabsolute;
    top100px;
    left230px;
    }
    .
    sep
    {
    positionabsolute;
    top260px;
    left0px;

    note that both of these are required for my dhtml menu to display correctly. also, make sure that all of these docs are in the same dir.

    thanx

IMN logo majestic logo threadwatch logo seochat tools logo