logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-21-2010, 05:38 AM   #1
Valentino Liberace
 
Join Date: Oct 2010
Posts: 4
Default Fade-in effect help

I've found this Javascript code that will Fade In a
div when assigned to an ID.


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

My Code:

HTML 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:

HTML Code:
<!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>
Valentino Liberace is offline   Reply With Quote
Old 10-21-2010, 06:37 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Is this a jQuery function? Please more info!

Firstly this:
HTML Code:
<style type="text/javascript" />
$(function(){
    $('#fader').hide();
        $('#fader').fadeIn()    
    });
});
</script>
should be this:
HTML Code:
<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
gentleone is offline   Reply With Quote
Old 10-21-2010, 08:14 PM   #3
Valentino Liberace
 
Join Date: Oct 2010
Posts: 4
Default

Not working, Yes I found the JQuery Tutorial here:

http://viralpatel.net/blogs/2009/01/...ng-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.


HTML Code:
<!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>

Last edited by Valentino Liberace; 10-21-2010 at 08:36 PM..
Valentino Liberace is offline   Reply With Quote
Old 10-21-2010, 08:24 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

You'll have to include the jQuery library in your head as well.
HTML Code:
<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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-21-2010, 11:34 PM   #5
Valentino Liberace
 
Join Date: Oct 2010
Posts: 4
Default

Great i'll give it a shot.

Thanks for the help.
Valentino Liberace is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:18 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com