PDA

View Full Version : Fade-in effect help


Valentino Liberace
10-21-2010, 05:38 AM
I've found this Javascript code that will Fade In a
div when assigned to an ID.


How would I connect this code: <style type="text/javascript" />$(function(){ $('#fader').hide(); $('#fader').fadeIn() });});</script>to fade in on my Captionholder Div?

My Code:



<div id="Captionholder" onLoad="fade()">
<p class="captionstyle" id="caption1" >Papillon<br>24 x 30 acrylic on canvas<br /></p>
<p class="captionstyle" id="caption2">Pride<br>30 x 40 acrylic on canvas<br />Private Collector</p>
<p class="captionstyle" id="caption3">Galatea<br>24 x 30 acrylic on canvas<br />Private Collector</p>

</div>





Whole Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="Portfolio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">


col=255;
function fade() { document.getElementById("Captionholder").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 10); }

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
<style type="text/css">






#Captionholder #caption1, #Captionholder #caption2, #Captionholder #caption3 {
height: 50px;
width: 247px;
position: absolute;
overflow: hidden;
top: 474px;
left: 496px;
visibility:hidden;
}


#Captionholder #caption1 {

visibility: visible;


}



.captionstyle {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #999;


}

</style>
</head>

<body onload="MM_preloadImages('Images/Papillon.jpg','Images/Galatea.jpg','Images/Pride.jpg')" >
<div id="Container">

<div id="Main">


<div id="Navigation">

<div id="NavAbout"><img src="Images/about.jpg" width="50" height="11" alt="about" /></div>
<div id="NavPortfolio"><img src="Images/portfolio.jpg" width="83" height="11" alt="portfolio" /></div>
<div id="NavExhibits"><img src="Images/exhibits.jpg" width="68" height="11" alt="exhibits" /></div>
<div id="NavContact"><img src="Images/contact.jpg" width="69" height="11" alt="contact" /></div>
</div>

<div id="SeriesSelection">

<div id="SS"><span class = "ssleft"><a href="Portfolio.html"style="text-decoration:none">Les Femmes Series</a></span>
<span class = "ssright"><a href="Vixen Series.html"style="text-decoration:none">Vixen Series</a></span>

</div>

<div><span class = "ssleft"><a href="7 Deadly Sins Series.html"style="text-decoration:none">7 Deadly Sins Series</a></span>
<span class = "ssright"><a href="Postcard Series.html"style="text-decoration:none">Postcard Series</a></span>

</div>

</div>


<div id="Thumbnails">
<img src="Images/Thumbnails/LF1.jpg" alt="" name="thumb_01" width="74" height="74" class="TNPositioning2" id="thumb_01" onclick="MM_showHideLayers('caption1','','hide','caption2', '','show','caption3','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Pride.jpg',1)"
/><img src="Images/Thumbnails/LF4.jpg" alt="" name="thumb_02" width="74" height="74" class="TNPositioning" id="thumb_02" style="" onclick="MM_showHideLayers('caption1','','hide','caption2', '','hide','caption3','','show')" onmousedown="MM_swapImage('photo_large','','Images/Galatea.jpg',1)"
/><img src="Images/Thumbnails/LF3.jpg" alt="" name="thumb_03" width="74" height="74" class="TNPositioning2" id="thumb_03" onclick="MM_showHideLayers('caption1','','show','caption2', '','hide','caption3','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Papillon.jpg',1)" /></div>



<div id="Artwork"><img src="Images/Papillon.jpg" alt="P" name="photo_large" width="428" height="534" id="photo_large" /></div>

<div id="Copywrite"></div>



<div id="Captionholder" onLoad="fade()">
<p class="captionstyle" id="caption1" >Papillon<br>24 x 30 acrylic on canvas<br /></p>
<p class="captionstyle" id="caption2">Pride<br>30 x 40 acrylic on canvas<br />Private Collector</p>
<p class="captionstyle" id="caption3">Galatea<br>24 x 30 acrylic on canvas<br />Private Collector</p>

</div>
</div>



</div>
</body>
</html>

gentleone
10-21-2010, 06:37 PM
Is this a jQuery function? Please more info!

Firstly this:

<style type="text/javascript" />
$(function(){
$('#fader').hide();
$('#fader').fadeIn()
});
});
</script>should be this:

<script type="text/javascript">
$(function(){
$('#fader').hide();
$('#fader').fadeIn()
});
});
</script>

Where you have #fader in this function should be replaced with the id of the div you want to target. In your case #Captionholder

Valentino Liberace
10-21-2010, 08:14 PM
Not working, Yes I found the JQuery Tutorial here:

http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html

Adding the fade-in function with ID seems to have dismantled
all the other functions and I see a red bar highlighting row 13.

To note my captions are connected to a javascript Show/Hide Element function
from Dreamweaver. The Fade/Appear Behavior I wanted to setup appears to only work
on images and not divs.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="Portfolio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">



$(function(){
$('#Captionholder').hide();
$('#Captionholder').fadeIn()
});

});



function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
<style type="text/css">






#Captionholder #caption1, #Captionholder #caption2, #Captionholder #caption3 {
height: 50px;
width: 247px;
position: absolute;
overflow: hidden;
top: 474px;
left: 496px;
visibility:hidden;
}


#Captionholder #caption1 {

visibility: visible;


}



.captionstyle {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #999;


}

</style>
</head>

<body onload="MM_preloadImages('Images/Papillon.jpg','Images/Galatea.jpg','Images/Pride.jpg')" >
<div id="Container">

<div id="Main">


<div id="Navigation">

<div id="NavAbout"><img src="Images/about.jpg" width="50" height="11" alt="about" /></div>
<div id="NavPortfolio"><img src="Images/portfolio.jpg" width="83" height="11" alt="portfolio" /></div>
<div id="NavExhibits"><img src="Images/exhibits.jpg" width="68" height="11" alt="exhibits" /></div>
<div id="NavContact"><img src="Images/contact.jpg" width="69" height="11" alt="contact" /></div>
</div>

<div id="SeriesSelection">

<div id="SS"><span class = "ssleft"><a href="Portfolio.html"style="text-decoration:none">Les Femmes Series</a></span>
<span class = "ssright"><a href="Vixen Series.html"style="text-decoration:none">Vixen Series</a></span>

</div>

<div><span class = "ssleft"><a href="7 Deadly Sins Series.html"style="text-decoration:none">7 Deadly Sins Series</a></span>
<span class = "ssright"><a href="Postcard Series.html"style="text-decoration:none">Postcard Series</a></span>

</div>

</div>


<div id="Thumbnails">
<img src="Images/Thumbnails/LF1.jpg" alt="" name="thumb_01" width="74" height="74" class="TNPositioning2" id="thumb_01" onclick="MM_showHideLayers('caption1','','hide','caption2', '','show','caption3','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Pride.jpg',1)"
/><img src="Images/Thumbnails/LF4.jpg" alt="" name="thumb_02" width="74" height="74" class="TNPositioning" id="thumb_02" style="" onclick="MM_showHideLayers('caption1','','hide','caption2', '','hide','caption3','','show')" onmousedown="MM_swapImage('photo_large','','Images/Galatea.jpg',1)"
/><img src="Images/Thumbnails/LF3.jpg" alt="" name="thumb_03" width="74" height="74" class="TNPositioning2" id="thumb_03" onclick="MM_showHideLayers('caption1','','show','caption2', '','hide','caption3','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Papillon.jpg',1)" /></div>



<div id="Artwork"><img src="Images/Papillon.jpg" alt="P" name="photo_large" width="428" height="534" id="photo_large" /></div>

<div id="Copywrite"></div>



<div id="Captionholder">
<p class="captionstyle" id="caption1" >Papillon<br>24 x 30 acrylic on canvas<br /></p>
<p class="captionstyle" id="caption2">Pride<br>30 x 40 acrylic on canvas<br />Private Collector</p>
<p class="captionstyle" id="caption3">Galatea<br>24 x 30 acrylic on canvas<br />Private Collector</p>

</div>
</div>



</div>
</body>
</html>

gentleone
10-21-2010, 08:24 PM
You'll have to include the jQuery library in your head as well.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>And here's all the info and examples you need about the 'hide' and 'fadeIn'.
http://api.jquery.com/hide/
http://api.jquery.com/fadeIn/

Valentino Liberace
10-21-2010, 11:34 PM
Great i'll give it a shot.

Thanks for the help.