Forums

gvestudios

Hello All,

I am trying to get this script to work on a particular page in my wordpress theme.The first jquery script works on the homepage properly but the second script does not work on the portfolio page & nothing happens.

I have combined the scripts, separated them, used the default $() initializer but nothing seems to work for the second script.

Jquery setup:


<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"<?php bloginfo('template_directory');  ?>/inc/js/cufon-yui.js\"></script>
<script type=\"text/javascript\" src=\"<?php bloginfo('template_directory');  ?>/inc/js/Century_Gothic_400-Century.font.js\"></script>
<script type=\"text/javascript\" src=\"<?php bloginfo('template_directory');  ?>/inc/js/jquery.innerfade.js\"></script>

<!-- FIRST SCRIPT -->
<script type=\"text/javascript\">
	jQuery(document).ready(
		function(){
			jQuery('.fadeRight').innerfade({
				speed: 'slow',
				timeout: 5000,
				type: 'sequence',
				containerheight: '300px'
			});
		}
	);
</script>

<!-- SECOND SCRIPT -->
<script type=\"text/javascript\">
jQuery('.folio').hover(function() {
	  // over
	jQuery(this).children('img').fadeOut(1000);
}, 
function() {
  // out	
	jQuery(this).children('img').fadeIn(\"slow\");

});
</script>

Below is the layout code the script is suppose to animate. The script is suppose to fade out the IMG and reveal the text underneath which is all positioned with css.

PHP SNIPPET

 <div class=\"folioWrap\">
  <div class=\"folio\">
		
          <?php if($preview !== ''){ ?>
            
            <div class=\"heading\">
              <span><?php the_title(); ?></span>
            </div>  
            
            <a href=\"<?php the_permalink(); ?>\">
              <img src=\"<?php bloginfo('template_directory'); ?>/inc/thumb.php?src=<?php echo $preview; ?>&amp;w=292&amp;h=210&amp;zc=1&amp;q=100\" alt=\"<?php the_title(); ?>\" />
      	  </a>
            
            <div class=\"caption\">
              <span><?php the_excerpt(); ?></span>
            </div>  
            
		
		<?php }; ?>
    
  </div><!--/folio-->
  </div><!-- /folioWrap -->

Here is an example of what it is suppose to achieve except instead of sliding the Image will fade out.HERE.PLEASE HELP...THX

cybershot

well i don't know a lot about jquery, but one thing I do when the code isn't working is use an alert box to find out if my code is working or not.

just

alert("it's working");

throw that into your second script then load the page, if you see the alert box pop up then you know it's reading the script, if not, then you know where the problem is.

Robin

Or, if you want to do things more sophisticated, you can ad lots of

console.log(\"Message here.\"+variable);

to your code to debug it line by line using the Firebug plugin (console view) in Firefox.

treehouse : what would you like to learn today?

Forums

simple jquery script...really need help