PDA

Click to See Complete Forum and Search --> : fade-in menu....

xataku_nakusute
07-25-2003, 11:18 PM
is it possible to make a menu(using tables) fade-in instead of just appearing???
David Harrison
07-26-2003, 02:27 PM
Hows this:

Edit: Having thought about it this may not be what you wanted.
David Harrison
07-26-2003, 04:10 PM
I had another idea, I think this is more what you're looking for although it doesn't look so good on a computer with a slow cpu.

Edit: Only works on IE. And I've only tested it on version 6. This may be because I have used 100% width and height in a div tag style attribute.
xataku_nakusute
07-27-2003, 03:34 AM
thanx....but how i would i make it fade out?
David Harrison
07-27-2003, 05:01 PM
A simple modification and:
sciguyryan
08-10-2003, 10:50 AM
hi,


could you combine the two above so the table fades in stays for say five seconds and then fades out?
David Harrison
08-10-2003, 02:27 PM
I've modifying it so it's a little bit better now, the script is a lot more complicated but it can be easily modified. So hows this:
sciguyryan
08-11-2003, 04:06 AM
hi,


thank's that works perfectly.


:D A little more complicated!!!!!!!!!!!!!! :D
David Harrison
08-11-2003, 02:12 PM
Happy to help. :)

If you'd like I've got a simpler script that's not quite as customizable, you'd have to hard code any changes that you want to make, but it will still allow you to set the delay that you want.
sciguyryan
08-11-2003, 02:49 PM
hi,


thanks but, seeing as i'm only a beguinner in DHTML but, iwant to lurn and i only know one way by doing!
all the same thank you for the offer:)
David Harrison
08-11-2003, 03:14 PM
Well good luck with the DHTML then. I hope your progress quickly. :)
sciguyryan
08-11-2003, 03:38 PM
hi,


i'm a fast learner as i'm only 14.
i am hoping to lern most of the webdesign languages and will given time. anyway thank you for replying!:)
pyro
08-11-2003, 04:13 PM
While you are learning, you have a good oppertunity to learn correctly. Learn to use HTML 4.01 Strict, with CSS for layout when possible. When it is not possible to use a pure CSS layout, don't nest tables. Read up on accessability, perhaps in the excellent book by Jeffrey Zeldman, "designing with web standards". Writing standard compliant code will help insure you pages are forward compatable. When programming for the client side, remember that 13% of users have JavaScript disabled, and it can't be relied on to provide content or navigation. If you use it, provide backups for those without JavaScript (excluding non-essential elements). And, remember that ASP stands for "Activly Support PHP" :p
sciguyryan
08-12-2003, 06:02 AM
hi,



thanks for thoes tips i will remember to try to make alternatives for people who have disabled their javascript.
Paul Jr
08-14-2003, 12:17 AM
Can someone just give me the Sript/Code to initiate the fade in? I have the table and everything, and all I want now is the Script/Code to put on my page so the table fades in.
David Harrison
08-14-2003, 02:08 PM
Here ya go.
xataku_nakusute
08-15-2003, 03:53 AM
i remember you posting up a similar code eealier in the thread...in which you clicked on one of the two links to activate the fade in/out....i was wondering if you could repost that, and/or make a new one in which you rollover one element and the rollover activates the fade in of the other element associated to it.

thank you for you time and much effort
David Harrison
08-15-2003, 05:52 PM
I'm working on a better one that that, it will stop fading in if the mouse activates the fade out bit and from the same point will start fading out instead. Right now though it's being stubborn and refusing to work properly, I'll have it by tomorrow though.
Paul Jr
08-15-2003, 10:26 PM
Thanks, lavalamp!
It's a bit large and complicated for me to understand at a glance...but I'll be able to figure it out as soon as I look at it more closely.
David Harrison
08-16-2003, 12:15 PM
Paul Jr: Happy to help. :)

xataku_nakusute: Here's your fade in/out onmouseover script, although sometimes there seems to be a bit of a delay, I'll try and sort that out:
xataku_nakusute
08-17-2003, 12:12 AM
thanx!!
xataku_nakusute
08-17-2003, 02:57 AM
your code works wonderfully on my site, and i thank you again for that.

but i do have another question:
how can i make it compatible for multiple elements?
in other words....how can i make it so that i call it like so?:

onmouseover="control_in('fader')"

i tried doing this:

<html>

<head>

<title>Table Fade In And Out</title>

<style type="text/css"><!--

body{background:url(sample.jpg);/*background:url(http://www.geocities.com/caulolli/taylor.png);*/background-repeat:no-repeat;margin:0;}
#fader{z-index:1000;filter:alpha(opacity=0);background-color:#f00;width:100px;height:100px;}

--></style>

<script type="text/javascript"><!--

var steps=15; // How many steps would you like for fading?. Max is 100, min is 1.
var gap=75; // How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
var cont_fade_in="yes"; // Put "no" if you don't want it to follow on to fading in again.
var cont_fade_out="yes"; // Put "no" if you don't want it to follow on to fading out again.
var n=0;
var m=0;
var current="start";

steps=(steps<1 || steps>100)?15:Math.round(steps);
gap=(gap<1)?75:Math.round(gap);

function fade(){

m=Math.round(n/steps*100);

document.getElementById(elmnt).style.filter="alpha(opacity="+m+")";

n+=(current=="in")?1:(-1);

if(n<=steps || n>=0){setTimeout("fade()",gap);}
else if(n==steps+1){n-=2;current="end";}
else{n+=2;current="start";}}


function control_in(elmnt){

if(current=="start"){current="in";fade();}
else{current="in";}

}


function control_out(elmnt){

if(current=="end"){current="out";fade();}
else{current="out";}

}

//--></script>

</head>

<body>

<table id="fader">
<tr>
<td style="color:#ff0;">Hi There</td>
</tr>
</table>

<a href="#" style="display:block;width:100px;height:20;text-align:center;" onmouseover="control_in('fader');return true" onmouseout="control_out('fader');return true" onclick="return false;">Fading Table.</a>

</body>

</html>


but this just baraged me with errors!!
i just need this to become possible becuz im using this to fade in menu items and sub-menu items. and since i need the code to be compatible with multiple menu elements and such, i dont want to have to make like 20 duplicates of this just so i can get the desired effect.

also, could i make it so that right before the fade-in, the specified element's display visibility becomes visible and right after the fade-out, it becomes hidden again?

thanx again for all of your time, effort, and most of all: scripts

thanx again lavalamp, your the best!!!
David Harrison
08-17-2003, 02:08 PM
I do like a challange. I'll try and get back to you as soon as I can.
David Harrison
08-18-2003, 02:26 PM
Hows this then? It comes complete with visibility:hidden/visible; but will still leave the tables visible for those browsers out there without js enabled.
xataku_nakusute
08-18-2003, 03:49 PM
YAYAYAYAY!
thanx!
David Harrison
08-18-2003, 03:53 PM
Happy to help. :)