/    Sign up×
Community /Pin to ProfileBookmark

is it possible to make a menu(using tables) fade-in instead of just appearing???

to post a comment
JavaScript

25 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonJul 26.2003 — Hows this:

Edit: Having thought about it this may not be what you wanted.

[upl-file uuid=ae6c96dc-7152-418d-bc3a-a5da748534f0 size=690B]table fade in.txt[/upl-file]
Copy linkTweet thisAlerts:
@David_HarrisonJul 26.2003 — 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.

[upl-file uuid=75b11d08-2fad-40e4-8a9b-31a5a4c1c46f size=1kB]table fade in2.txt[/upl-file]
Copy linkTweet thisAlerts:
@xataku_nakusuteauthorJul 27.2003 — thanx....but how i would i make it fade out?
Copy linkTweet thisAlerts:
@David_HarrisonJul 27.2003 — A simple modification and:

[upl-file uuid=af179d1c-4d3b-4abb-bb1b-f41f545045be size=1kB]table fade out.txt[/upl-file]
Copy linkTweet thisAlerts:
@sciguyryanAug 10.2003 — hi,


could you combine the two above so the table fades in stays for say five seconds and then fades out?
Copy linkTweet thisAlerts:
@David_HarrisonAug 10.2003 — 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:

[upl-file uuid=8efe697c-d0db-48bb-8cf8-69ce49c2b14d size=4kB]table fade in and out ultra customisable.txt[/upl-file]
Copy linkTweet thisAlerts:
@sciguyryanAug 11.2003 — hi,


thank's that works perfectly.


? A little more complicated!!!!!!!!!!!!!! ? [/QUOTE]
Copy linkTweet thisAlerts:
@David_HarrisonAug 11.2003 — 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.
Copy linkTweet thisAlerts:
@sciguyryanAug 11.2003 — 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?
Copy linkTweet thisAlerts:
@David_HarrisonAug 11.2003 — Well good luck with the DHTML then. I hope your progress quickly. ?
Copy linkTweet thisAlerts:
@sciguyryanAug 11.2003 — 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!?
Copy linkTweet thisAlerts:
@pyroAug 11.2003 — 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
Copy linkTweet thisAlerts:
@sciguyryanAug 12.2003 — hi,



thanks for thoes tips i will remember to try to make alternatives for people who have disabled their javascript.
Copy linkTweet thisAlerts:
@Paul_JrAug 14.2003 — 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.
Copy linkTweet thisAlerts:
@David_HarrisonAug 14.2003 — Here ya go.

[upl-file uuid=500f0508-00ff-4f5a-aa8d-1a3a3f10c20d size=1kB]table fade in.txt[/upl-file]
Copy linkTweet thisAlerts:
@xataku_nakusuteauthorAug 15.2003 — 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
Copy linkTweet thisAlerts:
@David_HarrisonAug 15.2003 — 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.
Copy linkTweet thisAlerts:
@Paul_JrAug 16.2003 — 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.
Copy linkTweet thisAlerts:
@David_HarrisonAug 16.2003 — 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:

[upl-file uuid=077537b3-bdb1-4d8d-aa48-860138bdc4ee size=2kB]table fade in and out onmouseover.txt[/upl-file]
Copy linkTweet thisAlerts:
@xataku_nakusuteauthorAug 17.2003 — 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:
<i>
</i>&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Table Fade In And Out&lt;/title&gt;

&lt;style type="text/css"&gt;&lt;!--

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

--&gt;&lt;/style&gt;

&lt;script type="text/javascript"&gt;&lt;!--

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&lt;1 || steps&gt;100)?15:Math.round(steps);
gap=(gap&lt;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&lt;=steps || n&gt;=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";}

}

//--&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;table id="fader"&gt;
&lt;tr&gt;
&lt;td style="color:#ff0;"&gt;Hi There&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;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;"&gt;Fading Table.&lt;/a&gt;

&lt;/body&gt;

&lt;/html&gt;


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!!!
Copy linkTweet thisAlerts:
@David_HarrisonAug 17.2003 — I do like a challange. I'll try and get back to you as soon as I can.
Copy linkTweet thisAlerts:
@David_HarrisonAug 18.2003 — 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.

[upl-file uuid=8516bf14-522c-4138-b5f0-63624a529b05 size=3kB]table fade in and out multiple.txt[/upl-file]
Copy linkTweet thisAlerts:
@xataku_nakusuteauthorAug 18.2003 — YAYAYAYAY!

thanx!
Copy linkTweet thisAlerts:
@David_HarrisonAug 18.2003 — Happy to help. ?
×

Success!

Help @xataku_nakusute spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...