Javascript HELP!!!
- Started
- Last post
- 25 Responses
- timkortman
Hey Guys,
I need some help with this javascript that I found. It is exactly what I needed aside from some easy styling. The question is:
http://www.switchonthecode.com/t…
I need the animation to start out at 0% and fade to 100% onclick. As you can see it is currently the opposite of that.
I have read through the forum posts and still can not get it to function correctly. PLEASE HELP!!!
- timkortman0
Here is my current code:
<script language="javascript">
var TimeToFade = 200.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}</script>
- briareos0
use jQuery...much easier. it has a .fadeIn() function
- http://api.jquery.co…briareos
- +1
Do a google search for jQuery fadenocomply
- acescence0
yeah, i'd use jquery. otherwise, you need to first set the opacity to 0:
var element = document.getElementById( 'fadeBlock' );
element.style.opacity = 0;
element.style.filter = 'alpha(opacity = 0)';but that has to be executed after the element actually loads,so the js has to go after fadeBlock in the document, not in head, or you have to trigger it onload or you'll get an error.
just use jquery.
- timkortman0
Can anyone point me to an effect that is similar to the one i posted before. I am a total newb when it come to JS
- acescence0
of course, if that's the only javascript you'll be using on a site, it may be better to just use a handcoded script like this than an extra 72k library and http request.
- 3030
@acescence - this one below is 24.1KB big
http://ajax.googleapis.com/ajax/…- no it's not, it's 70.48kacescence
- it's usually 0k if you use the google cdn version...kingsteven
- timkortman0
Ok, basically I am trying to achieve the effect that marquecreative.com has on their site on the top right hand side but without using flash. I dont need forms like they have just a some text inside the box.
- 3030
timkortman, don't fuck around with native JS just for this one tiny effect. Go for jquery - it will save your time and some nerves. Those libraries were written for a reason.
It is good to know JS basics and syntax before you get yourself familiar with jQuery or other JS libraries.
- 3030
@acescence - I saved file on my disk and it is 70.48KB big;
However, FireBug shows 24.1KB even when I clear my cache? Is it due to file hosted on Google CDN?
- timkortman0
303, I am completely fine with whatever will be the easiest and achieve the effect I am looking for.
The fact of the matter is that I am a designer and not developer and am trying to implement this onto my personal site, but to no avail. I am just looking for an easy solution that I (knowing html, css & php) can use.
- 3030
@timkortman - then go for jQuery; if you need some help, you can e-mail me.
- acescence0
this will behave like the marquecreative example, the link fades it in and clicking anywhere in the body will fade it out again.
- timkortman0
acescence, this works perfectly, but I am currently using a modified version of foliogrid(wordpress templete), and the jquery seems to effect the functionality of the other scripts that are in that theme. Does this sound right to you or is this something I did?
- acescence0
yeah, that's a conflict with another javascript library. just change all of the instances of the dollar sign to jQuery:
jQuery(document).ready(function...
jQuery("#fadeBlock").hide();
jQuery("#clicky").click(function...
jQuery("#fadeBlock").fadeIn('fas... function() {
jQuery("body").click(function(){
jQuery("#fadeBlock").fadeOut();
jQuery("body").unbind("click");
});
});
});
});- well it screwed it all up here, but you get the idea.acescence
- timkortman0
acescence, I tried that but it didn't fix the problem.
- acescence0
I'll have to see a link.
- timkortman0
ok...here is the site and how it should look...minus the thumbnail problem.