|
JavaScript - Cross Fading Divs Stop-loop
I have 5 divs fading in a slideshow with the crossfade js. This basically fades the opacity of each div and loops the 5 divs so that it continues to fade from the 5th to the first and so on...
Is there a way for me to end the fade at the 5th div so that it does not loop? Here is the code for the JS: // JavaScript Document // CrossFader var x; if (x) { if (typeof(cf) == "undefined") var cf; } else { var cf = this; } cf.fader = function (obj, fadetime, delay) { this.el2 = -1; this.id = obj; for (i=0; i<obj.length; i++) { var s = document.getElementById(obj[i]).style; s.position = "absolute"; s.visibility = "hidden"; s.opacity = 0; s.filter = "alpha(opacity=0)"; } this.dur = fadetime; this.delay = delay; this.fade2(); } cf.fader.prototype.fade1 = function() { this.time += this.interval; var ieop = Math.round(this.fade(this.time, 0, 1, this.dur) * 100); var op = ieop / 100; var s = document.getElementById(this.id[this.el2]).style; s.opacity = op; s.filter = "alpha(opacity="+ieop+")"; if (this.el1 > -1) { var s = document.getElementById(this.id[this.el1]).style; s.opacity = 1 - op; s.filter = "alpha(opacity="+(100 - ieop)+")"; } if (this.time == this.dur) { clearInterval(this.id1); if (this.el1 > -1) document.getElementById(this.id[this.el1]).style.visibility = "hidden"; var t=this; this.id2 = setInterval(function() {t.fade2()}, this.delay); } } cf.fader.prototype.fade2 = function() { if (this.id2) clearInterval(this.id2); this.el1 = this.el2; this.el2++; if (!this.id[this.el2]) this.el2 = 0; if (this.el2 == this.el1) return false; document.getElementById(this.id[this.el2]).style.visibility = "visible"; this.interval = 50; this.time = 0; var t=this; this.id1 = setInterval(function() {t.fade1()}, this.interval); } cf.fader.prototype.fade = function(t,b,c,d) { return c/2 * (1 - Math.cos(Math.PI*t/d)) + b; } and here is the html markup: <div id="fader"> <div id="fade1"> <h1>1</h1> </div> <div id="fade2"> <h1>2</h1> </div> <div id="fade3"> <h1>3</h1> </div> <div id="fade4"> <h1>4</h1> </div> <div id="fade5"> <h1>5</h1> </div> </div> <script type="text/javascript"> // ids, fade length, display time var fadeIt = new fader(new Array("fade1", "fade2", "fade3", "fade4", "fade5"), 2000, 4000); </script> Any help on how to end the loop would be greatly appreciated!!! Similar TutorialsI'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows: I define an array and fill it with the div objects I want to fade in and out. I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object. First I check if the object is opaque, and if so set it to fade along with a time; Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration. If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly. Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately. This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error). So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message. So I have several questions: 1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that? 2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so). 3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out. I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here. Thanks in advance. Code:
function commencez(){ //parent function to store var's
var TimeToFade = 10000;
theArray = new Array(2);
var wrench = new Date().getTime();
for (var a=0; a<3; a++){ //fill the array with objects
theArray[a] = document.getElementById("grad" + a);
theArray[a].FadeState = -2; //start them transparent
}
function fader() {
var check = new Date().getTime(); //stops the function after 30 seconds
if( check <= wrench + 30000 )
{
return;
}
for(var i=0; i<3; i++){
if (theArray[i].FadeState !=1 && theArray[i].FadeState != -1)
{
if( theArray[i].FadeState == 2)
{
theArray[i].FadeState = -1;
theArray[i].FadeTimeLeft = TimeToFade;
theArray[i].FadeBegan = new Date().getTime();
}
if( theArray[i].FadeState == -2)
{
var rndm=Math.floor(Math.random()*11);
if( rndm == 1)
{
theArray[i].FadeState = 1;
theArray[i].FadeTimeLeft = TimeToFade;
theArray[i].FadeBegan = new Date().getTime();
}
}
}
if( theArray[i].FadeState == 1 || theArray[i].FadeState == -1)
{
var now = new Date().getTime();
since = now - theArray[i].FadeBegan;
if( theArray[i].FadeTimeLeft <= since )
{
theArray[i].style.opacity = theArray[i].FadeState == 1 ? '1' : '0.2';
theArray[i].style.filter = 'alpha(opacity = ' +
(theArray[i].FadeState == 1 ? '100' : '20') + ')';
theArray[i].FadeState = theArray[i].FadeState == 1 ? 2 : 2;
}
theArray[i].FadeTimeLeft -= since;
var howMuch = theArray[i].FadeTimeLeft / TimeToFade;
if( theArray[i].FadeState == 1)
{
howMuch = 1-howMuch;
theArray[i].style.opacity = howMuch;
theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
}
if( theArray[i].FadeState == -1)
{
theArray[i].style.opacity = howMuch;
theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
}
}
} //close the for loop
setTimeout( fader() , 500); //last thing fader does is recall itself after half a second
} //close the fader function
fader();
} //close parent function
</script>
Ok I was making some error checking... and well for some reason its not liking me... anyone able to tell me where I went wrong? Code: <html>
<table border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Discounts</th>
</tr>
<tr>
<td><a href = "http://www.foodfacts.info/blog/uploaded_images/tall-hamburger.jpg">Mega Burger</a>
</td>
<td>$3.99</td> <td>10%</td>
</tr>
<tr>
<td><a href = "http://www.spokesmanreview.com/media/photos/101507_burger.jpg">Bacon Cheese Burger</a></td>
<td>$3.50</td> <td>8%</td>
</tr>
<tr>
<td><a href = "http://www.treasurechestcc.com/graph/dqgrill.jpg">Grilled Chicken Sandwhich</a></td>
<td>$2.99</td><td>5%</td>
</tr>
<tr>
<td><a href = "http://www.hardrock.com.hk/images/HaystackChickenSalad.jpg">Fresh Chicken Salad</a></td>
<td>$4.00</td><td>20%</td>
</tr>
</table>
<br /><br />
<input type="button" value="Add to cart" onclick="add()" />
<input type="button" value="Check out" onclick="check()" />
<div id="result"> </div>
<script type="text/javascript">
var cartItem = new Array();
var cartItemAmmount = new Array();
var counter = 0;
function getItemInput() {
var input = "";
try {
input = prompt("Please enter a product from out menu.","");
}
catch(e) {
alert("Out of range");
}
return input;
}
function getAmmountInput() {
var input = "";
try {
input = prompt("Please enter the ammount you want.","");
}
catch(e) {
alert("Out of range");
}
return input;
}
function add() {
do {
cartItem[counter] = getItemInput();
}while(cartItem[counter]=='' || cartItem[counter]==null || cartItem[counter]!="Mega Burger" || cartItem[counter]!="Bacon Cheese Burger" || cartItem[counter]!="Grilled Chicken Sandwhich" || cartItem[counter]!="Fresh Chicken Salad");
do {
cartItemAmmount[counter] = getAmmountInput();
}while(cartItemAmmount[counter]=='' || cartItemAmmount[counter]==null && cartItemAmmount[counter]>=1 && cartItemAmmount[counter]<=99999999999999999999999999999999);
counter++;
}
function check() {
var total = cartItemAmmount;
for(var i=0; i<cartItem.length; i++) {
document.getElementById("result").innerHTML = '<table border="1"><tr><th>Product</th><th>Ammount</th></tr>';
document.getElementById("result").innerHTML += "<tr><td>" + cartItem[i] + "</td><td>" + cartItemAmmount[i] + "</td></tr>";
document.getElementById("result").innerHTML += '<tr><td colspan="2"> Total:' + total + "</td></tr>";
document.getElementById("result").innerHTML += "</table>";
}
}
</script>
</html>
Code: do {
cartItem[counter] = getItemInput();
}while(cartItem[counter]=='' || cartItem[counter]==null || cartItem[counter]!="Mega Burger" || cartItem[counter]!="Bacon Cheese Burger" || cartItem[counter]!="Grilled Chicken Sandwhich" || cartItem[counter]!="Fresh Chicken Salad");
I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle: Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one! Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something? Please help if you can - I couldn't find anything related to this at all. Thanks I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked. I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight... The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway. I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below. Thanks. Code:
/* designImages[x][0] = the image source on the page;
* designImages[x][1] = the destination url on clicking the image;
*/
var designImages = new Array();
designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );
designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );
designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );
designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );
designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );
designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );
designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
window.onload = function()
{
creationCompleteHandler();
}
function creationCompleteHandler()
{
calcNumDesigns();
setLinks();
}
function calcNumDesigns()
{
var numDesignBoxes = designImages.length;
var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
{
var newGalleryBox = document.createElement('div');
var newGalleryBoxID = ("galleryRow" + n);
newGalleryBox.setAttribute('id',newGalleryBoxID);
newGalleryBox.setAttribute('class',"galleryBox");
document.getElementById('content').appendChild(newGalleryBox);
squareOff(newGalleryBox);
var rowBoxes;
if ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
else rowBoxes = 2;
for ( m = 0 ; m <= rowBoxes ; m++ )
{
var boxNum = ( n * 3 ) + m;
var newDesignBox = document.createElement('div');
var newDesignBoxID = "design" + boxNum;
newGalleryBox.appendChild(newDesignBox);
newDesignBox.setAttribute('id',newDesignBoxID);
newDesignBox.setAttribute('class',"designBox");
var newDesignImg = document.createElement('img');
var newDesignImgID = "designImg" + boxNum;
newDesignImg.setAttribute('id',newDesignImgID);
newDesignImg.setAttribute('class',"designImage");
newDesignImg.src = designImages[boxNum][0];
newDesignBox.appendChild(newDesignImg);
}
}
}
function squareOff(frame)
{
document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
}
function setLinks()
{
for (x in designImages)
{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
};
}
function sendToURL(x)
{
var url = designImages[x][1]
MM_goToURL('self',url);
return document.MM_returnValue;
}
function MM_goToURL()
{ //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
Not done any coding for a LONG time. I want to get the value of the opacity for a element. I'm using Nightly 9.0a1. Also, from what I have read Firefox should us this to SET the opacity style: Code: obj.style.opacity = opacity/100; But this does not see to work in the CSS. In the CSS the value ranges from 0 to 1. So 50% would be 0.5 My current function stops working before executing the alert command. I'm guessing i'm trying to get the style value wrong? Code: function fadeByid(objId) {
if (document.getElementById) {
obj = document.getElementById(objId);
opacity = obj.style.opacity;
alert(opacity);
if (opacity >= 100) {
setOpacity(obj, opacity);
opacity -= 10;
window.setTimeout("fadeByid('"+objID+"','"+opacity+")", 100);
}
}
}
Hey everyone, What I need to do is have my website so when it loads on the homepage for the first time its starts of with a blank (specified color) background, then the logo fades in the middle, then a few seconds later that all fades away to reveal the website. Is this possible without forwarding to separate pages and without flash? Thanks all. Hey everyone, For a site I'm currently working on I needed the index page to start out blacked out, have an animated logo fade in, then fade out again before the main page contents fading up all without redirecting etc. I used the following to do this and it works except for one thing. Once the overlay div has faded, it seems to take around 20-30 seconds before the main contents becomes usable. Any ideas for a fix? Code: <body style="overflow:hidden;" onload="MM_preloadImages('images/enter_o.png')">
<div id="overlay" ><img border="0" src="images/animatelogo.gif" alt="img" /></div>
<script type="text/javascript">
/*<![CDATA[*/
function fade(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0];
this.obj=obj;
var img=document.getElementById(o.ID).getElementsByTagName('IMG')[0];
img.style.top=this.wwhs()[1]/2-img.height/2+'px';
this.mS=o.Duration||1000;
this.animate(img,new Date(),0,100,true);
img.style.visibility='visible';
}
fade.prototype={
animate:function(obj,srt,f,t,sc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
this.now=Math.max(now,f<0||t<0?now:0);
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
if (ms<this.mS){
this.dly=setTimeout(function(){ oop.animate(obj,srt,f,t,sc); },10);
}
else if (sc){
this.animate(this.obj,new Date(),100,0,false);
}
else {
document.body.removeChild(obj);
}
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
}
setTimeout(function(){
new fade({
ID:'overlay',
Duration:11500
});
},10);
/*]]>*/
</script>
<table class="mainbody" width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div style="position:absolute; left: 50%; top: 50%; margin: -197px 0 0 -300px; height: 394px; width: 600px; text-align:center;" />
<iframe src="http://player.vimeo.com/video/******44?title=0&byline=0&portrait=0&color=000000" width="600" height="328" frameborder="0"></iframe>
<br /><br /><a href="films.php" class="entrytext"><img src="images/enter.png" id="Image1" onmouseover="MM_swapImage('Image1','','images/enter_o.png',1)" onmouseout="MM_swapImgRestore()"></a></div>
</td>
</tr>
</table>
</body>
So as a breakdown, the page should load black, remain black as a logo fades into it, plays through and fades out, followed by the main content fading up and becoming usable. All this happens as desired except after the main content is visible it takes ages to become active as if the overlay is still there :-\ Thanks Hey Guys, I'm pretty new to Javascript, maybe you can help me with a small piece. I have 4 images, they are displayed 2x2. Initially they rest at 0.3 opacity.When you hover over one, it goes to 1 opacity. When you click an image, it becomes the selected image and stays at 1 opacity. I have this all working fine. My problem is, when you click another image, the "selected" image stays at 1 opacity until you roll over it again. I want it to automatically fade back to 0.3 opacity when another image is selected. I will attach my code: Code: <style type="text/css">
.MouseOver
{
opacity:0.3;
filter:alpha(opacity=30);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
currentImage=null;
$(function() {
$('.MouseOver').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
if(currentImage != this) {
$(this).stop().animate({ opacity: 0.3 }, 300);
}
})
});
});
function doSomething(pic) {
currentImage=pic;
}
</script>
The images then have .MouseOver class and the onClick calls the doSomething function. I'd appreciate any help you can give me. Thanks so much. Hi guys! I'm trying to make a div layer (id "tehz") fade in using Java. Problem is, it doesn't go through the animation, it just skips to the last stage. If I put an alert to show me the value of "cat" at every step it works just fine. Can anyone please tell me what's the matter? Code: function vis(cat) {
if(cat<=90) {
// alert(cat)
document.getElementById("tehz").style.opacity=cat/100;
document.getElementById("tehz").style.filter="alpha(opacity="+cat+")"
cat=cat*1+1
setTimeout(vis(cat),1000);
}
}
How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS. You can view the HTML page in question he http://aksdesigns.co.uk/temp/template.html The DIV container is the one with the ID of #MainContent Code: #MainContent {
width: 980px;
height: 550px;
margin: 0 auto;
padding: 0px;
background-image: url(images/Content-bg-1.jpg);
background-repeat: no-repeat;
background-position: top center;
border-left: 2px solid #153365;
border-right: 1px solid #FFF;
}
It probably couldn't be done using CSS be how could I achieve this with Javascript? So far I have this written up which does work well. However, the problem is if one toggles the fadeOut function while the fadeIn function is still in action. That causes the functions to collide and have to element being faded start flashing or freezing. Is there a simple way to prevent this? Thank you. Code: function fadeIn(elementId) {
var element = document.getElementById(elementId);
if(element.style.display === 'none') {
element.style.display = 'block';
element.style.opacity = '0';
}
if(element.style.opacity < 1) {
var opacityFloat = parseFloat(element.style.opacity);
element.style.opacity = opacityFloat + 0.1;
setTimeout("fadeIn('" + elementId + "')", 50);
}
}
function fadeOut(elementId) {
var element = document.getElementById(elementId);
if(element.style.opacity > 0) {
var opacityFloat = parseFloat(element.style.opacity);
element.style.opacity = opacityFloat - 0.1;
setTimeout("fadeOut('" + elementId + "')", 50);
}
if(element.style.opacity == 0) {
element.style.display = 'none';
}
}
Hi, I am having difficulty (tearing my hair out) with this problem. I have written a page as a learning experince for JavaScript. The page is here. The fade in works perfectly for ONLOAD and for ONMOUSEOVER but not for ONMOUSEOUT. The JavaScript code is as follows: Code: var d_opacity ;
var e_element ;
var t_timeout ;
function fadeInElement(s_element_to_fade_in)
{
d_opacity = 0.25 ;
e_element = document.getElementById(s_element_to_fade_in) ;
(e_element.style).display = "" ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeIn()", 125) ;
}
function fadeIn()
{
if (d_opacity == 1.0)
{
clearTimeout(t_timeout) ;
}
else
{
d_opacity += 0.075 ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeIn()", 125) ;
}
}
function fadeOutElement(s_element_to_fade_out)
{
e_element = document.getElementById(s_element_to_fade_out) ;
d_opacity = (e_element.style).opacity ;
t_timeout = setTimeout("fadeOut()", 125) ;
// (e_element.style).display = "none" ;
}
function fadeOut()
{
if (d_opacity == 0.25)
{
clearTimeout(t_timeout) ;
(e_element.style).display = "none" ;
}
else
{
d_opacity -= 0.075 ;
(e_element.style).opacity = d_opacity ;
t_timeout = setTimeout("fadeOutn()", 125) ;
}
}
When I use the commented out line in fadeOutElement(), the menu disappears which says to me ONMOUSEOUT is being triggered correctly, but if I do the fading out code, it does nothing. Any help greatly appreciated. I've prepared the following page: http://www.ko-go.gr/restaurant/index1a.html but I would prefer the background images to fade in and out rather than change abruptly. I've spent hours searching for appropriate code, but have met a dead end so far. Incidentally, I presume that the delay before the first background image appears is because of all the images pre-loading. Can anyone suggest a way to immediately display the first image? Thanks for taking the time to read this... Hi I usually work in html, but I am trying to put up rotating images that fade. I found some Javascript coding but it isn't working correctly. I only see the first image and it fades but nothing happens after that. This is the code I have: Code: <script language="JavaScript">
<!-- Begin
var slideShowSpeed = 5000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'image1.jpg'
Pic[1] = 'image2.jpg'
Pic[2] = 'image3.jpg'
Pic[3] = 'image1.jpg'
Pic[4] = 'image2.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
<body link="Red" vlink="Red" alink="Red" leftmargin=0 topmargin=0 bgcolor="Black"onLoad="runSlideShow()">
<img src="images/image1.jpg" alt="" name="SlideShow" id="SlideShow" width="300" height="200" border="0" align="left">
Can some assist me twith this? Thanks, Lisa ok ive been searching for a way to make it so when i click on a link it brings up an image or text box...and then when you click on another link on the same page that text box fades out and the new one fades in... i know how to make images fade in and out and i can make them overlap each other and everything...but making it so i can click either as many times as i want and they keep overlapping is a bit outside my scope sorry...but through my scowering of this forum i found an old post on this thread he http://codingforums.com/showthread.php?t=171655 where a user "spudhead" posted what i think im looking for...but it didnt work for me when i tried it... again, sorry if this isnt how you post idk im new here =/ i was going to post on the old thread but i wasnt sure if it would be answered... thanks for the responses... Alrighty so here's what I have. Live example: http://www.thestrikeforum.com/ex/ It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript). There are 5 images in the folder rotateimage which also has the php script getimages.php in it. Currently only the first image fades in however I want all the images to fade in as the first one does. Codes: Php script that gets all the images for the array: PHP Code: <? //PHP SCRIPT: getimages.php Header("content-type: application/x-javascript"); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname=".") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'galleryarray['.$curimage.']="'.$file .'";'; $curimage++; } } closedir($handle); } return($files); } echo 'var galleryarray=new Array();'; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> Main html page with the javascript: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
function initImage() {
imageId = 'slideshow';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
I have a jQuery Slideshow script that i'm using and it's all done in 6 lines. Code: $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css. Code: .fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}
.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}
jonathaneiger.com Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this: Code: <script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;
function fade(how)
{
if(how==0)
{
if(opacity>0)
{
opacity = opacity - 0.1;
}
else return;
}
else
{
if(opacity<1)
{
opacity = opacity + 0.1;
opacity_IE = opacity * 100;
}
else return;
}
document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
var temp = 'fade('+how+')';
setTimeout(temp, 1000);
}
function main_loop()
{
fade(0); //break_point 2
if(current == n_pics)
{
current = 1;
}
else
{
current = current + 1;
}
document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
fade(1);
main_loop();
}
</script>
</head>
<body onload="main_loop();">
fade(0) means to fade out, and fade(1) - to fade in. on IE i get 'Member Not found' on break_point 1 and too much recursion at breake_point 2 can you help me? Hi guys. I'm using a jquery plugin called innerfade, which I got from he http://medienfreunde.com/lab/innerfade/ . I've used it to fade few lines of text into each other: Code: <div class="fade"> <p>Line 1 asdfghjkl</p> <p>Line 2 sdasdsafasdgedgr</p> <p>Line 3 ddddddddddddddddddddd</p> </div> So only first line appears on page load, then after few seconds fades into Line 2 etc. Everything works perfect, but there is only one problem - the text is not centered even if it says so in CSS. Since the lines have different lenghts, the shorter the line the more it's aligned to the left. I've added properties for both div and p's - tried all combinations of text-align: center and margin left & right: auto. No joy. But when I remove the script all 3 lines appear centered perfectly. So my question is how do I make them centered? I presume it has to be added in the JS part since it seems to be overriding the CSS. Here is the script's full code: Code: (function($) {
$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} else if (settings.type == "random") {
var last = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function() {
do {
current = Math.floor ( Math.random ( ) * ( elements.length ) );
} while (last == current );
$.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) {
settings.type = 'sequence';
var current = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function(){
$.innerfade.next(elements, settings, (current + 1) % elements.length, current);
}, settings.timeout);
$(elements[current]).show();
} else {
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
}
}
};
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
} else
alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
if (settings.type == "sequence") {
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
} else if (settings.type == "random") {
last = current;
while (current == last)
current = Math.floor(Math.random() * elements.length);
} else
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
And call: Code: $(document).ready(
function(){
$('.fade').innerfade({
animationtype: 'fade',
speed: 750,
timeout: 5000,
type: 'random',
containerheight: '1em'
});
});
|
|||||||